Bug 1499987 - Add an active state to toolbox SVG icons; r=gl
authorFlorens Verschelde <florens@fvsch.com>
Fri, 19 Oct 2018 15:31:26 +0000
changeset 500672 e688352c431d7a3daedd22f0243e9c10e25cf399
parent 500671 55bd63e9f1142c61581900052713d5495012405a
child 500673 4aad71bbd52935e8cb99492d39d9e5643259e6d4
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1499987
milestone64.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 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
devtools/client/framework/components/ToolboxToolbar.js
devtools/client/themes/images/command-frames.svg
devtools/client/themes/images/command-pick-accessibility.svg
devtools/client/themes/images/command-pick.svg
devtools/client/themes/images/command-responsivemode.svg
devtools/client/themes/toolbox.css
--- a/devtools/client/framework/components/ToolboxToolbar.js
+++ b/devtools/client/framework/components/ToolboxToolbar.js
@@ -240,19 +240,17 @@ class ToolboxToolbar extends Component {
     const { toolbox } = this.props;
 
     return MenuButton(
       {
         id,
         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,
       },
       this.createFrameList
     );
   }
 
--- a/devtools/client/themes/images/command-frames.svg
+++ b/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>
--- a/devtools/client/themes/images/command-pick-accessibility.svg
+++ b/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>
--- a/devtools/client/themes/images/command-pick.svg
+++ b/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>
--- a/devtools/client/themes/images/command-responsivemode.svg
+++ b/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>
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -17,17 +17,16 @@
   --command-paintflashing-image: url(images/command-paintflashing.svg);
   --command-screenshot-image: url(images/command-screenshot.svg);
   --command-responsive-image: url(images/command-responsivemode.svg);
   --command-replay-image: url(images/command-replay.svg);
   --command-scratchpad-image: url(images/tool-scratchpad.svg);
   --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);
 }
 
 /* Toolbox tabbar */
 
 .devtools-tabbar {
@@ -268,34 +267,52 @@
   position: relative;
   min-width: 24px;
 }
 
 #command-button-pick {
   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 {
   background-image: var(--command-paintflashing-image);
 }
 
 #command-button-screenshot::before {
   background-image: var(--command-screenshot-image);
 }
 
 #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 {
   background-image: var(--command-replay-image);
   fill: var(--theme-toolbar-photon-icon-color);
   -moz-context-properties: fill;
   background-repeat: no-repeat;
   height: 16px;
@@ -313,44 +330,38 @@
 #command-button-stop-replay::before {
   fill: currentColor;
 }
 
 #command-button-scratchpad::before {
   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);
 }
 
 #command-button-rulers::before {
   background-image: var(--command-rulers-image);
 }
 
 #command-button-measure::before {
   background-image: var(--command-measure-image);
 }
 
 #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  */
 
 #command-button-frames-panel > .tooltip-panel {
   max-width: 500px;
   overflow-y: auto;
 }