Last Comment Bug 667476 - [10.7] Update Firefox’s Toolbar Gradient to match OS X Lion’s
: [10.7] Update Firefox’s Toolbar Gradient to match OS X Lion’s
Status: RESOLVED FIXED
:
Product: Firefox
Classification: Client Software
Component: Theme (show other bugs)
: Trunk
: All Mac OS X
: -- normal with 4 votes (vote)
: Firefox 8
Assigned To: Markus Stange [:mstange]
:
Mentors:
Depends on: 680247 668195
Blocks: lion-compatibility 667456 645494
  Show dependency treegraph
 
Reported: 2011-06-27 09:03 PDT by Dominic Spitaler
Modified: 2011-08-23 05:35 PDT (History)
12 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---
affected
affected


Attachments
Safari 5.1 toolbar gradient compared to Firefox 5 (41.41 KB, image/png)
2011-06-27 09:03 PDT, Dominic Spitaler
no flags Details
part 1, v1: add lion colors (1.11 KB, patch)
2011-07-29 02:17 PDT, Markus Stange [:mstange]
jaas: review+
Details | Diff | Splinter Review
part 2, v1: don't cover unified toolbar with a solid color in tabs-on-top mode (3.17 KB, patch)
2011-07-29 02:21 PDT, Markus Stange [:mstange]
dao+bmo: review+
Details | Diff | Splinter Review
part 3, v1: cover 2px toolbar bottom border (2.63 KB, patch)
2011-07-29 05:03 PDT, Markus Stange [:mstange]
no flags Details | Diff | Splinter Review
tabs-on-bottom screenshot with these patches (48.48 KB, image/png)
2011-07-29 05:05 PDT, Markus Stange [:mstange]
no flags Details
part 3, v2 (2.25 KB, patch)
2011-07-31 12:18 PDT, Markus Stange [:mstange]
dao+bmo: review+
Details | Diff | Splinter Review

Description Dominic Spitaler 2011-06-27 09:03:43 PDT
Created attachment 542172 [details]
Safari 5.1 toolbar gradient compared to Firefox 5

OS X Lion introduces a new, lighter toolbar gradient with a subtle grain texture. Firefox’s toolbar gradient should be updated to look the same to make it feel native.
Comment 1 Markus Stange [:mstange] 2011-06-27 09:44:50 PDT
Tweaking the gradient colors is easy, you'll just need to add a lion section to http://mxr.mozilla.org/mozilla-central/source/widget/src/cocoa/nsNativeThemeColors.h
(and make NativeGreyColorAsInt use the Lion array if nsToolkit::OnLionOrLater())

Dominic, do you want to write the patch? I can help you with that, just drop me an email. You'll probably need to take screenshots of both active and inactive windows and then use a horizontal motion blur effect in order to sample ungrained colors.

Adding the grain texture will need some Lion-specific CSS changes, which is a little more complex, so let's only concentrate on the gradient colors for now.
Comment 2 Stephen Horlander [:shorlander] 2011-07-22 11:43:11 PDT
(In reply to comment #1)
> Adding the grain texture will need some Lion-specific CSS changes, which is
> a little more complex, so let's only concentrate on the gradient colors for
> now.

Is that texture something we can pull from the system or do we need to make our own texture?
Comment 3 Dominic Spitaler 2011-07-24 13:09:00 PDT
I believe yes – Markus has been working on it in Bug 668195.
Comment 4 Markus Stange [:mstange] 2011-07-25 03:27:13 PDT
(In reply to comment #2)
> (In reply to comment #1)
> > Adding the grain texture will need some Lion-specific CSS changes, which is
> > a little more complex, so let's only concentrate on the gradient colors for
> > now.
> 
> Is that texture something we can pull from the system or do we need to make
> our own texture?

We can ask the system to draw textured toolbars for us; that's what the patch in bug 668195 does and we're probably going to use that.

So it looks like we don't need a grain image after all. For the tabs-on-top toolbars we can overlay the system-rendered toolbar with transparent gradients so that it looks right, and toolbar buttons don't have their own grain; they're just transparent enough that the toolbar grain shines through.
Comment 5 Markus Stange [:mstange] 2011-07-29 02:17:11 PDT
Created attachment 549329 [details] [diff] [review]
part 1, v1: add lion colors
Comment 6 Markus Stange [:mstange] 2011-07-29 02:17:54 PDT
Comment on attachment 549329 [details] [diff] [review]
part 1, v1: add lion colors

This patch is on top of the one in bug 668195.
Comment 7 Markus Stange [:mstange] 2011-07-29 02:21:09 PDT
Created attachment 549330 [details] [diff] [review]
part 2, v1: don't cover unified toolbar with a solid color in tabs-on-top mode

-moz-mac-chrome-(in)active + the white gradient in tabbar-top-bg-(in)active.png no longer smoothly connect to the titlebar gradient, so we need to add more transparency.
Comment 8 Markus Stange [:mstange] 2011-07-29 05:03:05 PDT
Created attachment 549339 [details] [diff] [review]
part 3, v1: cover 2px toolbar bottom border

In tabs-on-bottom mode, both the bookmarks toolbar and the active tab should smoothly connect to the unified toolbar. For that, they currently cover the bottom border of the unified toolbar with a -1px margin-top.
However, Lion toolbars have another 1px highlight line above the bottom border. That needs to be covered, too, so we need to increase the overlap to 2px.

And I've just noticed that this patch also fixes a bug in the part 2 patch (background-image can't take a background-color).

Even with this patch, the connection between toolbars is still noticeable because the unified toolbar has a grain texture but the bookmarks toolbar and the active tab don't; they only use a solid color. In order to fix that we'd need to introduce a new -moz-appearance value for borderless chrome background ("-moz-appearance: toolbar" has borders), and maybe even a way to use -moz-appearance as a background-image layer so that we can still apply borders and other background-images to it. (Perhaps something like this: background-image: url(transparent-tabbar-background-overlay.png), -moz-appearance(mac-chrome-background); )
Comment 9 Markus Stange [:mstange] 2011-07-29 05:05:03 PDT
Created attachment 549340 [details]
tabs-on-bottom screenshot with these patches
Comment 10 Dão Gottwald [:dao] 2011-07-29 09:13:11 PDT
Comment on attachment 549339 [details] [diff] [review]
part 3, v1: cover 2px toolbar bottom border

> #TabsToolbar[tabsontop="false"] {
>+  height: 27px;

Why?
Comment 11 Markus Stange [:mstange] 2011-07-31 12:18:13 PDT
Created attachment 549677 [details] [diff] [review]
part 3, v2

(In reply to comment #10)
> Comment on attachment 549339 [details] [diff] [review] [diff] [details] [review]
> part 3, v1: cover 2px toolbar bottom border
> 
> > #TabsToolbar[tabsontop="false"] {
> >+  height: 27px;
> 
> Why?

Because I've increased padding-top in order to preserve metrics. But it hardly makes a difference.

Note You need to log in before you can comment on or make changes to this bug.