1212958 - Change and unify the splitter colors

Status: NEW

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