Add devtools switch

ghostery · Dec 17, 2024 · bd075c8 · bd075c8
1 parent 4ab6341
commit bd075c8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/src/background/devtools.js b/src/background/devtools.js
@@ -13,6 +13,7 @@ import { store } from 'hybrids';
 
 import DailyStats from '/store/daily-stats';
 import Options from '/store/options.js';
+import Config from '/store/config.js';
 
 import { deleteDatabases } from '/utils/indexeddb.js';
 
@@ -33,6 +34,7 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
           try {
             store.clear(Options);
             store.clear(DailyStats);
+            store.clear(Config);
           } catch (e) {
             console.error('[devtools] Error clearing store cache:', e);
           }

diff --git a/src/pages/settings/components/devtools.js b/src/pages/settings/components/devtools.js
@@ -12,6 +12,7 @@
 import { html, store, dispatch } from 'hybrids';
 
 import Options from '/store/options.js';
+import Config from '/store/config.js';
 
 const VERSION = chrome.runtime.getManifest().version;
 
@@ -60,6 +61,7 @@ function refresh(host) {
 export default {
   counter: 0,
   options: store(Options),
+  config: store(Config),
   updatedAt: ({ options }) =>
     store.ready(options) &&
     options.filtersUpdatedAt &&
@@ -74,15 +76,29 @@ export default {
       },
     ),
   visible: false,
-  render: ({ visible, counter, updatedAt }) => html`
+  render: ({ visible, counter, updatedAt, config }) => html`
     <template layout="column gap:3">
       ${
         (visible || counter > 5) &&
         html`
           <section layout="column gap:3" translate="no">
             <ui-text type="headline-m">Developer tools</ui-text>
+
             <div layout="column gap">
-              <ui-text type="headline-s">Storage actions</ui-text>
+              <ui-text type="headline-s">Storage</ui-text>
+              ${store.ready(config) &&
+              html`
+                <div layout="column gap items:start" translate="no">
+                  <ui-toggle
+                    value="${config.enabled}"
+                    onchange="${html.set(config, 'enabled')}"
+                  >
+                    <ui-text layout="row items:center">
+                      Remote configuration
+                    </ui-text>
+                  </ui-toggle>
+                </div>
+              `}
               <div layout="row gap items:start">
                 <ui-button onclick="${clearStorage}" layout="shrink:0">
                   <button>Clear local storage</button>

diff --git a/src/store/config.js b/src/store/config.js
@@ -18,7 +18,7 @@ export const FLAG_ASSIST = 'assist';
 export const FLAG_FIREFOX_CONTENT_SCRIPT_SCRIPTLETS =
   'firefox-content-script-scriptlets';
 
-export default {
+const Config = {
   enabled: true,
   domains: store.record({
     actions: [String],
@@ -30,13 +30,13 @@ export default {
 
   // Helper methods
 
-  hasAction({ domains }) {
+  hasAction({ domains, enabled }) {
     return (domain, action) =>
-      !!(domain && domains[domain]?.actions.includes(action));
+      enabled && !!(domain && domains[domain]?.actions.includes(action));
   },
 
-  hasFlag({ flags }) {
-    return (flag) => !!(flag && flags[flag]?.enabled);
+  hasFlag({ flags, enabled }) {
+    return (flag) => enabled && !!(flag && flags[flag]?.enabled);
   },
 
   [store.connect]: {
@@ -55,3 +55,8 @@ export default {
     },
   },
 };
+export default Config;
+
+chrome.storage.onChanged.addListener((changes) => {
+  if (changes['config']) store.clear(Config, false);
+});