Bug 1412273 - Adjust CSS shapes highlighter toggle to be visible in dark theme. r=jdescottes
authorMike Park <mikeparkms@gmail.com>
Wed, 01 Nov 2017 12:25:50 -0400
changeset 390098 90453cc7c3b4021b28e3a03eb4c540f372c5974d
parent 390097 209581894f955f0daa5857247def66daa0a6b819
child 390099 acede01031566cf9b889331c4befbe707c913d2a
push id54711
push userryanvm@gmail.com
push dateFri, 03 Nov 2017 18:08:32 +0000
treeherderautoland@90453cc7c3b4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1412273
milestone58.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1412273 - Adjust CSS shapes highlighter toggle to be visible in dark theme. r=jdescottes MozReview-Commit-ID: GilM6JKDpMF
devtools/client/themes/rules.css
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -1,26 +1,28 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* CSS Variables specific to this panel that aren't defined by the themes */
-.theme-light {
+:root {
   --rule-highlight-background-color: var(--theme-highlight-yellow);
   --rule-overridden-item-border-color: var(--theme-content-color3);
   --rule-header-background-color: var(--theme-toolbar-background);
+  --rule-shape-toggle-color: var(--grey-90);
 }
 
-.theme-dark {
+:root.theme-dark {
   --rule-highlight-background-color: #521C76;
   --rule-overridden-item-border-color: var(--theme-content-color1);
   --rule-header-background-color: #141416;
+  --rule-shape-toggle-color: var(--grey-10);
 }
 
-.theme-firebug {
+:root.theme-firebug {
   --rule-highlight-background-color: var(--theme-highlight-yellow);
   --rule-property-name: darkgreen;
   --rule-property-value: darkblue;
   --rule-overridden-item-border-color: var(--theme-content-color2);
   --rule-header-background-color: var(--theme-header-background);
 }
 
 /* Rule View Tabpanel */
@@ -467,16 +469,18 @@
 
 .ruleview-grid {
   background: url("chrome://devtools/skin/images/grid.svg");
   border-radius: 0;
 }
 
 .ruleview-shape {
   background: url("chrome://devtools/skin/images/tool-shadereditor.svg");
+  -moz-context-properties: fill;
+  fill: var(--rule-shape-toggle-color);
   border-radius: 0;
   background-size: 1em;
 }
 
 .ruleview-shape-point.active {
   background-color: var(--rule-highlight-background-color);
 }