Bug 1399841 - add dedicated CSS variable to support filters in Firebug theme;r=pbro
MozReview-Commit-ID: LY8R22tZ1vo
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -4,16 +4,18 @@
@import url("resource://devtools/client/themes/splitters.css");
@namespace html url("http://www.w3.org/1999/xhtml");
:root {
font: message-box;
--tab-line-selected-color: var(--blue-50);
+ /* Introduce a specific variable here to be able to special-case firebug theme */
+ --toolbar-icon-checked-filter: var(--theme-icon-checked-filter);
}
:root.theme-light {
--tab-line-hover-color: rgba(0,0,0,.2);
}
:root.theme-dark {
--tab-line-hover-color: rgba(255,255,255,.2);
@@ -29,16 +31,19 @@
:root[platform="linux"],
:root.theme-firebug {
--monospace-font-family: monospace;
}
:root.theme-firebug {
--proportional-font-family: Lucida Grande, Tahoma, sans-serif;
+
+ /* Do not use filters for Firebug checked icons: they are images, not SVGs */
+ --toolbar-icon-checked-filter: none;
}
.devtools-monospace {
font-family: var(--monospace-font-family);
}
:root[platform="linux"] .devtools-monospace {
font-size: 11px;
@@ -305,17 +310,17 @@ checkbox:-moz-focusring {
.devtools-button:disabled,
.devtools-toolbarbutton[disabled] {
opacity: 0.5 !important;
}
.devtools-button.checked::before,
.devtools-toolbarbutton:not([label])[checked=true] > image,
.devtools-toolbarbutton:not([label])[open=true] > image {
- filter: var(--theme-icon-checked-filter);
+ filter: var(--toolbar-icon-checked-filter);
}
/* Button states */
.devtools-toolbarbutton[label]:not([type=menu-button]),
.devtools-toolbarbutton[standalone],
.devtools-button[data-standalone],
.devtools-button:not(:empty) {
background: var(--toolbarbutton-background);
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -224,17 +224,17 @@
/* Images */
--theme-pane-collapse-image: url(chrome://devtools/skin/images/firebug/pane-collapse.svg);
--theme-pane-expand-image: url(chrome://devtools/skin/images/firebug/pane-expand.svg);
/* Icon filters */
--theme-icon-filter: none;
--theme-icon-selected-filter: none;
- --theme-icon-checked-filter: none;
+ --theme-icon-checked-filter: url(chrome://devtools/skin/images/filters.svg#icon-checked-light);
/* Font size */
--theme-toolbar-font-size: 12px;
/* Header */
--theme-header-background: #F0F0F0 linear-gradient(to top,
rgba(0, 0, 0, 0.1),
transparent) repeat-x;