Introduce experimental procedural cosmetic operator :others()

gorhill · gorhill · commit 152120bd9ec7 · 2022-02-11T12:28:15.000-05:00
The purpose of this new procedural operator is to target all elements _outside_ than the currently selected set of elements. For any element feeding into `others()`, the resultset of the `others()` operator will include everything else except: - the descendants of a subject element - the ancestors of a subject element The resultset will contains the siblings of a subject element _except_ when those siblings are either a descendant or ancestor of another subject element. Related discussion: - https://www.reddit.com/r/uBlockOrigin/comments/slyjzp/ Though this operator is unlikely to be used in default lists, it opens the door to create specialized filter lists which purpose is some sort of "reader mode", where everything _else_ than a selected set of elements are hidden from view. Examples of usage: twitter.com##:matches-path(/^/home/) [data-testid="primaryColumn"]:others() nature.com##:matches-path(/^/articles//) :is(.c-breadcrumbs,.c-article-main-column):others() The status is currently considered experimental and support might be removed in the future if it turns out there is no sufficient usage or if unforeseen difficult issues arise implementation-wise.
diff --git a/src/js/contentscript-extra.js b/src/js/contentscript-extra.js
@@ -29,13 +29,24 @@ if (
 
 /******************************************************************************/
 
-// TODO: Experiment/evaluate loading procedural operator code using an
-//       on demand approach.
+const nonVisualElements = {
+    script: true,
+    style: true,
+};
 
 // 'P' stands for 'Procedural'
 
-const PSelectorHasTextTask = class {
+class PSelectorTask {
+    begin() {
+    }
+    end() {
+    }
+}
+
+
+class PSelectorHasTextTask extends PSelectorTask {
     constructor(task) {
+        super();
         let arg0 = task[1], arg1;
         if ( Array.isArray(task[1]) ) {
             arg1 = arg0[1]; arg0 = arg0[0];
@@ -47,26 +58,28 @@ const PSelectorHasTextTask = class {
             output.push(node);
         }
     }
-};
+}
 
-const PSelectorIfTask = class {
+class PSelectorIfTask extends PSelectorTask {
     constructor(task) {
+        super();
         this.pselector = new PSelector(task[1]);
     }
     transpose(node, output) {
         if ( this.pselector.test(node) === this.target ) {
             output.push(node);
         }
     }
-};
+}
 PSelectorIfTask.prototype.target = true;
 
-const PSelectorIfNotTask = class extends PSelectorIfTask {
-};
+class PSelectorIfNotTask extends PSelectorIfTask {
+}
 PSelectorIfNotTask.prototype.target = false;
 
-const PSelectorMatchesCSSTask = class {
+class PSelectorMatchesCSSTask extends PSelectorTask {
     constructor(task) {
+        super();
         this.name = task[1].name;
         let arg0 = task[1].value, arg1;
         if ( Array.isArray(arg0) ) {
@@ -80,30 +93,32 @@ const PSelectorMatchesCSSTask = class {
             output.push(node);
         }
     }
-};
+}
 PSelectorMatchesCSSTask.prototype.pseudo = null;
 
-const PSelectorMatchesCSSAfterTask = class extends PSelectorMatchesCSSTask {
-};
+class PSelectorMatchesCSSAfterTask extends PSelectorMatchesCSSTask {
+}
 PSelectorMatchesCSSAfterTask.prototype.pseudo = ':after';
 
-const PSelectorMatchesCSSBeforeTask = class extends PSelectorMatchesCSSTask {
-};
+class PSelectorMatchesCSSBeforeTask extends PSelectorMatchesCSSTask {
+}
 PSelectorMatchesCSSBeforeTask.prototype.pseudo = ':before';
 
-const PSelectorMinTextLengthTask = class {
+class PSelectorMinTextLengthTask extends PSelectorTask {
     constructor(task) {
+        super();
         this.min = task[1];
     }
     transpose(node, output) {
         if ( node.textContent.length >= this.min ) {
             output.push(node);
         }
     }
-};
+}
 
-const PSelectorMatchesPathTask = class {
+class PSelectorMatchesPathTask extends PSelectorTask {
     constructor(task) {
+        super();
         let arg0 = task[1], arg1;
         if ( Array.isArray(task[1]) ) {
             arg1 = arg0[1]; arg0 = arg0[0];
@@ -115,12 +130,69 @@ const PSelectorMatchesPathTask = class {
             output.push(node);
         }
     }
-};
+}
+
+class PSelectorOthersTask extends PSelectorTask {
+    constructor() {
+        super();
+        this.targets = new Set();
+    }
+    begin() {
+        this.targets.clear();
+    }
+    end(output) {
+        const toKeep = new Set(this.targets);
+        const toDiscard = new Set();
+        const body = document.body;
+        let discard = null;
+        for ( let keep of this.targets ) {
+            while ( keep !== null && keep !== body ) {
+                toKeep.add(keep);
+                toDiscard.delete(keep);
+                discard = keep.previousElementSibling;
+                while ( discard !== null ) {
+                    if (
+                        nonVisualElements[discard.localName] !== true &&
+                        toKeep.has(discard) === false
+                    ) {
+                        toDiscard.add(discard);
+                    }
+                    discard = discard.previousElementSibling;
+                }
+                discard = keep.nextElementSibling;
+                while ( discard !== null ) {
+                    if (
+                        nonVisualElements[discard.localName] !== true &&
+                        toKeep.has(discard) === false
+                    ) {
+                        toDiscard.add(discard);
+                    }
+                    discard = discard.nextElementSibling;
+                }
+                keep = keep.parentElement;
+            }
+        }
+        for ( discard of toDiscard ) {
+            output.push(discard);
+        }
+        this.targets.clear();
+    }
+    transpose(candidate) {
+        for ( const target of this.targets ) {
+            if ( target.contains(candidate) ) { return; }
+            if ( candidate.contains(target) ) {
+                this.targets.delete(target);
+            }
+        }
+        this.targets.add(candidate);
+    }
+}
 
 // https://github.com/AdguardTeam/ExtendedCss/issues/31#issuecomment-302391277
 //   Prepend `:scope ` if needed.
-const PSelectorSpathTask = class {
+class PSelectorSpathTask extends PSelectorTask {
     constructor(task) {
+        super();
         this.spath = task[1];
         this.nth = /^(?:\s*[+~]|:)/.test(this.spath);
         if ( this.nth ) { return; }
@@ -151,10 +223,11 @@ const PSelectorSpathTask = class {
             output.push(node);
         }
     }
-};
+}
 
-const PSelectorUpwardTask = class {
+class PSelectorUpwardTask extends PSelectorTask {
     constructor(task) {
+        super();
         const arg = task[1];
         if ( typeof arg === 'number' ) {
             this.i = arg;
@@ -179,12 +252,13 @@ const PSelectorUpwardTask = class {
         }
         output.push(node);
     }
-};
+}
 PSelectorUpwardTask.prototype.i = 0;
 PSelectorUpwardTask.prototype.s = '';
 
-const PSelectorWatchAttrs = class {
+class PSelectorWatchAttrs extends PSelectorTask {
     constructor(task) {
+        super();
         this.observer = null;
         this.observed = new WeakSet();
         this.observerOptions = {
@@ -213,10 +287,11 @@ const PSelectorWatchAttrs = class {
         this.observer.observe(node, this.observerOptions);
         this.observed.add(node);
     }
-};
+}
 
-const PSelectorXpathTask = class {
+class PSelectorXpathTask extends PSelectorTask {
     constructor(task) {
+        super();
         this.xpe = document.createExpression(task[1], null);
         this.xpr = null;
     }
@@ -234,9 +309,9 @@ const PSelectorXpathTask = class {
             }
         }
     }
-};
+}
 
-const PSelector = class {
+class PSelector {
     constructor(o) {
         if ( PSelector.prototype.operatorToTaskMap === undefined ) {
             PSelector.prototype.operatorToTaskMap = new Map([
@@ -251,22 +326,26 @@ const PSelector = class {
                 [ ':min-text-length', PSelectorMinTextLengthTask ],
                 [ ':not', PSelectorIfNotTask ],
                 [ ':nth-ancestor', PSelectorUpwardTask ],
+                [ ':others', PSelectorOthersTask ],
                 [ ':spath', PSelectorSpathTask ],
                 [ ':upward', PSelectorUpwardTask ],
                 [ ':watch-attr', PSelectorWatchAttrs ],
                 [ ':xpath', PSelectorXpathTask ],
             ]);
         }
         this.raw = o.raw;
-        this.selector = o.selector;
+        this.selector = ':root > :root';
         this.tasks = [];
-        const tasks = o.tasks;
-        if ( Array.isArray(tasks) === false ) { return; }
-        for ( const task of tasks ) {
-            this.tasks.push(
-                new (this.operatorToTaskMap.get(task[0]))(task)
-            );
+        const tasks = [];
+        if ( Array.isArray(o.tasks) === false ) { return; }
+        for ( const task of o.tasks ) {
+            const ctor = this.operatorToTaskMap.get(task[0]);
+            if ( ctor === undefined ) { return; }
+            tasks.push(new ctor(task));
         }
+        // Initialize only after all tasks have been successfully instantiated
+        this.selector = o.selector;
+        this.tasks = tasks;
     }
     prime(input) {
         const root = input || document;
@@ -278,9 +357,11 @@ const PSelector = class {
         for ( const task of this.tasks ) {
             if ( nodes.length === 0 ) { break; }
             const transposed = [];
+            task.begin();
             for ( const node of nodes ) {
                 task.transpose(node, transposed);
             }
+            task.end(transposed);
             nodes = transposed;
         }
         return nodes;
@@ -291,20 +372,22 @@ const PSelector = class {
             let output = [ node ];
             for ( const task of this.tasks ) {
                 const transposed = [];
+                task.begin();
                 for ( const node of output ) {
                     task.transpose(node, transposed);
                 }
+                task.end(transposed);
                 output = transposed;
                 if ( output.length === 0 ) { break; }
             }
             if ( output.length !== 0 ) { return true; }
         }
         return false;
     }
-};
+}
 PSelector.prototype.operatorToTaskMap = undefined;
 
-const PSelectorRoot = class extends PSelector {
+class PSelectorRoot extends PSelector {
     constructor(o, styleToken) {
         super(o);
         this.budget = 200; // I arbitrary picked a 1/5 second
@@ -313,10 +396,10 @@ const PSelectorRoot = class extends PSelector {
         this.lastAllowanceTime = 0;
         this.styleToken = styleToken;
     }
-};
+}
 PSelectorRoot.prototype.hit = false;
 
-const ProceduralFilterer = class {
+class ProceduralFilterer {
     constructor(domFilterer) {
         this.domFilterer = domFilterer;
         this.domIsReady = false;
@@ -457,7 +540,7 @@ const ProceduralFilterer = class {
             removedNodes;
         this.domFilterer.commit();
     }
-};
+}
 
 vAPI.DOMProceduralFilterer = ProceduralFilterer;
 
diff --git a/src/js/static-filtering-parser.js b/src/js/static-filtering-parser.js
@@ -1575,7 +1575,7 @@ Parser.prototype.SelectorCompiler = class {
         if ( this.querySelectable(s) ) { return s; }
     }
 
-    compileRemoveSelector(s) {
+    compileNoArgument(s) {
         if ( s === '' ) { return s; }
     }
 
@@ -1683,6 +1683,7 @@ Parser.prototype.SelectorCompiler = class {
                 raw.push(task[1]);
                 break;
             case ':min-text-length':
+            case ':others':
             case ':upward':
             case ':watch-attr':
             case ':xpath':
@@ -1860,8 +1861,10 @@ Parser.prototype.SelectorCompiler = class {
             return this.compileInteger(args);
         case ':not':
             return this.compileNotSelector(args);
+        case ':others':
+            return this.compileNoArgument(args);
         case ':remove':
-            return this.compileRemoveSelector(args);
+            return this.compileNoArgument(args);
         case ':spath':
             return this.compileSpathExpression(args);
         case ':style':
@@ -1878,6 +1881,9 @@ Parser.prototype.SelectorCompiler = class {
     }
 };
 
+// bit 0: can be used as auto-completion hint
+// bit 1: can not be used in HTML filtering
+//
 Parser.prototype.proceduralOperatorTokens = new Map([
     [ '-abp-contains', 0b00 ],
     [ '-abp-has', 0b00, ],
@@ -1893,6 +1899,7 @@ Parser.prototype.proceduralOperatorTokens = new Map([
     [ 'min-text-length', 0b01 ],
     [ 'not', 0b01 ],
     [ 'nth-ancestor', 0b00 ],
+    [ 'others', 0b01 ],
     [ 'remove', 0b11 ],
     [ 'style', 0b11 ],
     [ 'upward', 0b01 ],
