Add procedural operator content(...), to lookup elements inside template tags

As discussed internally with team.

Author: gorhill

src/js/contentscript-extra.js

@@ -63,6 +63,19 @@ class PSelectorVoidTask extends PSelectorTask {
     }
 }
 
+class PSelectorContentTask extends PSelectorTask {
+    constructor(task) {
+        super();
+        this.selector = task[1];
+    }
+    transpose(node, output) {
+        const root = node.content;
+        if ( root?.querySelectorAll !== 'function' ) { return; }
+        const nodes = root.querySelectorAll(this.selector);
+        output.push(...nodes);
+    }
+}
+
 class PSelectorHasTextTask extends PSelectorTask {
     constructor(task) {
         super();
@@ -280,6 +293,7 @@ class PSelectorShadowTask extends PSelectorTask {
         if ( PSelectorShadowTask.openOrClosedShadowRoot !== undefined ) {
             return PSelectorShadowTask.openOrClosedShadowRoot;
         }
+        const { chrome }  = self;
         if ( typeof chrome === 'object' && chrome !== null ) {
             if ( chrome.dom instanceof Object ) {
                 if ( typeof chrome.dom.openOrClosedShadowRoot === 'function' ) {
@@ -476,6 +490,7 @@ class PSelector {
     }
 }
 PSelector.prototype.operatorToTaskMap = new Map([
+    [ 'content', PSelectorContentTask ],
     [ 'has', PSelectorIfTask ],
     [ 'has-text', PSelectorHasTextTask ],
     [ 'if', PSelectorIfTask ],

src/js/html-filtering.js

@@ -65,6 +65,19 @@ class PSelectorVoidTask {
     transpose() {
     }
 }
+
+class PSelectorContentTask {
+    constructor(task) {
+        this.selector = task[1];
+    }
+    transpose(node, output) {
+        const root = node.content;
+        if ( typeof root?.querySelectorAll !== 'function' ) { return; }
+        const nodes = root.querySelectorAll(this.selector);
+        output.push(...nodes);
+    }
+}
+
 class PSelectorHasTextTask {
     constructor(task) {
         this.needle = regexFromString(task[1]);
@@ -238,6 +251,7 @@ class PSelector {
     }
 }
 PSelector.prototype.operatorToTaskMap = new Map([
+    [ 'content', PSelectorContentTask ],
     [ 'has', PSelectorIfTask ],
     [ 'has-text', PSelectorHasTextTask ],
     [ 'if', PSelectorIfTask ],
@@ -329,7 +343,7 @@ htmlFilteringEngine.compile = function(parser, writer) {
     // Only exception filters are allowed to be global.
     if ( parser.hasOptions() === false ) {
         if ( isException ) {
-            writer.push([ 64, '', 1, compiled ]);
+            writer.push([ 64, '', `-${compiled}` ]);
         }
         return;
     }

src/js/static-filtering-parser.js

@@ -3312,6 +3312,7 @@ export class ExtSelectorCompiler {
             ':style',
         ]);
         this.proceduralOperatorNames = new Set([
+            'content',
             'has-text',
             'if',
             'if-not',
@@ -3959,6 +3960,8 @@ export class ExtSelectorCompiler {
         const arg = this.astSerialize(parts, false);
         if ( arg === undefined ) { return; }
         switch ( operator ) {
+        case 'content':
+            return this.compileSelector(arg);
         case 'has-text':
             return this.compileText(arg);
         case 'if':
@@ -4194,6 +4197,7 @@ export const proceduralOperatorTokens = new Map([
     [ '-abp-contains', 0b00 ],
     [ '-abp-has', 0b00, ],
     [ 'contains', 0b00, ],
+    [ 'content', 0b01, ],
     [ 'has', 0b01 ],
     [ 'has-text', 0b01 ],
     [ 'if', 0b00 ],
@@ -4207,9 +4211,10 @@ export const proceduralOperatorTokens = new Map([
     [ 'not', 0b01 ],
     [ 'nth-ancestor', 0b00 ],
     [ 'others', 0b11 ],
-    [ 'remove', 0b11 ],
+    [ 'remove', 0b01 ],
     [ 'remove-attr', 0b11 ],
     [ 'remove-class', 0b11 ],
+    [ 'shadow', 0b11, ],
     [ 'style', 0b11 ],
     [ 'upward', 0b01 ],
     [ 'watch-attr', 0b11 ],