1188942 - Enable vibrant background for tabview/panorama on OS X Yosemite

Status: RESOLVED FIXED

(Firefox Graveyard :: Panorama, defect)

Description

[Alexander Ploner]

Attachment: tabview-yosemite.png

I think it would be a good design enhancement if we could enable Yosemites vibrant background within the tabview/panorama mode. It is lighter and looks very fresh and modern compared to the current background. I'm missing this since the tab bar has the new style ;).

I've created a patch that adds the needed CSS changes. Have a look into the attached screenshot of my local build to get an idea of the difference. 

The only thing that still has to be done is updating the title bar background. I think the best thing would be to use the vibrant background here as well (as it is used behind and above the normal tab bar).
It would be great if someone could help me in changing this also. I've tried a lot within the Browser Toolbox but couldn't find a solution for that.

Comment 1

[Alexander Ploner]

Attachment: tabview-original.png

Comment 2

[Alexander Ploner]

Attachment: bug-1188942-v1.patch

Comment 3

[:Gijs (he/him)]

Comment on attachment 8640559 [details] [diff] [review]
bug-1188942-v1.patch

Review of attachment 8640559 [details] [diff] [review]:
-----------------------------------------------------------------

The CSS looks fine to me. Philipp, does this seem appropriate? Markus, is this going to break anything?

(I know that panorama is essentially in maintenance mode if not worse, but I think that the difference in the screenshots is sufficiently appealing, and the code change sufficiently small, that we should consider doing this.)

Comment 4

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Would it be possible to extend the vibrancy background to the title bar as well?

Comment 5

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Removing the ui-review flag until comment #4 is sorted out...

Comment 6

[Markus Stange [:mstange]]

Comment on attachment 8640559 [details] [diff] [review]
bug-1188942-v1.patch

Looks good, I don't think this is going to break anything. What might happen is that you briefly see a black flash when the vibrancy is set up (bug 1154013); hopefully that won't happen too often.

Extending the effect into the titlebar is possible but more complicated. At the moment, something removes the chromemargin attribute from the window when tabview mode is entered, so the content area no longer extends into the titlebar. I don't know where exactly in the code this happens; Gijs and mconley know more about it, I think.

Comment 7

[:Gijs (he/him)]

(In reply to Philipp Sackl [:phlsa] (Firefox UX) please use needinfo from comment #4)
> Would it be possible to extend the vibrancy background to the title bar as
> well?

We can fix the chromemargin thing but it'd be slightly non-trivial to get it all to line up with all the other specialcasing we do and I really really don't want to invest too much time in the panorama code as-is unless we reverse our decisions regarding its future.

Do you think the patch as-is is a net improvement? If so, we should just take it and someone can file a followup for the chromemargin stuff.

Comment 8

[Alexander Ploner]

(In reply to Philipp Sackl [:phlsa] (Firefox UX) please use needinfo from comment #4)
> Would it be possible to extend the vibrancy background to the title bar as
> well?

As mentioned in comment #0 I don't know much about this. Markus and Gijs now confirmed my "fears" regarding to the title bar problem.


If this patch should land, I have three suggestions what we can do until someone fixes the follow-up bug:

1) Land the patch as it is.

2) Change the gray title bar into the default Mac OS X "silver" titlebar.

   This can be done in browser/components/tabview/ui.js by removing this OS X exception for
   Yosemite inside showTabView():

      #ifdef XP_MACOSX
          this.setTitlebarColors(true);
      #endif

   But I don't know how to add this exception for Yosemite only.

3) Use a gradient like the one before but change linear-gradient(#C4C4C4, #9E9E9E); to
   linear-gradient(#C4C4C4, transparent); for Yosemite. But.. I don't know... This makes the vibrant
   thing hard to see.


I'll attach a screenshot that shows a local build with suggestions 2 and 3.

But we should open a follow-up bug no matter which one we choose.

Comment 9

[Alexander Ploner]

Attachment: 2) vibrant and silver title bar.png

Comment 10

[Alexander Ploner]

Attachment: 3) vibrant-and-gradient.png

Comment 11

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

(In reply to :Gijs Kruitbosch from comment #7)
> Do you think the patch as-is is a net improvement? If so, we should just
> take it and someone can file a followup for the chromemargin stuff.

Yeah, it is already better. Ship it!

Comment 12

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/a88e6868a6aa

Comment 13

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/a88e6868a6aa