manage: show stats for filtered/total styles

_locales/en/messages.json

@@ -237,6 +237,18 @@
     "message": "Export",
     "description": "Label for the button to export a style ('edit' page) or all styles ('manage' page)"
   },
+  "filteredStyles": {
+    "message": "$numShown$ shown of $numTotal$ total",
+    "description": "TL note - make this message short",
+    "placeholders": {
+      "numShown": {
+        "content": "$1"
+      },
+      "numTotal": {
+        "content": "$2"
+      }
+    }
+  },
   "findStylesForSite": {
     "message": "Find more styles for this site",
     "description": "Text for a link that gets a list of styles for the current site"

manage.html

@@ -133,7 +133,9 @@
 <div id="header">
   <h1 id="manage-heading" i18n-text="manageHeading"></h1>
   <fieldset>
-    <legend id="filters" i18n-text="manageFilters"></legend>
+    <legend id="filters">
+      <span i18n-text="manageFilters"></span><span id="filters-stats"></span>
+    </legend>
     <label>
       <input id="manage.onlyEnabled" type="checkbox"
              data-filter=".enabled"

manage/manage.css

@@ -539,11 +539,29 @@ fieldset {
   margin: 1em 0;
 }
 
-fieldset > * {
+fieldset > *:not(legend) {
   display: flex;
   align-items: center;
 }
 
+#filters {
+  border: 1px solid transparent;
+}
+
+#filters.active {
+  background-color: darkcyan;
+  border-color: darkcyan;
+  color: white;
+}
+
+#filters:not(.active) #filters-stats {
+  display: none;
+}
+
+#filters-stats::before {
+  content: ": ";
+}
+
 #search {
   width: calc(100% - 4px);
   margin: 0.25rem 4px 0;

manage/manage.js

@@ -5,6 +5,8 @@ let installed;
 const filtersSelector = {
   hide: '',
   unhide: '',
+  numShown: 0,
+  numTotal: 0,
 };
 
 const ENTRY_ID_PREFIX_RAW = 'style-';
@@ -829,6 +831,7 @@ function reapplyFilter(container = installed) {
     filterContainer({hide: true});
   }
   if (!toHide.length) {
+    showFiltersStats();
     return;
   }
   for (const entry of toHide) {
@@ -842,6 +845,7 @@ function reapplyFilter(container = installed) {
       installed.appendChild(entry);
     }
     installed.insertBefore(container, $('.entry.hidden'));
+    showFiltersStats();
     return;
   }
   // normal filtering of the page or a single-element job from handleUpdate()
@@ -853,8 +857,11 @@ function reapplyFilter(container = installed) {
   if (toHide.length === 1 && toHide[0].parentElement !== installed) {
     installed.appendChild(toHide[0]);
   }
+  showFiltersStats();
   return;
 
+  /***************************************/
+
   function filterContainer({hide}) {
     const selector = filtersSelector[hide ? 'hide' : 'unhide'];
     if (container.filter) {
@@ -961,6 +968,24 @@ function reapplyFilter(container = installed) {
 }
 
 
+function showFiltersStats({immediately} = {}) {
+  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;
+  const numShown = Math.min(numTotal - numHidden, installed.children.length);
+  if (filtersSelector.numShown !== numShown ||
+      filtersSelector.numTotal !== numTotal) {
+    filtersSelector.numShown = numShown;
+    filtersSelector.numTotal = numTotal;
+    $('#filters-stats').textContent = t('filteredStyles', [numShown, numTotal]);
+  }
+}
+
+
 function rememberScrollPosition() {
   history.replaceState({scrollY: window.scrollY}, document.title);
 }