--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -164,18 +164,17 @@ devtools.jar:
     skin/images/animation-fast-track.svg (themes/images/animation-fast-track.svg)
     skin/images/performance-icons.svg (themes/images/performance-icons.svg)
     skin/widgets.css (themes/widgets.css)
     skin/images/power.svg (themes/images/power.svg)
     skin/images/filetypes/dir-close.svg (themes/images/filetypes/dir-close.svg)
     skin/images/filetypes/dir-open.svg (themes/images/filetypes/dir-open.svg)
     skin/images/filetypes/globe.svg (themes/images/filetypes/globe.svg)
     skin/images/filetypes/store.svg (themes/images/filetypes/store.svg)
-    skin/images/commandline-icon.png (themes/images/commandline-icon.png)
-    skin/images/commandline-icon@2x.png (themes/images/commandline-icon@2x.png)
+    skin/images/commandline-icon.svg (themes/images/commandline-icon.svg)
     skin/images/alerticon-warning.png (themes/images/alerticon-warning.png)
     skin/images/alerticon-warning@2x.png (themes/images/alerticon-warning@2x.png)
     skin/rules.css (themes/rules.css)
     skin/commandline.css (themes/commandline.css)
     skin/images/command-paintflashing.svg (themes/images/command-paintflashing.svg)
     skin/images/command-screenshot.svg (themes/images/command-screenshot.svg)
     skin/images/command-responsivemode.svg (themes/images/command-responsivemode.svg)
     skin/images/command-scratchpad.svg (themes/images/command-scratchpad.svg)

--- a/devtools/client/themes/commandline.inc.css
+++ b/devtools/client/themes/commandline.inc.css
@@ -12,26 +12,30 @@
 :root[devtoolstheme="light"] #developer-toolbar {
   --gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */
   --gcli-input-background: #fcfcfc; /* --theme-toolbar-background */
   --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */
   --gcli-input-color: #393f4c; /* --theme-body-color */
   --gcli-border-color: #dde1e4; /* --theme-splitter-color */
   --selection-background: #4c9ed9; /* --theme-selection-background */
   --selection-color: #f5f7fa; /* --theme-selection-color */
+  --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
+  --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
 }
 
 :root[devtoolstheme="dark"] #developer-toolbar {
   --gcli-background-color: #272b35; /* --theme-toolbar-background */
   --gcli-input-background: #272b35; /* --theme-tab-toolbar-background */
   --gcli-input-focused-background: #272b35; /* --theme-tab-toolbar-background */
   --gcli-input-color: #b6babf; /* --theme-body-color-alt */
   --gcli-border-color: #454d5d; /* --theme-splitter-color */
   --selection-background: #5675b9; /* --theme-selection-background */
   --selection-color: #f5f7fa; /* --theme-selection-color */
+  --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme); /* --theme-command-line-image */
+  --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus); /* --theme-command-line-image-focus */
 }
 
 #developer-toolbar {
   -moz-appearance: none;
   padding: 0;
   min-height: 32px;
   background-color: var(--gcli-background-color);
   border-top: 1px solid var(--gcli-border-color);
@@ -155,29 +159,21 @@ html|*#gcli-output-frame {
 
 .gclitoolbar-input-node::before {
   content: "";
   display: inline-block;
   -moz-box-ordinal-group: 0;
   width: 16px;
   height: 16px;
   margin: 0 2px;
-  background-image: url("chrome://devtools/skin/images/commandline-icon.png");
-  background-position: 0 center;
-  background-size: 32px 16px;
+  background-image: var(--command-line-image);
 }
 
 .gclitoolbar-input-node[focused="true"]::before {
-  background-position: -16px center;
-}
-
-@media (min-resolution: 1.1dppx) {
-  .gclitoolbar-input-node::before {
-    background-image: url("chrome://devtools/skin/images/commandline-icon@2x.png");
-  }
+  background-image: var(--command-line-image-focus);
 }
 
 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
   background-color: var(--selection-background);
   color: var(--selection-color);
   text-shadow: none;
 }
 

--- a/devtools/client/themes/debugger.css
+++ b/devtools/client/themes/debugger.css
@@ -345,31 +345,22 @@
   max-height: 125px;
 }
 
 .dbg-expression {
   height: 20px;
 }
 
 .dbg-expression-arrow {
-  background-image: url(images/commandline-icon.png);
-  background-position: -16px 0;
-  background-repeat: no-repeat;
-  background-size: 32px 16px;
+  background-image: var(--theme-command-line-image-focus);
   width: 16px;
   height: 16px;
   margin: 2px;
 }
 
-@media (min-resolution: 1.1dppx) {
-  .dbg-expression-arrow {
-    background-image: url(images/commandline-icon@2x.png);
-  }
-}
-
 .dbg-expression-input {
   color: inherit;
 }
 
 .dbg-expression-button {
   -moz-appearance: none;
   border: none;
   background: none;

deleted file mode 100644
index e51f67f137e49e26ee0aa4400b99bb05ecfdb09e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/commandline-icon.svg
@@ -0,0 +1,42 @@
+<!-- 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="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style>
+      g {
+        display: none;
+      }
+
+      #light-theme:target,
+      #light-theme-focus:target ~ #light-theme,
+      #dark-theme:target,
+      #dark-theme-focus:target ~ #dark-theme {
+        display: inline;
+      }
+
+      #light-theme-focus:target ~ #light-theme {
+        fill: #4A90E2;
+      }
+      #dark-theme-focus:target ~ #dark-theme {
+        fill: #00FF7F;
+      }
+
+      /* Unfocused states */
+      #light-theme,
+      #dark-theme {
+        fill: rgba(128, 128, 128, .5);
+      }
+    </style>
+  </defs>
+  <g id="light-theme-focus"/>
+  <g id="light-theme">
+    <path d="M7.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
+    <path d="M2.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
+  </g>
+  <g id="dark-theme-focus"/>
+  <g id="dark-theme">
+    <path d="M7.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
+    <path d="M2.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
+  </g>
+</svg>
\ No newline at end of file

deleted file mode 100644
index 407fdae8c93c5ad6ba942c62884babc950ab208b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

--- a/devtools/client/themes/images/firebug/commandline-icon.svg
+++ b/devtools/client/themes/images/firebug/commandline-icon.svg
@@ -1,18 +1,26 @@
 <!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14">
   <defs>
+    <style>
+      path {
+        opacity: 0.5;
+      }
+      path:target {
+        opacity: 1;
+      }
+    </style>
     <linearGradient id="b">
       <stop offset="0" stop-color="#234ccd"/>
       <stop offset="1" stop-color="#5d7de3"/>
     </linearGradient>
     <linearGradient id="a">
       <stop offset="0" stop-color="#1e3faa"/>
       <stop offset="1" stop-color="#3a61de"/>
     </linearGradient>
     <linearGradient x1="2.002" y1="12.252" x2="-.099" y2="6.755" id="d" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="translate(5.841 1034.646)"/>
     <linearGradient x1="3.309" y1="11.177" x2="1.468" y2="6.456" id="c" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="translate(5.841 1034.646)"/>
   </defs>
-  <path d="M6.841 1040.052l-.437.406 2.469 3.688-2.47 3.687.438.407 3.438-4.094z" fill="url(#c)" stroke="url(#d)" stroke-width=".4" stroke-linecap="round" stroke-linejoin="round" transform="translate(-1.341 -1037.146)"/>
+  <path id="focus" d="M6.841 1040.052l-.437.406 2.469 3.688-2.47 3.687.438.407 3.438-4.094z" fill="url(#c)" stroke="url(#d)" stroke-width=".4" stroke-linecap="round" stroke-linejoin="round" transform="translate(-1.341 -1037.146)"/>
 </svg>

--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -63,16 +63,20 @@
   /* Images */
   --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
   --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
 
   /* Tooltips */
   --theme-tooltip-border: #d9e1e8;
   --theme-tooltip-background: rgba(255, 255, 255, .9);
   --theme-tooltip-shadow: rgba(155, 155, 155, 0.26);
+
+  /* Command line */
+  --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme);
+  --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus);
 }
 
 :root.theme-dark {
   --theme-body-background: #393f4c;
   --theme-sidebar-background: #393f4c;
   --theme-contrast-background: #ffb35b;
 
   --theme-tab-toolbar-background: #272b35;
@@ -119,16 +123,20 @@
   /* Images */
   --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
   --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
 
   /* Tooltips */
   --theme-tooltip-border: #434850;
   --theme-tooltip-background: rgba(19, 28, 38, .9);
   --theme-tooltip-shadow: rgba(25, 25, 25, 0.76);
+
+  /* Command line */
+  --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme);
+  --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus);
 }
 
 :root.theme-firebug {
   --theme-body-background: #fcfcfc;
   --theme-sidebar-background: #fcfcfc;
   --theme-contrast-background: #e6b064;
 
   --theme-tab-toolbar-background: #ebeced;
@@ -173,21 +181,23 @@
 
   /* Font size */
   --theme-toolbar-font-size: 12px;
 
   /* Header */
   --theme-header-background: #F0F0F0 linear-gradient(to top,
                                                      rgba(0, 0, 0, 0.1),
                                                      transparent) repeat-x;
+
+  /* Command line */
+  --theme-command-line-image: url(chrome://devtools/skin/images/firebug/commandline-icon.svg);
+  --theme-command-line-image-focus: url(chrome://devtools/skin/images/firebug/commandline-icon.svg#focus);
 }
 
 :root {
   --theme-focus-border-color-textbox: #0675d3;
   --theme-textbox-box-shadow: rgba(97,181,255,.75);
 
   /* For accessibility purposes we want to enhance the focus styling. This
    * should improve keyboard navigation usability. */
   --theme-focus-outline: 1px dotted var(--theme-focus-outline-color);
   --theme-focus-box-shadow-textbox: 0 0 0 1px var(--theme-textbox-box-shadow);
-  --theme-focus-box-shadow-inset-bottom: 0 -2px 1px var(--theme-textbox-box-shadow) inset,
-    0px -2px var(--theme-highlight-blue) inset;
 }

--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -1,28 +1,14 @@
 /* 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/. */
 
 /* Webconsole specific theme variables */
-
-.theme-dark {
-  --command-line-image: -moz-image-rect(url("chrome://devtools/skin/images/commandline-icon.png"), 0, 32, 16, 16);
-  --command-line-image-2x: -moz-image-rect(url('chrome://devtools/skin/images/commandline-icon@2x.png'), 0, 64, 32, 32);
-}
-
-.theme-light {
-  --command-line-image: -moz-image-rect(url("chrome://devtools/skin/images/commandline-icon.png"), 0, 32, 16, 16);
-  --command-line-image-2x: -moz-image-rect(url('chrome://devtools/skin/images/commandline-icon@2x.png'), 0, 64, 32, 32);
-}
-
 .theme-firebug {
-  --command-line-image: url(chrome://devtools/skin/images/firebug/commandline-icon.svg);
-  --command-line-image-2x: url(chrome://devtools/skin/images/firebug/commandline-icon.svg);
-
   --error-color: #FF0000;
   --error-background-color: #FFEBEB;
   --warning-background-color: #FFFFC8;
 }
 
 /* General output styles */
 
 a {
@@ -409,43 +395,35 @@ a {
   padding: 0;
   padding-inline-start: 20px;
   margin: 0;
   -moz-appearance: none;
   background-color: transparent;
 }
 
 .jsterm-input-node[focused="true"] {
-  outline: var(--theme-focus-outline);
-  outline-offset: -1px;
-  transition: none;
+  background-image: var(--theme-command-line-image-focus);
   box-shadow: none;
 }
 
 .jsterm-complete-node {
   color: var(--theme-comment);
 }
 
 .jsterm-input-node {
   /* Always allow scrolling on input - it auto expands in js by setting height,
      but don't want it to get bigger than the window. 24px = toolbar height. */
   max-height: calc(90vh - 24px);
-  background-image: var(--command-line-image);
+  background-image: var(--theme-command-line-image);
   background-repeat: no-repeat;
   background-size: 16px 16px;
   background-position: 4px 50%;
   color: var(--theme-content-color1);
 }
 
-@media (min-resolution: 1.1dppx) {
-  .jsterm-input-node {
-    background-image: var(--command-line-image-2x);
-  }
-}
-
 :-moz-any(.jsterm-input-node,
           .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
   overflow-x: hidden;
   /* Set padding for console input on textbox to make sure it is inlcuded in
      scrollHeight that is used when resizing JSTerminal's input. Note: textbox
      default style has important already */
   padding: 4px 0 !important;
 }