Bug 1549185 - Tweak the 12px Console icons; r=Honza
authorFlorens Verschelde <florens@fvsch.com>
Mon, 06 May 2019 11:32:38 +0000
changeset 472723 9ee20b0dcecdfc7a111bf04f743110503b359936
parent 472722 b3f31aa87d0d11690a169368e39c8f07edf4ea88
child 472724 d8ffe8e990fb8c34a5d1dfc7c3ce0f5a1a31f8ba
push id113042
push useropoprus@mozilla.com
push dateMon, 06 May 2019 22:36:56 +0000
treeherdermozilla-inbound@a52b0d5b0f94 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1549185
milestone68.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 1549185 - Tweak the 12px Console icons; r=Honza - Use an explicit 12x12 size in the SVG code - Add a 12x12 variant of the globe icon, with a 1px stroke similar to the info icon - Tweak the inner shapes of the info icon so that it looks a bit more clearly like a lowercase "i" Differential Revision: https://phabricator.services.mozilla.com/D29961
devtools/client/jar.mn
devtools/client/themes/images/alert.svg
devtools/client/themes/images/globe.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/navigation.svg
devtools/client/themes/images/webconsole/return.svg
devtools/client/themes/webconsole.css
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -112,16 +112,17 @@ devtools.jar:
     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)
     skin/scratchpad.css (themes/scratchpad.css)
     skin/storage.css (themes/storage.css)
--- 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">
-  <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 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>
--- a/devtools/client/themes/images/globe.svg
+++ b/devtools/client/themes/images/globe.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 16 16" fill="context-fill #0b0b0b">
-  <path d="M8 0a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm5.16 4.96h-1.55a7.7 7.7 0 0 0-1.05-2.38 6.03 6.03 0 0 1 2.6 2.38zM14 8a5.96 5.96 0 0 1-.34 1.96h-1.82A12.33 12.33 0 0 0 12 8a12.33 12.33 0 0 0-.16-1.96h1.82A5.96 5.96 0 0 1 14 8zm-6 6c-1.07 0-2.04-1.2-2.57-2.96h5.14C10.04 12.8 9.07 14 8 14zM5.17 9.96a11.08 11.08 0 0 1 0-3.92h5.66A11.11 11.11 0 0 1 11 8a11.11 11.11 0 0 1-.17 1.96zM2 8a5.96 5.96 0 0 1 .34-1.96h1.82a12.36 12.36 0 0 0 0 3.92H2.33A5.96 5.96 0 0 1 2 8zm6-6c1.07 0 2.04 1.2 2.57 2.96H5.43C5.96 3.2 6.93 2 8 2zm-2.56.58a7.7 7.7 0 0 0-1.05 2.38H2.84a6.03 6.03 0 0 1 2.6-2.38zm-2.6 8.46h1.55a7.7 7.7 0 0 0 1.05 2.38 6.03 6.03 0 0 1-2.6-2.38zm7.72 2.38a7.7 7.7 0 0 0 1.05-2.38h1.56a6.03 6.03 0 0 1-2.61 2.38z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path fill="context-fill" d="M8 0a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm5.16 4.96h-1.55a7.7 7.7 0 0 0-1.05-2.38 6.03 6.03 0 0 1 2.6 2.38zM14 8a5.96 5.96 0 0 1-.34 1.96h-1.82A12.33 12.33 0 0 0 12 8a12.33 12.33 0 0 0-.16-1.96h1.82A5.96 5.96 0 0 1 14 8zm-6 6c-1.07 0-2.04-1.2-2.57-2.96h5.14C10.04 12.8 9.07 14 8 14zM5.17 9.96a11.08 11.08 0 0 1 0-3.92h5.66A11.11 11.11 0 0 1 11 8a11.11 11.11 0 0 1-.17 1.96zM2 8a5.96 5.96 0 0 1 .34-1.96h1.82a12.36 12.36 0 0 0 0 3.92H2.33A5.96 5.96 0 0 1 2 8zm6-6c1.07 0 2.04 1.2 2.57 2.96H5.43C5.96 3.2 6.93 2 8 2zm-2.56.58a7.7 7.7 0 0 0-1.05 2.38H2.84a6.03 6.03 0 0 1 2.6-2.38zm-2.6 8.46h1.55a7.7 7.7 0 0 0 1.05 2.38 6.03 6.03 0 0 1-2.6-2.38zm7.72 2.38a7.7 7.7 0 0 0 1.05-2.38h1.56a6.03 6.03 0 0 1-2.61 2.38z"/>
 </svg>
--- a/devtools/client/themes/images/webconsole/error.svg
+++ b/devtools/client/themes/images/webconsole/error.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 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12">
+  <path fill="context-fill" 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,7 +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">
-  <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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12">
+  <path fill="context-fill" fill-opacity=".8" d="M6 1a5 5 0 1 0 0 10A5 5 0 0 0 6 1zM0 6a6 6 0 1 1 12 0A6 6 0 0 1 0 6z"/>
+  <path fill="context-fill" d="M7 3.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM5 6.5a1 1 0 0 1 2 0v1.75a1 1 0 0 1-2 0V6.5z"/>
 </svg>
--- a/devtools/client/themes/images/webconsole/input.svg
+++ b/devtools/client/themes/images/webconsole/input.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">
-  <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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12">
+  <path fill="context-fill" d="M1.07 1.32c.3-.3.77-.3 1.06 0l4.15 4.15a.75.75 0 0 1 0 1.06l-4.15 4.15a.75.75 0 1 1-1.06-1.06L4.69 6 1.07 2.38a.75.75 0 0 1 0-1.06zm5 0c.3-.3.77-.3 1.06 0l4.15 4.15a.75.75 0 0 1 0 1.06l-4.15 4.15a.75.75 0 1 1-1.06-1.06L9.69 6 6.07 2.38a.75.75 0 0 1 0-1.06z"/>
 </svg>
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/webconsole/navigation.svg
@@ -0,0 +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" width="12" height="12">
+  <path fill="context-fill" d="M6 1a5 5 0 1 0 0 10A5 5 0 0 0 6 1zM0 6a6 6 0 1 1 12 0A6 6 0 0 1 0 6zM1 4h10v1H1V4zM1 7h10v1H1V7z"/>
+  <path fill="context-fill" fill-rule="evenodd" d="M7.23 9.8C7.69 8.88 8 7.54 8 6s-.31-2.88-.77-3.8C6.73 1.23 6.25 1 6 1s-.74.23-1.23 1.2A8.74 8.74 0 0 0 4 6c0 1.54.31 2.88.77 3.8.5.97.98 1.2 1.23 1.2s.74-.23 1.23-1.2zM6 12c1.66 0 3-2.69 3-6S7.66 0 6 0 3 2.69 3 6s1.34 6 3 6z"/>
+</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">
-  <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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12">
+  <path fill="context-fill" d="M6.68 1.32c.3.3.3.77 0 1.06L3.81 5.25h6.44a.75.75 0 0 1 0 1.5H3.81l2.87 2.87a.75.75 0 1 1-1.06 1.06L1.47 6.53a.75.75 0 0 1 0-1.06l4.15-4.15c.3-.3.77-.3 1.06 0z"/>
 </svg>
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -178,19 +178,19 @@ a {
   flex: none;
   align-self: flex-start;
   /* Width and height must be a multiples of 2px to avoid blurry images.
    * Height should match the text's line-height for optimal vertical alignment */
   width: 14px;
   height: 14px;
   margin: var(--console-output-vertical-padding) 4px;
   background-image: none;
-  background-position: 50% 50%;
+  background-position: center;
   background-repeat: no-repeat;
-  background-size: 12px 12px;
+  background-size: 12px;
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
 /* Icon on unindented row should be centered within the left gutter */
 .message > .indent[data-indent="0"] + .icon {
   width: 24px;
   margin-inline-start: var(--console-icon-horizontal-offset);
@@ -219,17 +219,17 @@ a {
 
 .message.warn > .icon {
   color: var(--console-output-icon-warning-color);
   background-image: url(chrome://devtools/skin/images/alert.svg);
 }
 
 .message.navigationMarker > .icon {
   color: var(--object-color);
-  background-image: url(chrome://devtools/skin/images/globe.svg);
+  background-image: url(chrome://devtools/skin/images/webconsole/navigation.svg);
 }
 
 .message:hover > .icon.rewindable {
   background-image: url(chrome://devtools/skin/images/next-circle.svg);
   cursor: pointer;
   transform: rotate(180deg);
 }