Bug 1483782 - Remove old webconsole.svg sprite; r=nchevobbe
authorfvsch <florens@fvsch.com>
Mon, 27 Aug 2018 13:47:06 +0000
changeset 433480 be371572ef39
parent 433479 c417b2354667
child 433481 5ccb4b6527c1
push id68336
push usernchevobbe@mozilla.com
push dateMon, 27 Aug 2018 13:47:44 +0000
treeherderautoland@be371572ef39 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1483782
milestone63.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 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 */