Bug 1399841 - add dedicated CSS variable to support filters in Firebug theme;r=pbro draft
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 14 Sep 2017 16:47:57 +0200
changeset 664885 fae057bf5e84cfbfe22ba350c0b8331fb1abdee9
parent 664884 be02a82209d7bb098e2d84ea7e16233f26ee3832
child 664930 748722140041468638f3ed1d7aae0769ef269cc8
push id79842
push userjdescottes@mozilla.com
push dateThu, 14 Sep 2017 14:48:24 +0000
reviewerspbro
bugs1399841
milestone57.0a1
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;