@duckduckgo/autoconsent 15.0.0 → 15.1.0

package/dist/addon-mv3/popup.bundle.js

@@ -913,6 +913,7 @@
   }
 
   // addon/popup.ts
+  var maxRenderedRules = 100;
   async function init() {
     const autoconsentConfig = await storageGet("config");
     const enabledCheckbox = document.querySelector("input#enabled");
@@ -926,8 +927,7 @@
     const cosmeticOffRadio = document.querySelector("input#cosmetic-off");
     const generatedOnRadio = document.querySelector("input#generated-on");
     const generatedOffRadio = document.querySelector("input#generated-off");
-    const heuristicActionOnRadio = document.querySelector("input#heuristic-action-on");
-    const heuristicActionOffRadio = document.querySelector("input#heuristic-action-off");
+    const heuristicActionCheckbox = document.querySelector("input#heuristic-action");
     const visualTestOnRadio = document.querySelector("input#visual-test-on");
     const visualTestOffRadio = document.querySelector("input#visual-test-off");
     const popupMutationOnRadio = document.querySelector("input#popup-mutation-on");
@@ -942,6 +942,47 @@
     const logsMessagesCheckbox = document.querySelector("input#logs-messages");
     const ruleReloadButton = document.querySelector("#reload");
     const resetButton = document.querySelector("#reset");
+    const ruleSectionControls = {
+      generated: {
+        details: document.querySelector("#generated-rules-section"),
+        count: document.querySelector("#generated-rules-count"),
+        search: document.querySelector("#generated-rules-search"),
+        enableAll: document.querySelector("#generated-rules-enable-all"),
+        disableAll: document.querySelector("#generated-rules-disable-all"),
+        status: document.querySelector("#generated-rules-status"),
+        list: document.querySelector("#generated-rules-list")
+      },
+      generic: {
+        details: document.querySelector("#generic-rules-section"),
+        count: document.querySelector("#generic-rules-count"),
+        search: document.querySelector("#generic-rules-search"),
+        enableAll: document.querySelector("#generic-rules-enable-all"),
+        disableAll: document.querySelector("#generic-rules-disable-all"),
+        status: document.querySelector("#generic-rules-status"),
+        list: document.querySelector("#generic-rules-list")
+      },
+      code: {
+        details: document.querySelector("#code-rules-section"),
+        count: document.querySelector("#code-rules-count"),
+        search: document.querySelector("#code-rules-search"),
+        enableAll: document.querySelector("#code-rules-enable-all"),
+        disableAll: document.querySelector("#code-rules-disable-all"),
+        status: document.querySelector("#code-rules-status"),
+        list: document.querySelector("#code-rules-list")
+      },
+      consentomatic: {
+        details: document.querySelector("#consentomatic-rules-section"),
+        count: document.querySelector("#consentomatic-rules-count"),
+        search: document.querySelector("#consentomatic-rules-search"),
+        enableAll: document.querySelector("#consentomatic-rules-enable-all"),
+        disableAll: document.querySelector("#consentomatic-rules-disable-all"),
+        status: document.querySelector("#consentomatic-rules-status"),
+        list: document.querySelector("#consentomatic-rules-list")
+      }
+    };
+    let ruleIndexPromise = null;
+    let ruleIndex = null;
+    autoconsentConfig.disabledCmps = autoconsentConfig.disabledCmps || [];
     const [currentTab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
     if (!currentTab.url || !currentTab.id) {
       console.error("Current tab is not valid");
@@ -1007,11 +1048,7 @@
     } else {
       generatedOffRadio.checked = true;
     }
-    if (autoconsentConfig.enableHeuristicAction) {
-      heuristicActionOnRadio.checked = true;
-    } else {
-      heuristicActionOffRadio.checked = true;
-    }
+    heuristicActionCheckbox.checked = autoconsentConfig.enableHeuristicAction;
     if (autoconsentConfig.visualTest) {
       visualTestOnRadio.checked = true;
     } else {
@@ -1061,11 +1098,10 @@
     generatedOnRadio.addEventListener("change", generatedChange);
     generatedOffRadio.addEventListener("change", generatedChange);
     function heuristicActionChange() {
-      autoconsentConfig.enableHeuristicAction = heuristicActionOnRadio.checked;
+      autoconsentConfig.enableHeuristicAction = heuristicActionCheckbox.checked;
       storageSet({ config: autoconsentConfig });
     }
-    heuristicActionOnRadio.addEventListener("change", heuristicActionChange);
-    heuristicActionOffRadio.addEventListener("change", heuristicActionChange);
+    heuristicActionCheckbox.addEventListener("change", heuristicActionChange);
     function visualTestChange() {
       autoconsentConfig.visualTest = visualTestOnRadio.checked;
       storageSet({ config: autoconsentConfig });
@@ -1111,10 +1147,141 @@
     logsMessagesCheckbox.addEventListener("change", () => {
       updateLogsConfig();
     });
+    async function loadRuleIndex() {
+      if (!ruleIndexPromise) {
+        ruleIndexPromise = fetch("./rule-index.json").then(async (res) => await res.json());
+      }
+      ruleIndex = await ruleIndexPromise;
+      updateRuleCounts();
+      return ruleIndex;
+    }
+    function updateRuleCounts() {
+      if (!ruleIndex) {
+        return;
+      }
+      const disabledCmps = autoconsentConfig.disabledCmps || [];
+      Object.keys(ruleSectionControls).forEach((section) => {
+        const sectionRules = ruleIndex?.filter((rule) => rule.section === section) || [];
+        const disabledInSection = sectionRules.filter((rule) => disabledCmps.includes(rule.name)).length;
+        const count = ruleSectionControls[section].count;
+        count.textContent = `(${disabledInSection}/${sectionRules.length} disabled)`;
+        count.classList.toggle("rule-count-disabled", disabledInSection > 0);
+      });
+    }
+    function setRuleEnabled(ruleName, enabled) {
+      const disabledCmps = new Set(autoconsentConfig.disabledCmps || []);
+      if (enabled) {
+        disabledCmps.delete(ruleName);
+      } else {
+        disabledCmps.add(ruleName);
+      }
+      autoconsentConfig.disabledCmps = Array.from(disabledCmps).sort();
+      storageSet({ config: autoconsentConfig });
+      updateRuleCounts();
+    }
+    function renderOpenRuleSections() {
+      Object.keys(ruleSectionControls).forEach((section) => {
+        if (ruleSectionControls[section].details.open) {
+          renderRuleSection(section);
+        }
+      });
+    }
+    function setRuleSectionEnabled(section, enabled) {
+      if (!ruleIndex) {
+        return;
+      }
+      const disabledCmps = new Set(autoconsentConfig.disabledCmps || []);
+      ruleIndex.filter((rule) => rule.section === section).forEach((rule) => {
+        if (enabled) {
+          disabledCmps.delete(rule.name);
+        } else {
+          disabledCmps.add(rule.name);
+        }
+      });
+      autoconsentConfig.disabledCmps = Array.from(disabledCmps).sort();
+      storageSet({ config: autoconsentConfig });
+      updateRuleCounts();
+      renderOpenRuleSections();
+    }
+    function renderRuleSection(section) {
+      const controls = ruleSectionControls[section];
+      if (!ruleIndex) {
+        controls.status.textContent = "Rules are not loaded yet.";
+        return;
+      }
+      const disabledCmps = autoconsentConfig.disabledCmps || [];
+      const searchQuery = controls.search.value.trim().toLowerCase();
+      const sectionRules = ruleIndex.filter((rule) => rule.section === section);
+      const matchingRules = sectionRules.filter((rule) => {
+        if (!searchQuery) {
+          return disabledCmps.includes(rule.name);
+        }
+        return rule.name.toLowerCase().includes(searchQuery) || !!rule.urlPattern?.toLowerCase().includes(searchQuery);
+      });
+      const renderedRules = matchingRules.slice(0, maxRenderedRules);
+      const disabledInSection = sectionRules.filter((rule) => disabledCmps.includes(rule.name)).length;
+      controls.status.textContent = searchQuery ? `Showing ${renderedRules.length} of ${matchingRules.length} matches. ${disabledInSection} disabled.` : `Showing ${renderedRules.length} of ${disabledInSection} disabled rules. Search to find enabled rules.`;
+      controls.list.replaceChildren(
+        ...renderedRules.map((rule) => {
+          const checkbox = document.createElement("input");
+          checkbox.type = "checkbox";
+          checkbox.checked = !disabledCmps.includes(rule.name);
+          checkbox.addEventListener("change", () => {
+            setRuleEnabled(rule.name, checkbox.checked);
+            renderRuleSection(section);
+          });
+          const label = document.createElement("label");
+          label.className = "rule-row";
+          label.title = rule.urlPattern ? `${rule.name}
+${rule.urlPattern}` : rule.name;
+          label.append(checkbox, document.createTextNode(` ${rule.name}${rule.cosmetic ? " (cosmetic)" : ""}`));
+          return label;
+        })
+      );
+    }
+    async function loadAndRenderRuleSection(section) {
+      ruleSectionControls[section].status.textContent = "Loading rules...";
+      try {
+        await loadRuleIndex();
+        renderRuleSection(section);
+      } catch (e) {
+        console.error("Failed to load rule index", e);
+        ruleSectionControls[section].status.textContent = "Failed to load rules.";
+      }
+    }
+    Object.keys(ruleSectionControls).forEach((section) => {
+      const controls = ruleSectionControls[section];
+      controls.details.addEventListener("toggle", () => {
+        if (controls.details.open) {
+          loadAndRenderRuleSection(section);
+        }
+      });
+      controls.search.addEventListener("input", () => renderRuleSection(section));
+      controls.enableAll.addEventListener("click", async () => {
+        await loadRuleIndex();
+        setRuleSectionEnabled(section, true);
+      });
+      controls.disableAll.addEventListener("click", async () => {
+        await loadRuleIndex();
+        setRuleSectionEnabled(section, false);
+      });
+    });
+    loadRuleIndex().catch((e) => {
+      console.error("Failed to load rule index", e);
+    });
     ruleReloadButton.addEventListener("click", async () => {
-      const res = await fetch("./rules.json");
-      storageSet({
-        rules: await res.json()
+      const [compactRulesRes, fullRulesRes] = await Promise.all([fetch("./compact-rules.json"), fetch("./rules.json")]);
+      const fullRules = await fullRulesRes.json();
+      await storageSet({
+        rules: await compactRulesRes.json(),
+        fullRules: fullRules.autoconsent
+      });
+      ruleIndexPromise = null;
+      ruleIndex = null;
+      Object.keys(ruleSectionControls).forEach((section) => {
+        if (ruleSectionControls[section].details.open) {
+          loadAndRenderRuleSection(section);
+        }
       });
     });
     resetButton.addEventListener("click", async () => {

package/dist/addon-mv3/popup.html

@@ -23,6 +23,52 @@
                 cursor: pointer;
                 border-radius: 2px;
             }
+
+            .rule-section {
+                margin: 0.5em 0;
+            }
+
+            .rule-search {
+                box-sizing: border-box;
+                margin: 0.5em 0;
+                width: 100%;
+            }
+
+            .rule-actions {
+                display: flex;
+                gap: 0.5em;
+                margin: 0.5em 0;
+            }
+
+            .rule-actions button {
+                flex: 1;
+            }
+
+            .rule-list {
+                border: 1px solid #ddd;
+                max-height: 12em;
+                overflow-y: auto;
+                padding: 0.25em;
+            }
+
+            .rule-row {
+                display: block;
+                overflow: hidden;
+                padding: 0.15em 0;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .rule-list-status {
+                color: #666;
+                font-size: 0.9em;
+                margin: 0.25em 0;
+            }
+
+            .rule-count-disabled {
+                color: #b00020;
+                font-weight: bold;
+            }
         </style>
     </head>
 
@@ -96,16 +142,55 @@
         </fieldset>
 
         <fieldset>
-            <legend>Handle unknown popups (beta)</legend>
+            <legend>Rules</legend>
 
-            <div>
-                <input type="radio" id="heuristic-action-on" name="heuristic-action" value="true" />
-                <label for="heuristic-action-on">On</label>
-            </div>
+            <details class="rule-section" id="generated-rules-section">
+                <summary>Generated rules <span id="generated-rules-count"></span></summary>
+                <input class="rule-search" type="search" id="generated-rules-search" placeholder="Search generated rules" />
+                <div class="rule-actions">
+                    <button id="generated-rules-enable-all">Enable all</button>
+                    <button id="generated-rules-disable-all">Disable all</button>
+                </div>
+                <div class="rule-list-status" id="generated-rules-status"></div>
+                <div class="rule-list" id="generated-rules-list"></div>
+            </details>
 
-            <div>
-                <input type="radio" id="heuristic-action-off" name="heuristic-action" value="false" checked />
-                <label for="heuristic-action-off">Off</label>
+            <details class="rule-section" id="generic-rules-section">
+                <summary>Generic rules <span id="generic-rules-count"></span></summary>
+                <input class="rule-search" type="search" id="generic-rules-search" placeholder="Search generic rules" />
+                <div class="rule-actions">
+                    <button id="generic-rules-enable-all">Enable all</button>
+                    <button id="generic-rules-disable-all">Disable all</button>
+                </div>
+                <div class="rule-list-status" id="generic-rules-status"></div>
+                <div class="rule-list" id="generic-rules-list"></div>
+            </details>
+
+            <details class="rule-section" id="code-rules-section">
+                <summary>Code-based rules <span id="code-rules-count"></span></summary>
+                <input class="rule-search" type="search" id="code-rules-search" placeholder="Search code-based rules" />
+                <div class="rule-actions">
+                    <button id="code-rules-enable-all">Enable all</button>
+                    <button id="code-rules-disable-all">Disable all</button>
+                </div>
+                <div class="rule-list-status" id="code-rules-status"></div>
+                <div class="rule-list" id="code-rules-list"></div>
+            </details>
+
+            <details class="rule-section" id="consentomatic-rules-section">
+                <summary>Consent-O-Matic rules <span id="consentomatic-rules-count"></span></summary>
+                <input class="rule-search" type="search" id="consentomatic-rules-search" placeholder="Search Consent-O-Matic rules" />
+                <div class="rule-actions">
+                    <button id="consentomatic-rules-enable-all">Enable all</button>
+                    <button id="consentomatic-rules-disable-all">Disable all</button>
+                </div>
+                <div class="rule-list-status" id="consentomatic-rules-status"></div>
+                <div class="rule-list" id="consentomatic-rules-list"></div>
+            </details>
+
+            <div class="rule-section">
+                <input type="checkbox" id="heuristic-action" name="heuristic-action" />
+                <label for="heuristic-action">Handle unknown popups (heuristic rule)</label>
             </div>
         </fieldset>