manage: inform when hiding all styles due to active filters

_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"

manage/filters.js

@@ -295,11 +295,7 @@ function reapplyFilter(container = installed) {
 }
 
 
-function showFiltersStats({immediately} = {}) {
+function showFiltersStats() {
-  if (!immediately) {
-    debounce(showFiltersStats, 100, {immediately: true});
-    return;
-  }
   $('#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);
   }
 }
 

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;

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')}";
+    }
   `));
 }