[mv3] Fix potentially residual user styles when previewing custom filters

gorhill · gorhill · commit cc565042735e · 2026-05-09T12:31:09.000-04:00
In preview mode, quickly moving the slider back and forth could cause
unwanted injected user stylesheets to be left active in the page,
potentially leaving the page with many missing elements.

The fix is to ensures previously injected user stylesheets related to
preview are removed before injecting new ones.
diff --git a/platform/mv3/extension/js/scripting/picker.js b/platform/mv3/extension/js/scripting/picker.js
@@ -238,19 +238,26 @@ const excludedSelectors = [
 /******************************************************************************/
 
 async function previewSelector(selector) {
-    if ( selector === previewedSelector ) { return; }
-    if ( previewedSelector !== '' ) {
-        if ( previewedSelector.startsWith('{') ) {
+    previewSelector.promise = previewSelector.promise.then(( ) =>
+        previewSelector.commit(selector)
+    );
+    return previewSelector.promise;
+}
+
+previewSelector.commit = async function(selector) {
+    if ( selector === previewSelector.selector ) { return; }
+    if ( previewSelector.selector !== '' ) {
+        if ( previewSelector.selector.startsWith('{') ) {
             if ( self.pickerProceduralFilteringAPI ) {
                 await self.pickerProceduralFilteringAPI.reset();
             }
         }
-        if ( previewedCSS !== '' ) {
-            await ubolOverlay.sendMessage({ what: 'removeCSS', css: previewedCSS });
-            previewedCSS = '';
+        if ( previewSelector.css !== '' ) {
+            await ubolOverlay.sendMessage({ what: 'removeCSS', css: previewSelector.css });
+            previewSelector.css = '';
         }
     }
-    previewedSelector = selector || '';
+    previewSelector.selector = selector || '';
     if ( selector === '' ) { return; }
     if ( selector.startsWith('{') ) {
         if ( self.ProceduralFiltererAPI === undefined ) { return; }
@@ -265,12 +272,13 @@ async function previewSelector(selector) {
         }
         return;
     }
-    previewedCSS = `${selector}{display:none!important;}`;
-    await ubolOverlay.sendMessage({ what: 'insertCSS', css: previewedCSS });
-}
+    previewSelector.css = `${selector}{display:none!important;}`;
+    await ubolOverlay.sendMessage({ what: 'insertCSS', css: previewSelector.css });
+};
 
-let previewedSelector = '';
-let previewedCSS = '';
+previewSelector.promise = Promise.resolve();
+previewSelector.selector = '';
+previewSelector.css = '';
 
 /******************************************************************************/
 
