Bug 154302 – Web Inspector: add CSS variables for common border/background colors

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Matt Baker]

* SUMMARY
Add CSS variables for common border/background colors. The following colors are used in dozens of places and should be CSS variables:

--border-color: hsl(0, 0%, 70%);
--border-inactive-color: hsl(0, 0%, 85%);
--panel-background-color: hsl(0, 0%, 94%);

[Radar WebKit Bug Importer]

<rdar://problem/24680944>

[Matt Baker]

Created attachment 271459 [details]
[Patch] Proposed Fix

[Timothy Hatcher]

Comment on attachment 271459 [details]
[Patch] Proposed Fix

In theory we can just have —border-color, and override the color var in body.window-inactive { }. Then delete all the rules with body.window-inactive!

[Matt Baker]

Created attachment 271535 [details]
[Patch] Proposed Fix

[Matt Baker]

(In reply to comment #3)
> Comment on attachment 271459 [details]
> [Patch] Proposed Fix
> 
> In theory we can just have —border-color, and override the color var in
> body.window-inactive { }. Then delete all the rules with
> body.window-inactive!

Worked perfectly! It felt great removing all those rules.

[Timothy Hatcher]

Comment on attachment 271535 [details]
[Patch] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=271535&action=review

> Source/WebInspectorUI/UserInterface/Views/Variables.css:58
> +body.window-inactive * {

You should be able to remove the *. Vars are inherited, so it can stay on the body.

[Matt Baker]

Created attachment 271543 [details]
[Image] body.window-inactive * {} vs. body.window-inactive {}

Without selecting all elements "*", a few borders aren't styled correctly. Weird.

[Joseph Pecoraro]

Comment on attachment 271535 [details]
[Patch] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=271535&action=review

> Source/WebInspectorUI/UserInterface/Views/Variables.css:29
> +    --z-index-resizer: 256;`

This character looks errant. cq- to fix it.

[Joseph Pecoraro]

(In reply to comment #7)
> Created attachment 271543 [details]
> [Image] body.window-inactive * {} vs. body.window-inactive {}
> 
> Without selecting all elements "*", a few borders aren't styled correctly.
> Weird.

When you inspect the nav bar / other things that have a darker border, what is the cascade? I assume that this is just a specificity issue, and that adding the * gave this just enough extra specificity? Otherwise, I don't see why it would change things.

--

Using CSS Variables allowed us to reduce 23, often complex, rules down to 1. This is a great story for custom properties and their cascade rules.

[Timothy Hatcher]

(In reply to comment #9)
> (In reply to comment #7)
> > Created attachment 271543 [details]
> > [Image] body.window-inactive * {} vs. body.window-inactive {}
> > 
> > Without selecting all elements "*", a few borders aren't styled correctly.
> > Weird.
> 
> When you inspect the nav bar / other things that have a darker border, what
> is the cascade? I assume that this is just a specificity issue, and that
> adding the * gave this just enough extra specificity? Otherwise, I don't see
> why it would change things.

Note you might need my most recent changes for the variable rules to show up in the sidebar. Does !important on the --border-color help?

> Using CSS Variables allowed us to reduce 23, often complex, rules down to 1.
> This is a great story for custom properties and their cascade rules.

Yep!

[Matt Baker]

(In reply to comment #10)
> (In reply to comment #9)
> > (In reply to comment #7)
> > > Created attachment 271543 [details]
> > > [Image] body.window-inactive * {} vs. body.window-inactive {}
> > > 
> > > Without selecting all elements "*", a few borders aren't styled correctly.
> > > Weird.
> > 
> > When you inspect the nav bar / other things that have a darker border, what
> > is the cascade? I assume that this is just a specificity issue, and that
> > adding the * gave this just enough extra specificity? Otherwise, I don't see
> > why it would change things.
> 
> Note you might need my most recent changes for the variable rules to show up
> in the sidebar. Does !important on the --border-color help?

Sadly, no.

[Matt Baker]

Created attachment 271573 [details]
[Patch] Proposed Fix

[WebKit Commit Bot]

Comment on attachment 271573 [details]
[Patch] Proposed Fix

Clearing flags on attachment: 271573

Committed r196713: <http://trac.webkit.org/changeset/196713>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.