667476 - [10.7] Update Firefox’s Toolbar Gradient to match OS X Lion’s

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[Dominic Spitaler]

Attachment: 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]]

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]]

(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]

I believe yes – Markus has been working on it in Bug 668195.

Comment 4

[Markus Stange [:mstange]]

(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]]

Attachment: part 1, v1: add lion colors

Comment 6

[Markus Stange [:mstange]]

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]]

Attachment: 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]]

Attachment: 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]]

Attachment: tabs-on-bottom screenshot with these patches

Comment 10

[Dão Gottwald [:dao]]

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]]

Attachment: 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.

Comment 12

[Markus Stange [:mstange]]

http://hg.mozilla.org/integration/mozilla-inbound/rev/e16df4bfc6e7
http://hg.mozilla.org/integration/mozilla-inbound/rev/1abd25fed7b2

Comment 13

[(no longer active)]

http://hg.mozilla.org/mozilla-central/rev/e16df4bfc6e7
http://hg.mozilla.org/mozilla-central/rev/1abd25fed7b2