[mv3] Fix various quirks when previewing custom filters at creation time

gorhill · gorhill · commit 90e821230420 · 2026-05-09T10:50:22.000-04:00
diff --git a/platform/mv3/extension/js/scripting/css-procedural-api.js b/platform/mv3/extension/js/scripting/css-procedural-api.js
@@ -756,6 +756,7 @@ class ProceduralFilterer {
 
 self.ProceduralFiltererAPI = class {
     constructor() {
+        this.cssSheets = new Set();
         this.proceduralFilterer = null;
         this.domObserver = null;
     }
@@ -766,10 +767,18 @@ self.ProceduralFiltererAPI = class {
             this.domObserver.disconnect();
             this.domObserver = null;
         }
+        const promises = [];
         if ( this.proceduralFilterer ) {
-            await this.proceduralFilterer.reset();
+            promises.push(this.proceduralFilterer.reset());
             this.proceduralFilterer = null;
         }
+        for ( const css of this.cssSheets ) {
+            promises.push(
+                chrome.runtime.sendMessage({ what: 'removeCSS', css }).catch(( ) => { })
+            );
+        }
+        this.cssSheets.clear();
+        await Promise.all(promises);
     }
 
     addDeclaratives(selectors) {
@@ -806,9 +815,11 @@ self.ProceduralFiltererAPI = class {
             if ( ruleText === undefined ) { continue; }
             sheetText.push(ruleText);
         }
-        if ( sheetText.length !== 0 ) {
-            self.cssAPI.insert(sheetText.join('\n'));
-        }
+        if ( sheetText.length === 0 ) { return; }
+        const cssSheet = sheetText.join('\n');
+        if ( this.cssSheets.has(cssSheet) ) { return; }
+        this.cssSheets.add(cssSheet);
+        self.cssAPI.insert(cssSheet);
     }
 
     addProcedurals(selectors) {
@@ -827,6 +838,10 @@ self.ProceduralFiltererAPI = class {
 
     qsa(selector) {
         const o = JSON.parse(selector);
+        if ( o.cssable ) {
+            const selector = o.selector.replace(/::[a-z()-]+$/, '');
+            return Array.from(document.querySelectorAll(selector));
+        }
         const pselector = new PSelectorRoot(null, o);
         return pselector.exec();
     }
diff --git a/platform/mv3/extension/js/scripting/picker.js b/platform/mv3/extension/js/scripting/picker.js
@@ -257,7 +257,12 @@ async function previewSelector(selector) {
         if ( self.pickerProceduralFilteringAPI === undefined ) {
             self.pickerProceduralFilteringAPI = new self.ProceduralFiltererAPI();
         }
-        self.pickerProceduralFilteringAPI.addProcedurals([ JSON.parse(selector) ]);
+        const pselector = JSON.parse(selector);
+        if ( pselector.cssable ) {
+            self.pickerProceduralFilteringAPI.addDeclaratives([ pselector ]);
+        } else {
+            self.pickerProceduralFilteringAPI.addProcedurals([ pselector ]);
+        }
         return;
     }
     previewedCSS = `${selector}{display:none!important;}`;

Original file line number	Diff line number	Diff line change
`@@ -257,7 +257,12 @@ async function previewSelector(selector) {`
`257`	`257`	`if ( self.pickerProceduralFilteringAPI === undefined ) {`
`258`	`258`	`self.pickerProceduralFilteringAPI = new self.ProceduralFiltererAPI();`
`259`	`259`	`}`
`260`		`- self.pickerProceduralFilteringAPI.addProcedurals([ JSON.parse(selector) ]);`
	`260`	`+ const pselector = JSON.parse(selector);`
	`261`	`+ if ( pselector.cssable ) {`
	`262`	`+ self.pickerProceduralFilteringAPI.addDeclaratives([ pselector ]);`
	`263`	`+ } else {`
	`264`	`+ self.pickerProceduralFilteringAPI.addProcedurals([ pselector ]);`
	`265`	`+ }`
`261`	`266`	`return;`
`262`	`267`	`}`
`263`	`268`	previewedCSS = `${selector}{display:none!important;}`;