Bug 1499987 - Add an active state to toolbox SVG icons; r=gl

- Update 'Pick an element' icon with bigger arrow, background in active state
- Update 'Pick an accessible element' icon with pixel-fitted design, background in active state
- Update 'RDM' icon with background in active state
- Use context-stroke to enable design changes, instead of a different URL, to avoid a visual glitch

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

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

devtools/client/framework/components/ToolboxToolbar.js

@@ -245,9 +245,7 @@ class ToolboxToolbar extends Component {
         disabled,
         menuId: id + "-panel",
         doc: toolbox.doc,
-        className: `devtools-button command-button ${
-          isChecked ? "command-button-checked " : ""
-        }`,
+        className: `devtools-button command-button ${isChecked ? "checked" : ""}`,
         ref: "frameMenuButton",
         title: description,
         onCloseButton: toolbox.highlighterUtils.unhighlight,

devtools/client/themes/images/command-frames.svg

@@ -1,8 +1,7 @@
 <!-- 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" fill="context-fill #0b0b0b">
-  <style>#filled:target{fill-opacity:0.3}</style>
-  <path id="filled" fill-opacity="0" d="M6 7h8v6H6z"/>
-  <path d="M6 7v6H5V7H2V6h12v1H6zm7-6a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h10zM3 3a1 1 0 0 0-1 1v8c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V4c0-.6-.4-1-1-1H3z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill="context-stroke" fill-opacity="0.15" d="M5.5,6.5h9v7h-9"/>
+  <path fill="context-fill #0b0b0b" d="M6 7v6H5V7H2V6h12v1H6zm7-6a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h10zM3 3a1 1 0 0 0-1 1v8c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V4c0-.6-.4-1-1-1H3z"/>
 </svg>

devtools/client/themes/images/command-pick-accessibility.svg

@@ -1,9 +1,11 @@
 <!-- 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" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0b0b0b">
-  <path d="M15,7.5V2.8c0-0.6-0.5-1-1-1H2c-0.6,0-1,0.4-1,1v10c0,0.5,0.5,1,1,1h6.8l-0.4-1H2v-10h12v4.3L15,7.5z"/>
-  <circle cx="11.5" cy="7.1" r="1"/>
-  <path d="M14.6,8.4H8.5C8.2,8.4,8,8.6,8,8.9s0.2,0.5,0.5,0.5h1.8v4.2c0,0.3,0.2,0.6,0.5,0.6s0.5-0.3,0.5-0.6v-2.1
-   h0.5v2.1c0,0.3,0.2,0.6,0.5,0.6s0.5-0.3,0.5-0.6V9.3h1.8c0.3,0,0.5-0.2,0.5-0.5C15,8.5,14.8,8.4,14.6,8.4z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <rect fill="context-stroke" fill-opacity=".15" x="1.5" y="2.5" width="13" height="11" rx="1"/>
+  <g fill="context-fill #0b0b0b">
+    <path d="M2 13h6.5a.5.5 0 1 1 0 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v2.5a.5.5 0 1 1-1 0V3H2v10z"/>
+    <path d="M13 9v4.5a.5.5 0 1 1-1 0v-2h-1v2a.5.5 0 1 1-1 0V9H8.5a.5.5 0 0 1 0-1h6a.5.5 0 1 1 0 1H13z"/>
+    <circle cx="11.5" cy="6.5" r="1.1"/>
+  </g>
 </svg>

devtools/client/themes/images/command-pick.svg

@@ -1,9 +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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
-  <path d="M15 7.667V3.002A1.01 1.01 0 0 0 13.993 2H2.007C1.45 2 1 2.449 1 3.002v9.996C1 13.544 1.45 14 2.007 14h6.818l-.37-1H2V3h12v4.334l1 .333z"/>
-  <path fill-opacity=".3" d="M9 8l1.981 5.843 4.044-3.966z"/>
-  <path d="M8.526 8.16l1.982 5.844a.5.5 0 0 0 .824.196l4.043-3.966a.5.5 0 0 0-.202-.835L9.15 7.523a.5.5 0 0 0-.623.638zm.948-.32l-.623.637 6.025 1.877-.201-.834-4.044 3.966.824.197-1.981-5.844z"/>
-  <path d="M12.674 12.39l1.973 1.964a.5.5 0 1 0 .706-.708L13.38 11.68a.5.5 0 0 0-.706.709z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill="context-stroke" fill-opacity=".15" d="M1.5 2.5h13V9L8 7l2 6.5H1.5z"/>
+  <path fill="context-fill #0d0d0d" d="M2 13h5.5a.5.5 0 1 1 0 1H2c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v3.5a.5.5 0 1 1-1 0V3H2v10z"/>
+  <path fill="context-fill #0d0d0d" d="M11.893 12.307l1.414-1.414 1.8 1.8a1 1 0 0 1-1.414 1.414l-1.8-1.8zM7.05 7A.752.752 0 0 1 8 6.05l6.737 2.238a.75.75 0 0 1 .293 1.242l-4.5 4.5a.75.75 0 0 1-1.242-.293L7.05 7zm1.886.936l1.392 4.176 2.784-2.784-4.176-1.392z"/>
 </svg>

devtools/client/themes/images/command-responsivemode.svg

@@ -1,4 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="context-fill #0b0b0b">
-  <path d="M1,4H6A1,1,0,0,1,7,5V15a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V5A1,1,0,0,1,1,4ZM1,6v8H6V6Z"/>
-  <path d="M10,16H9a1,1,0,0,1,0-2h4V2H5V3H3V1A1,1,0,0,1,4,0H14a1,1,0,0,1,1,1V15a1,1,0,0,1-1,1Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill="context-stroke" fill-opacity=".15" d="M4 1h10v14H6V5H4z"/>
+  <g fill="context-fill #0b0b0b">
+    <path d="M10 16H9a1 1 0 0 1 0-2h4V2H5a1 1 0 0 1-1 1 1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4z"/>
+    <path d="M1 4h5a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm0 2v8h5V6H1z"/>
+  </g>
 </svg>

devtools/client/themes/toolbox.css

@@ -22,7 +22,6 @@
   --command-pick-image: url(images/command-pick.svg);
   --command-pick-accessibility-image: url(images/command-pick-accessibility.svg);
   --command-frames-image: url(images/command-frames.svg);
-  --command-frames-active-image: url(images/command-frames.svg#filled);
   --command-rulers-image: url(images/command-rulers.svg);
   --command-measure-image: url(images/command-measure.svg);
   --command-chevron-image: url(images/command-chevron.svg);
@@ -273,6 +272,22 @@
   min-width: 32px;
 }
 
+#command-button-pick::before {
+  background-image: var(--command-pick-image);
+  -moz-context-properties: fill, stroke;
+  fill: var(--theme-toolbar-photon-icon-color);
+  stroke: none;
+}
+
+#command-button-pick.checked::before {
+  fill: var(--theme-toolbar-checked-color);
+  stroke: var(--theme-toolbar-checked-color);
+}
+
+#command-button-pick.accessibility::before {
+  background-image: var(--command-pick-accessibility-image);
+}
+
 /* Command button images */
 
 #command-button-paintflashing::before {
@@ -285,12 +300,14 @@
 
 #command-button-responsive::before {
   background-image: var(--command-responsive-image);
+  -moz-context-properties: fill, stroke;
   fill: var(--theme-toolbar-photon-icon-color);
-  -moz-context-properties: fill;
+  stroke: none;
 }
 
 #command-button-responsive.checked::before {
-  fill: currentColor;
+  fill: var(--theme-toolbar-checked-color);
+  stroke: var(--theme-toolbar-checked-color);
 }
 
 #command-button-stop-replay::before, #command-button-replay::before {
@@ -318,14 +335,6 @@
   background-image: var(--command-scratchpad-image);
 }
 
-#command-button-pick::before {
-  background-image: var(--command-pick-image);
-}
-
-#command-button-pick.accessibility::before {
-  background-image: var(--command-pick-accessibility-image);
-}
-
 #command-button-eyedropper::before {
   background-image: var(--command-eyedropper-image);
 }
@@ -340,12 +349,14 @@
 
 #command-button-frames::before {
   background-image: var(--command-frames-image);
+  -moz-context-properties: fill, stroke;
   fill: var(--theme-toolbar-photon-icon-color);
+  stroke: none;
 }
 
-#command-button-frames.command-button-checked::before {
-  background-image: var(--command-frames-active-image);
+#command-button-frames.checked::before {
   fill: var(--theme-toolbar-checked-color);
+  stroke: var(--theme-toolbar-checked-color);
 }
 
 /* Tooltip of frames menu  */