Wire up bulk action toggle

manage.html

@@ -320,6 +320,7 @@
         <path class="indeterminate" d="M3.5 6.3h7v1.4h-7z"/>
       </svg>
     </label>
+    <span id="bulk-filter-count"></span>
     <span i18n-text="bulkActions"></span>
     <span class="select-resizer bulk-actions-select">
       <select id="bulk-actions" i18n-title="manageOnlyLocalTooltip">

manage/manage-actions.js

@@ -86,6 +86,8 @@ function initGlobalEvents() {
     }
   });
 
+  document.addEventListener('change', updateBulkFilters);
+
   $$('[data-toggle-on-click]').forEach(el => {
     // dataset on SVG doesn't work in Chrome 49-??, works in 57+
     const target = $(el.getAttribute('data-toggle-on-click'));
@@ -419,6 +421,34 @@ function onVisibilityChange() {
   }
 }
 
+function updateBulkFilters({target}) {
+  // total is undefined until initialized
+  if (!installed.dataset.total) return;
+  // ignore filter checkboxes
+  if (target.type === 'checkbox' && !target.dataset.filter) {
+    $('#manage-bulk-actions').classList.remove('hidden');
+    const bulk = $('#toggle-all-filters');
+    const state = target.checked;
+    const visibleEntries = $$('.entry-filter-toggle')
+      .filter(entry => !entry.closest('.entry').classList.contains('hidden'));
+    bulk.indeterminate = false;
+    if (target === bulk) {
+      visibleEntries.forEach(entry => {
+        entry.checked = state;
+      });
+    } else {
+      if (visibleEntries.length === visibleEntries.filter(entry => entry.checked === state).length) {
+        bulk.checked = state;
+      } else {
+        bulk.checked = false;
+        bulk.indeterminate = true;
+      }
+    }
+    const count = $$('.entry-filter-toggle').filter(entry => entry.checked).length;
+    $('#bulk-filter-count').textContent = count || '';
+  }
+}
+
 function lazyLoad() {
   setTimeout(() => {
     $$('link[data-href]').forEach(link => {

manage/manage.css

@@ -538,7 +538,7 @@ details.applies-to-extra[open] {
 }
 
 #filters,
-.toggle-all {
+#bulk-filter-count {
   margin-right: 20px;
 }
 
@@ -593,9 +593,11 @@ details.applies-to-extra[open] {
   border: 1px solid transparent;
 }
 
-.active #filters-stats {
+.active #filters-stats,
+#bulk-filter-count:not(:empty) {
   background-color: darkcyan;
   border-color: darkcyan;
+  border-radius: 2px;
   color: white;
   font-size: 0.7rem;
   font-weight: normal;