Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: chrome/content/elemHideEmulation.js

Issue 29383960: Issue 3143 - Filter elements with :-abp-has() (Closed) Base URL: https://hg.adblockplus.org/adblockpluscore
Patch Set: More cleanup, more robust tests Created March 22, 2017, 2:42 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | lib/filterClasses.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 // We are currently limited to ECMAScript 5 in this file, because it is being 1 // We are currently limited to ECMAScript 5 in this file, because it is being
2 // used in the browser tests. See https://issues.adblockplus.org/ticket/4796 2 // used in the browser tests. See https://issues.adblockplus.org/ticket/4796
3 3
4 var propertySelectorRegExp = /\[\-abp\-properties=(["'])([^"']+)\1\]/; 4 var propertySelectorRegExp = /\[\-abp\-properties=(["'])([^"']+)\1\]/;
5 var pseudoClassHasSelectorRegExp = /:has\((.*)\)/;
6
7 // polyfill. We should deal with this better, but PhantomJS doesn't
8 // have matches. At least not in the version we use.
9 // Chrome 34, Firefox 34, Opera 21 and Safari 7.1 do have it.
10 if (!Element.prototype.matches) {
11 Element.prototype.matches =
12 Element.prototype.matchesSelector ||
13 Element.prototype.mozMatchesSelector ||
14 Element.prototype.msMatchesSelector ||
15 Element.prototype.oMatchesSelector ||
16 Element.prototype.webkitMatchesSelector
17 }
18
19 // return the index were the simple-selector ends
20 function findFirstSelector(selector)
21 {
22 var sepIndex = selector.indexOf(' ');
23 var nextIndex = selector.indexOf('>');
24 if (nextIndex != -1)
25 sepIndex = sepIndex == -1 ? nextIndex : Math.min(sepIndex, nextIndex);
26 nextIndex = selector.indexOf('+');
27 if (nextIndex != -1)
28 sepIndex = sepIndex == -1 ? nextIndex : Math.min(sepIndex, nextIndex);
29 nextIndex = selector.indexOf('~');
30 if (nextIndex != -1)
31 sepIndex = sepIndex == -1 ? nextIndex : Math.min(sepIndex, nextIndex);
32 return sepIndex;
33 }
34
35 function extractFirstSelector(selector)
36 {
37 var sepIndex = findFirstSelector(selector);
38
39 if (sepIndex == -1)
40 return selector;
41
42 return selector.substr(0, sepIndex);
43 }
5 44
6 function splitSelector(selector) 45 function splitSelector(selector)
7 { 46 {
8 if (selector.indexOf(",") == -1) 47 if (selector.indexOf(",") == -1)
9 return [selector]; 48 return [selector];
10 49
11 var selectors = []; 50 var selectors = [];
12 var start = 0; 51 var start = 0;
13 var level = 0; 52 var level = 0;
14 var sep = ""; 53 var sep = "";
(...skipping 19 matching lines...) Expand all
34 selectors.push(selector.substring(start, i)); 73 selectors.push(selector.substring(start, i));
35 start = i + 1; 74 start = i + 1;
36 } 75 }
37 } 76 }
38 } 77 }
39 78
40 selectors.push(selector.substring(start)); 79 selectors.push(selector.substring(start));
41 return selectors; 80 return selectors;
42 } 81 }
43 82
44 function ElemHideEmulation(window, getFiltersFunc, addSelectorsFunc) 83 function selectChildren(e, selector)
84 {
85 var sel = selector;
86 // XXX we should have a more elegant way
87 // also startsWith isn't available in PhantomJS.
88 var combinator = sel.substr(0, 1);
89 var subElements;
90 var nextEl = e;
91 sel = sel.substr(1).trim();
92 switch (combinator)
93 {
94 case ">":
95 subElements = e.querySelectorAll(sel);
96 break;
97
98 case "+":
99 do
100 {
101 nextEl = nextEl.nextSibling;
102 }
103 while (nextEl && nextEl.nodeType != 1);
104
105 var siblingSel = extractFirstSelector(sel);
106 var idx = findFirstSelector(sel);
107 var childSel = idx != -1 ? sel.substr(idx + 1).trim() : "";
108
109 if (nextEl && nextEl.matches(siblingSel))
110 {
111 if (childSel != "")
112 subElements = selectChildren(nextEl, childSel);
113 else
114 subElements = [ nextEl ];
115 }
116 break;
117
118 case "~":
119 do
120 {
121 nextEl = nextEl.nextSibling;
122 if (nextEl && nextEl.nodeType == 1 && nextEl.matches(sel))
123 {
124 subElements = nextEl.querySelectorAll(sel);
125 break;
126 }
127 }
128 while (nextEl);
129
130 break;
131 }
132 return subElements;
133 }
134
135 function parsePattern(pattern)
136 {
137 // we should catch the :has() pseudo class first.
138 var match = pseudoClassHasSelectorRegExp.exec(pattern.selector);
139 if (match)
140 {
141 return {
142 type: "has",
143 text: pattern.text,
144 elementMatcher: new PseudoHasMatcher(match[1]),
145 prefix: pattern.selector.substr(0, match.index).trim(),
146 suffix: pattern.selector.substr(match.index + match[0].length).trim()
147 };
148 }
149
150 match = propertySelectorRegExp.exec(pattern.selector);
151 if (match)
152 {
153 var regexpString;
154 var propertyExpression = match[2];
155 if (propertyExpression.length >= 2 && propertyExpression[0] == "/" &&
156 propertyExpression[propertyExpression.length - 1] == "/")
157 regexpString = propertyExpression.slice(1, -1)
158 .replace("\\x7B ", "{").replace("\\x7D ", "}");
159 else
160 regexpString = filterToRegExp(propertyExpression);
161 return {
162 type: "props",
163 text: pattern.text,
164 regexp: new RegExp(regexpString, "i"),
165 prefix: pattern.selector.substr(0, match.index),
166 suffix: pattern.selector.substr(match.index + match[0].length)
167 };
168 }
169 }
170
171 function matchStyleProps(style, rule, pattern, selectors, filters)
172 {
173 if (pattern.regexp.test(style))
174 {
175 var subSelectors = splitSelector(rule.selectorText);
176 for (var i = 0; i < subSelectors.length; i++)
177 {
178 var subSelector = subSelectors[i];
179 selectors.push(pattern.prefix + subSelector + pattern.suffix);
180 filters.push(pattern.text);
181 }
182 }
183 }
184
185 function findPropsSelectors(stylesheet, patterns, selectors, filters)
186 {
187 var rules = stylesheet.cssRules;
188 if (!rules)
189 return;
190
191 for (var i = 0; i < rules.length; i++)
192 {
193 var rule = rules[i];
194 if (rule.type != rule.STYLE_RULE)
195 continue;
196
197 var style = stringifyStyle(rule.style);
198 for (var j = 0; j < patterns.length; j++)
199 {
200 matchStyleProps(style, rule, patterns[j], selectors, filters);
201 }
202 }
203 }
204
205 function stringifyStyle(style)
206 {
207 var styles = [];
208 for (var i = 0; i < style.length; i++)
209 {
210 var property = style.item(i);
211 var value = style.getPropertyValue(property);
212 var priority = style.getPropertyPriority(property);
213 styles.push(property + ": " + value + (priority ? " !" + priority : "") + "; ");
214 }
215 styles.sort();
216 return styles.join(" ");
217 }
218
219 // matcher for the pseudo CSS4 class :has
220 // For those browser that don't have it yet.
221 function PseudoHasMatcher(selector)
222 {
223 this.hasSelector = selector;
224 this.parsed = parsePattern({ selector: this.hasSelector });
225 if (this.parsed && this.parsed.type == "has")
226 {
227 console.log("unsupported :has() pattern", this.hasSelector);
228 }
229 }
230
231 PseudoHasMatcher.prototype = {
232 match: function(elem, stylesheets, firstOnly)
233 {
234 var matches = [];
235 var selectors = [];
236
237 if (this.parsed)
238 {
239 if (this.parsed.type == "has")
240 return [];
241 if (this.parsed.type == "props")
242 {
243 var filters = []; // don't need this
244 for (var i = 0; i < stylesheets.length; i++)
245 findPropsSelectors(stylesheets[i], [this.parsed], selectors, filters);
246 }
247 }
248 else
249 {
250 selectors = [this.hasSelector];
251 }
252
253 // look up for all elements that match the :has().
254 for (var k = 0; k < selectors.length; k++)
255 {
256 try
257 {
258 console.log("querying", selectors[k]);
259 var hasElem = elem.querySelector(selectors[k]);
260 if (hasElem)
261 {
262 matches.push(hasElem);
263 if (firstOnly)
264 break;
265 }
266 }
267 catch(e)
268 {
269 console.log("Exception with querySelector()", selectors[k]);
270 }
271 }
272 return matches;
273 }
274 };
275
276 function ElemHideEmulation(window, getFiltersFunc, addSelectorsFunc, hideElement sFunc)
45 { 277 {
46 this.window = window; 278 this.window = window;
47 this.getFiltersFunc = getFiltersFunc; 279 this.getFiltersFunc = getFiltersFunc;
48 this.addSelectorsFunc = addSelectorsFunc; 280 this.addSelectorsFunc = addSelectorsFunc;
281 this.hideElementsFunc = hideElementsFunc;
49 } 282 }
50 283
51 ElemHideEmulation.prototype = { 284 ElemHideEmulation.prototype = {
52 stringifyStyle: function(style)
53 {
54 var styles = [];
55 for (var i = 0; i < style.length; i++)
56 {
57 var property = style.item(i);
58 var value = style.getPropertyValue(property);
59 var priority = style.getPropertyPriority(property);
60 styles.push(property + ": " + value + (priority ? " !" + priority : "") + ";");
61 }
62 styles.sort();
63 return styles.join(" ");
64 },
65 285
66 isSameOrigin: function(stylesheet) 286 isSameOrigin: function(stylesheet)
67 { 287 {
68 try 288 try
69 { 289 {
70 return new URL(stylesheet.href).origin == this.window.location.origin; 290 return new URL(stylesheet.href).origin == this.window.location.origin;
71 } 291 }
72 catch (e) 292 catch (e)
73 { 293 {
74 // Invalid URL, assume that it is first-party. 294 // Invalid URL, assume that it is first-party.
75 return true; 295 return true;
76 } 296 }
77 }, 297 },
78 298
79 findSelectors: function(stylesheet, selectors, filters) 299 findPseudoClassHasElements: function(stylesheets, elements, filters)
80 { 300 {
81 // Explicitly ignore third-party stylesheets to ensure consistent behavior 301 for (var i = 0; i < this.pseudoHasPatterns.length; i++)
82 // between Firefox and Chrome. 302 {
83 if (!this.isSameOrigin(stylesheet)) 303 var pattern = this.pseudoHasPatterns[i];
84 return; 304
85 305 var haveEl = document.querySelectorAll(pattern.prefix);
86 var rules = stylesheet.cssRules; 306 for (var j = 0; j < haveEl.length; j++)
87 if (!rules) 307 {
88 return; 308 var matched = pattern.elementMatcher.match(haveEl[j], stylesheets, !patt ern.suffix);
89 309 if (matched.length == 0)
90 for (var i = 0; i < rules.length; i++) 310 continue;
91 { 311
92 var rule = rules[i]; 312 if (pattern.suffix)
93 if (rule.type != rule.STYLE_RULE) 313 {
94 continue; 314 matched.forEach(function(e)
95
96 var style = this.stringifyStyle(rule.style);
97 for (var j = 0; j < this.patterns.length; j++)
98 {
99 var pattern = this.patterns[j];
100 if (pattern.regexp.test(style))
101 {
102 var subSelectors = splitSelector(rule.selectorText);
103 for (var k = 0; k < subSelectors.length; k++)
104 { 315 {
105 var subSelector = subSelectors[k]; 316 var subElements = selectChildren(e, pattern.suffix);
106 selectors.push(pattern.prefix + subSelector + pattern.suffix); 317 if (subElements)
107 filters.push(pattern.text); 318 {
108 } 319 for (var k = 0; k < subElements.length; k++)
320 {
321 elements.push(subElements[i]);
322 filters.push(pattern.text);
323 }
324 }
325 });
326 }
327 else
328 {
329 elements.push(haveEl[j]);
330 filters.push(pattern.text);
109 } 331 }
110 } 332 }
111 } 333 }
112 }, 334 },
113 335
114 addSelectors: function(stylesheets) 336 addSelectors: function(stylesheets)
115 { 337 {
116 var selectors = []; 338 var selectors = [];
117 var filters = []; 339 var filters = [];
118 for (var i = 0; i < stylesheets.length; i++) 340 for (var i = 0; i < stylesheets.length; i++)
119 this.findSelectors(stylesheets[i], selectors, filters); 341 {
342 // Explicitly ignore third-party stylesheets to ensure consistent behavior
343 // between Firefox and Chrome.
344 if (!this.isSameOrigin(stylesheets[i]))
345 continue;
346 findPropsSelectors(stylesheets[i], this.propSelPatterns, selectors, filter s);
347 }
120 this.addSelectorsFunc(selectors, filters); 348 this.addSelectorsFunc(selectors, filters);
121 }, 349 },
122 350
351 hideElements: function(stylesheets)
352 {
353 var elements = [];
354 var filters = [];
355 this.findPseudoClassHasElements(stylesheets, elements, filters);
356 this.hideElementsFunc(elements, filters);
357 },
358
123 onLoad: function(event) 359 onLoad: function(event)
124 { 360 {
125 var stylesheet = event.target.sheet; 361 var stylesheet = event.target.sheet;
126 if (stylesheet) 362 if (stylesheet)
127 this.addSelectors([stylesheet]); 363 this.addSelectors([stylesheet]);
364 this.hideElements([stylesheet]);
128 }, 365 },
129 366
130 apply: function() 367 apply: function()
131 { 368 {
132 this.getFiltersFunc(function(patterns) 369 this.getFiltersFunc(function(patterns)
133 { 370 {
134 this.patterns = []; 371 this.propSelPatterns = [];
372 this.pseudoHasPatterns = [];
135 for (var i = 0; i < patterns.length; i++) 373 for (var i = 0; i < patterns.length; i++)
136 { 374 {
137 var pattern = patterns[i]; 375 var pattern = patterns[i];
138 var match = propertySelectorRegExp.exec(pattern.selector); 376 var parsed = parsePattern(pattern);
139 if (!match) 377 if (parsed == undefined)
140 continue; 378 continue;
141 379 if (parsed.type == "props")
142 var propertyExpression = match[2]; 380 {
143 var regexpString; 381 this.propSelPatterns.push(parsed);
144 if (propertyExpression.length >= 2 && propertyExpression[0] == "/" && 382 }
145 propertyExpression[propertyExpression.length - 1] == "/") 383 else if (parsed.type == "has")
146 regexpString = propertyExpression.slice(1, -1) 384 {
147 .replace("\\x7B ", "{").replace("\\x7D ", "}"); 385 this.pseudoHasPatterns.push(parsed);
148 else 386 }
149 regexpString = filterToRegExp(propertyExpression); 387 }
150 388
151 this.patterns.push({ 389 if (this.pseudoHasPatterns.length > 0 || this.propSelPatterns.length > 0)
152 text: pattern.text,
153 regexp: new RegExp(regexpString, "i"),
154 prefix: pattern.selector.substr(0, match.index),
155 suffix: pattern.selector.substr(match.index + match[0].length)
156 });
157 }
158
159 if (this.patterns.length > 0)
160 { 390 {
161 var document = this.window.document; 391 var document = this.window.document;
162 this.addSelectors(document.styleSheets); 392 this.addSelectors(document.styleSheets);
393 this.hideElements(document.styleSheets);
163 document.addEventListener("load", this.onLoad.bind(this), true); 394 document.addEventListener("load", this.onLoad.bind(this), true);
164 } 395 }
165 }.bind(this)); 396 }.bind(this));
166 } 397 }
167 }; 398 };
OLDNEW
« no previous file with comments | « no previous file | lib/filterClasses.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld