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

RESOLVED FIXED in Firefox 8

Status

()

Firefox
Theme
RESOLVED FIXED
6 years ago
6 years ago

People

(Reporter: Dominic Spitaler, Assigned: mstange)

Tracking

(Depends on: 1 bug, Blocks: 2 bugs)

Trunk
Firefox 8
All
Mac OS X
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox6 affected, firefox7 affected)

Details

Attachments

(5 attachments, 1 obsolete attachment)

(Reporter)

Description

6 years ago
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.
(Reporter)

Updated

6 years ago
Blocks: 667456
(Assignee)

Comment 1

6 years ago
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.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Hardware: x86_64 → All
(Assignee)

Updated

6 years ago
Depends on: 668195

Updated

6 years ago
Blocks: 636455
(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?
(Reporter)

Comment 3

6 years ago
I believe yes – Markus has been working on it in Bug 668195.
(Assignee)

Comment 4

6 years ago
(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.
(Assignee)

Comment 5

6 years ago
Created attachment 549329 [details] [diff] [review]
part 1, v1: add lion colors
Assignee: nobody → mstange
Status: NEW → ASSIGNED
Attachment #549329 - Flags: review?(joshmoz)
(Assignee)

Comment 6

6 years ago
Comment on attachment 549329 [details] [diff] [review]
part 1, v1: add lion colors

This patch is on top of the one in bug 668195.
(Assignee)

Comment 7

6 years ago
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.
Attachment #549330 - Flags: review?(dao)

Updated

6 years ago
Attachment #549330 - Flags: review?(dao) → review+
(Assignee)

Comment 8

6 years ago
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); )
Attachment #549339 - Flags: review?(dao)
(Assignee)

Comment 9

6 years ago
Created attachment 549340 [details]
tabs-on-bottom screenshot with these patches
Comment on attachment 549339 [details] [diff] [review]
part 3, v1: cover 2px toolbar bottom border

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

Why?
(Assignee)

Comment 11

6 years ago
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.
Attachment #549339 - Attachment is obsolete: true
Attachment #549339 - Flags: review?(dao)
Attachment #549677 - Flags: review?(dao)

Updated

6 years ago
Attachment #549677 - Flags: review?(dao) → review+
(Assignee)

Updated

6 years ago
Blocks: 645494

Updated

6 years ago
Attachment #549329 - Flags: review?(joshmoz) → review+
(Assignee)

Comment 12

6 years ago
http://hg.mozilla.org/integration/mozilla-inbound/rev/e16df4bfc6e7
http://hg.mozilla.org/integration/mozilla-inbound/rev/1abd25fed7b2
Whiteboard: [inbound]
http://hg.mozilla.org/mozilla-central/rev/e16df4bfc6e7
http://hg.mozilla.org/mozilla-central/rev/1abd25fed7b2
Status: ASSIGNED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
Whiteboard: [inbound]
Target Milestone: --- → Firefox 8
Depends on: 678002
(Assignee)

Updated

6 years ago
No longer depends on: 678002
Depends on: 680247

Updated

6 years ago
status-firefox6: --- → affected
status-firefox7: --- → affected
You need to log in before you can comment on or make changes to this bug.