Bug 1490491 - Part 1: replace alerticon-warning.png with console alert icon; r=pbro,ntim
authorfvsch <florens@fvsch.com>
Mon, 22 Oct 2018 14:46:42 +0000
changeset 490809 7ba9450d21ade786b4a58b93ca33f78c40f95a67
parent 490808 af5911ba3ef205b86a210bc101bbecfd4f12ebf9
child 490810 aa099aca82bde28ed9f8031b41d942b6be7ad0cf
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewerspbro, ntim
bugs1490491
milestone65.0a1
Bug 1490491 - Part 1: replace alerticon-warning.png with console alert icon; r=pbro,ntim Differential Revision: https://phabricator.services.mozilla.com/D5952
devtools/client/aboutdebugging/aboutdebugging.css
devtools/client/jar.mn
devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
devtools/client/themes/debugger.css
devtools/client/themes/images/alert.svg
devtools/client/themes/images/alerticon-warning.png
devtools/client/themes/images/alerticon-warning@2x.png
devtools/client/themes/images/webconsole/alert.svg
devtools/client/themes/images/webconsole/info.svg
devtools/client/themes/images/webconsole/input.svg
devtools/client/themes/images/webconsole/return.svg
devtools/client/themes/jit-optimizations.css
devtools/client/themes/memory.css
devtools/client/themes/performance.css
devtools/client/themes/rules.css
devtools/client/themes/variables.css
devtools/client/themes/webaudioeditor.css
devtools/client/themes/webconsole.css
--- a/devtools/client/aboutdebugging/aboutdebugging.css
+++ b/devtools/client/aboutdebugging/aboutdebugging.css
@@ -177,35 +177,33 @@ button {
   line-height: 1.5em;
 }
 
 .service-worker-multi-process .update-button {
   margin: 5px 0;
 }
 
 .warning {
-  background-image: url(chrome://devtools/skin/images/alerticon-warning.png);
-  background-size: 13px 12px;
   display: inline-block;
-  width: 13px;
-  height: 12px;
-  margin-inline-end: 10px;
-}
-
-@media (min-resolution: 1.1dppx) {
-  .warning {
-    background-image: url(chrome://devtools/skin/images/alerticon-warning@2x.png);
-  }
+  width: 16px;
+  height: 16px;
+  vertical-align: -2px;
+  margin-inline-end: 6px;
+  background-image: url(chrome://devtools/skin/images/alert.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  -moz-context-properties: fill;
+  fill: #d7b600;
 }
 
 .addons-install-error .warning,
 .service-worker-multi-process .warning {
   /* The warning icon can be hard to see on red / yellow backgrounds, this turns the icon
   to a black icon. */
-  filter: brightness(0%);
+  fill: #0c0c0d;
 }
 
 .addons-options {
   flex: 1;
 }
 
 .service-worker-disabled-label,
 .addons-debugging-label,
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -101,16 +101,17 @@ devtools.jar:
     skin/devtools-browser.css (themes/devtools-browser.css)
     skin/dark-theme.css (themes/dark-theme.css)
     skin/light-theme.css (themes/light-theme.css)
     skin/toolbars.css (themes/toolbars.css)
     skin/toolbox.css (themes/toolbox.css)
     skin/tooltips.css (themes/tooltips.css)
     skin/images/accessibility.svg (themes/images/accessibility.svg)
     skin/images/add.svg (themes/images/add.svg)
+    skin/images/alert.svg (themes/images/alert.svg)
     skin/images/arrowhead-left.svg (themes/images/arrowhead-left.svg)
     skin/images/arrowhead-down.svg (themes/images/arrowhead-down.svg)
     skin/images/arrowhead-up.svg (themes/images/arrowhead-up.svg)
     skin/images/breadcrumbs-divider.svg (themes/images/breadcrumbs-divider.svg)
     skin/images/filters.svg (themes/images/filters.svg)
     skin/images/filter-swatch.svg (themes/images/filter-swatch.svg)
     skin/images/aboutdebugging-collapse-icon.svg (themes/images/aboutdebugging-collapse-icon.svg)
     skin/images/aboutdebugging-connect-icon.svg (themes/images/aboutdebugging-connect-icon.svg)
@@ -134,18 +135,16 @@ devtools.jar:
     skin/images/performance-details-flamegraph.svg (themes/images/performance-details-flamegraph.svg)
     skin/breadcrumbs.css (themes/breadcrumbs.css)
     skin/chart.css (themes/chart.css)
     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/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/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-replay.svg (themes/images/command-replay.svg)
     skin/images/command-pick.svg (themes/images/command-pick.svg)
     skin/images/command-pick-accessibility.svg (themes/images/command-pick-accessibility.svg)
     skin/images/command-frames.svg (themes/images/command-frames.svg)
@@ -155,17 +154,16 @@ devtools.jar:
     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/webconsole/globe.svg (themes/images/webconsole/globe.svg)
     skin/images/breakpoint.svg (themes/images/breakpoint.svg)
     skin/webconsole.css (themes/webconsole.css)
-    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/webconsole/jump.svg (themes/images/webconsole/jump.svg)
     skin/images/breadcrumbs-scrollbutton.svg (themes/images/breadcrumbs-scrollbutton.svg)
     skin/animation.css (themes/animation.css)
     skin/canvasdebugger.css (themes/canvasdebugger.css)
     skin/debugger.css (themes/debugger.css)
--- a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
@@ -373,28 +373,24 @@
 }
 
 /* Layout additional warning icon in tree value cell  */
 .network-monitor .security-info-value {
   display: flex;
 }
 
 .network-monitor .security-warning-icon {
-  background-image: url(chrome://devtools/skin/images/alerticon-warning.png);
-  background-size: 13px 12px;
-  margin-inline-start: 5px;
-  vertical-align: top;
-  width: 13px;
+  width: 12px;
   height: 12px;
-}
-
-@media (min-resolution: 1.1dppx) {
-  .network-monitor .security-warning-icon {
-    background-image: url(chrome://devtools/skin/images/alerticon-warning@2x.png);
-  }
+  vertical-align: -1px;
+  margin-inline-start: 5px;
+  background-image: url(chrome://devtools/skin/images/alert.svg);
+  background-size: cover;
+  -moz-context-properties: fill;
+  fill: var(--yellow-60);
 }
 
 /* Custom request panel */
 
 .network-monitor .custom-request-panel {
   height: 100%;
   overflow: auto;
   padding: 0 4px;
--- a/devtools/client/themes/debugger.css
+++ b/devtools/client/themes/debugger.css
@@ -32,21 +32,21 @@
 .dbg-wasm-item .icon {
   display: block;
   width: 10px;
   height: 10px;
   position: absolute;
   margin-inline-start: -15px;
   margin-top: 3px;
   /* show warning icon */
-  background-image: var(--theme-console-alert-image);
+  background-image: url(chrome://devtools/skin/images/alert.svg);
   background-repeat: no-repeat;
   background-size: contain;
   -moz-context-properties: fill;
-  fill: #ec8633;
+  fill: var(--yellow-60);
 }
 
 .dbg-breakpoint-line {
   font-weight: 600;
 }
 
 .dbg-breakpoint-text {
   padding-inline-start: 6px;
@@ -281,17 +281,17 @@
   max-height: 125px;
 }
 
 .dbg-expression {
   height: 20px;
 }
 
 .dbg-expression-arrow {
-  background-image: var(--theme-console-input-image);
+  background-image: url(chrome://devtools/skin/images/webconsole/input.svg);
   width: 12px;
   height: 12px;
   margin: 4px;
   -moz-context-properties: fill;
   fill: #75BFFF;
 }
 
 .theme-light .dbg-expression-arrow {
rename from devtools/client/themes/images/webconsole/alert.svg
rename to devtools/client/themes/images/alert.svg
--- a/devtools/client/themes/images/webconsole/alert.svg
+++ b/devtools/client/themes/images/alert.svg
@@ -1,7 +1,6 @@
-<?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 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>
deleted file mode 100644
index 1ef7bdc6b3c69a09c2e4cdbae8607861637eb3a1..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index d0f502d1896e2404b53e14768c43080c5b41f827..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/devtools/client/themes/images/webconsole/info.svg
+++ b/devtools/client/themes/images/webconsole/info.svg
@@ -1,7 +1,6 @@
-<?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.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/images/webconsole/input.svg
+++ b/devtools/client/themes/images/webconsole/input.svg
@@ -1,8 +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="M11.04 5.46L7.29 1.71a.75.75 0 0 0-1.06 1.06L9.45 6 6.23 9.21a.75.75 0 1 0 1.06 1.06l3.75-3.75c.3-.3.3-.77 0-1.06z"/>
   <path d="M6.04 5.46L2.29 1.71a.75.75 0 0 0-1.06 1.06L4.45 6 1.23 9.21a.75.75 0 1 0 1.06 1.06l3.75-3.75c.3-.3.3-.77 0-1.06z"/>
 </svg>
--- a/devtools/client/themes/images/webconsole/return.svg
+++ b/devtools/client/themes/images/webconsole/return.svg
@@ -1,7 +1,6 @@
-<?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="M3.87 5.25h5.88a.75.75 0 1 1 0 1.5H3.89l2.46 2.46a.75.75 0 1 1-1.06 1.06L1.54 6.52a.75.75 0 0 1 0-1.06l3.75-3.75a.75.75 0 0 1 1.06 1.06L3.87 5.25z"/>
 </svg>
--- a/devtools/client/themes/jit-optimizations.css
+++ b/devtools/client/themes/jit-optimizations.css
@@ -78,24 +78,24 @@
 .opt-icon::before {
   content: "";
   display: inline-block;
   vertical-align: -2px;
   width: 12px;
   height: 12px;
   max-height: 12px;
   margin-inline-end: 5px;
-  background-image: var(--theme-console-info-image);
+  background-image: url(chrome://devtools/skin/images/webconsole/info.svg);
   background-repeat: no-repeat;
   background-size: contain;
   -moz-context-properties: fill;
   fill: #808080;
 }
 
 .opt-icon.warning::before {
-  background-image: var(--theme-console-alert-image);
-  fill: #ec8633;
+  background-image: url(chrome://devtools/skin/images/alert.svg);
+  fill: var(--yellow-60);
 }
 
 /* Frame Component */
 .frame-link {
   margin-inline-start: 7px;
 }
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -557,21 +557,21 @@ html, body, #app, #memory-tool {
 .error::before {
   content: "";
   display: inline-block;
   vertical-align: -2px;
   width: 12px;
   height: 12px;
   max-height: 12px;
   margin-inline-end: 5px;
-  background-image: var(--theme-console-alert-image);
+  background-image: url(chrome://devtools/skin/images/alert.svg);
   background-repeat: no-repeat;
   background-size: contain;
   -moz-context-properties: fill;
-  fill: #ec8633;
+  fill: var(--yellow-60);
 }
 
 /**
  * Frame View components
  */
 
 .separator,
 .not-available,
--- a/devtools/client/themes/performance.css
+++ b/devtools/client/themes/performance.css
@@ -762,17 +762,17 @@ menuitem.marker-color-graphs-grey .menu-
 menuitem.experimental-option::before {
   content: "";
   display: inline-block;
   width: 12px;
   height: 12px;
   max-height: 12px;
   margin-top: 2px;
   margin-inline-end: 5px;
-  background-image: var(--theme-console-alert-image);
+  background-image: url(chrome://devtools/skin/images/alert.svg);
   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 {
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -318,28 +318,24 @@
   float: left;
   left: -38px;
   box-sizing: content-box;
   border-left: 10px solid transparent;
   background-clip: content-box;
 }
 
 .ruleview-warning {
-  background-image: url(images/alerticon-warning.png);
-  background-size: 13px 12px;
-  margin-inline-start: 5px;
   display: inline-block;
-  width: 13px;
+  width: 12px;
   height: 12px;
-}
-
-@media (min-resolution: 1.1dppx) {
-  .ruleview-warning {
-    background-image: url(images/alerticon-warning@2x.png);
-  }
+  margin-inline-start: 5px;
+  background-image: url(chrome://devtools/skin/images/alert.svg);
+  background-size: cover;
+  -moz-context-properties: fill;
+  fill: var(--yellow-60);
 }
 
 .ruleview-rule:not(:hover) .ruleview-enableproperty {
   visibility: hidden;
 }
 
 .ruleview-expander {
   vertical-align: middle;
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -212,22 +212,16 @@
 
   /* The photon animation curve */
   --animation-curve: cubic-bezier(.07,.95,0,1);
 
   /* Images */
   --select-arrow-image: url(chrome://devtools/skin/images/select-arrow.svg);
   --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
   --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
-  --theme-console-alert-image: url(chrome://devtools/skin/images/webconsole/alert.svg);
-  --theme-console-navigation-image: url(chrome://devtools/skin/images/webconsole/globe.svg);
-  --theme-console-info-image: url(chrome://devtools/skin/images/webconsole/info.svg);
-  --theme-console-input-image: url(chrome://devtools/skin/images/webconsole/input.svg);
-  --theme-console-return-image: url(chrome://devtools/skin/images/webconsole/return.svg);
-  --theme-console-jump-image: url(chrome://devtools/skin/images/webconsole/jump.svg);
 
   /* Firefox Colors CSS Variables v1.0.3
    * Colors are taken from: https://github.com/FirefoxUX/design-tokens
    * Some intermediate colors were added (names ending in '5').
    */
   --magenta-50: #ff1ad9;
   --magenta-65: #dd00a9;
   --magenta-70: #b5007f;
--- a/devtools/client/themes/webaudioeditor.css
+++ b/devtools/client/themes/webaudioeditor.css
@@ -119,18 +119,20 @@ text {
   display: none;
 }
 
 #web-audio-inspector-title {
   margin: 6px;
 }
 
 .web-audio-inspector .error {
-  background-image: url(images/alerticon-warning.png);
-  background-size: 13px 12px;
+  background-image: url(chrome://devtools/skin/images/alert.svg);
+  background-size: 12px 12px;
+  -moz-context-properties: fill;
+  fill: var(--yellow-60);
   -moz-appearance: none;
   opacity: 0;
   transition: opacity .5s ease-out 0s;
 }
 
 #inspector-pane-toggle {
   background: none;
   box-shadow: none;
@@ -156,22 +158,16 @@ text {
   background-color: var(--theme-selection-background);
 }
 
 #automation-graph {
   overflow: hidden;
   -moz-box-flex: 1;
 }
 
-@media (min-resolution: 1.1dppx) {
-  .web-audio-inspector .error {
-    background-image: url(images/alerticon-warning@2x.png);
-  }
-}
-
 /**
  * Inspector toolbar
  */
 
 #audio-node-toolbar .bypass {
   list-style-image: url(images/power.svg);
 }
 
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -183,47 +183,46 @@ a {
 .message > .indent[data-indent="0"] + .icon {
   width: 24px;
   margin-inline-start: var(--console-icon-horizontal-offset);
   margin-inline-end: calc(4px - var(--console-icon-horizontal-offset));
 }
 
 .message.command > .icon {
   color: var(--console-output-icon-input);
-  background-image: var(--theme-console-input-image);
+  background-image: url(chrome://devtools/skin/images/webconsole/input.svg);
 }
 
 .message.result > .icon {
   color: var(--console-output-icon-info);
-  background-image: var(--theme-console-return-image);
+  background-image: url(chrome://devtools/skin/images/webconsole/return.svg);
 }
 
 .message.info > .icon {
   color: var(--console-output-icon-info);
-  background-image: var(--theme-console-info-image);
+  background-image: url(chrome://devtools/skin/images/webconsole/info.svg);
 }
 
 .message.error > .icon {
   color: var(--console-output-icon-error);
-  background-image: var(--theme-console-alert-image);
+  background-image: url(chrome://devtools/skin/images/alert.svg);
 }
 
 .message.warn > .icon {
   color: var(--console-output-icon-warning);
-  background-image: var(--theme-console-alert-image);
+  background-image: url(chrome://devtools/skin/images/alert.svg);
 }
 
 .message.navigationMarker > .icon {
   color: var(--object-color);
-  background-image: var(--theme-console-navigation-image);
+  background-image: url(chrome://devtools/skin/images/webconsole/globe.svg);
 }
 
-
 .message:hover > .icon.rewindable {
-  background-image:var(--theme-console-jump-image);
+  background-image: url(chrome://devtools/skin/images/webconsole/jump.svg);
   background-size: 14px 14px;
   cursor: pointer;
 }
 
 .message > .message-body-wrapper {
   flex: auto;
   min-width: 0px;
   margin: var(--console-output-vertical-padding) 0;
@@ -377,17 +376,17 @@ html #webconsole-notificationbox {
   position: relative;
 }
 
 .jsterm-input-node {
   box-sizing: border-box;
   min-height: 100%;
   color: var(--theme-content-color1);
   /* input icon */
-  background-image: var(--theme-console-input-image);
+  background-image: url(chrome://devtools/skin/images/webconsole/input.svg);
   background-position-x: calc(10px + var(--console-icon-horizontal-offset));
   background-position-y: 7px;
   background-repeat: no-repeat;
   background-size: 12px 12px;
   -moz-context-properties: fill;
   fill: var(--console-input-icon-color);
 }
 
@@ -432,17 +431,17 @@ textarea.jsterm-input-node:focus {
 
 /* CodeMirror-powered JsTerm */
 .jsterm-cm .jsterm-input-container > .CodeMirror {
   font-size: var(--console-output-font-size);
   line-height: var(--console-output-line-height);
   /* aim for a 32px left space (a descendent has 4px padding) */
   padding-inline-start: calc(var(--console-inline-start-gutter) - 4px);
   /* input icon */
-  background-image: var(--theme-console-input-image);
+  background-image: url(chrome://devtools/skin/images/webconsole/input.svg);
   background-position-x: calc(10px + var(--console-icon-horizontal-offset));
   background-position-y: 5px;
   background-repeat: no-repeat;
   background-size: 12px 12px;
   -moz-context-properties: fill;
   fill: var(--console-input-icon-color);
 }