967634 - DevTools Light theme tab bar bottom box shadow / border is a bit heavy

Status: VERIFIED FIXED

(DevTools :: General, defect)

Description

[Brian Grinstead [:bgrins]]

Attachment: light-tabbar.png

I'm looking at https://people.mozilla.org/~shorlander/mockups/devTools/ux-refresh-2013/[e-mail], and comparing it to our current tab bar (see screenshot), it seems a bit heavy.  We should lighten up the shadow a bit, and make the border match the border colors in between the tabs.

Comment 1

[Brian Grinstead [:bgrins]]

Attachment: theme-tabbar-shadow.patch

Victor, this refactors the tabbar styling to be more consistent with other shared styles (keeping colors out of the main rule and split into a theme-light and theme-dark rule.  It also changes the :hover:active state on light theme to be a bit lighter and keeping light text (it isn't sharing that state with dark theme anymore).

Comment 2

[Brian Grinstead [:bgrins]]

Attachment: with-patch-applied.png

Comment 3

[Victor Porof [:vporof][:vp]]

Comment on attachment 8370295 [details] [diff] [review]
theme-tabbar-shadow.patch

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

Love the refactoring! 

To my eye, the dark(ish) line at the bottom of each tab looks a bit weird against the blue selection background. Maybe we could keep that darker?

Comment 4

[Brian Grinstead [:bgrins]]

(In reply to Victor Porof [:vp] from comment #3)
> Comment on attachment 8370295 [details] [diff] [review]
> theme-tabbar-shadow.patch
> 
> Review of attachment 8370295 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> Love the refactoring! 
> 
> To my eye, the dark(ish) line at the bottom of each tab looks a bit weird
> against the blue selection background. Maybe we could keep that darker?

Not sure exactly what you mean here.  The final 1px border that separates the content from the tab bars is rba(170,170,170) all the way across.  The box shadow leading up to that border is rgba(170,170,170,.5) on the selected blue tab, while it is rgba(170,170,170,.2) on the others.  Basing it on this mockup: https://people.mozilla.org/~shorlander/mockups/devTools/ux-refresh-2013/[e-mail], the bottom border should be the same all the way across (though it is a tad lighter in the mockup, I'm sticking with our defined splitter color).  If anything, I could make the shadow on the blue a bit more transparent to more blue comes through, if that is the effect you are talking about.

Comment 5

[Victor Porof [:vporof][:vp]]

I'm talking about the thick-ish gray bottom border (or shadow?) that spans across all tabs, which looks pretty crappy against the light blue background (turns into a "dirty" gray after blending) of a selected tab. In the mockup, it looks a bit cleaner, so making it actually more transparent (either across all tabs, or just for the selected tab) would make it look better imho. Just compare the colors from the screenshot vs. mockup. Let's try to be as close as possible to the mockup.

Comment 6

[Brian Grinstead [:bgrins]]

Attachment: shadow-comparison.png

More closely matching colors from comp now

Comment 7

[Brian Grinstead [:bgrins]]

Attachment: theme-tabbar-shadow.patch

Comment 8

[Brian Grinstead [:bgrins]]

https://hg.mozilla.org/integration/fx-team/rev/551541f11bc9
https://tbpl.mozilla.org/?tree=Fx-Team&rev=551541f11bc9

Comment 9

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/551541f11bc9

Comment 10

[Brian Grinstead [:bgrins]]

Comment on attachment 8371605 [details] [diff] [review]
theme-tabbar-shadow.patch

[Approval Request Comment]
Bug caused by (feature/regressing bug #): 957117
User impact if declined: DevTools light theme tab bar will have a dark border at the bottom
Testing completed (on m-c, etc.): On m-c since 2-06
Risk to taking this patch (and alternatives if risky): Low risk, CSS changes in DevTools only.
String or IDL/UUID changes made by this patch:

Comment 11

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/3119a6bb229d

Comment 12

[Tracy Walker [:tracy]]

Verified with latest builds of Nightly and Aurora