BBug 1223701 - Use opacity and an SVG filter to style command buttons. r=bgrins
BBug 1223701 - Use opacity and an SVG filter to style command buttons. r=bgrins
--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -101,31 +101,16 @@ body {
border-width: 0 0 0 1px;
min-height: var(--toolbar-height);
}
#timeline-toolbar .devtools-button {
border-width: 0 1px 0 0;
}
-.devtools-button {
- position: relative;
-}
-
-.devtools-button::before {
- content: "";
- display: block;
- width: 16px;
- height: 16px;
- position: absolute;
- left: 50%;
- top: 50%;
- margin: -8px 0 0 -8px;
-}
-
#element-picker::before {
background-image: url("chrome://devtools/skin/images/command-pick.png");
}
.pause-button::before {
background-image: url("images/debugger-pause.png");
}
@@ -135,17 +120,16 @@ body {
.pause-button.paused::before {
background-image: url("images/debugger-play.png");
}
@media (min-resolution: 1.1dppx) {
#element-picker::before {
background-image: url("chrome://devtools/skin/images/command-pick@2x.png");
- background-size: 64px;
}
.pause-button::before {
background-image: url("images/debugger-pause@2x.png");
}
.pause-button.paused::before {
background-image: url("images/debugger-play@2x.png");
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -83,18 +83,16 @@ html, body, #app, #memory-tool {
}
.devtools-toolbar > .toolbar-group > label.breakdown-by > span {
margin-inline-end: 5px;
}
.devtools-toolbar > .devtools-button.take-snapshot::before {
background-image: url(images/command-screenshot.png);
- background-size: 64px 16px;
- background-position: 0 center;
}
@media (min-resolution: 1.1dppx) {
.devtools-toolbar > .devtools-button.take-snapshot::before {
background-image: url(images/command-screenshot@2x.png);
}
}
/**
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -690,31 +690,31 @@
.command-button:hover:active, .command-button[checked=true]:not(:hover) {
background-color: hsla(206,37%,4%,.4);
}
.command-button > image {
-moz-appearance: none;
width: 16px;
height: 16px;
- background-size: 64px 16px;
+ background-size: cover;
background-position: 0 center;
background-repeat: no-repeat;
+ opacity: 0.7;
}
.command-button:hover > image {
- background-position: -16px center;
+ opacity: 0.85;
}
-.command-button:hover:active > image {
- background-position: -32px center;
+.command-button:hover:active > image,
+.command-button[checked=true] > image,
+.command-button[open=true] > image {
+ opacity: 1;
}
.command-button[checked=true] > image {
- background-position: -48px center;
-}
-.command-button[open=true] > image {
- background-position: 0 center;
+ filter: url(images/filters.svg#checked-icon-state) !important;
}
#command-button-paintflashing > image {
background-image: url("chrome://devtools/skin/images/command-paintflashing.png");
}
#command-button-screenshot > image {
background-image: url("chrome://devtools/skin/images/command-screenshot.png");
@@ -725,17 +725,16 @@
}
#command-button-tilt > image {
background-image: url("chrome://devtools/skin/images/command-tilt.png");
}
#command-button-scratchpad > image {
background-image: url("chrome://devtools/skin/images/command-scratchpad.png");
- background-size: 48px 16px;
}
#command-button-pick > image {
background-image: url("chrome://devtools/skin/images/command-pick.png");
}
#command-button-frames > image {
background-image: url("chrome://devtools/skin/images/command-frames.png");
@@ -968,34 +967,32 @@
}
/* Invert the colors of certain dark theme images for displaying
* inside of the light theme.
*/
.theme-light .devtools-tab[icon-invertable] > image,
.theme-light #toolbox-dock-buttons > toolbarbutton > image,
.theme-light .command-button-invertable > image,
-.theme-light .command-button-invertable:active > image,
.theme-light .devtools-closebutton > image,
.theme-light .devtools-toolbarbutton > image,
.theme-light .devtools-button::before,
.theme-light #breadcrumb-separator-normal,
.theme-light .scrollbutton-up > .toolbarbutton-icon,
.theme-light .scrollbutton-down > .toolbarbutton-icon,
.theme-light #black-boxed-message-button .button-icon,
.theme-light #requests-menu-perf-notice-button .button-icon,
.theme-light #requests-menu-network-summary-button .button-icon,
.theme-light #toggle-breakpoints[checked] > image,
.theme-light .event-tooltip-debugger-icon {
filter: invert(1);
}
/* Since selected backgrounds are blue, we want to use the normal
* (light) icons. */
-.theme-light .command-button-invertable[checked=true]:not(:active) > image,
.theme-light .devtools-tab[icon-invertable][selected] > image,
.theme-light .devtools-tab[icon-invertable][highlighted] > image {
filter: none !important;
}
.theme-light .command-button:hover {
background-color: inherit;
}