From 654c4e267360b3c619df3d63bab0fccfb82c2c30 Mon Sep 17 00:00:00 2001 From: Yura Zenevich Date: Wed, 3 Jul 2019 17:26:43 +0000 Subject: [PATCH] Bug 1552067 - move common error/warning/error icons to devtools/client/themes/images/. r=nchevobbe,fvsch Differential Revision: https://phabricator.services.mozilla.com/D35496 --HG-- rename : devtools/client/themes/images/alert.svg => devtools/client/themes/images/alert-small.svg rename : devtools/client/themes/images/webconsole/error.svg => devtools/client/themes/images/error-small.svg rename : devtools/client/themes/images/webconsole/info.svg => devtools/client/themes/images/info-small.svg extra : moz-landing-system : lando --- devtools/client/aboutdebugging/aboutdebugging.css | 2 +- devtools/client/jar.mn | 7 +++++-- .../src/assets/styles/NetworkDetailsPanel.css | 2 +- devtools/client/themes/images/alert-small.svg | 6 ++++++ devtools/client/themes/images/alert.svg | 4 ++-- .../{webconsole/error.svg => error-small.svg} | 0 devtools/client/themes/images/error.svg | 6 ++++++ .../images/{webconsole/info.svg => info-small.svg} | 0 devtools/client/themes/images/info.svg | 6 ++++++ devtools/client/themes/jit-optimizations.css | 4 ++-- devtools/client/themes/memory.css | 2 +- devtools/client/themes/performance.css | 2 +- devtools/client/themes/rules.css | 6 +++--- devtools/client/themes/variables.css | 4 ++++ devtools/client/themes/webconsole.css | 14 +++++--------- 15 files changed, 43 insertions(+), 22 deletions(-) create mode 100644 devtools/client/themes/images/alert-small.svg rename devtools/client/themes/images/{webconsole/error.svg => error-small.svg} (100%) create mode 100644 devtools/client/themes/images/error.svg rename devtools/client/themes/images/{webconsole/info.svg => info-small.svg} (100%) create mode 100644 devtools/client/themes/images/info.svg diff --git a/devtools/client/aboutdebugging/aboutdebugging.css b/devtools/client/aboutdebugging/aboutdebugging.css index 1a1370f81ca8..8d169f30dd1d 100644 --- a/devtools/client/aboutdebugging/aboutdebugging.css +++ b/devtools/client/aboutdebugging/aboutdebugging.css @@ -204,7 +204,7 @@ button { 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; } diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn index 3e793686e0f0..7fb558f3d85d 100644 --- a/devtools/client/jar.mn +++ b/devtools/client/jar.mn @@ -69,7 +69,12 @@ devtools.jar: 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) @@ -122,8 +127,6 @@ devtools.jar: 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) diff --git a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css index da2343b5ec6d..2911ace70f72 100644 --- a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css +++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css @@ -475,7 +475,7 @@ 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); diff --git a/devtools/client/themes/images/alert-small.svg b/devtools/client/themes/images/alert-small.svg new file mode 100644 index 000000000000..8b9102cae3d0 --- /dev/null +++ b/devtools/client/themes/images/alert-small.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/alert.svg b/devtools/client/themes/images/alert.svg index 8b9102cae3d0..3c0e94a8b3c0 100644 --- a/devtools/client/themes/images/alert.svg +++ b/devtools/client/themes/images/alert.svg @@ -1,6 +1,6 @@ - - + + diff --git a/devtools/client/themes/images/webconsole/error.svg b/devtools/client/themes/images/error-small.svg similarity index 100% rename from devtools/client/themes/images/webconsole/error.svg rename to devtools/client/themes/images/error-small.svg diff --git a/devtools/client/themes/images/error.svg b/devtools/client/themes/images/error.svg new file mode 100644 index 000000000000..d2d7799d2875 --- /dev/null +++ b/devtools/client/themes/images/error.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/webconsole/info.svg b/devtools/client/themes/images/info-small.svg similarity index 100% rename from devtools/client/themes/images/webconsole/info.svg rename to devtools/client/themes/images/info-small.svg diff --git a/devtools/client/themes/images/info.svg b/devtools/client/themes/images/info.svg new file mode 100644 index 000000000000..9b67a6da1bf3 --- /dev/null +++ b/devtools/client/themes/images/info.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/jit-optimizations.css b/devtools/client/themes/jit-optimizations.css index 57de28e16bba..a5e9c75dd95d 100644 --- a/devtools/client/themes/jit-optimizations.css +++ b/devtools/client/themes/jit-optimizations.css @@ -83,7 +83,7 @@ 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; @@ -91,7 +91,7 @@ } .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); } diff --git a/devtools/client/themes/memory.css b/devtools/client/themes/memory.css index b3b685f3f90e..1f96419284ff 100644 --- a/devtools/client/themes/memory.css +++ b/devtools/client/themes/memory.css @@ -580,7 +580,7 @@ html, body, #app, #memory-tool { 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; diff --git a/devtools/client/themes/performance.css b/devtools/client/themes/performance.css index 0076c56e9e6d..87acd27d8e23 100644 --- a/devtools/client/themes/performance.css +++ b/devtools/client/themes/performance.css @@ -775,7 +775,7 @@ menuitem.experimental-option::before { 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; diff --git a/devtools/client/themes/rules.css b/devtools/client/themes/rules.css index c9d49b414748..2983262035b5 100644 --- a/devtools/client/themes/rules.css +++ b/devtools/client/themes/rules.css @@ -371,14 +371,14 @@ } .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 { diff --git a/devtools/client/themes/variables.css b/devtools/client/themes/variables.css index 9244d5464cec..8ced0d2880f3 100644 --- a/devtools/client/themes/variables.css +++ b/devtools/client/themes/variables.css @@ -50,6 +50,8 @@ --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); @@ -151,6 +153,8 @@ --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); diff --git a/devtools/client/themes/webconsole.css b/devtools/client/themes/webconsole.css index 758155e1d6cc..84e2eee20975 100644 --- a/devtools/client/themes/webconsole.css +++ b/devtools/client/themes/webconsole.css @@ -21,11 +21,9 @@ --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); @@ -45,11 +43,9 @@ --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); @@ -280,17 +276,17 @@ a { .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 {