From f001bca849cb9d63a0349d4a45a5e820ebd34b36 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Tue, 15 Aug 2017 13:56:51 +0300
Subject: [PATCH] manage: show stats for filtered/total styles

---
 _locales/en/messages.json | 12 ++++++++++++
 manage.html               |  4 +++-
 manage/manage.css         | 20 +++++++++++++++++++-
 manage/manage.js          | 25 +++++++++++++++++++++++++
 4 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index d96d7a69..68ca0bbd 100644
--- a/_locales/en/messages.json
+++ b/_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"
diff --git a/manage.html b/manage.html
index 1a5cae15..8dbdb2bc 100644
--- a/manage.html
+++ b/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"
diff --git a/manage/manage.css b/manage/manage.css
index f576411e..a9887461 100644
--- a/manage/manage.css
+++ b/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;
diff --git a/manage/manage.js b/manage/manage.js
index 08e8feec..fe16e4c0 100644
--- a/manage/manage.js
+++ b/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);
 }