Bug 1483782 - Remove old webconsole.svg sprite; r=nchevobbe
authorfvsch <florens@fvsch.com>
Mon, 27 Aug 2018 13:47:06 +0000
changeset 481902 be371572ef392ddcd6cbbb90ffa63aef1a074450
parent 481812 c417b23546673d32a9ad71cda1e90a3201f3240b
child 481903 5ccb4b6527c17cad6ba6ce9441ead357ed9be6c6
push id232
push userfmarier@mozilla.com
push dateWed, 05 Sep 2018 20:45:54 +0000
reviewersnchevobbe
bugs1483782
milestone63.0a1
Bug 1483782 - Remove old webconsole.svg sprite; r=nchevobbe Differential Revision: https://phabricator.services.mozilla.com/D4283
devtools/client/jar.mn
devtools/client/themes/debugger.css
devtools/client/themes/images/webconsole.svg
devtools/client/themes/images/webconsole/alert.svg
devtools/client/themes/images/webconsole/info.svg
devtools/client/themes/jit-optimizations.css
devtools/client/themes/memory.css
devtools/client/themes/performance.css
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -144,17 +144,16 @@ devtools.jar:
     skin/images/command-rulers.svg (themes/images/command-rulers.svg)
     skin/images/command-measure.svg (themes/images/command-measure.svg)
     skin/images/command-noautohide.svg (themes/images/command-noautohide.svg)
     skin/images/command-chevron.svg (themes/images/command-chevron.svg)
     skin/markup.css (themes/markup.css)
     skin/images/editor-error.png (themes/images/editor-error.png)
     skin/images/breakpoint.svg (themes/images/breakpoint.svg)
     skin/webconsole.css (themes/webconsole.css)
-    skin/images/webconsole.svg (themes/images/webconsole.svg)
     skin/images/webconsole/alert.svg (themes/images/webconsole/alert.svg)
     skin/images/webconsole/info.svg (themes/images/webconsole/info.svg)
     skin/images/webconsole/input.svg (themes/images/webconsole/input.svg)
     skin/images/webconsole/return.svg (themes/images/webconsole/return.svg)
     skin/images/breadcrumbs-scrollbutton.svg (themes/images/breadcrumbs-scrollbutton.svg)
     skin/animation.css (themes/animation.css)
     skin/animationinspector.css (themes/animationinspector.css)
     skin/canvasdebugger.css (themes/canvasdebugger.css)
--- a/devtools/client/themes/debugger.css
+++ b/devtools/client/themes/debugger.css
@@ -26,26 +26,27 @@
 /* Sources and breakpoints list */
 
 .dbg-source-item {
   padding: 2px 0px;
 }
 
 .dbg-wasm-item .icon {
   display: block;
-  background-image: url(chrome://devtools/skin/images/webconsole.svg);
-  background-repeat: no-repeat;
-  background-size: 72px 60px;
-  /* show warning icon */
-  background-position: -24px -24px;
   width: 10px;
   height: 10px;
   position: absolute;
   margin-inline-start: -15px;
   margin-top: 3px;
+  /* show warning icon */
+  background-image: var(--theme-console-alert-image);
+  background-repeat: no-repeat;
+  background-size: contain;
+  -moz-context-properties: fill;
+  fill: #ec8633;
 }
 
 .dbg-breakpoint-line {
   font-weight: 600;
 }
 
 .dbg-breakpoint-text {
   padding-inline-start: 6px;
deleted file mode 100644
--- a/devtools/client/themes/images/webconsole.svg
+++ /dev/null
@@ -1,101 +0,0 @@
-<?xml version="1.0" encoding="UTF-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" xmlns:xlink="http://www.w3.org/1999/xlink" width="72" height="60" viewBox="0 0 72 60">
-  <defs>
-    <rect id="glyphShape-colorSwatch" width="8" height="8" ry="2" rx="2"/>
-    <rect id="glyphShape-colorSwatch-border" width="10" height="10" ry="2" rx="2"/>
-    <polygon id="glyphShape-errorX" points="9.9,8.5 8.5,9.9 6,7.4 3.6,9.8 2.2,8.4 4.6,6 2.2,3.6 3.6,2.2 6,4.6 8.4,2.2 9.8,3.6 7.4,6"/>
-    <path id="glyphShape-warningTriangle" d="M9.9,8.6l-3.1-6C6.6,2.2,6.3,2,6,2C5.7,2,5.4,2.2,5.2,2.5l-3.1,6C2,8.9,2,9.3,2.1,9.6C2.3,9.8,2.6,10,2.9,10 h6.1c0.4,0,0.6-0.2,0.8-0.4C10,9.3,10,8.9,9.9,8.6z"/>
-    <path id="glyphShape-exclamationPoint" d="M6,7.7c-0.6,0-1,0.4-1,0.8C5,9,5.4,9.3,6,9.3c0.6,0,1-0.4,1-0.8 C7,8.1,6.6,7.7,6,7.7z M6,7c0.6,0,1-0.4,1-1V5c0-0.6-0.4-1-1-1S5,4.4,5,5v1C5,6.6,5.4,7,6,7z"/>
-    <circle id="glyphShape-infoCircle" cx="6" cy="6" r="4"/>
-    <path id="glyphShape-infoGlyph" d="M6,6C5.4,6,5,6.4,5,7v1c0,0.6,0.4,1,1,1s1-0.4,1-1V7C7,6.4,6.6,6,6,6z M6,5c0.6,0,1-0.4,1-1S6.6,3,6,3S5,3.4,5,4S5.4,5,6,5z"/>
-    <style>
-      .icon-colorSwatch-border {
-        fill: #fff;
-        fill-opacity: .7;
-      }
-      .icon-colorSwatch-network {
-        fill: #000;
-      }
-      .icon-colorSwatch-css {
-        fill: #00b6f0;
-      }
-      .icon-colorSwatch-js {
-        fill: #fb9500;
-      }
-      .icon-colorSwatch-logging {
-        fill: #808080;
-      }
-      .icon-colorSwatch-security {
-        fill: #ec1e0d;
-      }
-      .icon-glyphOverlay {
-        fill: #fff;
-      }
-
-      #icon-indicator-input {
-        fill: #8fa1b2;
-      }
-      #icon-indicator-output {
-        fill: #667380;
-      }
-      #light-icons:target #icon-indicator-input {
-        fill: #45494d;
-      }
-      #light-icons:target #icon-indicator-output {
-        fill: #8a9199;
-      }
-    </style>
-  </defs>
-  <g id="icon-colorSwatch-network">
-    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
-    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-network" x="2" y="2"/>
-  </g>
-  <g id="icon-colorSwatch-css" transform="translate(0 12)">
-    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
-    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-css" x="2" y="2"/>
-  </g>
-  <g id="icon-colorSwatch-js" transform="translate(0 24)">
-    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
-    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-js" x="2" y="2"/>
-  </g>
-  <g id="icon-colorSwatch-logging" transform="translate(0 36)">
-    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
-    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-logging" x="2" y="2"/>
-  </g>
-  <g id="icon-colorSwatch-security" transform="translate(0 48)">
-    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
-    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-security" x="2" y="2"/>
-  </g>
-  <use xlink:href="#glyphShape-errorX" id="icon-errorX-network" class="icon-colorSwatch-network" transform="translate(12)"/>
-  <use xlink:href="#glyphShape-errorX" id="icon-errorX-css" class="icon-colorSwatch-css" transform="translate(12 12)"/>
-  <use xlink:href="#glyphShape-errorX" id="icon-errorX-js" class="icon-colorSwatch-js" transform="translate(12 24)"/>
-  <use xlink:href="#glyphShape-errorX" id="icon-errorX-logging" class="icon-colorSwatch-logging" transform="translate(12 36)"/>
-  <use xlink:href="#glyphShape-errorX" id="icon-errorX-security" class="icon-colorSwatch-security" transform="translate(12 48)"/>
-  <g id="icon-warningTriangle-css" transform="translate(24 12)">
-    <use xlink:href="#glyphShape-warningTriangle" class="icon-colorSwatch-css"/>
-    <use xlink:href="#glyphShape-exclamationPoint" class="icon-glyphOverlay"/>
-  </g>
-  <g id="icon-warningTriangle-js" transform="translate(24 24)">
-    <use xlink:href="#glyphShape-warningTriangle" class="icon-colorSwatch-js"/>
-    <use xlink:href="#glyphShape-exclamationPoint" class="icon-glyphOverlay"/>
-  </g>
-  <g id="icon-warningTriangle-logging" transform="translate(24 36)">
-    <use xlink:href="#glyphShape-warningTriangle" class="icon-colorSwatch-logging"/>
-    <use xlink:href="#glyphShape-exclamationPoint" class="icon-glyphOverlay"/>
-  </g>
-  <g id="icon-warningTriangle-security" transform="translate(24 48)">
-    <use xlink:href="#glyphShape-warningTriangle" class="icon-colorSwatch-security"/>
-    <use xlink:href="#glyphShape-exclamationPoint" class="icon-glyphOverlay"/>
-  </g>
-  <g id="icon-infoCircle-logging" transform="translate(36 36)">
-    <use xlink:href="#glyphShape-infoCircle" class="icon-colorSwatch-logging"/>
-    <use xlink:href="#glyphShape-infoGlyph" class="icon-glyphOverlay"/>
-  </g>
-  <g id="light-icons">
-    <path id="icon-indicator-input" d="M6.5,1.2L5.4,2.3L9,6L5.3,9.7l1.1,1.1L11,6L6.5,1.2z M1.5,1.2 L0.4,2.3L4,6L0.3,9.7l1.1,1.1L6,6L1.5,1.2z" transform="translate(48 36)"/>
-    <polygon id="icon-indicator-output" points="10,5 4.3,5 6.8,2.4 5.5,1.2 1,6 5.5,10.8 6.9,9.6 4.3,7 10,7" transform="translate(60 36)"/>
-  </g>
-</svg>
\ No newline at end of file
--- a/devtools/client/themes/images/webconsole/alert.svg
+++ b/devtools/client/themes/images/webconsole/alert.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-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 12 12" fill="context-fill #0b0b0b">
-  <path d="M1.12 9.4L5 1.6c.41-.81 1.58-.81 2 0l3.88 7.78a1.11 1.11 0 0 1-1 1.61H2.11a1.11 1.11 0 0 1-1-1.6zM6 8.4c-.55 0-1 .4-1 .9s.45.9 1 .9 1-.4 1-.9-.45-.9-1-.9zm0-4.9c-.55 0-1 .36-1 .8v2.4c0 .44.45.8 1 .8s1-.36 1-.8V4.3c0-.44-.45-.8-1-.8z"/>
+  <path d="M1.12 9.4L5 1.6c.41-.81 1.58-.81 2 0l3.88 7.78a1.11 1.11 0 0 1-1 1.61H2.11a1.11 1.11 0 0 1-1-1.6zM6 7.8a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-4.4a1 1 0 0 0-1 1V6a1 1 0 1 0 2 0V4.4a1 1 0 0 0-1-1z" />
 </svg>
--- a/devtools/client/themes/images/webconsole/info.svg
+++ b/devtools/client/themes/images/webconsole/info.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-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 12 12" fill="context-fill #0b0b0b">
-  <path d="M6 1a5 5 0 1 1 0 10A5 5 0 0 1 6 1zm0 1.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0 3c.55 0 1 .36 1 .8v2.4c0 .44-.45.8-1 .8s-1-.36-1-.8V6.3c0-.44.45-.8 1-.8z" fill-rule="evenodd"/>
+  <path d="M6 1a5 5 0 1 1 0 10A5 5 0 0 1 6 1zm0 1.6a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0 2.8a1 1 0 0 0-1 1V8a1 1 0 1 0 2 0V6.4a1 1 0 0 0-1-1z"/>
 </svg>
--- a/devtools/client/themes/jit-optimizations.css
+++ b/devtools/client/themes/jit-optimizations.css
@@ -70,39 +70,32 @@
 
 #jit-optimizations-view .optimization-outcome.success {
   color: var(--theme-highlight-green);
 }
 #jit-optimizations-view .optimization-outcome.failure {
   color: var(--theme-highlight-red);
 }
 
-.theme-dark .opt-icon::before {
-  background-image: url(chrome://devtools/skin/images/webconsole.svg);
-}
-.theme-light .opt-icon::before {
-  background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
-}
-
 .opt-icon::before {
+  content: "";
   display: inline-block;
-  content: "";
+  vertical-align: -2px;
+  width: 12px;
+  height: 12px;
+  max-height: 12px;
+  margin-inline-end: 5px;
+  background-image: var(--theme-console-info-image);
   background-repeat: no-repeat;
-  background-size: 72px 60px;
-  /* show grey "i" bubble by default */
-  background-position: -36px -36px;
-  width: 10px;
-  height: 10px;
-  max-height: 12px;
-}
-
-.opt-icon::before {
-  margin: 1px 6px 0 0;
+  background-size: contain;
+  -moz-context-properties: fill;
+  fill: #808080;
 }
 
 .opt-icon.warning::before {
-  background-position: -24px -24px;
+  background-image: var(--theme-console-alert-image);
+  fill: #ec8633;
 }
 
 /* Frame Component */
 .frame-link {
   margin-inline-start: 7px;
 }
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -552,30 +552,26 @@ html, body, #app, #memory-tool {
 
 /**
  * Heap tree errors.
  */
 
 .error::before {
   content: "";
   display: inline-block;
+  vertical-align: -2px;
   width: 12px;
   height: 12px;
   max-height: 12px;
-  background-image: url(chrome://devtools/skin/images/webconsole.svg);
-  background-size: 72px 60px;
-  background-position: -24px -24px;
+  margin-inline-end: 5px;
+  background-image: var(--theme-console-alert-image);
   background-repeat: no-repeat;
-  margin: 0px;
-  margin-top: 2px;
-  margin-inline-end: 5px;
-}
-
-.theme-light .error::before {
-  background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
+  background-size: contain;
+  -moz-context-properties: fill;
+  fill: #ec8633;
 }
 
 /**
  * Frame View components
  */
 
 .separator,
 .not-available,
--- a/devtools/client/themes/performance.css
+++ b/devtools/client/themes/performance.css
@@ -756,29 +756,27 @@ menuitem.marker-color-graphs-grey .menu-
  * preference being applied or removed.
  */
 
 /**
  * devtools.performance.ui.experimental
  */
 menuitem.experimental-option::before {
   content: "";
-  background-image: url(chrome://devtools/skin/images/webconsole.svg);
-  background-repeat: no-repeat;
-  background-size: 72px 60px;
+  display: inline-block;
   width: 12px;
   height: 12px;
-  display: inline-block;
-
-  background-position: -24px -24px;
-  margin: 2px 5px 0 0;
   max-height: 12px;
-}
-.theme-light menuitem.experimental-option::before {
-  background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
+  margin-top: 2px;
+  margin-inline-end: 5px;
+  background-image: var(--theme-console-alert-image);
+  background-repeat: no-repeat;
+  background-size: contain;
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 #performance-options-menupopup:not(.experimental-enabled) .experimental-option,
 #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before {
   display: none;
 }
 
 /* for call tree */