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

VERIFIED FIXED in Firefox 29

Status

()

Firefox
Developer Tools
VERIFIED FIXED
4 years ago
4 years ago

People

(Reporter: bgrins, Assigned: bgrins)

Tracking

Trunk
Firefox 30
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox29 verified, firefox30 verified)

Details

Attachments

(4 attachments, 1 obsolete attachment)

(Assignee)

Description

4 years ago
Created attachment 8370158 [details]
light-tabbar.png

I'm looking at https://people.mozilla.org/~shorlander/mockups/devTools/ux-refresh-2013/LightTheme-Inspector-Locked@2x.png, 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.
(Assignee)

Comment 1

4 years ago
Created attachment 8370295 [details] [diff] [review]
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).
Attachment #8370295 - Flags: review?(vporof)
(Assignee)

Comment 2

4 years ago
Created attachment 8370391 [details]
with-patch-applied.png
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?
Attachment #8370295 - Flags: review?(vporof) → review+
(Assignee)

Comment 4

4 years ago
(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/LightTheme-Inspector-Locked@2x.png, 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.
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.
(Assignee)

Comment 6

4 years ago
Created attachment 8371603 [details]
shadow-comparison.png

More closely matching colors from comp now
Assignee: nobody → bgrinstead
Status: NEW → ASSIGNED
(Assignee)

Comment 7

4 years ago
Created attachment 8371605 [details] [diff] [review]
theme-tabbar-shadow.patch
Attachment #8370295 - Attachment is obsolete: true
Attachment #8371605 - Flags: review+
https://hg.mozilla.org/mozilla-central/rev/551541f11bc9
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 30

Updated

4 years ago
Blocks: 966661
(Assignee)

Comment 10

4 years ago
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:
Attachment #8371605 - Flags: approval-mozilla-aurora?
Attachment #8371605 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
https://hg.mozilla.org/releases/mozilla-aurora/rev/3119a6bb229d
status-firefox29: --- → fixed
status-firefox30: --- → fixed
Verified with latest builds of Nightly and Aurora
Status: RESOLVED → VERIFIED
status-firefox29: fixed → verified
status-firefox30: fixed → verified
You need to log in before you can comment on or make changes to this bug.