Bug 1412273 - Adjust CSS shapes highlighter toggle to be visible in dark theme. r=gl draft
authorMike Park <mikeparkms@gmail.com>
Wed, 01 Nov 2017 12:25:50 -0400
changeset 692827 ee7944d1f9d35a36062ae41060b8b6b0db76e212
parent 690034 cd7217cf05a2332a8fd7b498767a07b2c31ea657
child 738855 6c3b6a11bf2870e1a6a0132682060d0e1799aeb1
push id87606
push userbmo:mpark@mozilla.com
push dateFri, 03 Nov 2017 16:16:44 +0000
reviewersgl
bugs1412273
milestone58.0a1
Bug 1412273 - Adjust CSS shapes highlighter toggle to be visible in dark theme. r=gl 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);
 }