manage: add inverted filters (disabled, external)

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

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

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"

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')) {

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;