From 31941110e8877dd7c46098a4ca22e0057681473c Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 6 Dec 2017 04:18:51 +0300
Subject: [PATCH] manage: show "x" icon after #filters-stats to reset active
 filters

implements #286
---
 manage.html       |  9 ++++++++-
 manage/filters.js | 22 ++++++++++++++++++++++
 manage/manage.css | 19 +++++++++++++++++++
 3 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/manage.html b/manage.html
index d8b7b4fe..1d23f1ba 100644
--- a/manage.html
+++ b/manage.html
@@ -166,7 +166,14 @@
   <h1 id="manage-heading" i18n-text="manageHeading"></h1>
 
   <details id="filters" data-pref="manage.filters.expanded">
-    <summary><h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2></summary>
+    <summary>
+      <h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2>
+      <svg id="reset-filters" class="svg-icon" viewBox="0 0 20 20">
+        <title i18n-text="genericResetLabel"></title>
+        <polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
+                         5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
+      </svg>
+    </summary>
 
     <div class="filter-selection">
       <label>
diff --git a/manage/filters.js b/manage/filters.js
index b8c50909..522694f6 100644
--- a/manage/filters.js
+++ b/manage/filters.js
@@ -76,6 +76,28 @@ onDOMready().then(onBackgroundReady).then(() => {
     }
   });
 
+  $('#reset-filters').onclick = event => {
+    event.preventDefault();
+    if (!filtersSelector.hide) {
+      return;
+    }
+    for (const el of $$('#filters [data-filter]')) {
+      let value;
+      if (el.type === 'checkbox' && el.checked) {
+        value = el.checked = false;
+      } else if (el.value) {
+        value = el.value = '';
+      }
+      if (value !== undefined) {
+        el.lastValue = value;
+        if (el.id in prefs.readOnlyValues) {
+          prefs.set(el.id, false);
+        }
+      }
+    }
+    filterOnChange({forceRefilter: true});
+  };
+
   // Adjust width after selects are visible
   prefs.subscribe(['manage.filters.expanded'], () => {
     const el = $('#filters');
diff --git a/manage/manage.css b/manage/manage.css
index c19e7097..234d334d 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -793,6 +793,25 @@ input[id^="manage.newUI"] {
   top: -2px;
 }
 
+#reset-filters {
+  position: absolute;
+  margin-top: 2px;
+  fill: hsla(180, 50%, 27%, .5);
+  width: 24px; /* widen the click area a bit */
+  height: 20px;
+  padding: 2px;
+  box-sizing: border-box;
+}
+
+#reset-filters:hover {
+  fill: hsla(180, 50%, 27%, 1);
+}
+
+.firefox #reset-filters {
+  margin-top: 4px;
+}
+
+#filters:not(.active) #reset-filters,
 #filters:not(.active) #filters-stats {
   display: none;
 }