Bug 1490491 - Part 1: replace alerticon-warning.png with console alert icon; r=pbro,ntim

Differential Revision: https://phabricator.services.mozilla.com/D5952

--HG--
rename : devtools/client/themes/images/webconsole/alert.svg => devtools/client/themes/images/alert.svg
extra : moz-landing-system : lando
This commit is contained in:
fvsch 2018-10-22 14:46:42 +00:00
parent 63aebb585f
commit d75783b6f0
17 changed files with 46 additions and 73 deletions

View File

@ -182,25 +182,23 @@ button {
}
.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 {

View File

@ -106,6 +106,7 @@ devtools.jar:
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)
@ -139,8 +140,6 @@ devtools.jar:
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)
@ -160,7 +159,6 @@ devtools.jar:
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)

View File

@ -378,18 +378,14 @@
}
.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 */

View File

@ -37,11 +37,11 @@
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 {
@ -286,7 +286,7 @@
}
.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;

View File

@ -1,4 +1,3 @@
<?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/. -->

Before

Width:  |  Height:  |  Size: 550 B

After

Width:  |  Height:  |  Size: 511 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 541 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 429 B

View File

@ -1,4 +1,3 @@
<?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/. -->

Before

Width:  |  Height:  |  Size: 486 B

After

Width:  |  Height:  |  Size: 447 B

View File

@ -1,4 +1,3 @@
<?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/. -->

Before

Width:  |  Height:  |  Size: 604 B

After

Width:  |  Height:  |  Size: 565 B

View File

@ -1,4 +1,3 @@
<?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/. -->

Before

Width:  |  Height:  |  Size: 508 B

After

Width:  |  Height:  |  Size: 469 B

View File

@ -83,7 +83,7 @@
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;
@ -91,8 +91,8 @@
}
.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 */

View File

@ -562,11 +562,11 @@ html, body, #app, #memory-tool {
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);
}
/**

View File

@ -767,7 +767,7 @@ menuitem.experimental-option::before {
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;

View File

@ -323,18 +323,14 @@
}
.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 {

View File

@ -217,12 +217,6 @@
--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

View File

@ -124,8 +124,10 @@ text {
}
.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;
@ -161,12 +163,6 @@ text {
-moz-box-flex: 1;
}
@media (min-resolution: 1.1dppx) {
.web-audio-inspector .error {
background-image: url(images/alerticon-warning@2x.png);
}
}
/**
* Inspector toolbar
*/

View File

@ -188,37 +188,36 @@ a {
.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;
}
@ -382,7 +381,7 @@ html #webconsole-notificationbox {
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;
@ -437,7 +436,7 @@ textarea.jsterm-input-node:focus {
/* 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;