From 64ba125601d048410aa1cd7f83a7d2f78a1bcbdc Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Mon, 21 Aug 2017 21:07:41 +0300
Subject: [PATCH] manage: add inverted filters (disabled, external)

---
 _locales/en/messages.json |  8 ++++++++
 js/prefs.js               |  2 ++
 manage.html               | 10 ++++++++--
 manage/filters.js         | 32 ++++++++++++++++++++++++++++++++
 manage/manage.css         |  5 +++++
 5 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 68ca0bbd..8e5600f6 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -349,10 +349,18 @@
     "message": "Only enabled styles",
     "description": "Checkbox to show only enabled styles"
   },
+  "manageOnlyDisabled": {
+    "message": "Only disabled styles",
+    "description": "Checkbox to show only disabled styles"
+  },
   "manageOnlyLocal": {
     "message": "Only locally created styles",
     "description": "Checkbox to show only locally created styles i.e. non-updatable"
   },
+  "manageOnlyExternal": {
+    "message": "Only external styles",
+    "description": "Checkbox to show only externally installed styles i.e. updatable"
+  },
   "manageOnlyLocalTooltip": {
     "message": "(the styles not installed through a userstyles.org page)",
     "description": "Tooltip for the checkbox to show only locally created styles i.e. non-updatable"
diff --git a/js/prefs.js b/js/prefs.js
index 00808e1e..6b75b1fa 100644
--- a/js/prefs.js
+++ b/js/prefs.js
@@ -17,6 +17,8 @@ var prefs = new function Prefs() {
 
     'manage.onlyEnabled': false,    // display only enabled styles
     'manage.onlyLocal': false,      // display only styles created locally
+    'manage.onlyEnabled.invert': false, // display only disabled styles
+    'manage.onlyLocal.invert': false,   // display only externally installed styles
     'manage.newUI': true,           // use the new compact layout
     'manage.newUI.favicons': false, // show favicons for the sites in applies-to
     'manage.newUI.faviconsGray': true, // gray out favicons
diff --git a/manage.html b/manage.html
index 233e667a..f28bb414 100644
--- a/manage.html
+++ b/manage.html
@@ -143,13 +143,19 @@
       <input id="manage.onlyEnabled" type="checkbox"
              data-filter=".enabled"
              data-filter-hide=".disabled">
-      <span i18n-text="manageOnlyEnabled"></span>
+      <select id="manage.onlyEnabled.invert">
+        <option i18n-text="manageOnlyEnabled" value="false"></option>
+        <option i18n-text="manageOnlyDisabled" value="true"></option>
+      </select>
     </label>
     <label>
       <input id="manage.onlyLocal" type="checkbox"
              data-filter=":not(.updatable)"
              data-filter-hide=".updatable">
-      <span i18n-text="manageOnlyLocal" i18n-title="manageOnlyLocalTooltip"></span>
+      <select id="manage.onlyLocal.invert" i18n-title="manageOnlyLocalTooltip">
+        <option i18n-text="manageOnlyLocal" value="false"></option>
+        <option i18n-text="manageOnlyExternal" value="true"></option>
+      </select>
     </label>
     <label id="onlyUpdates" class="hidden">
       <input type="checkbox"
diff --git a/manage/filters.js b/manage/filters.js
index 798b1ee8..87723ac6 100644
--- a/manage/filters.js
+++ b/manage/filters.js
@@ -12,6 +12,38 @@ const filtersSelector = {
 onDOMready().then(onBackgroundReady).then(() => {
   $('#search').oninput = searchStyles;
 
+  $$('select[id$=".invert"]').forEach(el => {
+    const slave = $('#' + el.id.replace('.invert', ''));
+    const slaveData = slave.dataset;
+    const valueMap = new Map([
+      [false, slaveData.filter],
+      [true, slaveData.filterHide],
+    ]);
+    //
+    // enable slave control when user switches the value
+    el.oninput = () => {
+      if (!slave.checked) {
+        // oninput occurs before onchange
+        setTimeout(() => {
+          if (!slave.checked) {
+            slave.checked = true;
+            slave.dispatchEvent(new Event('change', {bubbles: true}));
+          }
+        });
+      }
+    };
+    // swap slave control's filtering rules
+    el.onchange = event => {
+      const value = el.value === 'true';
+      const filter = valueMap.get(value);
+      if (slaveData.filter !== filter) {
+        slaveData.filter = filter;
+        slaveData.filterHide = valueMap.get(!value);
+        debounce(filterOnChange, 0, event);
+      }
+    };
+  });
+
   $$('[data-filter]').forEach(el => {
     el.onchange = filterOnChange;
     if (el.closest('.hidden')) {
diff --git a/manage/manage.css b/manage/manage.css
index 3a7fb337..1dfe22eb 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -569,6 +569,11 @@ fieldset > *:not(legend) {
   content: ": ";
 }
 
+#manage\.onlyEnabled\.invert,
+#manage\.onlyLocal\.invert {
+  border: none;
+}
+
 #search {
   width: calc(100% - 4px);
   margin: 0.25rem 4px 0;