Bug 1044050 - Update the console sprite sheets to use SVG and new input/output icons;r=past

browser/themes/linux/jar.mn

@@ -301,8 +301,7 @@ browser.jar:
 * skin/classic/browser/devtools/ruleview.css          (../shared/devtools/ruleview.css)
 * skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
   skin/classic/browser/devtools/webconsole_networkpanel.css     (devtools/webconsole_networkpanel.css)
-  skin/classic/browser/devtools/webconsole.png                  (../shared/devtools/images/webconsole.png)
+  skin/classic/browser/devtools/webconsole.svg                  (../shared/devtools/images/webconsole.svg)
-  skin/classic/browser/devtools/webconsole@2x.png               (../shared/devtools/images/webconsole@2x.png)
   skin/classic/browser/devtools/commandline.css              (../shared/devtools/commandline.css)
   skin/classic/browser/devtools/markup-view.css       (../shared/devtools/markup-view.css)
   skin/classic/browser/devtools/editor-error.png       (../shared/devtools/images/editor-error.png)

browser/themes/osx/jar.mn

@@ -419,8 +419,7 @@ browser.jar:
   skin/classic/browser/devtools/editor-debug-location@2x.png    (../shared/devtools/images/editor-debug-location@2x.png)
 * skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
   skin/classic/browser/devtools/webconsole_networkpanel.css     (devtools/webconsole_networkpanel.css)
-  skin/classic/browser/devtools/webconsole.png                  (../shared/devtools/images/webconsole.png)
+  skin/classic/browser/devtools/webconsole.svg                  (../shared/devtools/images/webconsole.svg)
-  skin/classic/browser/devtools/webconsole@2x.png               (../shared/devtools/images/webconsole@2x.png)
   skin/classic/browser/devtools/breadcrumbs-divider@2x.png      (../shared/devtools/images/breadcrumbs-divider@2x.png)
   skin/classic/browser/devtools/breadcrumbs-scrollbutton.png    (../shared/devtools/images/breadcrumbs-scrollbutton.png)
   skin/classic/browser/devtools/breadcrumbs-scrollbutton@2x.png (../shared/devtools/images/breadcrumbs-scrollbutton@2x.png)

browser/themes/shared/devtools/images/webconsole.svg

@@ -0,0 +1,101 @@
+<?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>

browser/themes/shared/devtools/performance.inc.css

@@ -639,25 +639,24 @@ menuitem.marker-color-graphs-blue:before,
 
 #jit-optimizations-view .opt-icon::before {
   content: "";
-  background-image: url(chrome://browser/skin/devtools/webconsole.png);
+  background-image: url(chrome://browser/skin/devtools/webconsole.svg);
   background-repeat: no-repeat;
-  background-size: 48px 40px;
+  background-size: 72px 60px;
-  margin: 5px 6px 0 0;
+  width: 12px;
-  width: 8px;
+  height: 12px;
-  height: 8px;
-  max-height: 8px;
   display: inline-block;
+
+  margin: 5px 6px 0 0;
+  max-height: 12px;
+}
+.theme-light #jit-optimizations-view .opt-icon::before {
+  background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons);
 }
 
 #jit-optimizations-view .opt-icon[severity=warning]::before {
-  background-position: -16px -16px;
+  background-position: -24px -24px;
 }
 
-@media (min-resolution: 1.25dppx) {
-  #jit-optimizations-view .opt-icon::before {
-    background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);
-  }
-}
 
 /**
  * Configurable Options
@@ -671,21 +670,21 @@ menuitem.marker-color-graphs-blue:before,
  */
 menuitem.experimental-option::before {
   content: "";
-  background-image: url(chrome://browser/skin/devtools/webconsole.png);
+  background-image: url(chrome://browser/skin/devtools/webconsole.svg);
   background-repeat: no-repeat;
-  background-size: 48px 40px;
+  background-size: 72px 60px;
-  margin: 2px 5px 0 0;
+  width: 12px;
-  width: 8px;
+  height: 12px;
-  height: 8px;
-  max-height: 8px;
   display: inline-block;
-  background-position: -16px -16px;
+
+  background-position: -24px -24px;
+  margin: 2px 5px 0 0;
+  max-height: 12px;
 }
-@media (min-resolution: 1.25dppx) {
+.theme-light menuitem.experimental-option::before {
-  menuitem.experimental-option::before {
+  background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons);
-    background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);
-  }
 }
+
 #performance-options-menupopup:not(.experimental-enabled) .experimental-option,
 #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before {
   display: none;

browser/themes/shared/devtools/webconsole.inc.css

@@ -44,19 +44,17 @@ a {
 
 .message > .icon::before {
   content: "";
-  background-image: url(chrome://browser/skin/devtools/webconsole.png);
+  background-image: url(chrome://browser/skin/devtools/webconsole.svg);
-  background-position: 8px 8px;
+  background-position: 12px 12px;
   background-repeat: no-repeat;
-  background-size: 48px 40px;
+  background-size: 72px 60px;
-  width: 8px;
+  width: 12px;
-  height: 8px;
+  height: 12px;
   display: inline-block;
 }
 
-@media (min-resolution: 1.25dppx) {
+.theme-light .message > .icon::before {
-  .message > .icon::before {
+  background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons);
-    background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);
-  }
 }
 
 .message > .message-body-wrapper {
@@ -228,7 +226,7 @@ a {
 }
 
 .message[category=network][severity=error] > .icon::before {
-  background-position: -8px 0;
+  background-position: -12px 0;
 }
 
 .message[category=network] > .message-body {
@@ -285,11 +283,11 @@ a {
 }
 
 .message[category=cssparser][severity=error] > .icon::before {
-  background-position: -8px -8px;
+  background-position: -12px -12px;
 }
 
 .message[category=cssparser][severity=warn] > .icon::before {
-  background-position: -16px -8px;
+  background-position: -24px -12px;
 }
 
 /* JS styles */
@@ -303,11 +301,11 @@ a {
 }
 
 .message[category=exception][severity=error] > .icon::before {
-  background-position: -8px -16px;
+  background-position: -12px -24px;
 }
 
 .message[category=exception][severity=warn] > .icon::before {
-  background-position: -16px -16px;
+  background-position: -24px -24px;
 }
 
 /* Web Developer styles */
@@ -322,15 +320,15 @@ a {
 
 .message[category=console][severity=error] > .icon::before,
 .message[category=output][severity=error] > .icon::before {
-  background-position: -8px -24px;
+  background-position: -12px -36px;
 }
 
 .message[category=console][severity=warn] > .icon::before {
-  background-position: -16px -24px;
+  background-position: -24px -36px;
 }
 
 .message[category=console][severity=info] > .icon::before {
-  background-position: -24px -24px;
+  background-position: -36px -36px;
 }
 
 /* Input and output styles */
@@ -340,11 +338,11 @@ a {
 }
 
 .message[category=input] > .icon::before {
-  background-position: -32px -24px;
+  background-position: -48px -36px;
 }
 
 .message[category=output] > .icon::before {
-  background-position: -40px -24px;
+  background-position: -60px -36px;
 }
 
 /* JSTerm Styles */
@@ -411,11 +409,11 @@ a {
 }
 
 .message[category=security][severity=error] > .icon::before {
-  background-position: -8px -32px;
+  background-position: -12px -48px;
 }
 
 .message[category=security][severity=warn] > .icon::before {
-  background-position: -16px -32px;
+  background-position: -24px -48px;
 }
 
 .navigation-marker {

browser/themes/windows/jar.mn

@@ -400,8 +400,7 @@ browser.jar:
         skin/classic/browser/devtools/editor-debug-location@2x.png     (../shared/devtools/images/editor-debug-location@2x.png)
 *       skin/classic/browser/devtools/webconsole.css                (devtools/webconsole.css)
         skin/classic/browser/devtools/webconsole_networkpanel.css   (devtools/webconsole_networkpanel.css)
-        skin/classic/browser/devtools/webconsole.png                (../shared/devtools/images/webconsole.png)
+        skin/classic/browser/devtools/webconsole.svg                (../shared/devtools/images/webconsole.svg)
-        skin/classic/browser/devtools/webconsole@2x.png             (../shared/devtools/images/webconsole@2x.png)
         skin/classic/browser/devtools/breadcrumbs-divider@2x.png    (../shared/devtools/images/breadcrumbs-divider@2x.png)
         skin/classic/browser/devtools/breadcrumbs-scrollbutton.png  (../shared/devtools/images/breadcrumbs-scrollbutton.png)
         skin/classic/browser/devtools/breadcrumbs-scrollbutton@2x.png (../shared/devtools/images/breadcrumbs-scrollbutton@2x.png)