Bug 1517189 - Use Photon styling for toolbox icons (inspector, console, etc.); r=gl,ntim
authorFlorens Verschelde <florens@fvsch.com>
Sat, 05 Jan 2019 10:53:38 +0000
changeset 509740 d3741459641932fa5735692e20c6464ea2597c59
parent 509739 12cbaacf5a6c5bc2018f4bf52c8c9c37b3757a2e
child 509741 94cd5fa46f95d1109e31750b4708c324a5de749e
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl, ntim
bugs1517189
milestone66.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 1517189 - Use Photon styling for toolbox icons (inspector, console, etc.); r=gl,ntim Differential Revision: https://phabricator.services.mozilla.com/D15563
devtools/client/definitions.js
devtools/client/framework/components/ToolboxToolbar.js
devtools/client/jar.mn
devtools/client/shared/components/NotificationBox.css
devtools/client/themes/animation.css
devtools/client/themes/common.css
devtools/client/themes/fonts.css
devtools/client/themes/images/close.svg
devtools/client/themes/images/command-chevron.svg
devtools/client/themes/images/command-console.svg
devtools/client/themes/images/command-eyedropper.svg
devtools/client/themes/images/command-frames.svg
devtools/client/themes/images/command-measure.svg
devtools/client/themes/images/command-noautohide.svg
devtools/client/themes/images/command-paintflashing.svg
devtools/client/themes/images/command-pick-accessibility.svg
devtools/client/themes/images/command-pick.svg
devtools/client/themes/images/command-replay.svg
devtools/client/themes/images/command-responsivemode.svg
devtools/client/themes/images/command-rulers.svg
devtools/client/themes/images/command-screenshot.svg
devtools/client/themes/images/more.svg
devtools/client/themes/images/settings.svg
devtools/client/themes/images/tool-accessibility.svg
devtools/client/themes/images/tool-application.svg
devtools/client/themes/images/tool-canvas.svg
devtools/client/themes/images/tool-debugger.svg
devtools/client/themes/images/tool-dom.svg
devtools/client/themes/images/tool-inspector.svg
devtools/client/themes/images/tool-memory.svg
devtools/client/themes/images/tool-network.svg
devtools/client/themes/images/tool-options-photon.svg
devtools/client/themes/images/tool-options.svg
devtools/client/themes/images/tool-profiler.svg
devtools/client/themes/images/tool-scratchpad.svg
devtools/client/themes/images/tool-shadereditor.svg
devtools/client/themes/images/tool-storage.svg
devtools/client/themes/images/tool-styleeditor.svg
devtools/client/themes/images/tool-webaudio.svg
devtools/client/themes/images/tool-webconsole.svg
devtools/client/themes/markup.css
devtools/client/themes/toolbars.css
devtools/client/themes/toolbox.css
devtools/client/themes/variables.css
devtools/client/themes/webconsole.css
devtools/client/webconsole/components/ReverseSearchInput.css
--- a/devtools/client/definitions.js
+++ b/devtools/client/definitions.js
@@ -42,17 +42,17 @@ const L10N = new MultiLocalizationHelper
 var Tools = {};
 exports.Tools = Tools;
 
 // Definitions
 Tools.options = {
   id: "options",
   ordinal: 0,
   url: "chrome://devtools/content/framework/toolbox-options.xhtml",
-  icon: "chrome://devtools/skin/images/tool-options.svg",
+  icon: "chrome://devtools/skin/images/settings.svg",
   bgTheme: "theme-body",
   label: l10n("options.label"),
   iconOnly: true,
   panelLabel: l10n("options.panelLabel"),
   tooltip: l10n("optionsButton.tooltip"),
   inMenu: false,
 
   isTargetSupported: function() {
--- a/devtools/client/framework/components/ToolboxToolbar.js
+++ b/devtools/client/framework/components/ToolboxToolbar.js
@@ -200,17 +200,18 @@ class ToolboxToolbar extends Component {
         }
 
         return button({
           id,
           title: description,
           disabled,
           className: (
             "command-button devtools-button "
-            + buttonClass + (isChecked ? " checked" : "")
+            + (buttonClass || "")
+            + (isChecked ? " checked" : "")
           ),
           onClick: (event) => {
             onClick(event);
             focusButton(id);
           },
           onFocus: () => focusButton(id),
           tabIndex: id === focusedButton ? "0" : "-1",
           onKeyDown: (event) => {
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -189,18 +189,16 @@ devtools.jar:
     skin/images/debugging-workers.svg (themes/images/debugging-workers.svg)
     skin/images/datastore.svg (themes/images/datastore.svg)
     skin/images/globe.svg (themes/images/globe.svg)
     skin/images/next.svg (themes/images/next.svg)
     skin/images/next-circle.svg (themes/images/next-circle.svg)
     skin/images/folder.svg (themes/images/folder.svg)
     skin/images/sad-face.svg (themes/images/sad-face.svg)
     skin/images/shape-swatch.svg (themes/images/shape-swatch.svg)
-    skin/images/tool-options.svg (themes/images/tool-options.svg)
-    skin/images/tool-options-photon.svg (themes/images/tool-options-photon.svg)
     skin/images/tool-webconsole.svg (themes/images/tool-webconsole.svg)
     skin/images/tool-canvas.svg (themes/images/tool-canvas.svg)
     skin/images/tool-debugger.svg (themes/images/tool-debugger.svg)
     skin/images/tool-inspector.svg (themes/images/tool-inspector.svg)
     skin/images/tool-shadereditor.svg (themes/images/tool-shadereditor.svg)
     skin/images/tool-styleeditor.svg (themes/images/tool-styleeditor.svg)
     skin/images/tool-storage.svg (themes/images/tool-storage.svg)
     skin/images/tool-profiler.svg (themes/images/tool-profiler.svg)
--- a/devtools/client/shared/components/NotificationBox.css
+++ b/devtools/client/shared/components/NotificationBox.css
@@ -67,26 +67,26 @@
 
 .notificationbox .messageImage[data-type="critical"] {
   background-image: url("chrome://global/skin/icons/error-16.png");
 }
 
 /* Close button */
 
 .notificationbox .messageCloseButton {
-  width: 20px;
-  height: 20px;
-  margin: 4px;
-  margin-inline-end: 8px;
+  width: 24px;
+  height: 24px;
+  margin: 2px 4px;
   background-image: url("chrome://devtools/skin/images/close.svg");
   background-position: center;
   background-color: transparent;
   background-repeat: no-repeat;
-  border-radius: 11px;
-  filter: var(--theme-messageCloseButtonFilter);
+  border-radius: 2px;
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 .notificationbox .messageCloseButton:hover {
   background-color: gray;
   filter: invert(1);
 }
 
 .notificationbox .messageCloseButton:active {
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -2,17 +2,16 @@
  * 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/. */
 
 /* Animation-inspector specific theme variables */
 
 :root {
   --animation-item-hover-color: var(--grey-30-a40);
   --animation-item-selected-color: var(--grey-30-a90);
-  --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
   --cssanimation-color: var(--purple-50);
   --csstransition-color: var(--blue-55);
   --devtools-toolbar-height: 24px;
   --fast-track-image: url("images/animation-fast-track.svg");
   --graph-height: 30px;
   --graph-right-offset: 10px;
   --keyframe-marker-shadow-color: #c4c4c4;
   --pause-image: url(chrome://devtools/skin/images/pause.svg);
@@ -391,32 +390,31 @@ select.playback-rate-selector.devtools-b
 .animation-detail-header {
   display: flex;
   padding-inline-end: 0;
 }
 
 /* On OSX the cursor turns into a window-resizing cursor at the edges of the
  * window, so bring the end of the close button in. */
 :root[platform="mac"] .animation-detail-header {
-  padding-inline-end: 3px;
+  padding-inline-end: 2px;
 }
 
 .animation-detail-title {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .animation-detail-close-button {
   margin: 0;
 }
 
 .animation-detail-close-button::before {
-  fill: var(--theme-toolbar-photon-icon-color);
   background-image: url(chrome://devtools/skin/images/close.svg);
 }
 
 /* Animated Property List Container */
 .animated-property-list-container {
   flex: 1;
   overflow: hidden;
   -moz-user-select: none;
@@ -692,10 +690,10 @@ select.playback-rate-selector.devtools-b
   overflow: auto;
 }
 
 .animation-error-message > p {
   white-space: pre;
 }
 
 .animation-element-picker::before {
-  background-image: var(--command-pick-image);
+  background-image: url("chrome://devtools/skin/images/command-pick.svg");
 }
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -290,18 +290,17 @@ checkbox:-moz-focusring {
 }
 
 .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
 .devtools-button:empty::before {
   width: 16px;
   height: 16px;
   margin: 0 3px;
   transition: opacity 0.05s ease-in-out;
-
-  color: var(--theme-toolbar-color);
+  color: var(--theme-toolbar-icon-color);
   direction: ltr;
   font-size: 11px;
 }
 
 .devtools-button:empty::before {
   content: "";
   display: inline-block;
   background-repeat: no-repeat;
@@ -416,17 +415,17 @@ checkbox:-moz-focusring {
   background-image: url("chrome://devtools/skin/images/filter.svg");
 }
 
 .devtools-toolbarbutton.devtools-clear-icon {
   list-style-image: url("chrome://devtools/skin/images/clear.svg");
 }
 
 .devtools-option-toolbarbutton {
-  list-style-image: url("chrome://devtools/skin/images/tool-options.svg");
+  list-style-image: url("chrome://devtools/skin/images/settings.svg");
 }
 
 .devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
   margin-inline-end: 0;
 }
 
 .devtools-toolbarbutton-group + .devtools-toolbarbutton {
   margin-inline-start: 3px;
@@ -765,17 +764,17 @@ checkbox:-moz-focusring {
   border: none;
   border-inline-start: 1px solid var(--theme-splitter-color);
 
   background: var(--theme-tab-toolbar-background);
   background-image: url("chrome://devtools/skin/images/dropmarker.svg");
   background-repeat: no-repeat;
   background-position: center;
   -moz-context-properties: fill;
-  fill: var(--theme-toolbar-photon-icon-color);
+  fill: var(--theme-toolbar-icon-color);
 }
 
 .all-tabs-menu:hover {
   background-color: var(--theme-toolbar-hover);
 }
 
 .all-tabs-menu:hover:active {
   background-color: var(--theme-toolbar-hover-active);
--- a/devtools/client/themes/fonts.css
+++ b/devtools/client/themes/fonts.css
@@ -288,17 +288,17 @@
   margin-left: 2px;
 }
 
 /* Custom styles for <select> elements within the font editor. */
 .font-value-select {
   background-image: url(chrome://devtools/skin/images/select-arrow.svg);
   background-repeat: no-repeat;
   background-position: right 4px center;
-  fill: var(--theme-toolbar-photon-icon-color);
+  fill: var(--theme-toolbar-icon-color);
   -moz-context-properties: fill;
   -moz-appearance: none;
   box-shadow: none;
   padding: 1px 10px 1px 2px;
   min-width: 3.8em;
 }
 
 .font-value-select:-moz-focusring {
--- a/devtools/client/themes/images/close.svg
+++ b/devtools/client/themes/images/close.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="context-fill" d="M9.061 8l3.47-3.47a.75.75 0 0 0-1.061-1.06L8 6.939 4.53 3.47a.75.75 0 1 0-1.06 1.06L6.939 8 3.47 11.47a.75.75 0 1 0 1.06 1.06L8 9.061l3.47 3.47a.75.75 0 0 0 1.06-1.061z"></path>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill #0c0c0d">
+  <path d="M2.88 2.88a.87.87 0 0 1 1.24 0L8 6.76l3.88-3.88a.87.87 0 1 1 1.24 1.24L9.24 8l3.88 3.88a.87.87 0 1 1-1.24 1.24L8 9.24l-3.88 3.88a.88.88 0 0 1-1.24-1.24L6.76 8 2.88 4.12a.88.88 0 0 1 0-1.24z"/>
 </svg>
--- a/devtools/client/themes/images/command-chevron.svg
+++ b/devtools/client/themes/images/command-chevron.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 xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16">
-  <path fill="context-fill" d="M8.707 7.293l-5-5a1 1 0 0 0-1.414 1.414L6.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414l5-5a1 1 0 0 0 0-1.414zm6 0l-5-5a1 1 0 0 0-1.414 1.414L12.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414l5-5a1 1 0 0 0 0-1.414z"></path>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M2.293 2.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L6.586 8 2.293 3.707a1 1 0 0 1 0-1.414zM8.293 2.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L12.586 8 8.293 3.707a1 1 0 0 1 0-1.414z"/>
 </svg>
--- a/devtools/client/themes/images/command-console.svg
+++ b/devtools/client/themes/images/command-console.svg
@@ -1,11 +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">
-  <path d="
-    M13 1a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-10a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3h10z
-    M13 3h-10a1 1 0 0 0-1 1v1h12v-1a1 1 0 0 0-1-1z
-    M14 6h-12v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1z"/>
-  <path d="M4.5 7.5l2 2l-2 2" stroke="context-fill" stroke-width="1"
-    stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M13 1a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h10zm0 2H3c-.54 0-1 .46-1 1v1h12V4c0-.54-.46-1-1-1zm1 3H2v6c0 .54.46 1 1 1h10c.54 0 1-.46 1-1V6z"/>
+  <path d="M4.15 7.15c.2-.2.5-.2.7 0l2 2c.2.2.2.5 0 .7l-2 2a.5.5 0 0 1-.7-.7L5.79 9.5 4.15 7.85a.5.5 0 0 1 0-.7z"/>
 </svg>
--- a/devtools/client/themes/images/command-eyedropper.svg
+++ b/devtools/client/themes/images/command-eyedropper.svg
@@ -1,7 +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">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
   <path d="M8.3 2.9l4.9 4.9c.2.2.5.4.8.1.2-.2.1-.5-.1-.8L11.6 5l1.8-1.8c.2-.2.4-.5.1-.8-.2-.2-.5-.1-.8.1L11 4.3l-2.1-2c-.2-.3-.5-.4-.8-.2-.2.3-.1.6.2.8zM10.4 7.4l-6.1 6-2.4.8.7-2.4 6.2-6.1-.7-.7L2 11c-.1.1-.2.3-.2.4L1 13.7s-.1.7.1 1c.3.3.9.3 1.2.2l2.3-.8c.2-.1.3-.1.4-.3L11 8l-.6-.6z"/>
   <path opacity="0.5" d="M7.1 7.1l-4.2 3.8-1.4 3.5 2.9-.6 2.8-2.7z"/>
 </svg>
--- a/devtools/client/themes/images/command-frames.svg
+++ b/devtools/client/themes/images/command-frames.svg
@@ -1,7 +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">
-  <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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path fill-opacity="context-fill-opacity" d="M6,7h8v6h-8z"/>
+  <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>
--- a/devtools/client/themes/images/command-measure.svg
+++ b/devtools/client/themes/images/command-measure.svg
@@ -1,7 +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">
-  <path d="M1 11h14V6H1v5zm15 .2c0 .5-.4.8-.8.8H.8c-.4 0-.8-.4-.8-.8V5.8c0-.4.4-.8.8-.8h14.3c.5 0 .9.4.9.8v5.4z"/>
-  <path d="M9 6v3c0 .2.3.4.5.4s.5-.2.5-.4V6H9zM13 6v3c0 .2.3.4.5.4.2-.1.5-.2.5-.4V6h-1zM5.1 5.7L4 6v2.8c0 .2.4.4.6.4s.5-.2.5-.4V5.7zM11 5v2.7c0 .2.3.4.5.4s.5-.2.5-.4V5h-1zM6 5.1v2.6c0 .2.5.4.7.4.2 0 .6-.2.6-.4l-.1-2.6H6zM2 5.1v2.6c0 .2.3.4.5.4s.5-.2.5-.4V5.1H2z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M0 5c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5zm14 0H2v6h12V5z"/>
+  <path d="M5 5v2.5a.5.5 0 0 1-1 0V5h1zM7 5v1.5a.5.5 0 0 1-1 0V5h1zM11 5v1.5a.5.5 0 0 1-1 0V5h1zM9 5v2.5a.5.5 0 0 1-1 0V5h1zM13 5v2.5a.5.5 0 0 1-1 0V5h1z"/>
 </svg>
--- a/devtools/client/themes/images/command-noautohide.svg
+++ b/devtools/client/themes/images/command-noautohide.svg
@@ -1,9 +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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="context-fill #0b0b0b">
-  <path d="M1 5a2 2 0 0 1 2-2h1l2-2 2 2h5a2 2 0 0 1 2 2v8
-    a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2z"
-    stroke-width="2" stroke="context-fill"
-    stroke-linejoin="round" stroke-linecap="round" fill="none"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M5.293.293a1 1 0 0 1 1.414 0L8.414 2H13a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h.586L5.293.293zM6 2.414L4.707 3.707A1 1 0 0 1 4 4H3c-.545 0-1 .455-1 1v8c0 .545.455 1 1 1h10c.545 0 1-.455 1-1V5c0-.545-.455-1-1-1H8a1 1 0 0 1-.707-.293L6 2.414z"/>
 </svg>
--- a/devtools/client/themes/images/command-paintflashing.svg
+++ b/devtools/client/themes/images/command-paintflashing.svg
@@ -1,7 +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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
-  <path d="M3 6.997v6.006c0-.006.003-.003.002-.003h9.996c-.001 0 .002-.003.002.003V6.997c0 .006-.003.003-.002.003H3.002C3.003 7 3 7.003 3 6.997zm-1 0C2 6.447 2.456 6 3.002 6h9.996C13.55 6 14 6.453 14 6.997v6.006c0 .55-.456.997-1.002.997H3.002A1.004 1.004 0 0 1 2 13.003V6.997zM8.5 4V1.5a.5.5 0 0 0-1 0V4H4a.5.5 0 0 0 0 1h8a.5.5 0 1 0 0-1H8.5z"/>
-  <path fill-opacity=".3" d="M13 10v3H3v-3z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path opacity=".3" d="M3 10h10v3H3v-3z"/>
+  <path d="M1 9a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v3a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V9zm3-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H4zM8 0a1 1 0 0 1 1 1v2h3a1 1 0 1 1 0 2H4a1 1 0 0 1 0-2h3V1a1 1 0 0 1 1-1z"/>
 </svg>
--- a/devtools/client/themes/images/command-pick-accessibility.svg
+++ b/devtools/client/themes/images/command-pick-accessibility.svg
@@ -1,11 +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">
-  <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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M3 3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.6a1 1 0 1 1 0 2H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v2.6a1 1 0 1 1-2 0V4a1 1 0 0 0-1-1H3z"/>
+  <path d="M10.5 8.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM6 9.75c0-.41.34-.75.75-.75h7.5a.75.75 0 0 1 0 1.5H12.5v4.75a.75.75 0 0 1-1.5 0V13h-1v2.25a.75.75 0 0 1-1.5 0V10.5H6.75A.75.75 0 0 1 6 9.75z"/>
 </svg>
--- a/devtools/client/themes/images/command-pick.svg
+++ b/devtools/client/themes/images/command-pick.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">
-  <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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M3 3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.6a1 1 0 1 1 0 2H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v2.6a1 1 0 1 1-2 0V4a1 1 0 0 0-1-1H3z"/>
+  <path d="M12.87 14.6c.3.36.85.4 1.2.1.36-.31.4-.86.1-1.22l-1.82-2.13 2.42-1a.3.3 0 0 0 .01-.56L7.43 6.43a.3.3 0 0 0-.42.35l2.13 7.89a.3.3 0 0 0 .55.07l1.35-2.28 1.83 2.14z"/>
 </svg>
--- a/devtools/client/themes/images/command-replay.svg
+++ b/devtools/client/themes/images/command-replay.svg
@@ -1,7 +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 width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
-	<circle id="Oval" cx="10" cy="10" r="6"></circle>
-	<path d="M10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 Z M10,18 C14.418278,18 18,14.418278 18,10 C18,5.581722 14.418278,2 10,2 C5.581722,2 2,5.581722 2,10 C2,14.418278 5.581722,18 10,18 Z" id="Combined-Shape"></path>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <circle cx="8" cy="8" r="7" fill="none" stroke="context-fill" stroke-width="2"/>
+  <circle cx="8" cy="8" r="4"/>
+</svg>
--- a/devtools/client/themes/images/command-responsivemode.svg
+++ b/devtools/client/themes/images/command-responsivemode.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 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path fill-opacity="context-fill-opacity" d="M4 1h10v14H6V5H4V1z"/>
+  <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"/>
+  <path d="M5 0a2 2 0 0 0-2 2v1h2V2h8v12H8v2h5a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
 </svg>
-
--- a/devtools/client/themes/images/command-rulers.svg
+++ b/devtools/client/themes/images/command-rulers.svg
@@ -1,7 +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">
-  <path d="M11.4 3c-.2 0-.4.2-.4.4v2.5c0 .2.3.4.5.4s.5-.2.5-.4V3.4c0-.2-.3-.4-.5-.4M13.5 3.2c-.2 0-.5.2-.5.4v1.5c0 .2.3.4.5.4s.5-.2.5-.4V3.6c0-.2-.3-.4-.5-.4M9.6 3.2c-.2 0-.6.2-.6.4v1.5c0 .2.3.4.6.4.2 0 .4-.2.4-.4V3.6c0-.2-.2-.4-.4-.4M7.4 3c-.2 0-.4.2-.4.4v2.5c0 .2.3.4.5.4s.5-.2.5-.4V3.4c0-.2-.2-.4-.6-.4M5.5 3.2c-.3 0-.5.2-.5.4v1.5c0 .2.3.4.5.4s.5-.2.5-.4V3.6c0-.2-.3-.4-.5-.4M4.3 8.5c0-.2-.2-.5-.4-.5H2.4c-.2 0-.4.3-.4.5s.2.5.4.5h1.5c.2 0 .4-.3.4-.5M4.3 12.5c0-.2-.2-.5-.4-.5H2.4c-.2 0-.4.3-.4.5s.2.5.4.5h1.5c.2 0 .4-.3.4-.5M5.1 10.5c0-.2-.2-.5-.4-.5H3.2c-.2 0-.4.3-.4.5s.2.5.4.5h1.5c.2 0 .4-.3.4-.5M5.1 6.5c0-.2-.2-.5-.4-.5H3.2c-.2 0-.4.3-.4.5s.2.5.4.5h1.5c.2 0 .4-.3.4-.5"/>
-  <path d="M15.1 3H3.5C2.9 3 2 3.6 2 4.1V14c0 .6 1 1 1.5 1h3.2c.6 0 1.3-.5 1.3-1V9h7c.6 0 1-.4 1-.9v-4c0-1-.4-1.1-.9-1.1zM15 8H7.4c-.6 0-.5.1-.4 0v6H3V4h12v4z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M3 3a1 1 0 0 0-1 1v10h4V8a1 1 0 0 1 1-1h7V3H3zM0 4a3 3 0 0 1 3-3h11a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H8v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4z"/>
+  <path d="M3.5 11H2v1h1.5a.5.5 0 0 0 0-1zM6 4.5V3H5v1.5a.5.5 0 0 0 1 0zM9 4.5V3H8v1.5a.5.5 0 0 0 1 0zM12 4.5V3h-1v1.5a.5.5 0 0 0 1 0zM3.5 8H2v1h1.5a.5.5 0 0 0 0-1zM3.5 5H2v1h1.5a.5.5 0 0 0 0-1z"/>
 </svg>
--- a/devtools/client/themes/images/command-screenshot.svg
+++ b/devtools/client/themes/images/command-screenshot.svg
@@ -1,7 +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">
-  <path d="M13.6 5H11V3.5C11 2.7 10 2 9.2 2H6.8C6 2 5 2.7 5 3.5V5H2.4C1.6 5 1 5.6 1 6.4v6.5c0 .8.6 1.1 1.4 1.1h11.2c.8 0 1.4-.3 1.4-1.1V6.4c0-.8-.6-1.4-1.4-1.4zm.4 8H2V6h4V3h4v3h3.9l.1 7z"/>
-  <path d="M8 6.8c-1.3 0-2.4 1.1-2.4 2.4s1.1 2.4 2.4 2.4 2.4-1.1 2.4-2.4c0-1.3-1.1-2.4-2.4-2.4zm0 3.5c-.7 0-1.2-.5-1.2-1.1S7.3 8.1 8 8.1s1.2.5 1.2 1.1-.5 1.1-1.2 1.1z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M3 4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H3zM0 5a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V5M3 2h3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1z"/>
+  <path d="M8 6a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
 </svg>
--- a/devtools/client/themes/images/more.svg
+++ b/devtools/client/themes/images/more.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
-  fill="context-fill">
-  <circle cx="2.6" cy="8" r="1.65"/>
-  <circle cx="8" cy="8" r="1.65"/>
-  <circle cx="13.4" cy="8" r="1.65"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill #0c0c0d">
+  <circle cx="2" cy="8" r="1.9"/>
+  <circle cx="8" cy="8" r="1.9"/>
+  <circle cx="14" cy="8" r="1.9"/>
 </svg>
--- a/devtools/client/themes/images/settings.svg
+++ b/devtools/client/themes/images/settings.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="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="context-fill" fill-rule="evenodd" clip-rule="evenodd" d="M12 22a1 1 0 0 1-1-1v-3.083a5.966 5.966 0 0 1-2.477-1.026l-2.18 2.18a1 1 0 0 1-1.414-1.414l2.18-2.18A5.967 5.967 0 0 1 6.083 13H3a1 1 0 1 1 0-2h3.083a5.968 5.968 0 0 1 1.026-2.477l-2.18-2.18A1 1 0 0 1 6.343 4.93l2.18 2.18A5.968 5.968 0 0 1 11 6.083V3a1 1 0 1 1 2 0v3.083a5.967 5.967 0 0 1 2.476 1.026l2.18-2.18a1 1 0 1 1 1.415 1.414l-2.18 2.18A5.966 5.966 0 0 1 17.917 11H21a1 1 0 1 1 0 2h-3.083a5.966 5.966 0 0 1-1.026 2.476l2.18 2.18a1 1 0 0 1-1.414 1.415l-2.18-2.18A5.966 5.966 0 0 1 13 17.917V21a1 1 0 0 1-1 1zM8 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0z"></path>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path fill-rule="evenodd" d="M8 16a1 1 0 0 1-1-1v-2.1a5 5 0 0 1-1.65-0.76l-1.5 1.5a1 1 0 0 1-1.5-1.5l1.5-1.5A5 5 0 0 1 3.1 9h-2.1a1 1 0 1 1 0-2h2.1a5 5 0 0 1 0.76-1.65l-1.5-1.5a1 1 0 0 1 1.5-1.5l1.5 1.5A5 5 0 0 1 7 3.1v-2.1a1 1 0 1 1 2 0v2.1a5 5 0 0 1 1.65 0.76l1.5-1.5a1 1 0 1 1 1.5 1.5l-1.5 1.5A5 5 0 0 1 12.9 7h2.1a1 1 0 1 1 0 2h-2.1a5 5 0 0 1-0.76 1.65l1.5 1.5a1 1 0 0 1-1.5 1.5l-1.5-1.5A5 5 0 0 1 9 12.9v2.1a1 1 0 0 1-1 1zM5 8a3 3 0 1 1 6 0 3 3 0 0 1-6 0z"/>
 </svg>
--- a/devtools/client/themes/images/tool-accessibility.svg
+++ b/devtools/client/themes/images/tool-accessibility.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">
-  <path d="M10 14V6h3.75M7 14V6H3.5" fill="none" stroke="context-fill" stroke-width="2" stroke-linecap="round"/>
-  <path d="M7 5h3v6H7z"/>
-  <circle cx="8.5" cy="2.6" r="1.8"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <circle cx="8" cy="2.2" r="2"/>
+  <path d="M1 6a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2h-3v8a1 1 0 1 1-2 0v-4H7v4a1 1 0 1 1-2 0V7H2a1 1 0 0 1-1-1z"/>
 </svg>
--- a/devtools/client/themes/images/tool-application.svg
+++ b/devtools/client/themes/images/tool-application.svg
@@ -1,16 +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="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" stroke="context-fill #0b0b0b">
-  <rect x="1.5" y="1.5" width="3" height="3" fill="transparent" stroke-width="1"/>
-  <rect x="6.5" y="1.5" width="3" height="3" fill="transparent" stroke-width="1"/>
-  <rect x="11.5" y="1.5" width="3" height="3" fill="transparent" stroke-width="1"/>
-
-  <rect x="1.5" y="6.5" width="3" height="3" fill="transparent" stroke-width="1"/>
-  <rect x="6.5" y="6.5" width="3" height="3" fill="transparent" stroke-width="1"/>
-  <rect x="11.5" y="6.5" width="3" height="3" fill="transparent" stroke-width="1"/>
-
-  <rect x="1.5" y="11.5" width="3" height="3" fill="transparent" stroke-width="1"/>
-  <rect x="6.5" y="11.5" width="3" height="3" fill="transparent" stroke-width="1"/>
-  <rect x="11.5" y="11.5" width="3" height="3" fill="transparent" stroke-width="1"/>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="none" stroke="context-fill #0c0c0d" d="M4 1.5H2a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5V2a.5.5 0 0 0-.5-.5zM9 1.5H7a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5V2a.5.5 0 0 0-.5-.5zM14 1.5h-2a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5V2a.5.5 0 0 0-.5-.5zM4 6.5H2a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5V7a.5.5 0 0 0-.5-.5zM9 6.5H7a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5V7a.5.5 0 0 0-.5-.5zM14 6.5h-2a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5V7a.5.5 0 0 0-.5-.5zM4 11.5H2a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5zM9 11.5H7a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5zM14 11.5h-2a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5z"/>
+</svg>
--- a/devtools/client/themes/images/tool-canvas.svg
+++ b/devtools/client/themes/images/tool-canvas.svg
@@ -1,9 +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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
-  <g fill-rule="evenodd">
-    <path d="M1 2.007C1 1.45 1.45 1 2.007 1h11.986C14.55 1 15 1.45 15 2.007v11.986C15 14.55 14.55 15 13.993 15H2.007C1.45 15 1 14.55 1 13.993V2.007zM2 2h12v12H2V2z"/>
-    <path d="M3 3h2v2H3zM11 3h2v2h-2zM7 3h2v2H7zM3 7h2v2H3zM11 7h2v2h-2zM7 7h2v2H7zM5 5h2v2H5zM9 5h2v2H9zM3 11h2v2H3zM11 11h2v2h-2zM7 11h2v2H7zM5 9h2v2H5zM9 9h2v2H9z" opacity="0.5"/>
-  </g>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+   <path d="M1 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2zm13 0H2v12h12V2z"/>
+  <path d="M3 3h2v2H3zM11 3h2v2h-2zM7 3h2v2H7zM3 7h2v2H3zM11 7h2v2h-2zM7 7h2v2H7zM5 5h2v2H5zM9 5h2v2H9zM3 11h2v2H3zM11 11h2v2h-2zM7 11h2v2H7zM5 9h2v2H5zM9 9h2v2H9z" opacity="0.5"/>
 </svg>
--- a/devtools/client/themes/images/tool-debugger.svg
+++ b/devtools/client/themes/images/tool-debugger.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="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
-  <path d="M2 5v6c0 .109.039.342.144.553.15.297.374.447.856.447h9l-.78.375 4-5v1.25l-4-5L12 4H3c-.482 0-.707.15-.856.447A1.403 1.403 0 0 0 2 5zM1 5s0-2 2-2h9l4 5-4 5H3c-2 0-2-2-2-2V5z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M2.5 4a.5.5 0 0 0-.5.5v7c0 .28.22.5.5.5h7.55l3.6-4-3.6-4H2.5zM0 4.5A2.5 2.5 0 0 1 2.5 2h8a1 1 0 0 1 .74.33l4.5 5a1 1 0 0 1 0 1.34l-4.5 5a1 1 0 0 1-.74.33h-8A2.5 2.5 0 0 1 0 11.5v-7z"/>
 </svg>
--- a/devtools/client/themes/images/tool-dom.svg
+++ b/devtools/client/themes/images/tool-dom.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="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
-  <path d="M6.052 1.13L1.164 5.57a.5.5 0 0 0 0 .74l5 4.56a.5.5 0 0 0 .673-.74l-5-4.559v.74l4.887-4.44a.5.5 0 0 0-.672-.741zM10.948 14.87l4.888-4.44a.5.5 0 0 0 0-.74l-5-4.56a.5.5 0 1 0-.673.74l5 4.559v-.74l-4.887 4.44a.5.5 0 0 0 .672.741z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M9.8 15.2a1 1 0 0 1 0-1.4l3.79-3.8-3.8-3.8a1 1 0 0 1 1.42-1.4l4.5 4.5a1 1 0 0 1 0 1.4l-4.5 4.5a1 1 0 0 1-1.42 0zM6.2.8a1 1 0 0 1 0 1.4L2.42 6l3.8 3.8a1 1 0 0 1-1.42 1.4L.3 6.7a1.01 1.01 0 0 1 0-1.4L4.8.8a1 1 0 0 1 1.42 0z"/>
 </svg>
--- a/devtools/client/themes/images/tool-inspector.svg
+++ b/devtools/client/themes/images/tool-inspector.svg
@@ -1,7 +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="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
-  <path d="M3 3.995v8.01c0-.01.005-.005.002-.005h9.996c-.001 0 .002-.003.002.005v-8.01c0 .01-.005.005-.002.005H3.002C3.003 4 3 4.003 3 3.995zm-1 0C2 3.445 2.456 3 3.002 3h9.996C13.55 3 14 3.456 14 3.995v8.01c0 .55-.456.995-1.002.995H3.002A1.005 1.005 0 0 1 2 12.005v-8.01z"/>
-  <path d="M8.5 3.5V2a.5.5 0 0 0-1 0v1.5a.5.5 0 0 0 1 0zM1 8.5h1a.5.5 0 0 0 0-1H1a.5.5 0 0 0 0 1zM14 8.5h1a.5.5 0 1 0 0-1h-1a.5.5 0 1 0 0 1zM8.5 14v-1.5a.5.5 0 1 0-1 0V14a.5.5 0 1 0 1 0z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M4.5 4a.5.5 0 0 0-.5.5v7c0 .28.22.5.5.5h7a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5h-7zM2 4.5A2.5 2.5 0 0 1 4.5 2h7A2.5 2.5 0 0 1 14 4.5v7a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 11.5v-7M.5 7.5a.5.5 0 0 0 0 1H2v-1H.5zM14 7.5h1.5a.5.5 0 0 1 0 1H14v-1zM8 0c.28 0 .5.22.5.5V2h-1V.5c0-.28.22-.5.5-.5zM8.5 14v1.5a.5.5 0 0 1-1 0V14h1z"/>
 </svg>
--- a/devtools/client/themes/images/tool-memory.svg
+++ b/devtools/client/themes/images/tool-memory.svg
@@ -1,10 +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="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
-  <path d="M4.727 8.055l-1.96-1a.5.5 0 0 0-.573.083L.655 8.602a.5.5 0 1 0 .69.725l1.539-1.465-.572.083 1.96 1a.5.5 0 1 0 .455-.89z"/>
-  <path d="M4.727 10.055l-1.96-1a.5.5 0 0 0-.573.083L.655 10.602a.5.5 0 1 0 .69.725l1.539-1.465-.572.083 1.96 1a.5.5 0 1 0 .455-.89zM11.727 10.945l1.961-1-.572-.083 1.54 1.465a.5.5 0 1 0 .689-.725l-1.54-1.464a.5.5 0 0 0-.571-.083l-1.961 1a.5.5 0 1 0 .454.89z"/>
-  <path d="M11.727 8.945l1.961-1-.572-.083 1.54 1.465a.5.5 0 1 0 .689-.725l-1.54-1.464a.5.5 0 0 0-.571-.083l-1.961 1a.5.5 0 1 0 .454.89z"/>
-  <path d="M11.727 6.945l1.961-1-.572-.083 1.54 1.465a.5.5 0 1 0 .689-.725l-1.54-1.464a.5.5 0 0 0-.571-.083l-1.961 1a.5.5 0 1 0 .454.89zM4.727 6.055l-1.96-1a.5.5 0 0 0-.573.083L.655 6.602a.5.5 0 1 0 .69.725l1.539-1.465-.572.083 1.96 1a.5.5 0 1 0 .455-.89z"/>
-  <path d="M5 3.002v9.996c0-.001.003.002-.003.002h6.006c-.006 0-.003-.003-.003-.002V3.002c0 .001-.003-.002.003-.002H4.997c.006 0 .003.003.003.002zm-1 0C4 2.45 4.453 2 4.997 2h6.006c.55 0 .997.456.997 1.002v9.996c0 .553-.453 1.002-.997 1.002H4.997C4.447 14 4 13.544 4 12.998V3.002z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M3 4a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V4zm3-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H6M13.82 4.03a.5.5 0 0 1 .5.09l1.5 1.25a.5.5 0 0 1-.64.76L13.9 5.07l-.9.34V4.34l.82-.3zM13.82 7.03a.5.5 0 0 1 .5.09l1.5 1.25a.5.5 0 0 1-.64.76L13.9 8.07l-.9.34V7.34l.82-.3zM13.82 10.03a.5.5 0 0 1 .5.09l1.5 1.25a.5.5 0 0 1-.64.76l-1.28-1.06-.9.34v-1.07l.82-.3zM2.18 4.03a.5.5 0 0 0-.5.09L.18 5.37a.5.5 0 1 0 .64.76L2.1 5.07l.9.34V4.34l-.82-.3zM2.18 7.03a.5.5 0 0 0-.5.09L.18 8.37a.5.5 0 1 0 .64.76L2.1 8.07l.9.34V7.34l-.82-.3zM2.18 10.03a.5.5 0 0 0-.5.09l-1.5 1.25a.5.5 0 1 0 .64.76l1.28-1.06.9.34v-1.07l-.82-.3z"/>
 </svg>
--- a/devtools/client/themes/images/tool-network.svg
+++ b/devtools/client/themes/images/tool-network.svg
@@ -1,9 +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="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
-  <rect fill-opacity=".5" x="2" y="3" width="8" height="1" rx=".5"/>
-  <rect x="6" y="6" width="8" height="1" rx=".5"/>
-  <rect fill-opacity=".5" x="4" y="9" width="8" height="1" rx=".5"/>
-  <rect x="2" y="12" width="5" height="1" rx=".5"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M12 14a1 1 0 0 0 1-1V2a1 1 0 1 0-2 0v11a1 1 0 0 0 1 1M12 15c.23 0 .45-.1.6-.3l3.25-4.24a.75.75 0 0 0-1.08-1.03L12 11.77 9.23 9.43a.75.75 0 0 0-1.08 1.03l3.25 4.25c.15.18.37.29.6.29zM4 2a1 1 0 0 1 1 1v11a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1M4 1c.23 0 .45.1.6.3l3.25 4.24a.75.75 0 0 1-1.08 1.03L4 4.23 1.23 6.57A.75.75 0 0 1 .15 5.54L3.4 1.3c.15-.18.37-.29.6-.29z"/>
 </svg>
deleted file mode 100644
--- a/devtools/client/themes/images/tool-options-photon.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<!-- 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">
-  <path fill-rule="evenodd"
-    d="M8 16a1 1 0 0 1-1-1v-2.1a5 5 0 0 1-1.65-0.76
-       l-1.5 1.5a1 1 0 0 1-1.5-1.5l1.5-1.5
-       A5 5 0 0 1 3.1 9h-2.1a1 1 0 1 1 0-2h2.1a5 5 0 0 1 0.76-1.65
-       l-1.5-1.5a1 1 0 0 1 1.5-1.5l1.5 1.5
-       A5 5 0 0 1 7 3.1v-2.1a1 1 0 1 1 2 0v2.1a5 5 0 0 1 1.65 0.76
-       l1.5-1.5a1 1 0 1 1 1.5 1.5l-1.5 1.5
-       A5 5 0 0 1 12.9 7h2.1a1 1 0 1 1 0 2h-2.1a5 5 0 0 1-0.76 1.65
-       l1.5 1.5a1 1 0 0 1-1.5 1.5l-1.5-1.5
-       A5 5 0 0 1 9 12.9v2.1a1 1 0 0 1-1 1z
-       M5 8a3 3 0 1 1 6 0 3 3 0 0 1-6 0z" />
-</svg>
deleted file mode 100644
--- a/devtools/client/themes/images/tool-options.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<!-- 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="M8.513 3.416v-.918A.502.502 0 0 0 8.012 2h-.999c-.273 0-.5.226-.5.498V4.07l-.6.262c-.274.12-.534.27-.775.449l-.527.39-.567-.328-.796-.46a.502.502 0 0 0-.682.185l-.5.864a.504.504 0 0 0 .182.683l.795.46.567.326-.073.65a4.055 4.055 0 0 0 0 .898l.073.65-.567.327-.795.459a.502.502 0 0 0-.181.683l.499.864c.137.237.446.32.682.185l.796-.46.567-.327.527.39c.24.177.5.328.775.448l.6.262v1.572c0 .272.225.498.5.498h.999c.273 0 .5-.226.5-.498V11.93l.6-.262c.274-.12.534-.27.775-.449l.527-.39.567.328.796.46a.502.502 0 0 0 .682-.185l.5-.864a.504.504 0 0 0-.182-.683l-.795-.46-.567-.326.073-.65a4.055 4.055 0 0 0 0-.898l-.073-.65.567-.327.795-.459a.502.502 0 0 0 .181-.683l-.499-.864a.504.504 0 0 0-.682-.185l-.796.46-.567.327-.527-.39c-.24-.177-.5-.328-.775-.448l-.6-.262v-.654zm1 0c.345.15.67.34.968.56l.796-.459a1.504 1.504 0 0 1 2.048.55l.5.865a1.502 1.502 0 0 1-.548 2.05l-.795.459a5.055 5.055 0 0 1 0 1.118l.795.46c.717.414.958 1.337.547 2.049l-.499.864a1.502 1.502 0 0 1-2.048.55l-.796-.458c-.299.22-.623.41-.968.56v.918c0 .827-.679 1.498-1.501 1.498h-.999c-.829 0-1.5-.675-1.5-1.498v-.918c-.345-.15-.67-.34-.97-.56l-.795.459a1.504 1.504 0 0 1-2.048-.55l-.5-.865a1.502 1.502 0 0 1 .548-2.05l.795-.459a5.055 5.055 0 0 1 0-1.118l-.795-.46A1.504 1.504 0 0 1 1.2 4.932l.499-.864a1.502 1.502 0 0 1 2.048-.55l.796.458c.299-.22.624-.41.969-.56v-.918c0-.827.678-1.498 1.5-1.498h.999c.829 0 1.5.675 1.5 1.498v.918z"/>
-    <path d="M7.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>
-</svg>
--- a/devtools/client/themes/images/tool-profiler.svg
+++ b/devtools/client/themes/images/tool-profiler.svg
@@ -1,9 +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="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b" fill-rule="evenodd">
-  <path d="M15 9.004C14.51 12.394 11.578 15 8.035 15 4.15 15 1 11.866 1 8s3.15-7 7.036-7c1.941 0 3.7.783 4.972 2.048l-.709.709A6.027 6.027 0 0 0 8.036 2c-3.33 0-6.03 2.686-6.03 6s2.7 6 6.03 6a6.023 6.023 0 0 0 5.946-4.993l1.017-.003z"/>
-  <path d="M4.137 9H3.1a5.002 5.002 0 0 0 9.8 0h-.965a4.023 4.023 0 0 1-3.9 3 4.023 4.023 0 0 1-3.898-3z" fill-opacity=".5"/>
-  <path d="M8.036 11a2.994 2.994 0 0 0 2.987-3c0-1.657-1.338-3-2.987-3a2.994 2.994 0 0 0-2.988 3c0 1.657 1.338 3 2.988 3zm0-1c1.11 0 2.011-.895 2.011-2s-.9-2-2.011-2c-1.111 0-2.012.895-2.012 2s.9 2 2.012 2z"/>
-  <path d="M10.354 6.354l4-4a.5.5 0 0 0-.708-.708l-4 4a.5.5 0 1 0 .708.708z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M8 0A8 8 0 0 0 .78 11.43a1 1 0 1 0 1.8-.86 5.94 5.94 0 0 1 0-5.17 6 6 0 0 1 10.83 5.17 1 1 0 1 0 1.81.86A7.99 7.99 0 0 0 8 0M10 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0M10.96 6.7a.5.5 0 1 0-.92-.4l-1.7 3.73a2 2 0 0 1 .92.41l1.7-3.73z"/>
 </svg>
--- a/devtools/client/themes/images/tool-scratchpad.svg
+++ b/devtools/client/themes/images/tool-scratchpad.svg
@@ -1,7 +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="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
-  <path d="M5 1.5a.5.5 0 0 0-1 0v2a.5.5 0 0 0 1 0v-2zM8.5 3.5v-2a.5.5 0 0 0-1 0v2a.5.5 0 0 0 1 0zM12 3.5v-2a.5.5 0 1 0-1 0v2a.5.5 0 1 0 1 0zM5 7h4a.5.5 0 0 0 0-1H5a.5.5 0 0 0 0 1zM5 11h2a.5.5 0 1 0 0-1H5a.5.5 0 1 0 0 1zM6 9h5a.5.5 0 1 0 0-1H6a.5.5 0 0 0 0 1z"/>
-  <path d="M3 3.996v9.008c0-.003 0-.004.002-.004h9.996c-.001 0 .002-.003.002.004V3.996c0 .003 0 .004-.002.004H3.002C3.003 4 3 4.003 3 3.996zm-1 0C2 3.446 2.456 3 3.002 3h9.996A.998.998 0 0 1 14 3.996v9.008c0 .55-.456.996-1.002.996H3.002A.998.998 0 0 1 2 13.004V3.996z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M1 5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V5zm3-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H4zM5 7h4c.27 0 .5-.23.5-.5S9.27 6 9 6H5c-.27 0-.5.23-.5.5s.23.5.5.5zm0 4h2c.27 0 .5-.23.5-.5S7.27 10 7 10H5c-.27 0-.5.23-.5.5s.23.5.5.5zm1-2h5c.27 0 .5-.23.5-.5S11.27 8 11 8H6c-.27 0-.5.23-.5.5s.23.5.5.5zM5 .5c0-.27-.23-.5-.5-.5S4 .23 4 .5V2h1V.5zM8.5.5C8.5.23 8.27 0 8 0s-.5.23-.5.5V2h1V.5zM12 .5c0-.27-.23-.5-.5-.5s-.5.23-.5.5V2h1V.5z"/>
 </svg>
--- a/devtools/client/themes/images/tool-shadereditor.svg
+++ b/devtools/client/themes/images/tool-shadereditor.svg
@@ -1,12 +1,12 @@
 <!-- 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">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
   <path d="M2 4v8h12V4H2zm0-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/>
   <circle cx="1" cy="3" r="1"/>
   <circle cx="1" cy="13" r="1"/>
   <circle cx="15" cy="13" r="1"/>
   <circle cx="15" cy="3" r="1"/>
   <path d="M1.215 3.911l13 9 .411.285.57-.822-.411-.285-13-9-.411-.285-.57.822z"/>
   <path fill-opacity=".3" d="M8 5h2v2H8zM8 8h2v2L9 8.711zM5 5.962V5h2v2h-.828l-.729-.368zM11 5h2v2h-2zM11 8h2v2h-2z"/>
 </svg>
--- a/devtools/client/themes/images/tool-storage.svg
+++ b/devtools/client/themes/images/tool-storage.svg
@@ -1,7 +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="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
-  <path d="M7.5 7.556c3.006 0 5.5-1.136 5.5-2.778C13 3.136 10.506 2 7.5 2S2 3.136 2 4.778C2 6.42 4.494 7.556 7.5 7.556zm0-1c-2.517 0-4.5-.903-4.5-1.778S4.983 3 7.5 3s4.5.903 4.5 1.778-1.983 1.778-4.5 1.778zM7.5 14.445c3.006 0 5.5-1.137 5.5-2.778 0-.878-.595-1.606-1.657-2.081-.244-.11-.473-.107-.778-.033-.056.014-.565.158-.765.205-.626.148-1.342.231-2.3.231-.973 0-1.683-.082-2.273-.225a18.574 18.574 0 0 1-.673-.193c-.277-.076-.479-.089-.707-.005l-.035.014C2.638 10.064 2 10.756 2 11.667c0 1.641 2.494 2.778 5.5 2.778zm0-1c-2.517 0-4.5-.904-4.5-1.778 0-.432.354-.816 1.194-1.163h-.002c-.012.005.003.006.097.032-.056-.016.474.144.702.2.669.162 1.458.253 2.509.253 1.035 0 1.828-.092 2.53-.257.228-.054.74-.2.77-.207a.756.756 0 0 1 .134-.027c.734.329 1.066.735 1.066 1.169 0 .874-1.983 1.778-4.5 1.778z"/>
-  <path d="M7.5 10.945c3.006 0 5.5-1.137 5.5-2.778 0-.873-.62-1.601-1.693-2.082-.244-.109-.472-.106-.773-.032-.051.013-.551.158-.75.206-.615.147-1.326.23-2.284.23-.973 0-1.68-.082-2.265-.225a17.077 17.077 0 0 1-.66-.19c-.27-.076-.467-.092-.692-.015l-.054.02C2.65 6.568 2 7.259 2 8.168c0 1.641 2.494 2.778 5.5 2.778zm0-1C4.983 9.945 3 9.04 3 8.167c0-.426.364-.813 1.21-1.163l-.003.001c-.011.004.005.005.099.032-.079-.022.465.143.69.198.665.163 1.452.254 2.504.254 1.036 0 1.825-.092 2.517-.258.228-.054.733-.2.758-.207a.766.766 0 0 1 .124-.026c.748.335 1.101.75 1.101 1.169 0 .874-1.983 1.778-4.5 1.778z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M4 0h8a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm0 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4zM3 7h10v1H3V7zM9.5 4h-3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM9.5 10h-3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z"/>
 </svg>
--- a/devtools/client/themes/images/tool-styleeditor.svg
+++ b/devtools/client/themes/images/tool-styleeditor.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="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
-  <path d="M5.5 2C3.565 2 2.806 3.12 3.065 4.587c.239 1.346.117 1.76-.435 2.39l-.054.06c-.252.288-.39.474-.523.74L1.94 8l.112.224c.132.265.27.45.523.739l.054.06c.552.63.674 1.044.435 2.39C2.802 12.904 3.527 14 5.5 14a.5.5 0 1 0 0-1c-1.291 0-1.614-.487-1.45-1.413.292-1.65.081-2.37-.669-3.223l-.053-.06c-.2-.229-.296-.357-.38-.528v.448c.084-.17.18-.299.38-.528l.053-.06c.75-.854.961-1.573.67-3.223C3.89 3.515 4.24 3 5.5 3a.5.5 0 1 0 0-1zM10.5 3c1.26 0 1.609.515 1.45 1.413-.292 1.65-.081 2.37.669 3.223l.053.06c.2.229.296.357.38.528v-.448c-.084.17-.18.299-.38.528l-.053.06c-.75.854-.961 1.573-.67 3.223.165.926-.158 1.413-1.449 1.413a.5.5 0 1 0 0 1c1.973 0 2.698-1.096 2.435-2.587-.239-1.346-.117-1.76.435-2.39l.054-.06c.252-.288.39-.474.523-.74L14.06 8l-.112-.224c-.132-.265-.27-.45-.523-.739l-.054-.06c-.552-.63-.674-1.044-.435-2.39C13.194 3.12 12.435 2 10.5 2a.5.5 0 0 0 0 1z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M13.2 14.08c-.62.63-1.55.92-2.7.92a1 1 0 1 1 0-2c.85 0 1.17-.21 1.3-.33.11-.12.2-.32.2-.67v-1.9a2.74 2.74 0 0 1 .91-2.1A2.74 2.74 0 0 1 12 5.9V4c0-.35-.09-.55-.2-.67-.13-.12-.45-.33-1.3-.33a1 1 0 1 1 0-2c1.15 0 2.08.29 2.7.92.64.63.8 1.43.8 2.08v1.9c0 .41.27.65.57.89l.55.43a1 1 0 0 1 0 1.56l-.55.43c-.3.24-.57.48-.57.89V12c0 .65-.16 1.45-.8 2.08zM2.8 14.08c.62.63 1.55.92 2.7.92a1 1 0 1 0 0-2c-.85 0-1.17-.21-1.3-.33-.11-.12-.2-.32-.2-.67v-1.9A2.74 2.74 0 0 0 3.09 8l.18-.2C3.7 7.34 4 6.73 4 5.9V4c0-.35.09-.55.2-.67.13-.12.45-.33 1.3-.33a1 1 0 1 0 0-2c-1.15 0-2.08.29-2.7.92C2.15 2.55 2 3.35 2 4v1.9c0 .41-.27.65-.57.89l-.55.43a1 1 0 0 0 0 1.56c.2.17.4.3.55.43.3.24.57.48.57.89V12c0 .65.16 1.45.8 2.08z"/>
 </svg>
--- a/devtools/client/themes/images/tool-webaudio.svg
+++ b/devtools/client/themes/images/tool-webaudio.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" stroke="context-fill">
-  <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M2.7 8.6c-.1-2.9.2-4.1 1.4-4.1 1.8 0 .6 6.6 2.5 6.6s1-6.4 3-6.4.7 6.4 2.7 6.4c1.4 0 1.5-3.5 1.5-3.5"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M2.7 8.6c-.1-2.9.2-4.1 1.4-4.1 1.8 0 .6 6.6 2.5 6.6s1-6.4 3-6.4.7 6.4 2.7 6.4c1.4 0 1.5-3.5 1.5-3.5"/>
 </svg>
--- a/devtools/client/themes/images/tool-webconsole.svg
+++ b/devtools/client/themes/images/tool-webconsole.svg
@@ -1,7 +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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b" fill-rule="evenodd">
-  <path d="M14 4V3H2v1h12zm0 1v8H2V5h12zM1 3.002C1 2.45 1.45 2 2.007 2h11.986A1.01 1.01 0 0 1 15 3.002v9.996C15 13.55 14.55 14 13.993 14H2.007A1.01 1.01 0 0 1 1 12.998V3.002z"/>
-  <path d="M4.09 7.859l2.062 2-.006-.713-2.061 2.062a.5.5 0 0 0 .707.707l2.062-2.061a.5.5 0 0 0-.006-.713l-2.061-2a.5.5 0 1 0-.697.718z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M0 4a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V4zm3-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3z"/>
+  <path d="M4.22 5.2a.62.62 0 0 1 .88.02l2.75 2.85c.23.24.23.62 0 .86L5.1 11.78a.63.63 0 0 1-.9-.86L6.53 8.5 4.2 6.08a.62.62 0 0 1 .02-.88z"/>
 </svg>
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -232,16 +232,17 @@ ul.children + .tag-line::before {
 
 .expandable.collapsed .markup-expand-badge::before {
   /* Display an ellipsis character in collapsed nodes that can be expanded. */
   content: "";
   background-color: var(--badge-interactive-background-color);
   background-image: url(chrome://devtools/skin/images/more.svg);
   background-repeat: no-repeat;
   background-position: center;
+  background-size: 8px;
   border: 1px solid var(--badge-border-color);
   color: var(--badge-color);
   fill: var(--badge-interactive-color);
   display: block;
   width: 12px;
   height: 8px;
   line-height: 8px;
   border-radius: 3px;
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -185,17 +185,17 @@
 .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-color);
+  fill: var(--theme-toolbar-icon-color);
 }
 
 .hidden-labels-box:not(.visible) > label,
 .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
   display: none;
 }
 
 .devtools-invisible-splitter {
@@ -212,17 +212,17 @@ splitter.devtools-horizontal-splitter,
 .devtools-dropdown-button {
   background-image: url("chrome://devtools/skin/images/select-arrow.svg") !important;
   background-position: right center !important;
   background-repeat: no-repeat !important;
   text-overflow: ellipsis;
   overflow: hidden;
   padding-inline-start: 2px !important;
   padding-inline-end: 10px !important;
-  fill: var(--theme-toolbar-photon-icon-color);
+  fill: var(--theme-toolbar-icon-color);
   -moz-context-properties: fill;
 }
 
 html[dir="rtl"] .devtools-dropdown-button {
   background-position: left center !important;
 }
 
 .devtools-dropdown-button:not(:hover) {
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -1,37 +1,13 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* 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/. */
 
-:root {
-  --close-button-image: url(chrome://devtools/skin/images/close.svg);
-  --dock-bottom-image: url(chrome://devtools/skin/images/dock-bottom.svg);
-  --dock-side-right-image: url(chrome://devtools/skin/images/dock-side-right.svg);
-  --dock-side-left-image: url(chrome://devtools/skin/images/dock-side-left.svg);
-  --dock-undock-image: url(chrome://devtools/skin/images/dock-undock.svg);
-  --more-button-image: url(chrome://devtools/skin/images/more.svg);
-  --settings-image: url(chrome://devtools/skin/images/tool-options-photon.svg);
-
-  --command-noautohide-image: url(images/command-noautohide.svg);
-  --command-console-image: url(images/command-console.svg);
-  --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-rulers-image: url(images/command-rulers.svg);
-  --command-measure-image: url(images/command-measure.svg);
-  --command-chevron-image: url(images/command-chevron.svg);
-}
-
 /*
  *  Debug Target Info layout
  *  +------+-------------------+------------------+
  *  | icon | runtime info text | target info text |
  *  | 32px |        auto       |        1fr       |
  *  +------+-------------------+------------------+
  */
 .debug-target-info {
@@ -121,52 +97,49 @@
 }
 
 /* Toolbox tabs */
 
 .devtools-tab {
   position: relative;
   display: flex;
   align-items: center;
+  flex-shrink: 0;
   min-height: 24px;
   margin: 0;
   padding: 0;
   border: none;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: var(--theme-toolbar-color);
   background-color: transparent;
-  flex-shrink: 0;
 }
 
 .devtools-tab-label {
   font-size: 12px;
   mask-image: linear-gradient(to left, transparent 0, black 6px);
   /* Set the end padding on the label to make sure the label gets faded out properly */
-  padding-inline-end: 10px;
+  padding-inline-end: 8px;
   min-width: 1px;
 }
 
 .devtools-tab-label:-moz-locale-dir(rtl) {
   mask-image: linear-gradient(to right, transparent 0, black 6px);
 }
 
 .devtools-tab .devtools-tab-badge {
   color: var(--theme-highlight-blue);
   font-size: 80%;
   font-weight: 500;
-  margin-inline-start: 5px;
+  margin-inline-start: 4px;
 }
 
 .devtools-tab-icon-only {
-  min-width: 24px;
-}
-
-.devtools-tab {
-  color: var(--theme-toolbar-color);
+  min-width: 26px;
 }
 
 .devtools-tab:hover,
 .devtools-tab:focus {
   background-color: var(--theme-toolbar-hover);
 }
 
 /* Remove system control border from devtools-tab. */
@@ -180,220 +153,183 @@
 
 .devtools-tab.selected {
   color: var(--theme-toolbar-selected-color);
 }
 
 .devtools-tab > img {
   border: none;
   margin: 0;
-  margin-inline-start: 10px;
-  margin-inline-end: 5px;
-  max-height: 16px;
-  width: 16px; /* Prevents collapse during theme switching */
+  margin-inline-start: 8px;
+  margin-inline-end: 6px;
+  height: 16px;
+  width: 16px;
   vertical-align: text-top;
   flex-shrink: 0;
-}
-
-.devtools-tab > label {
-  white-space: nowrap;
-  margin: 0 4px;
-}
-
-.devtools-tab > img {
   -moz-context-properties: fill;
-  fill: var(--theme-toolbar-color);
+  fill: var(--theme-toolbar-icon-color);
 }
 
 .devtools-tab.selected > img {
   fill: var(--theme-toolbar-selected-color);
 }
 
 .devtools-tab.highlighted > img {
   fill: var(--theme-toolbar-highlighted-color);
 }
 
-#devtools-chevron-menu-button::before {
-  -moz-context-properties: fill;
-  fill: var(--theme-toolbar-photon-icon-color);
-}
-
 /* Toolbox controls */
 
 #tools-chevron-menu-button::before {
-  top: 0;
-  inset-inline-end: 0;
-  background-image: var(--command-chevron-image);
-  background-position: center;
+  background-image: url("chrome://devtools/skin/images/command-chevron.svg");
 }
 
-.tools-chevron-menu:-moz-locale-dir(rtl) {
+#tools-chevron-menu-button:-moz-locale-dir(rtl)::before {
   transform: rotate(180deg);
 }
 
 /* On OSX the cursor turns into a window-resizing cursor at the edges of the
  * window, so bring the end of the toolbox in. */
 :root[platform="mac"] #toolbox-controls {
-  margin-inline-end: 3px;
+  margin-inline-end: 2px;
 }
 
 #toolbox-buttons-start > .devtools-separator {
   --separator-inline-margin: 0;
 }
 
 #toolbox-buttons-end > .devtools-separator {
   --separator-inline-margin: 5px;
 }
 
-#toolbox-close {
-  min-width: 24px;
-}
-
 #toolbox-close::before {
-  fill: var(--theme-toolbar-photon-icon-color);
-  background-image: var(--close-button-image);
-}
-
-#toolbox-meatball-menu-button {
-  min-width: 24px;
+  background-image: url("chrome://devtools/skin/images/close.svg");
 }
 
 #toolbox-meatball-menu-button::before {
-  fill: var(--theme-toolbar-photon-icon-color);
-  background-image: var(--more-button-image);
+  background-image: url("chrome://devtools/skin/images/more.svg");
+}
+
+#toolbox-meatball-menu-dock-bottom {
+  --menuitem-icon-image: url("chrome://devtools/skin/images/dock-bottom.svg");
+}
+
+#toolbox-meatball-menu-dock-left {
+  --menuitem-icon-image: url("chrome://devtools/skin/images/dock-side-left.svg");
+}
+
+#toolbox-meatball-menu-dock-right {
+  --menuitem-icon-image: url("chrome://devtools/skin/images/dock-side-right.svg");
 }
 
-#toolbox-meatball-menu-dock-bottom > .label::before {
-  --menuitem-icon-image: var(--dock-bottom-image);
+#toolbox-meatball-menu-dock-window {
+  --menuitem-icon-image: url("chrome://devtools/skin/images/dock-undock.svg");
 }
-#toolbox-meatball-menu-dock-left > .label::before {
-  --menuitem-icon-image: var(--dock-side-left-image);
-}
-#toolbox-meatball-menu-dock-right > .label::before {
-  --menuitem-icon-image: var(--dock-side-right-image);
+
+#toolbox-meatball-menu-splitconsole {
+  --menuitem-icon-image: url("chrome://devtools/skin/images/command-console.svg");
 }
-#toolbox-meatball-menu-dock-window > .label::before {
-  --menuitem-icon-image: var(--dock-undock-image);
-}
-#toolbox-meatball-menu-splitconsole > .label::before {
-  --menuitem-icon-image: var(--command-console-image);
+
+#toolbox-meatball-menu-noautohide {
+  --menuitem-icon-image: url("chrome://devtools/skin/images/command-noautohide.svg");
 }
-#toolbox-meatball-menu-noautohide > .label::before {
-  --menuitem-icon-image: var(--command-noautohide-image);
-}
-#toolbox-meatball-menu-settings > .label::before {
-  --menuitem-icon-image: var(--settings-image);
+
+#toolbox-meatball-menu-settings {
+  --menuitem-icon-image: url("chrome://devtools/skin/images/settings.svg");
 }
 
 /* Command buttons */
 
 .command-button,
 #toolbox-controls > button,
 .toolbox-tabs-wrapper .tools-chevron-menu {
   /* !important is needed to override .devtools-button rules in common.css */
   padding: 0 !important;
   margin: 0 !important;
   border: none !important;
   border-radius: 0 !important;
   position: relative;
-  min-width: 24px;
+  min-width: 26px;
 }
 
 #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);
+  background-image: url("chrome://devtools/skin/images/command-pick.svg");
 }
 
 #command-button-pick.accessibility::before {
-  background-image: var(--command-pick-accessibility-image);
+  background-image: url("chrome://devtools/skin/images/command-pick-accessibility.svg");
 }
 
 /* Command button images */
 
 #command-button-paintflashing::before {
-  background-image: var(--command-paintflashing-image);
+  background-image: url("chrome://devtools/skin/images/command-paintflashing.svg");
 }
 
 #command-button-screenshot::before {
-  background-image: var(--command-screenshot-image);
+  background-image: url("chrome://devtools/skin/images/command-screenshot.svg");
 }
 
 #command-button-responsive::before {
-  background-image: var(--command-responsive-image);
-  -moz-context-properties: fill, stroke;
-  fill: var(--theme-toolbar-photon-icon-color);
-  stroke: none;
+  background-image: url("chrome://devtools/skin/images/command-responsivemode.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: 0;
 }
 
 #command-button-responsive.checked::before {
-  fill: var(--theme-toolbar-checked-color);
-  stroke: var(--theme-toolbar-checked-color);
+  fill-opacity: 0.15;
+}
+
+.theme-dark #command-button-responsive.checked::before {
+  fill-opacity: 0.25;
 }
 
 #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;
-  background-size: contain;
+  background-image: url("chrome://devtools/skin/images/command-replay.svg");
 }
 
 #command-button-replay,
 #command-button-stop-replay {
   background-color: transparent;
 }
 
 #command-button-replay:hover,
 #command-button-stop-replay:hover {
   background: var(--toolbarbutton-background);
 }
 
-#command-button-stop-replay::before {
-  fill: currentColor;
-}
-
 #command-button-scratchpad::before {
-  background-image: var(--command-scratchpad-image);
-}
-
-#command-button-eyedropper::before {
-  background-image: var(--command-eyedropper-image);
+  background-image: url("chrome://devtools/skin/images/tool-scratchpad.svg");
 }
 
 #command-button-rulers::before {
-  background-image: var(--command-rulers-image);
+  background-image: url("chrome://devtools/skin/images/command-rulers.svg");
 }
 
 #command-button-measure::before {
-  background-image: var(--command-measure-image);
+  background-image: url("chrome://devtools/skin/images/command-measure.svg");
 }
 
 #command-button-frames::before {
-  background-image: var(--command-frames-image);
-  -moz-context-properties: fill, stroke;
-  fill: var(--theme-toolbar-photon-icon-color);
-  stroke: none;
+  background-image: url("chrome://devtools/skin/images/command-frames.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: 0;
 }
 
 #command-button-frames.checked::before {
-  fill: var(--theme-toolbar-checked-color);
-  stroke: var(--theme-toolbar-checked-color);
+  fill-opacity: 0.15;
+}
+
+.theme-dark #command-button-frames.checked::before {
+  fill-opacity: 0.25;
 }
 
 /* Tooltip of frames menu  */
 
 #command-button-frames-panel > .tooltip-panel {
   max-width: 500px;
   overflow-y: auto;
 }
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -18,17 +18,17 @@
   --theme-body-background: white;
   --theme-sidebar-background: white;
   --theme-contrast-background: #e6b064;
 
   /* Toolbar */
   --theme-tab-toolbar-background: var(--grey-10);
   --theme-toolbar-background: var(--grey-10);
   --theme-toolbar-color: var(--grey-90);
-  --theme-toolbar-photon-icon-color: var(--grey-90-a80);
+  --theme-toolbar-icon-color: var(--grey-90-a80);
   --theme-toolbar-selected-color: var(--blue-60);
   --theme-toolbar-checked-color: var(--blue-60);
   --theme-toolbar-highlighted-color: var(--green-60);
   --theme-toolbar-background-hover: rgba(221, 225, 228, 0.66);
   --theme-toolbar-background-alt: #f5f5f5;
   --theme-toolbar-hover: var(--grey-20);
   --theme-toolbar-hover-active: var(--grey-20);
 
@@ -90,18 +90,16 @@
   /* 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;
   --theme-popup-border-color: ThreeDShadow;
   --theme-popup-dimmed: hsla(0,0%,80%,.3);
-
-  --theme-messageCloseButtonFilter: invert(0);
 }
 
 /*
  * For doorhangers elsewhere in Firefox, Mac uses fixed colors rather than
  * system colors.
  */
 :root[platform="mac"].theme-light {
   --theme-popup-background: hsla(0,0%,99%,.975);
@@ -113,17 +111,17 @@
   --theme-body-background: var(--grey-80);
   --theme-sidebar-background: var(--grey-85);
   --theme-contrast-background: #ffb35b;
 
   /* Toolbar */
   --theme-tab-toolbar-background: var(--grey-90);
   --theme-toolbar-background: var(--grey-85);
   --theme-toolbar-color: var(--grey-40);
-  --theme-toolbar-photon-icon-color: var(--grey-40);
+  --theme-toolbar-icon-color: var(--grey-40);
   --theme-toolbar-selected-color: white;
   --theme-toolbar-checked-color: #75BFFF;
   --theme-toolbar-highlighted-color: var(--green-50);
   --theme-toolbar-background-hover: #20232B;
   --theme-toolbar-background-alt: var(--grey-85);
   --theme-toolbar-hover: #252526;
   --theme-toolbar-hover-active: #252526;
 
@@ -185,18 +183,16 @@
   /* 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);
   --theme-popup-border-color: #27272b;
   --theme-popup-dimmed: rgba(249,249,250,.1);
-
-  --theme-messageCloseButtonFilter: invert(1);
 }
 
 :root {
   --theme-focus-border-color-textbox: #0675d3;
   --theme-textbox-box-shadow: rgba(97,181,255,.75);
 
   /* Text sizes */
   --theme-body-font-size: 11px;
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -13,33 +13,33 @@
   /* Width of the left gutter where icons appear */
   --console-inline-start-gutter: 32px;
   /* Icons perfectly centered in the left gutter "feel" closer to the window
    * edge than to message text. This value pushes them slightly to the right. */
   --console-icon-horizontal-offset: 1px;
 }
 
 .theme-dark {
-  --console-input-icon-color: var(--grey-60);
+  --console-input-icon-color: rgba(249, 249, 250, 0.4);
   --console-input-icon-focused: var(--blue-30);
   --console-output-icon-medium-color: var(--grey-50);
   --console-output-icon-strong-color: var(--grey-30);
   --console-output-icon-error-color: var(--red-40);
   --console-output-icon-warning-color: var(--yellow-60);
   --console-output-indent-border-color: var(--theme-highlight-blue);
   --error-color: var(--red-20);
   --error-background-color: hsl(345, 23%, 24%);
   --warning-color: hsl(43, 94%, 81%);
   --warning-background-color: hsl(42, 37%, 19%);
   --console-output-color: white;
   --repeat-bubble-background-color: var(--blue-60);
 }
 
 .theme-light {
-  --console-input-icon-color: var(--grey-40);
+  --console-input-icon-color: rgb(12, 12, 13, 0.4);
   --console-input-icon-focused: var(--blue-55);
   --console-output-icon-medium-color: var(--grey-40);
   --console-output-icon-strong-color: var(--grey-60);
   --console-output-icon-error-color: var(--red-60);
   --console-output-icon-warning-color: var(--yellow-65);
   --console-output-indent-border-color: var(--theme-highlight-blue);
   --error-color: var(--red-70);
   --error-background-color: hsl(344, 73%, 97%);
@@ -584,25 +584,28 @@ a.learn-more-link.webconsole-learn-more-
   grid-row: 1 / 2;
   padding-inline-end: 0;
 }
 
 /* On OSX the cursor turns into a window-resizing cursor at the edges of the
  * window, so bring the end of the close button in. */
 :root[platform="mac"] .split-console-close-button-wrapper,
 :root[platform="mac"] .webconsole-sidebar-toolbar {
-  padding-inline-end: 3px;
+  padding-inline-end: 2px;
 }
 
 #split-console-close-button {
-  margin-inline-end: 0;
   height: 100%;
   margin: 0;
 }
 
+#split-console-close-button::before {
+  background-image: url(chrome://devtools/skin/images/close.svg);
+}
+
 .webconsole-filterbar-primary .devtools-plaininput {
   flex: 1 1 100%;
   align-self: stretch;
   margin-inline-start: 1px;
   padding-inline-start: 4px;
   border: 1px solid transparent;
 }
 
@@ -1016,20 +1019,14 @@ body {
 }
 
 .webconsole-sidebar-toolbar .sidebar-close-button {
   padding: 4px 0;
   margin: 0;
 }
 
 .sidebar-close-button::before {
-  fill: var(--theme-toolbar-photon-icon-color);
   background-image: url(chrome://devtools/skin/images/close.svg);
 }
 
 .sidebar-contents .object-inspector {
   min-width: 100%;
 }
-
-#split-console-close-button::before {
-  fill: var(--theme-toolbar-photon-icon-color);
-  background-image: url(chrome://devtools/skin/images/close.svg);
-}
--- a/devtools/client/webconsole/components/ReverseSearchInput.css
+++ b/devtools/client/webconsole/components/ReverseSearchInput.css
@@ -66,17 +66,17 @@
 .search-result-button-next::before {
   background-image: url("chrome://devtools/skin/images/arrowhead-down.svg");
   background-size: 16px;
   fill: var(--comment-node-color);
 }
 
 .reverse-search-close-button::before {
   fill: var(--comment-node-color);
-  background-image: var(--close-button-image);
+  background-image: url("chrome://devtools/skin/images/close.svg");
 }
 
 .reverse-search.no-result input {
   fill: var(--error-color);
 }
 
 .reverse-search.no-result,
 .reverse-search.no-result input {