Bug 1507715 - Update console error, warning and info icons; r=nchevobbe
authorFlorens Verschelde <florens@fvsch.com>
Tue, 20 Nov 2018 06:21:46 +0000
changeset 503623 b544791562a00b465a4180ca7b2f793dd26601c8
parent 503622 492c7f2cb6d0802c150544f2e3f186d90bb6de31
child 503624 a575162d9f5bce53f2cbf6aa0f9c817258df7ca9
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1507715
milestone65.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 1507715 - Update console error, warning and info icons; r=nchevobbe - Add a new 12px round icon for Console errors. - Update the warning (triangle) icon to use the same 12px size. - Update the info icon to use the same 12px size, and differentiate its design from the error icon. - Tweak the Console's input and return icons to be a tiny bit bigger (for better overall visual balance) and crisper @1x. Differential Revision: https://phabricator.services.mozilla.com/D12250
devtools/client/aboutdebugging/aboutdebugging.css
devtools/client/jar.mn
devtools/client/themes/common.css
devtools/client/themes/images/alert.svg
devtools/client/themes/images/checkbox.svg
devtools/client/themes/images/devtools-components/checkbox.svg
devtools/client/themes/images/webconsole/error.svg
devtools/client/themes/images/webconsole/info.svg
devtools/client/themes/images/webconsole/input.svg
devtools/client/themes/images/webconsole/jump.svg
devtools/client/themes/images/webconsole/return.svg
devtools/client/themes/webconsole.css
--- a/devtools/client/aboutdebugging/aboutdebugging.css
+++ b/devtools/client/aboutdebugging/aboutdebugging.css
@@ -178,23 +178,23 @@ button {
 }
 
 .service-worker-multi-process .update-button {
   margin: 5px 0;
 }
 
 .warning {
   display: inline-block;
-  width: 16px;
-  height: 16px;
-  vertical-align: -2px;
-  margin-inline-end: 6px;
+  width: 12px;
+  height: 12px;
+  vertical-align: 0;
+  margin-inline-end: 8px;
   background-image: url(chrome://devtools/skin/images/alert.svg);
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: contain;
   -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. */
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -87,21 +87,24 @@ 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/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)
     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)
     skin/images/aboutdebugging-firefox-aurora.svg (themes/images/aboutdebugging-firefox-aurora.svg)
     skin/images/aboutdebugging-firefox-beta.svg (themes/images/aboutdebugging-firefox-beta.svg)
     skin/images/aboutdebugging-firefox-logo.svg (themes/images/aboutdebugging-firefox-logo.svg)
     skin/images/aboutdebugging-firefox-nightly.svg (themes/images/aboutdebugging-firefox-nightly.svg)
@@ -134,16 +137,17 @@ 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/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/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/perf.css (themes/perf.css)
@@ -262,12 +266,8 @@ devtools.jar:
     content/netmonitor/src/assets/icons/play.svg (netmonitor/src/assets/icons/play.svg)
     content/netmonitor/src/assets/icons/shield.svg (netmonitor/src/assets/icons/shield.svg)
     content/netmonitor/index.html (netmonitor/index.html)
     content/netmonitor/src/assets/styles/StatusCode.css (netmonitor/src/assets/styles/StatusCode.css)
 
     # Application panel
     content/application/index.html (application/index.html)
 
-    # Devtools-components
-    skin/images/arrow.svg (themes/images/arrow.svg)
-    skin/images/arrow-big.svg (themes/images/arrow-big.svg)
-    skin/images/devtools-components/checkbox.svg (themes/images/devtools-components/checkbox.svg)
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -702,17 +702,17 @@ checkbox:-moz-focusring {
 
 .theme-checkbox {
   display: inline-block;
   width: 14px;
   height: 14px;
   border: 0;
   padding: 0;
   outline: none;
-  background-image: url("chrome://devtools/skin/images/devtools-components/checkbox.svg");
+  background-image: url("chrome://devtools/skin/images/checkbox.svg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: 14px 14px;
   /* Using fill to paint the border, and stroke for the tick */
   -moz-context-properties: fill, stroke;
   fill: rgba(0,0,0,.3);
   stroke: transparent;
 }
--- 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" 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+  <path fill="context-fill #0b0b0b" fill-rule="evenodd" 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>
rename from devtools/client/themes/images/devtools-components/checkbox.svg
rename to devtools/client/themes/images/checkbox.svg
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/webconsole/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 12 12" fill="context-fill #0b0b0b">
+  <path fill-rule="evenodd" d="M12 6A6 6 0 1 1 0 6a6 6 0 0 1 12 0zM5.75 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-.5zM5 6c0 .54.46 1 1 1s1-.46 1-1V3.15c0-.54-.46-1-1-1s-1 .46-1 1V6z"/>
+</svg>
--- a/devtools/client/themes/images/webconsole/info.svg
+++ b/devtools/client/themes/images/webconsole/info.svg
@@ -1,6 +1,7 @@
 <!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+  <circle cx="6" cy="6" r="5.5" fill="none" opacity="0.8" stroke="context-fill"/>
+  <path d="M7 8a1 1 0 0 1-2 0V6.25a1 1 0 0 1 2 0V8zM7 3.5c0 .45-.45.8-1 .8s-1-.35-1-.8c0-.45.45-.8 1-.8s1 .35 1 .8z" fill="context-fill #0b0b0b"/>
 </svg>
--- a/devtools/client/themes/images/webconsole/input.svg
+++ b/devtools/client/themes/images/webconsole/input.svg
@@ -1,7 +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" 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+  <path fill="none" stroke="context-fill" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M1.7 1.85L5.85 6L1.7 10.15 M6.7 1.85L10.85 6L6.7 10.15"/>
 </svg>
--- a/devtools/client/themes/images/webconsole/jump.svg
+++ b/devtools/client/themes/images/webconsole/jump.svg
@@ -1,15 +1,7 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
-    <title>Group 7</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Group-7" transform="translate(1.000000, 1.000000)">
-            <g id="Group-6">
-                <circle id="Oval-2" stroke="#0274E8" cx="8" cy="8" r="8"></circle>
-                <polygon id="Triangle" fill="#0274E8" transform="translate(9.000000, 8.000000) rotate(90.000000) translate(-9.000000, -8.000000) " points="9 5 13 11 5 11"></polygon>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<!-- 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 viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  <circle fill="none" stroke="#0274E8" cx="9" cy="9" r="8"/>
+  <path fill="#0274E8" d="M13 9l-6 4V5z"/>
+</svg>
--- a/devtools/client/themes/images/webconsole/return.svg
+++ b/devtools/client/themes/images/webconsole/return.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" 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+  <path fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.15 10.15L2 6L6.15 1.85 M3 6H10"/>
 </svg>
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -190,23 +190,23 @@ a {
 }
 
 .message.result > .icon {
   color: var(--console-output-icon-medium-color);
   background-image: url(chrome://devtools/skin/images/webconsole/return.svg);
 }
 
 .message.info > .icon {
-  color: var(--console-output-icon-medium-color);
+  color: var(--console-output-icon-strong-color);
   background-image: url(chrome://devtools/skin/images/webconsole/info.svg);
 }
 
 .message.error > .icon {
   color: var(--console-output-icon-error-color);
-  background-image: url(chrome://devtools/skin/images/alert.svg);
+  background-image: url(chrome://devtools/skin/images/webconsole/error.svg);
 }
 
 .message.warn > .icon {
   color: var(--console-output-icon-warning-color);
   background-image: url(chrome://devtools/skin/images/alert.svg);
 }
 
 .message.navigationMarker > .icon {