Bug 1184110 - Use a pretty icon button for toggling the presets list in the CSS Filter tooltip. r=bgrins
authorMahdi Dibaiee <mdibaiee@aol.com>
Fri, 24 Jul 2015 11:16:00 +0200
changeset 286399 00bc6fe33be0f4481a52b47d1e1447130e37745b
parent 286398 1372fb8872a16321fead0614ba5ede0ac194cbf3
child 286400 f389c9c1eafbe674bb567700f6aa28d35a85354b
push id5067
push userraliiev@mozilla.com
push dateMon, 21 Sep 2015 14:04:52 +0000
treeherdermozilla-beta@14221ffe5b2f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1184110
milestone42.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 1184110 - Use a pretty icon button for toggling the presets list in the CSS Filter tooltip. r=bgrins
browser/devtools/shared/widgets/filter-widget.css
--- a/browser/devtools/shared/widgets/filter-widget.css
+++ b/browser/devtools/shared/widgets/filter-widget.css
@@ -134,17 +134,18 @@ html, body {
 }
 
 .filter-value input {
   flex-grow: 1;
 }
 
 
 .theme-light .add,
-.theme-light .remove-button {
+.theme-light .remove-button,
+.theme-light #toggle-presets {
   filter: invert(1);
 }
 
 .preset {
   display: flex;
   margin-bottom: 10px;
   cursor: pointer;
   padding: 3px 5px;
@@ -212,18 +213,32 @@ html, body {
 }
 
 /* message shown when there's no filter specified */
 #container p {
   text-align: center;
   line-height: 20px;
 }
 
-.add {
-  background: url(chrome://browser/skin/devtools/add.svg);
+.add,
+#toggle-presets {
   background-size: cover;
   border: none;
   width: 16px;
   height: 16px;
   font-size: 0;
   vertical-align: middle;
   cursor: pointer;
+  margin: 0 5px;
 }
+
+.add {
+  background: url(chrome://browser/skin/devtools/add.svg);
+}
+
+#toggle-presets {
+  background: url(chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class);
+}
+
+.show-presets #toggle-presets {
+  background: url(chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked);
+  filter: none;
+}