Skip to content

Commit 72bb700

Browse files
gorhillgorhill
committedMar 7, 2020
Add procedural cosmetic operators remove() and upward()
*** New procedural cosmetic operator: `:remove()` Related issue: - #2252 The purpose is to outright remove elements from the DOM tree. Since `:remove()` is an "action" operator, it must only be used as a trailing operator (just like the `:style()` operator). AdGuard's cosmetic filter syntax `{ remove: true; }` will be converted to uBO's `:remove()` operator internally. *** New procedural cosmetic operator: `:upward(...)` The purpose is to lookup an ancestor element. When used with an integer argument, it is synonym of `:nth-ancestor()`, which will be deprecated and which will no longer be supported once no longer used in mainstream filter lists. Filter lists maintainers must only use `:upward(int)` instead of `:nth-ancestor(int)` once the new operator become available in all stable releases of uBO. `:upward()` can also accept a CSS selector as argument, in which case the nearest ancestor which matches the CSS selector will be selected.
·
npm_0.1.111.26.0
1 parent 14ebfbe commit 72bb700

11 files changed

+436
-183
lines changed
 

‎docs/tests/css-selector-based-cosmetic-filters.html

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>CSS selector-based cosmetic filters</title>
7+
<style>
8+
.filters {
9+
font-family: monospace;
10+
white-space: pre;
11+
}
12+
.tests {
13+
align-items: flex-start;
14+
display: flex;
15+
flex-wrap: wrap;
16+
}
17+
.tile {
18+
display: inline-flex;
19+
flex-direction: column;
20+
margin: 0 20px 10px 0;
21+
min-width: 200px;
22+
}
23+
.tile div {
24+
align-items: center;
25+
color: white;
26+
display: flex;
27+
justify-content: center;
28+
}
29+
.tile > div {
30+
height: 50px;
31+
position: relative;
32+
}
33+
.tile > div > div {
34+
height: 100%;
35+
left: 0;
36+
position: absolute;
37+
top: 0;
38+
width: 100%;
39+
}
40+
.tile > code {
41+
align-self: center;
42+
}
43+
.pass {
44+
background-color: green;
45+
}
46+
.pass::before {
47+
content: 'pass';
48+
}
49+
.fail {
50+
background-color: red;
51+
}
52+
.fail::before {
53+
content: 'fail';
54+
}
55+
.tests a, .tests b {
56+
display: none;
57+
}
58+
.tests a::before {
59+
opacity: 0;
60+
}
61+
.tests b::after {
62+
opacity: 0;
63+
}
64+
.fail-pseudo::before {
65+
align-items: center;
66+
background-color: red;
67+
content: 'fail';
68+
display: flex;
69+
height: 100%;
70+
justify-content: center;
71+
left: 0;
72+
position: absolute;
73+
top: 0;
74+
width: 100%;
75+
}
76+
</style>
77+
</head>
78+
<body>
79+
<h1>CSS selector-based cosmetic filters</h1>
80+
<p><a href="./.">Back</a>
81+
<br><br></p>
82+
<h3>Filters</h3>
83+
<div class="filters"><noscript>Enable JavaScript to see needed filters</noscript></div>
84+
85+
<h3>Tests</h3>
86+
<div id="ccf" class="tests">
87+
88+
<div id="a1" class="tile">
89+
<div class="pass"><div class="fail"><a><b></b></a></div></div>
90+
<code class="generic">#ccf #a1 .fail</code>
91+
</div>
92+
93+
<div id="a2" class="tile">
94+
<div class="pass"><div class="fail"><a><b></b></a></div></div>
95+
<code class="generic">#ccf #a2 .fail:not(.a2)</code>
96+
</div>
97+
98+
<div id="a3" class="tile">
99+
<div class="pass"><div class="fail"><a><b></b></a></div></div>
100+
<code>#ccf #a3 .fail</code>
101+
</div>
102+
103+
<div id="a4" class="tile">
104+
<div class="pass"><div class="fail"><a><b></b></a></div></div>
105+
<code>#ccf #a4 .fail:not(.a4)</code>
106+
</div>
107+
108+
<div id="a5" class="tile">
109+
<div class="pass"><div class="fail"><a><b></b></a></div></div>
110+
<code>#ccf #a5 .fail:style(visibility: hidden)</code>
111+
</div>
112+
113+
<div id="a6" class="tile">
114+
<div class="pass"><div class="fail-pseudo"><a><b></b></a></div></div>
115+
<code class="generic">#ccf #a6 .fail-pseudo::before</code>
116+
</div>
117+
118+
<div id="a7" class="tile">
119+
<div class="pass"><div class="fail-pseudo"><a><b></b></a></div></div>
120+
<code>#ccf #a7 .fail-pseudo::before</code>
121+
</div>
122+
123+
<div id="a8" class="tile">
124+
<div class="pass"><div class="fail-pseudo"><a><b></b></a></div></div>
125+
<code>#ccf #a8 .fail-pseudo::before:style(visibility: hidden)</code>
126+
</div>
127+
128+
</div>
129+
130+
<script>
131+
const hostname = self.location.hostname;
132+
const filters = [];
133+
const fragment = document.createDocumentFragment();
134+
for ( const node of document.querySelectorAll('code') ) {
135+
const div = document.createElement('div');
136+
let text = '##' + node.textContent;
137+
if ( node.classList.contains('generic') === false ) {
138+
text = hostname + text;
139+
}
140+
div.textContent = text;
141+
fragment.appendChild(div);
142+
}
143+
const parent = document.querySelector('.filters');
144+
while ( parent.lastElementChild !== null ) {
145+
parent.removeChild(parent.lastElementChild);
146+
}
147+
parent.appendChild(fragment);
148+
</script>
149+
</body>
150+
</html>

‎docs/tests/index.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,14 @@
99
<h1>uBlock Origin tests</h1>
1010
<p>Some of the pages below are hosted on <a href="raw.githack.com">raw.githack.com</a> in order to ensure some of the secondary resources can be properly loaded (specifically, the WebAssembly modules, as they <a href="https://github.com/WebAssembly/design/blob/master/Web.md#webassemblyinstantiatestreaming">require to be loaded using same-origin policy</a>).</p>
1111
<ul>
12-
<li><a href="https://raw.githack.com/gorhill/uBlock/master/docs/tests/hntrie-test.html">HNTrie: tests</a>
13-
<li><a href="https://raw.githack.com/gorhill/uBlock/master/docs/tests/hnset-benchmark.html">HNTrie, small (2) to medium (~1000) set: benchmarks</a>
14-
<li><a href="https://raw.githack.com/gorhill/uBlock/master/docs/tests/hnbigset-benchmark.html">HNTrie, small (2) to large (40,000+) set: benchmarks</a>
12+
<li><a href="css-selector-based-cosmetic-filters.html">CSS selector-based cosmetic filters</a>
1513
<li><a href="procedural-cosmetic-filters.html">Procedural cosmetic filters</a>
1614
<li><a href="procedural-html-filters.html">Procedural HTML filters</a>
1715
<li><a href="scriptlet-injection-filters-1.html">Scriptlet injection filters / no-setTimeout-if</a>
16+
<li>&nbsp;
17+
<li><a href="https://raw.githack.com/gorhill/uBlock/master/docs/tests/hntrie-test.html">HNTrie: tests</a>
18+
<li><a href="https://raw.githack.com/gorhill/uBlock/master/docs/tests/hnset-benchmark.html">HNTrie, small (2) to medium (~1000) set: benchmarks</a>
19+
<li><a href="https://raw.githack.com/gorhill/uBlock/master/docs/tests/hnbigset-benchmark.html">HNTrie, small (2) to large (40,000+) set: benchmarks</a>
1820
</ul>
1921
</body>
2022
</html>

‎docs/tests/procedural-cosmetic-filters.html

+15
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,21 @@ <h3>Tests</h3>
167167
<code>#pcf #a17 .fail:has(~ a:has(b))</code>
168168
</div>
169169

170+
<div id="a18" class="tile">
171+
<div class="pass"><div class="fail"></div><a><b></b></a></div>
172+
<code>#pcf #a18 .fail:remove()</code>
173+
</div>
174+
175+
<div id="a19" class="tile">
176+
<div class="pass"><div class="fail"><a><b></b></a></div></div>
177+
<code>#pcf #a19 b:upward(2)</code>
178+
</div>
179+
180+
<div id="a20" class="tile">
181+
<div class="pass"><div class="fail"><a><b></b></a></div></div>
182+
<code>#pcf #a20 b:upward(.fail)</code>
183+
</div>
184+
170185
</div>
171186

172187
<script>

‎docs/tests/procedural-html-filters.html

+10
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,16 @@ <h3>Tests</h3>
138138
<code>^#phf #a13 .fail:has(~ a:has(b))</code>
139139
</div>
140140

141+
<div id="a14" class="tile">
142+
<div class="pass"><div class="fail"><a><b></b></a></div></div>
143+
<code>^#phf #a14 b:upward(2)</code>
144+
</div>
145+
146+
<div id="a15" class="tile">
147+
<div class="pass"><div class="fail"><a><b></b></a></div></div>
148+
<code>^#phf #a15 b:upward(.fail)</code>
149+
</div>
150+
141151
</div>
142152

143153
<script>

‎platform/chromium/vapi-usercss.pseudo.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ vAPI.DOMFilterer = class {
184184
Array.from(this.specificSimpleHide).join(',\n');
185185
}
186186
for ( const node of this.addedNodes ) {
187-
if ( node[vAPI.matchesProp](this.specificSimpleHideAggregated) ) {
187+
if ( node.matches(this.specificSimpleHideAggregated) ) {
188188
this.hideNode(node);
189189
}
190190
const nodes = node.querySelectorAll(this.specificSimpleHideAggregated);

0 commit comments

Comments
 (0)