Bug 1517948 - Consolidate icon styles and remove checked icon filter. r=fvsch

Differential Revision: https://phabricator.services.mozilla.com/D16179

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/rules/views/text-property-editor.js

@@ -395,7 +395,7 @@ TextPropertyEditor.prototype = {
       flexClass: "ruleview-flex",
       gridClass: "ruleview-grid",
       shapeClass: "ruleview-shape",
-      shapeSwatchClass: SHARED_SWATCH_CLASS + " " + SHAPE_SWATCH_CLASS,
+      shapeSwatchClass: SHAPE_SWATCH_CLASS,
       // Only ask the parser to convert colors to the default color type specified by the
       // user if the property hasn't been changed yet.
       defaultColorType: !propDirty,

devtools/client/responsive.html/index.css

@@ -146,11 +146,15 @@ body,
   background-image: url("chrome://devtools/skin/images/close.svg");
 }
 
+/* Briefly animate screenshot button when clicked */
 #screenshot-button:disabled {
-  filter: var(--theme-icon-checked-filter);
   opacity: 1 !important;
 }
 
+#screenshot-button:disabled::before {
+  fill: var(--theme-toolbar-checked-color);
+}
+
 #device-selector {
   margin-inline-start: 4px;
 }

devtools/client/themes/common.css

@@ -295,6 +295,8 @@ checkbox:-moz-focusring {
   height: 16px;
   margin: 0 3px;
   transition: opacity 0.05s ease-in-out;
+  -moz-context-properties: fill;
+  fill: currentColor;
   color: var(--theme-toolbar-icon-color);
   direction: ltr;
   font-size: 11px;
@@ -307,6 +309,8 @@ checkbox:-moz-focusring {
   vertical-align: middle;
 }
 
+.devtools-toolbarbutton:not([label])[checked=true] > .toolbarbutton-icon,
+.devtools-toolbarbutton:not([label])[open=true] > .toolbarbutton-icon,
 .devtools-button.checked:empty::before {
   color: var(--theme-toolbar-checked-color);
 }
@@ -343,12 +347,6 @@ checkbox:-moz-focusring {
   opacity: 0.5 !important;
 }
 
-.devtools-button.checked::before,
-.devtools-toolbarbutton:not([label])[checked=true] > image,
-.devtools-toolbarbutton:not([label])[open=true] > image {
-  fill: var(--theme-toolbar-checked-color);
-}
-
 /* Button states */
 .devtools-toolbarbutton[label],
 .devtools-toolbarbutton[standalone],

devtools/client/themes/images/filters.svg

@@ -3,23 +3,6 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <svg height="0" xmlns="http://www.w3.org/2000/svg">
-  <!-- DevTools icon filter: Photon Blue 60 (light theme checked) -->
-  <filter id="icon-checked-light">
-    <feColorMatrix in="SourceGraphic" type="matrix"
-      values="0 0 0 0 0
-              0 0 0 0 0.122
-              0 0 0 0 0.74
-              0 0 0 1 0"/>
-  </filter>
-  <!-- DevTools icon filter: syntax blue #75BFFF (dark theme checked) -->
-  <filter id="icon-checked-dark">
-    <feColorMatrix in="SourceGraphic" type="matrix"
-      values="0 0 0 0.18 0
-              0 0 0 0.52 0
-              0 0 0 1 0
-              0 0 0 1 0"/>
-  </filter>
-
   <!-- Web Audio Gradients -->
   <linearGradient id="bypass-light" x1="8%" y1="10%" x2="16%" y2="16%" spreadMethod="repeat">
     <stop offset="0%" stop-color="#dde1e4a0"/> <!-- theme-splitter-color (0.5 opacity) -->

devtools/client/themes/images/flexbox-swatch.svg

@@ -1,11 +1,8 @@
 <!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 11">
-  <g fill="none" stroke="context-stroke #0c0c0d" stroke-width="1" stroke-linejoin="round">
-    <rect x="0.5" y="0.5" width="12" height="10"
-      stroke-dasharray="1 1" stroke-dashoffset="0.5" />
-    <rect x="2.5" y="3.5" width="8" height="4"/>
-    <line x1="6.5" x2="6.5" y1="3" y2="8"/>
-  </g>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 11" fill="none" stroke="context-stroke" stroke-width="1" stroke-linejoin="round">
+  <rect x="0.5" y="0.5" width="12" height="10" stroke-dasharray="1 1" stroke-dashoffset="0.5"/>
+  <rect x="2.5" y="3.5" width="8" height="4"/>
+  <line x1="6.5" x2="6.5" y1="3" y2="8"/>
 </svg>

devtools/client/themes/images/grid.svg

@@ -1,6 +1,6 @@
 <!-- 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/. -->
-<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" stroke="#696969">
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" stroke="context-stroke">
   <path fill="none" d="M1 2.5h9m-9 3h9m-9 3h9M2.5 1v9m3-9v9m3-9v9"/>
 </svg>

devtools/client/themes/images/shape-swatch.svg

@@ -1,4 +1,10 @@
 <!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke="context-stroke #0b0b0b"><defs><style>.cls-1{fill:none;}</style></defs><path class="cls-1" d="M2.5,5.55V9L2.12,9A1.5,1.5,0,1,0,4,10.88L4,10.5H11l.1.38a1.5,1.5,0,1,0,.89-1.77l-.42.17-2-3.8.36-.25A1.5,1.5,0,1,0,7.55,3.62L7.45,4H4L4,3.62A1.5,1.5,0,1,0,2.12,5.45Z"/><circle class="cls-1" cx="12.5" cy="10.5" r="1.5"/><circle class="cls-1" cx="2.5" cy="10.5" r="1.5"/><circle class="cls-1" cx="9" cy="4" r="1.5"/><circle class="cls-1" cx="2.5" cy="4" r="1.5"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="context-stroke">
+  <path d="M2.5,5.55V9L2.12,9A1.5,1.5,0,1,0,4,10.88L4,10.5H11l.1.38a1.5,1.5,0,1,0,.89-1.77l-.42.17-2-3.8.36-.25A1.5,1.5,0,1,0,7.55,3.62L7.45,4H4L4,3.62A1.5,1.5,0,1,0,2.12,5.45Z"/>
+  <circle cx="12.5" cy="10.5" r="1.5"/>
+  <circle cx="2.5" cy="10.5" r="1.5"/>
+  <circle cx="9" cy="4" r="1.5"/>
+  <circle cx="2.5" cy="4" r="1.5"/>
+</svg>

devtools/client/themes/rules.css

@@ -7,8 +7,6 @@
   --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-flex-toggle-color: var(--grey-90);
-  --rule-shape-toggle-color: var(--grey-90);
   --rule-target-button-color: var(--grey-40);
   --rule-target-button-hover-color: var(--grey-50);
   --rule-target-button-active-color: var(--blue-50);
@@ -18,8 +16,6 @@
   --rule-highlight-background-color: #521C76;
   --rule-overridden-item-border-color: var(--theme-content-color1);
   --rule-header-background-color: #222225;
-  --rule-flex-toggle-color: var(--grey-10);
-  --rule-shape-toggle-color: var(--grey-10);
   --rule-target-button-color: var(--grey-45);
   --rule-target-button-hover-color: var(--grey-30);
   --rule-target-button-active-color: var(--blue-30);
@@ -416,11 +412,13 @@
   margin-left: 0;
 }
 
+/* All swatches */
+
 .ruleview-flex,
 .ruleview-grid,
+.ruleview-shapeswatch,
 .ruleview-swatch {
   cursor: pointer;
-  border-radius: 50%;
   width: 1em;
   height: 1em;
   vertical-align: middle;
@@ -431,19 +429,31 @@
   position: relative;
 }
 
+/* Icon swatches not using the .ruleview-swatch class (flex, grid, shape) */
+
+.ruleview-flex,
+.ruleview-grid,
+.ruleview-shapeswatch {
+  -moz-context-properties: stroke;
+  stroke: var(--theme-toolbar-icon-color);
+}
+
+.ruleview-flex.active,
+.ruleview-grid.active,
+.ruleview-shapeswatch.active {
+  stroke: var(--theme-toolbar-checked-color);
+  filter: brightness(0.9);
+}
+
 .ruleview-flex {
   background-image: url("chrome://devtools/skin/images/flexbox-swatch.svg");
   background-size: 13px 11px;
-  -moz-context-properties: stroke;
-  stroke: var(--rule-flex-toggle-color);
   width: 13px;
   height: 11px;
-  border-radius: 0;
 }
 
 .ruleview-grid {
-  background: url("chrome://devtools/skin/images/grid.svg");
-  border-radius: 0;
+  background-image: url("chrome://devtools/skin/images/grid.svg");
 }
 
 .ruleview-grid[disabled] {
@@ -451,11 +461,25 @@
   opacity: 0.5;
 }
 
+.ruleview-shapeswatch {
+  background-image: url("chrome://devtools/skin/images/shape-swatch.svg");
+  background-size: 110%;
+  width: 1.45em;
+  height: 1.45em;
+}
+
 .ruleview-shape-point.active,
 .ruleview-shapeswatch.active + .ruleview-shape > .ruleview-shape-point:hover {
   background-color: var(--rule-highlight-background-color);
 }
 
+/* Round swatches using the .ruleview-swatch class (color, bezier, filter and angle) */
+
+.ruleview-swatch {
+  background-size: 1em;
+  border-radius: 50%;
+}
+
 .ruleview-colorswatch::before {
   content: '';
   background-color: #eee;
@@ -473,29 +497,15 @@
 }
 
 .ruleview-bezierswatch {
-  background: url("chrome://devtools/skin/images/cubic-bezier-swatch.svg");
-  background-size: 1em;
+  background-image: url("chrome://devtools/skin/images/cubic-bezier-swatch.svg");
 }
 
 .ruleview-filterswatch {
-  background: url("chrome://devtools/skin/images/filter-swatch.svg");
-  background-size: 1em;
+  background-image: url("chrome://devtools/skin/images/filter-swatch.svg");
 }
 
 .ruleview-angleswatch {
-  background: url("chrome://devtools/skin/images/angle-swatch.svg");
-  background-size: 1em;
-}
-
-.ruleview-shapeswatch {
-  background: url("chrome://devtools/skin/images/shape-swatch.svg");
-  -moz-context-properties: stroke;
-  stroke: var(--rule-shape-toggle-color);
-  border-radius: 0;
-  background-size: 110% 110%;
-  box-shadow: none;
-  width: 1.45em;
-  height: 1.45em;
+  background-image: url("chrome://devtools/skin/images/angle-swatch.svg");
 }
 
 .ruleview-overridden {
@@ -509,6 +519,7 @@
  */
 .ruleview-overridden .ruleview-flex,
 .ruleview-overridden .ruleview-grid,
+.ruleview-overridden .ruleview-shapeswatch,
 .ruleview-overridden .ruleview-swatch {
   display: none;
 }
@@ -605,12 +616,6 @@
   fill: var(--rule-target-button-active-color);
 }
 
-.ruleview-flex.active,
-.ruleview-grid.active,
-.ruleview-shapeswatch.active {
-  filter: var(--theme-icon-checked-filter) brightness(0.9);
-}
-
 #ruleview-add-rule-button::before {
   background-image: url("chrome://devtools/skin/images/add.svg");
 }

devtools/client/themes/toolbars.css

@@ -181,13 +181,7 @@
 /*
  * Apply the default fill color to toolbar icons
  */
-.devtools-toolbarbutton > image,
-.devtools-button::before,
-.scrollbutton-up > .toolbarbutton-icon,
-.scrollbutton-down > .toolbarbutton-icon,
-#black-boxed-message-button .button-icon,
 #canvas-debugging-empty-notice-button .button-icon,
-#toggle-breakpoints[checked] > image,
 .event-tooltip-debugger-icon {
   -moz-context-properties: fill;
   fill: var(--theme-toolbar-icon-color);

devtools/client/themes/variables.css

@@ -87,9 +87,6 @@
   --theme-graphs-full-red: #f00;
   --theme-graphs-full-blue: #00f;
 
-  /* Icon filters */
-  --theme-icon-checked-filter: url(chrome://devtools/skin/images/filters.svg#icon-checked-light);
-
   /* Common popup styles(used by HTMLTooltip and autocomplete) */
   --theme-popup-background: -moz-field;
   --theme-popup-color: -moz-fieldText;
@@ -180,9 +177,6 @@
   --theme-graphs-full-red: #f00;
   --theme-graphs-full-blue: #00f;
 
-  /* Icon filters */
-  --theme-icon-checked-filter: url(chrome://devtools/skin/images/filters.svg#icon-checked-dark);
-
   /* Common popup styles(used by HTMLTooltip and autocomplete) */
   --theme-popup-background: var(--grey-60);
   --theme-popup-color: rgb(249,249,250);

devtools/client/themes/widgets.css

@@ -479,13 +479,14 @@
 .variables-view-delete:hover,
 .variables-view-edit:hover,
 .variables-view-open-inspector:hover {
-  filter: var(--theme-icon-checked-filter);
+  fill: var(--theme-toolbar-checked-color);
 }
 
 .variables-view-delete:active,
 .variables-view-edit:active,
 .variables-view-open-inspector:active {
-  filter: var(--theme-icon-checked-filter) brightness(0.9);
+  fill: var(--theme-toolbar-checked-color);
+  filter: brightness(0.9);
 }
 
 .variable-or-property:focus > .title > .variables-view-delete,