* 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%);
<rdar://problem/24680944>
Created attachment 271459 [details] [Patch] Proposed Fix
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!
Created attachment 271535 [details] [Patch] Proposed Fix
(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.
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.
Created attachment 271543 [details] [Image] body.window-inactive * {} vs. body.window-inactive {} Without selecting all elements "*", a few borders aren't styled correctly. Weird.
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.
(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.
(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!
(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.
Created attachment 271573 [details] [Patch] Proposed Fix
Comment on attachment 271573 [details] [Patch] Proposed Fix Clearing flags on attachment: 271573 Committed r196713: <http://trac.webkit.org/changeset/196713>
All reviewed patches have been landed. Closing bug.