449832 - Color mismatch between unified toolbar and selected tab after bug 439354

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[Markus Stange [:mstange]]

In bug 439354 I've changed the unified toolbar to be drawn by a -moz-appearance and I've made the colors  darker to match those of native Cocoa applications.

Now the selected tab's color is too light - when the bookmarks bar is hidden, there's a color mismatch.
And there's another problem: When color management is turned on, the tab images are color-corrected, but the unified toolbar is not.

These problems can be solved by using a platform color for the tab's color. Platform colors aren't color-corrected. I'll file a bug for creating the platform colors -moz-mac-chrome-active and -moz-mac-chrome-inactive soon.
This platform color will be set as the background color for the tabs.

Then the tab images need to be changed to be transparent so that the platform color shines through in the right places.

Finally, a trick must be applied to ensure that the tab's shadow is still transparent (and not filled with the platform color) in order to get nice-looking tab drag images (see also bug 408294). I'll solve that with border-radius and negative margins.

Comment 1

[Markus Stange [:mstange]]

The platform colors bug is bug 449833.

Comment 2

[Markus Stange [:mstange]]

Attachment: fix v0.1: rework tab and bookmarks bar images, adapt CSS, minor cleanups

This patch also contains the new images and should be applied by adding it to the hg tab queue.

The images tab-left.png, tab-middle.png, tab-right.png and bookmark_toolbar_background now only consist of the colors black and white with different alpha transparency levels.
This also has the advantages of being more friendly to Personas and not needing different images for the active and inactive states of the window (so the flash that occurs when the window is unfocused the first time is avoided).

Keeping the tab shadows free of the background color works like this:
 - I set margins on .tabbrowser-tab so that its background color exactly under
   the intended opaque part of the tab image and
 - then I neutralize these margins with negative margins on the tab images
   (so that the shadow is pulled out).
These margins are 2px on the left and 3px on the bottom and the right.

The patch also includes a minor design change: the gradient in the bookmarks bar has become a little softer.

Comment 3

[Markus Stange [:mstange]]

Attachment: fix v0.2: fix vertical alignment issues

Comment 4

[Markus Stange [:mstange]]

Attachment: Screenshot before / after

Comment 5

[Markus Stange [:mstange]]

Attachment: fix v0.2.1 [checked in]

fix v0.2 apparently didn't contain the new bookmarks bar image

Comment 6

[Markus Stange [:mstange]]

Attachment: follow-up patch to fix rtl and normal toolbars

This patch applies on top of the other patch.

It changes two things:
 - RTL tab margins fix
 - The background and border colors of the Bookmarks toolbar are moved into a
   general rule in global/toolbar.css. The border colors are tweaked a little.

Comment 7

[Markus Stange [:mstange]]

Comment on attachment 333466 [details] [diff] [review]
fix v0.2.1 [checked in]

http://hg.mozilla.org/mozilla-central/rev/b490bfe2180a

Comment 8

[Markus Stange [:mstange]]

Comment on attachment 335435 [details] [diff] [review]
follow-up patch to fix rtl and normal toolbars

I've moved the follow-up fix to bug 455787.