Bug 1399841 - add dedicated CSS variable to support filters in Firebug theme;r=pbro
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 14 Sep 2017 16:47:57 +0200
changeset 430412 0d5051ae4f943ff69f2d5dbda9bc683bc6e9a6a2
parent 430411 a413fc1e540f6e6c2d332f450fcecf10616f55b8
child 430413 ebd6591b323f265e18bfbf889b83be13d7e0ae62
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1399841
milestone57.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 1399841 - add dedicated CSS variable to support filters in Firebug theme;r=pbro MozReview-Commit-ID: LY8R22tZ1vo
devtools/client/themes/common.css
devtools/client/themes/variables.css
--- 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;