952565 - Minor style tweaks for the Toolbox tabbar

Status: RESOLVED FIXED

(DevTools :: Framework, defect)

Description

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

There are a few very small things that bug me with the tabbar, namely:
1. The top border is too thick. Actually, there are two borders, of different colors, one black and one gray-ish. This is especially visible above a selected tab.
2. The bottom gray-ish color doesn't play well with the tools content below. This is especially obvious in the inspector, when you hover a tab in the sidebar (the "Computed" tab for example). Ideally it should match the splitter color so everything blends in nicely.

Comment 1

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

Attachment: tabbar-tweaks.patch

This makes me happier :)

Comment 2

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

Attachment: screenshot.png

This is how the tabbar looks now. The differences are very subtle.

Comment 3

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

Attachment: screencast.gif

Here's the sidebar tab color mismatch I was talking about. Gif shows before and after.

Comment 4

[Brian Grinstead [:bgrins]]

Comment on attachment 8350694 [details] [diff] [review]
tabbar-tweaks.patch

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

Good catch on the top border, it looks better without this.  For the bottom, it feels a bit *heavy* with the completely black border.  However, I know this matches the splitter, and the designs don't have a clear color to use.  Checking out https://people.mozilla.org/~shorlander/mockups/devTools/ux-refresh-2013/[e-mail], for instance, it seems it isn't fully black.  It is rgb(26, 33, 38) along the top, and the side splitter seems to have some alpha maybe (it changes as the vertical line runs along the tabs and next to the side pane.

My suggestion would be to keep the changes you've made, but to also change the box shadow color to something lighter like rgba(0,0,0,.1) to give it a little less weight.

Comment 5

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

Ok, will do.

Comment 6

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

Attachment: tabbar-tweaks.patch

This *does* looks better. Thanks Brian.

Comment 7

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

https://hg.mozilla.org/mozilla-central/rev/47505d181a13