Bug 1488012 - Update devtools frame picker button; r=jdescottes

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

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

devtools/client/framework/components/ToolboxToolbar.js

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

devtools/client/framework/toolbox.js

@@ -1443,6 +1443,11 @@ Toolbox.prototype = {
       this.frameButton.disabled = false;
       this.frameButton.description = L10N.getStr("toolbox.frames.tooltip");
     }
+
+    // Highlight the button when a child frame is selected
+    const selectedFrame = this.frameMap.get(this.selectedFrameId) || {};
+    this.frameButton.isChecked = selectedFrame.parentID != null;
+
     this.frameButton.isVisible = this._commandIsVisible(this.frameButton);
   },
 
@@ -2396,18 +2401,6 @@ Toolbox.prototype = {
       this.selectedFrameId = topFrames.length ? topFrames[0].id : null;
     }
 
-    // Check out whether top frame is currently selected.
-    // Note that only child frame has parentID.
-    const frame = this.frameMap.get(this.selectedFrameId);
-    const topFrameSelected = frame ? !frame.parentID : false;
-    this._framesButtonChecked = false;
-
-    // If non-top level frame is selected the toolbar button is
-    // marked as 'checked' indicating that a child frame is active.
-    if (!topFrameSelected && this.selectedFrameId) {
-      this._framesButtonChecked = false;
-    }
-
     // We may need to hide/show the frames button now.
     const wasVisible = this.frameButton.isVisible;
     const wasDisabled = this.frameButton.disabled;

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

@@ -2,5 +2,7 @@
    - 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">
-  <path d="M14.2 2h-12.4c-.4 0-.8.4-.8.9v11.2c0 .4.3.9.8.9h12.4c.4 0 .8-.4.8-.9v-11.2c0-.4-.3-.9-.8-.9zM8 14H2v-4h6v4zm6 0H9v-4h5v4zm0-5H2V3h12v6z"/>
+  <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>

devtools/client/themes/toolbox.css

@@ -22,6 +22,7 @@
   --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);
@@ -339,34 +340,12 @@
 
 #command-button-frames::before {
   background-image: var(--command-frames-image);
+  fill: var(--theme-toolbar-photon-icon-color);
 }
 
-#command-button-frames {
-  background-image: url("chrome://devtools/skin/images/dropmarker.svg");
-  background-repeat: no-repeat;
-
-  /* Override background-size from the command-button.
-   The drop down arrow is smaller */
-  background-size: 8px 4px !important;
-  min-width: 32px;
-}
-
-#command-button-frames::before {
-  /* The frames button has a drop-down arrow making it asymmetrical.
-   * Drop the margin on the non-arrow side to make it fit more symmetrical. */
-  margin-inline-start: 0px;
-  /* The direction of devtools-button is forced to 'ltr' for text-as-image
-   * buttons. We don't need that here (there's no text in this button) and we
-   * want the logical properties to reflect the text direction so unset it. */
-  direction: unset;
-}
-
-#command-button-frames:-moz-locale-dir(ltr) {
-  background-position: right 2px top 14px;
-}
-
-#command-button-frames:-moz-locale-dir(rtl) {
-  background-position: left 2px top 14px;
+#command-button-frames.command-button-checked::before {
+  background-image: var(--command-frames-active-image);
+  fill: var(--theme-toolbar-checked-color);
 }
 
 /* Tooltip of frames menu  */