From 1951bc89bba784b40166b35da03e7b5f9255dcf9 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Mon, 4 Dec 2017 02:38:44 +0300
Subject: [PATCH] manage: inform when hiding all styles due to active filters

---
 _locales/en/messages.json |  4 ++++
 manage/filters.js         |  7 ++-----
 manage/manage.css         | 31 +++++++++++++++++++++++++++++++
 manage/manage.js          |  3 +++
 4 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 697c870e..36ce385a 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -349,6 +349,10 @@
       }
     }
   },
+  "filteredStylesAllHidden": {
+    "message": "Currently applied filters match no styles",
+    "description": "Text shown when no styles match currently applied filter in the style manager"
+  },
   "findStylesForSite": {
     "message": "Find more styles for this site",
     "description": "Text for a link that gets a list of styles for the current site"
diff --git a/manage/filters.js b/manage/filters.js
index d7282e7f..77f294a3 100644
--- a/manage/filters.js
+++ b/manage/filters.js
@@ -295,11 +295,7 @@ function reapplyFilter(container = installed) {
 }
 
 
-function showFiltersStats({immediately} = {}) {
-  if (!immediately) {
-    debounce(showFiltersStats, 100, {immediately: true});
-    return;
-  }
+function showFiltersStats() {
   $('#filters').classList.toggle('active', filtersSelector.hide !== '');
   const numTotal = BG.cachedStyles.list.length;
   const numHidden = installed.getElementsByClassName('entry hidden').length;
@@ -309,6 +305,7 @@ function showFiltersStats({immediately} = {}) {
     filtersSelector.numShown = numShown;
     filtersSelector.numTotal = numTotal;
     $('#filters-stats').textContent = t('filteredStyles', [numShown, numTotal]);
+    document.body.classList.toggle('all-styles-hidden-by-filters', !numShown && numTotal);
   }
 }
 
diff --git a/manage/manage.css b/manage/manage.css
index 8de33df9..951aef59 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -15,6 +15,26 @@ body {
   height: 100%;
 }
 
+body.all-styles-hidden-by-filters:before,
+body.all-styles-hidden-by-filters:after {
+  position: absolute;
+  left: calc(3rem + var(--header-width));
+  color: hsla(180, 40%, 45%, .3);
+  animation: fadein 3s;
+}
+
+body.all-styles-hidden-by-filters:before {
+  content: "\2190"; /* left arrow */
+  font-size: 3rem;
+  top: 3.5rem;
+}
+
+body.all-styles-hidden-by-filters:after {
+  font-size: 1.5rem;
+  position: absolute;
+  top: 3rem;
+}
+
 a, .disabled a:hover {
   color: #000;
   transition: color .5s;
@@ -898,6 +918,17 @@ fieldset select {
     flex-direction: column;
   }
 
+  body.all-styles-hidden-by-filters:before {
+    content: "\2191"; /* up arrow */
+    top: calc(50% + 2.75rem);
+    left: 2rem;
+  }
+
+  body.all-styles-hidden-by-filters:after {
+    top: calc(50% + 4rem);
+    left: 3.75rem;
+  }
+
   #header {
     height: auto;
     position: static;
diff --git a/manage/manage.js b/manage/manage.js
index 86cc6b18..58435e1c 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -91,6 +91,9 @@ function initGlobalEvents() {
     #update-all-no-updates[data-skipped-edited="true"]:after {
       content: " ${t('updateAllCheckSucceededSomeEdited')}";
     }
+    body.all-styles-hidden-by-filters:after {
+      content: "${t('filteredStylesAllHidden')}";
+    }
   `));
 }