From 0b3047c34fdbef98ca12b3236fe88cde2ce315a3 Mon Sep 17 00:00:00 2001
From: Mahdi Dibaiee <mdibaiee@aol.com>
Date: Fri, 24 Jul 2015 11:16:00 +0200
Subject: [PATCH] Bug 1184110 - Use a pretty icon button for toggling the
 presets list in the CSS Filter tooltip. r=bgrins

--HG--
extra : rebase_source : fe65d7210bbc039509e2753db31a1115656d4683
---
 .../devtools/shared/widgets/filter-widget.css | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/browser/devtools/shared/widgets/filter-widget.css b/browser/devtools/shared/widgets/filter-widget.css
index 0272f6d7869a..bd6a3af13503 100644
--- a/browser/devtools/shared/widgets/filter-widget.css
+++ b/browser/devtools/shared/widgets/filter-widget.css
@@ -139,7 +139,8 @@ html, body {
 
 
 .theme-light .add,
-.theme-light .remove-button {
+.theme-light .remove-button,
+.theme-light #toggle-presets {
   filter: invert(1);
 }
 
@@ -217,8 +218,8 @@ html, body {
   line-height: 20px;
 }
 
-.add {
-  background: url(chrome://browser/skin/devtools/add.svg);
+.add,
+#toggle-presets {
   background-size: cover;
   border: none;
   width: 16px;
@@ -226,4 +227,18 @@ html, body {
   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;
 }