Bug 1552067 - move common error/warning/error icons to devtools/client/themes/images/. r=nchevobbe,fvsch
☠☠ backed out by f27417c692ba ☠ ☠
authorYura Zenevich <yura.zenevich@gmail.com>
Wed, 03 Jul 2019 17:26:43 +0000
changeset 481136 2cee1703625eefbb52552a688cbf60d9a91f5154
parent 481135 98eb0b753429a9da45154a18c3779e7840c72619
child 481137 d60bcc3b1c7228a7b6a560501364d83a45b750ed
push id36234
push useropoprus@mozilla.com
push dateThu, 04 Jul 2019 03:31:17 +0000
treeherdermozilla-central@8ad5fbc5b935 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe, fvsch
bugs1552067
milestone69.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 1552067 - move common error/warning/error icons to devtools/client/themes/images/. r=nchevobbe,fvsch Differential Revision: https://phabricator.services.mozilla.com/D35496
devtools/client/aboutdebugging/aboutdebugging.css
devtools/client/jar.mn
devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
devtools/client/themes/images/alert-small.svg
devtools/client/themes/images/alert.svg
devtools/client/themes/images/error-small.svg
devtools/client/themes/images/error.svg
devtools/client/themes/images/info-small.svg
devtools/client/themes/images/info.svg
devtools/client/themes/images/webconsole/error.svg
devtools/client/themes/images/webconsole/info.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/webconsole.css
--- a/devtools/client/aboutdebugging/aboutdebugging.css
+++ b/devtools/client/aboutdebugging/aboutdebugging.css
@@ -199,17 +199,17 @@ button {
 }
 
 .warning {
   display: inline-block;
   width: 12px;
   height: 12px;
   vertical-align: 0;
   margin-inline-end: 8px;
-  background-image: url(chrome://devtools/skin/images/alert.svg);
+  background-image: url(chrome://devtools/skin/images/alert-small.svg);
   background-repeat: no-repeat;
   background-size: contain;
 }
 
 .addons-install-error__additional-errors {
   font-family: monospace;
   font-size: 13px;
   margin-block: 8px;
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -64,17 +64,22 @@ devtools.jar:
     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/alert-small.svg (themes/images/alert-small.svg)
     skin/images/alert-tiny.svg (themes/images/alert-tiny.svg)
+    skin/images/error.svg (themes/images/error.svg)
+    skin/images/error-small.svg (themes/images/error-small.svg)
+    skin/images/info.svg (themes/images/info.svg)
+    skin/images/info-small.svg (themes/images/info-small.svg)
     skin/images/arrow.svg (themes/images/arrow.svg)
     skin/images/arrow-big.svg (themes/images/arrow-big.svg)
     skin/images/arrowhead-left.svg (themes/images/arrowhead-left.svg)
     skin/images/arrowhead-right.svg (themes/images/arrowhead-right.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/checkbox.svg (themes/images/checkbox.svg)
@@ -117,18 +122,16 @@ devtools.jar:
     skin/images/command-eyedropper.svg (themes/images/command-eyedropper.svg)
     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/images/rules-view-print-simulation.svg (themes/images/rules-view-print-simulation.svg)
     skin/markup.css (themes/markup.css)
     skin/webconsole.css (themes/webconsole.css)
-    skin/images/webconsole/error.svg (themes/images/webconsole/error.svg)
-    skin/images/webconsole/info.svg (themes/images/webconsole/info.svg)
     skin/images/webconsole/input.svg (themes/images/webconsole/input.svg)
     skin/images/webconsole/navigation.svg (themes/images/webconsole/navigation.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/perf.css (themes/perf.css)
     skin/performance.css (themes/performance.css)
     skin/memory.css (themes/memory.css)
--- a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
@@ -470,17 +470,17 @@
   display: flex;
 }
 
 .network-monitor .security-warning-icon {
   width: 12px;
   height: 12px;
   vertical-align: -1px;
   margin-inline-start: 5px;
-  background-image: url(chrome://devtools/skin/images/alert.svg);
+  background-image: url(chrome://devtools/skin/images/alert-small.svg);
   background-size: cover;
   -moz-context-properties: fill;
   fill: var(--yellow-60);
 }
 
 /* Custom request panel */
 
 .network-monitor .custom-request-panel {
copy from devtools/client/themes/images/alert.svg
copy to devtools/client/themes/images/alert-small.svg
--- a/devtools/client/themes/images/alert.svg
+++ b/devtools/client/themes/images/alert.svg
@@ -1,6 +1,6 @@
 <!-- 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" width="12" height="12">
-  <path fill="context-fill" d="M6 0a1 1 0 0 1 .89.54l5 9.6A1 1 0 0 1 11 11.6H1a1 1 0 0 1-.89-1.46l5-9.6A1 1 0 0 1 6 0zm-.25 8a.75.75 0 0 0-.75.75v.5c0 .41.34.75.75.75h.5c.41 0 .75-.34.75-.75v-.5A.75.75 0 0 0 6.25 8h-.5zM7 3.7a1 1 0 1 0-2 0v2.6a1 1 0 1 0 2 0V3.7z" />
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M14.742 12.106L9.789 2.2a2 2 0 0 0-3.578 0l-4.953 9.91A2 2 0 0 0 3.047 15h9.905a2 2 0 0 0 1.79-2.894zM7 5a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0zm1 8.25A1.25 1.25 0 1 1 9.25 12 1.25 1.25 0 0 1 8 13.25z" />
 </svg>
rename from devtools/client/themes/images/webconsole/error.svg
rename to devtools/client/themes/images/error-small.svg
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/error.svg
@@ -0,0 +1,6 @@
+<!-- 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 16 16" width="16" height="16">
+  <path fill="context-fill" fill-rule="evenodd" d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm0-3.429a1.143 1.143 0 1 0 0-2.285 1.143 1.143 0 0 0 0 2.285zm0-3.428c.631 0 1.143-.512 1.143-1.143V4.571a1.143 1.143 0 0 0-2.286 0V8c0 .631.512 1.143 1.143 1.143z"/>
+</svg>
rename from devtools/client/themes/images/webconsole/info.svg
rename to devtools/client/themes/images/info-small.svg
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/info.svg
@@ -0,0 +1,6 @@
+<!-- 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" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M8 1a7 7 0 1 0 7 7 7.008 7.008 0 0 0-7-7zm0 13a6 6 0 1 1 6-6 6.007 6.007 0 0 1-6 6zm0-7a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0V8a1 1 0 0 0-1-1zm0-3.188A1.188 1.188 0 1 0 9.188 5 1.188 1.188 0 0 0 8 3.812z" />
+</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: url(chrome://devtools/skin/images/webconsole/info.svg);
+  background-image: url(chrome://devtools/skin/images/info-small.svg);
   background-repeat: no-repeat;
   background-size: contain;
   -moz-context-properties: fill;
   fill: #808080;
 }
 
 .opt-icon.warning::before {
-  background-image: url(chrome://devtools/skin/images/alert.svg);
+  background-image: url(chrome://devtools/skin/images/alert-small.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
@@ -575,17 +575,17 @@ 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: url(chrome://devtools/skin/images/alert.svg);
+  background-image: url(chrome://devtools/skin/images/alert-small.svg);
   background-repeat: no-repeat;
   background-size: contain;
   -moz-context-properties: fill;
   fill: var(--yellow-60);
 }
 
 /**
  * Frame View components
--- a/devtools/client/themes/performance.css
+++ b/devtools/client/themes/performance.css
@@ -770,17 +770,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: url(chrome://devtools/skin/images/alert.svg);
+  background-image: url(chrome://devtools/skin/images/alert-small.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
@@ -366,24 +366,24 @@
   width: 12px;
   height: 12px;
   background-size: 12px;
   background-repeat: no-repeat;
   -moz-context-properties: fill;
 }
 
 .ruleview-warning {
-  background-image: url(chrome://devtools/skin/images/alert.svg);
+  background-image: url(chrome://devtools/skin/images/alert-small.svg);
   fill: var(--yellow-60);
 }
 
 .ruleview-unused-warning {
-  background-image: url(chrome://devtools/skin/images/webconsole/info.svg);
+  background-image: url(chrome://devtools/skin/images/info-small.svg);
   background-color: var(--theme-sidebar-background);
-  fill: var(--theme-icon-dimmed-color);  
+  fill: var(--theme-icon-dimmed-color);
 }
 
 .ruleview-unused-warning:hover {
   fill: var(--theme-icon-color);
   stroke: var(--theme-icon-color);
 }
 
 .ruleview-rule:not(:hover) .ruleview-enableproperty {
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -45,16 +45,18 @@
   --theme-splitter-color: var(--grey-25);
   --theme-emphasized-splitter-color: var(--grey-30);
   --theme-emphasized-splitter-color-hover: var(--grey-40);
 
   /* Icon colors */
   --theme-icon-color: rgba(12, 12, 13, 0.8);
   --theme-icon-dimmed-color: rgba(135, 135, 137, 0.9);
   --theme-icon-checked-color: var(--blue-60);
+  --theme-icon-error-color: var(--red-60);
+  --theme-icon-warning-color: var(--yellow-65);
 
   /* Text color */
   --theme-comment: var(--grey-50);
   --theme-body-color: var(--grey-70);
   --theme-text-color-alt: var(--grey-50);
   --theme-text-color-inactive: var(--grey-40);
   --theme-text-color-strong: var(--grey-90);
 
@@ -146,16 +148,18 @@
   --theme-splitter-color: var(--grey-70);
   --theme-emphasized-splitter-color: var(--grey-60);
   --theme-emphasized-splitter-color-hover: var(--grey-50);
 
   /* Icon colors */
   --theme-icon-color: rgba(249, 249, 250, 0.7);
   --theme-icon-dimmed-color: rgba(147, 147, 149, 0.9);
   --theme-icon-checked-color: var(--blue-30);
+  --theme-icon-error-color: var(--red-40);
+  --theme-icon-warning-color: var(--yellow-60);
 
   /* Text color */
   --theme-comment: var(--grey-45);
   --theme-body-color: var(--grey-40);
   --theme-text-color-alt: var(--grey-45);
   --theme-text-color-inactive: var(--grey-50);
   --theme-text-color-strong: var(--grey-30);
 
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -16,21 +16,19 @@
 .theme-dark {
   --console-input-background: var(--theme-tab-toolbar-background);
   --console-message-background: var(--theme-body-background);
   --console-message-border: var(--theme-splitter-color);
   --console-message-color: var(--theme-text-color-strong);
   --console-error-background: hsl(345, 23%, 24%);
   --console-error-border: hsl(345, 30%, 35%);
   --console-error-color: var(--red-20);
-  --console-error-icon-color: var(--red-40);
   --console-warning-background: hsl(42, 37%, 19%);
   --console-warning-border: hsl(60, 30%, 26%);
   --console-warning-color: hsl(43, 94%, 81%);
-  --console-warning-icon-color: var(--yellow-60);
   --console-navigation-color: var(--theme-highlight-blue);
   --console-navigation-border: var(--blue-60);
   --console-indent-border-color: var(--theme-highlight-blue);
   --console-repeat-bubble-background: var(--blue-60);
 
   /* TODO in bug 1549195: colors used in shared components (e.g. Reps) should
      be renamed and/or moved to variables.css so they work everywhere */
   --error-color: var(--red-20);
@@ -40,21 +38,19 @@
 .theme-light {
   --console-input-background: var(--theme-body-background);
   --console-message-background: var(--theme-body-background);
   --console-message-border: #f2f2f4; /* between Grey 10 and Grey 20 */
   --console-message-color: var(--theme-text-color-strong);
   --console-error-background: hsl(344, 73%, 97%);
   --console-error-border: rgba(215, 0, 34, 0.12); /* Red 60 + opacity */
   --console-error-color: var(--red-70);
-  --console-error-icon-color: var(--red-60);
   --console-warning-background: hsl(54, 100%, 92%);
   --console-warning-border: rgba(215, 182, 0, 0.28); /* Yellow 60 + opacity */
   --console-warning-color: var(--yellow-80);
-  --console-warning-icon-color: var(--yellow-65);
   --console-navigation-color: var(--theme-highlight-blue);
   --console-navigation-border: var(--blue-30);
   --console-indent-border-color: var(--theme-highlight-blue);
   --console-repeat-bubble-background: var(--theme-highlight-blue);
 
   /* TODO in bug 1549195: colors used in shared components (e.g. Reps) should
      be renamed and/or moved to variables.css so they work everywhere */
   --error-color: var(--red-70);
@@ -275,27 +271,27 @@ a {
 
 .message.result > .icon {
   color: var(--theme-icon-dimmed-color);
   background-image: url(chrome://devtools/skin/images/webconsole/return.svg);
 }
 
 .message.info > .icon {
   color: var(--theme-icon-color);
-  background-image: url(chrome://devtools/skin/images/webconsole/info.svg);
+  background-image: url(chrome://devtools/skin/images/info-small.svg);
 }
 
 .message.error > .icon {
-  color: var(--console-error-icon-color);
-  background-image: url(chrome://devtools/skin/images/webconsole/error.svg);
+  color: var(--theme-icon-error-color);
+  background-image: url(chrome://devtools/skin/images/error-small.svg);
 }
 
 .message.warn > .icon {
-  color: var(--console-warning-icon-color);
-  background-image: url(chrome://devtools/skin/images/alert.svg);
+  color: var(--theme-icon-warning-color);
+  background-image: url(chrome://devtools/skin/images/alert-small.svg);
 }
 
 .message.navigationMarker > .icon {
   color: var(--console-navigation-color);
   background-image: url(chrome://devtools/skin/images/webconsole/navigation.svg);
 }
 
 .message:hover > .icon.rewindable {