Skip to content

Commit

Permalink
Introduce experimental procedural cosmetic operator :others()
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@gorhill
gorhill committed Feb 11, 2022
1 parent 9a5acbb commit 152120b
Show file tree
Hide file tree
Showing 2 changed files with 131 additions and 41 deletions.
161 changes: 122 additions & 39 deletions src/js/contentscript-extra.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand All @@ -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) ) {
Expand All @@ -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];
Expand All @@ -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; }
Expand Down Expand Up @@ -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;
Expand All @@ -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 = {
Expand Down Expand Up @@ -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;
}
Expand All @@ -234,9 +309,9 @@ const PSelectorXpathTask = class {
}
}
}
};
}

const PSelector = class {
class PSelector {
constructor(o) {
if ( PSelector.prototype.operatorToTaskMap === undefined ) {
PSelector.prototype.operatorToTaskMap = new Map([
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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
Expand All @@ -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;
Expand Down Expand Up @@ -457,7 +540,7 @@ const ProceduralFilterer = class {
removedNodes;
this.domFilterer.commit();
}
};
}

vAPI.DOMProceduralFilterer = ProceduralFilterer;

Expand Down
11 changes: 9 additions & 2 deletions src/js/static-filtering-parser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1575,7 +1575,7 @@ Parser.prototype.SelectorCompiler = class {
if ( this.querySelectable(s) ) { return s; }
}

compileRemoveSelector(s) {
compileNoArgument(s) {
if ( s === '' ) { return s; }
}

Expand Down Expand Up @@ -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':
Expand Down Expand Up @@ -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':
Expand All @@ -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, ],
Expand All @@ -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 ],
Expand Down

2 comments on commit 152120b

@uBlock-user
Copy link
Contributor

@uBlock-user uBlock-user commented on 152120b Feb 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:remove() filters no longer get applied in the latest dev build.

STR -- Add github.com##.dashboard-sidebar:remove() and the dashboard at the left side on the homepage will still appear and filter doesn't apper in the logger.

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed with 2177d81.

Please sign in to comment.