1212958 - Change and unify the splitter colors

Status: RESOLVED FIXED

(DevTools :: Shared Components, defect, P5)

Description

[Tim Nguyen :ntim]

We currently have different splitter colors:
- #aaa (devtools light theme)
- #d0d0d0 (DevEdition light)
- #000 (Devtools dark theme)
- rgba(255,255,255,0.15) (Devtools tables - dark theme)
- rgba(0,0,0,0.15) (DevTools tables - light theme)

Older mockups by Stephen for reference: http://people.mozilla.org/~shorlander/mockups/devTools/ux-refresh-2013/

Comment 1

[Tim Nguyen :ntim]

Also, it would be nice to unify our "secondary" splitter colors (like the horizontal splitters that separate sections in the rules view, the font inspector or the style editor media sidebar).

Comment 2

[Brian Grinstead [:bgrins]]

(In reply to Tim Nguyen [:ntim] from comment #1)
> Also, it would be nice to unify our "secondary" splitter colors (like the
> horizontal splitters that separate sections in the rules view, the font
> inspector or the style editor media sidebar).

IIRC those are using --theme-splitter-color from https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors (i.e. #aaa and #000).

I like the idea of lightening up the light theme one a bit (maybe to match the original mocks) and then also getting off of a full black on the dark theme.

Comment 3

[Helen V. Holmes (:helenvholmes) (:✨)]

(In reply to Brian Grinstead [:bgrins] from comment #2)
> I like the idea of lightening up the light theme one a bit (maybe to match
> the original mocks) and then also getting off of a full black on the dark
> theme.

Relevant: https://bugzilla.mozilla.org/show_bug.cgi?id=1205330

Comment 4

[Brian Grinstead [:bgrins]]

Also, for reference all the variables are defined in devtools/client/themes/variables.css (just moved them there in bug 1210954)

Comment 5

[Brian Grinstead [:bgrins]]

Example of some secondary splitters: https://dxr.mozilla.org/mozilla-central/source/devtools/client/themes/styleeditor.css#81

Comment 6

[Belén [:ladybenko]]

There are other areas that need some color unification, not just splitters. I'll take a look, see what we've got, and file a new bug for this or update the scope of this one.

Comment 7

[Sebastian Zartner [:sebo]]

Attachment: Bug 1212958 - Unified splitter colors throughout DevTools. r=victoria

This change unifies the different colors of splitters used within the different panels.

"Splitter" here referes to a thin (usually one pixel wide) line between different items in the UI. It does not mean borders around items.

Comment 8

[Sebastian Zartner [:sebo]]

I want to explicitly note again that the attached patch only covers real splitters. That means thin lines between items.

I think (table) borders should be handled separately. They might reuse the same color variable in the end, though.

Sebastian

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b6599e370ed9
Unified splitter colors throughout DevTools. r=victoria

Comment 10

[Narcis Beleuzu [:NarcisB]]

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