Left: | ||
Right: |
OLD | NEW |
---|---|
1 /* | 1 /* |
2 * This file is part of Adblock Plus <https://adblockplus.org/>, | 2 * This file is part of Adblock Plus <https://adblockplus.org/>, |
3 * Copyright (C) 2006-2016 Eyeo GmbH | 3 * Copyright (C) 2006-2016 Eyeo GmbH |
4 * | 4 * |
5 * Adblock Plus is free software: you can redistribute it and/or modify | 5 * Adblock Plus is free software: you can redistribute it and/or modify |
6 * it under the terms of the GNU General Public License version 3 as | 6 * it under the terms of the GNU General Public License version 3 as |
7 * published by the Free Software Foundation. | 7 * published by the Free Software Foundation. |
8 * | 8 * |
9 * Adblock Plus is distributed in the hope that it will be useful, | 9 * Adblock Plus is distributed in the hope that it will be useful, |
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of | 10 * but WITHOUT ANY WARRANTY; without even the implied warranty of |
(...skipping 174 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
185 try | 185 try |
186 { | 186 { |
187 return element.contentDocument; | 187 return element.contentDocument; |
188 } | 188 } |
189 catch (e) | 189 catch (e) |
190 { | 190 { |
191 return null; | 191 return null; |
192 } | 192 } |
193 } | 193 } |
194 | 194 |
195 function ElementHidingTracer(selectors) | 195 function ElementHidingTracer() |
196 { | 196 { |
197 this.selectors = selectors; | 197 this.selectors = []; |
198 this.filters = []; | |
198 | 199 |
199 this.changedNodes = []; | 200 this.changedNodes = []; |
200 this.timeout = null; | 201 this.timeout = null; |
201 | 202 |
202 this.observer = new MutationObserver(this.observe.bind(this)); | 203 this.observer = new MutationObserver(this.observe.bind(this)); |
203 this.trace = this.trace.bind(this); | 204 this.trace = this.trace.bind(this); |
204 | 205 |
205 if (document.readyState == "loading") | 206 if (document.readyState == "loading") |
206 document.addEventListener("DOMContentLoaded", this.trace); | 207 document.addEventListener("DOMContentLoaded", this.trace); |
207 else | 208 else |
208 this.trace(); | 209 this.trace(); |
209 } | 210 } |
210 ElementHidingTracer.prototype = { | 211 ElementHidingTracer.prototype = { |
211 checkNodes: function(nodes) | 212 addSelectors: function(selectors, filters) |
Sebastian Noack
2017/02/17 13:55:31
Nit: The indentation is one space off here.
wspee
2017/02/18 11:20:23
Done.
| |
212 { | 213 { |
213 var matchedSelectors = []; | 214 if (!filters) |
215 filters = new Array(selectors.length); | |
214 | 216 |
215 // Find all selectors that match any hidden element inside the given nodes. | 217 if (document.readyState != "loading") |
216 for (var i = 0; i < this.selectors.length; i++) | 218 this.checkNodes([document], selectors, filters); |
219 | |
220 this.selectors.push(...selectors); | |
221 this.filters.push(...filters); | |
222 }, | |
223 | |
224 checkNodes: function(nodes, selectors, filters) | |
225 { | |
226 let matchedFilters = []; | |
227 | |
228 for (let i = 0; i < selectors.length; i++) | |
217 { | 229 { |
218 var selector = this.selectors[i]; | 230 nodes: for (let node of nodes) |
231 { | |
232 let elements = node.querySelectorAll(selectors[i]); | |
219 | 233 |
220 for (var j = 0; j < nodes.length; j++) | 234 for (let element of elements) |
221 { | |
222 var elements = nodes[j].querySelectorAll(selector); | |
223 var matched = false; | |
224 | |
225 for (var k = 0; k < elements.length; k++) | |
226 { | 235 { |
227 // Only consider selectors that actually have an effect on the | 236 // Only consider selectors that actually have an effect on the |
228 // computed styles, and aren't overridden by rules with higher | 237 // computed styles, and aren't overridden by rules with higher |
229 // priority, or haven't been circumvented in a different way. | 238 // priority, or haven't been circumvented in a different way. |
230 if (getComputedStyle(elements[k]).display == "none") | 239 if (getComputedStyle(element).display == "none") |
231 { | 240 { |
232 matchedSelectors.push(selector); | 241 let filter = filters[i] || selectors[i]; |
233 matched = true; | 242 matchedFilters.push(filter.replace(/^.*?##/, "")); |
234 break; | 243 break nodes; |
235 } | 244 } |
236 } | 245 } |
237 | |
238 if (matched) | |
239 break; | |
240 } | 246 } |
241 } | 247 } |
242 | 248 |
243 if (matchedSelectors.length > 0) | 249 if (matchedFilters.length > 0) |
244 ext.backgroundPage.sendMessage({ | 250 ext.backgroundPage.sendMessage({ |
245 type: "devtools.traceElemHide", | 251 type: "devtools.traceElemHide", |
246 selectors: matchedSelectors | 252 selectors: matchedFilters |
247 }); | 253 }); |
248 }, | 254 }, |
249 | 255 |
250 onTimeout: function() | 256 onTimeout: function() |
251 { | 257 { |
252 this.checkNodes(this.changedNodes); | 258 this.checkNodes(this.changedNodes, this.selectors, this.filters); |
253 this.changedNodes = []; | 259 this.changedNodes = []; |
254 this.timeout = null; | 260 this.timeout = null; |
255 }, | 261 }, |
256 | 262 |
257 observe: function(mutations) | 263 observe: function(mutations) |
258 { | 264 { |
259 // Forget previously changed nodes that are no longer in the DOM. | 265 // Forget previously changed nodes that are no longer in the DOM. |
260 for (var i = 0; i < this.changedNodes.length; i++) | 266 for (var i = 0; i < this.changedNodes.length; i++) |
261 { | 267 { |
262 if (!document.contains(this.changedNodes[i])) | 268 if (!document.contains(this.changedNodes[i])) |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
305 | 311 |
306 // Check only nodes whose descendants have changed, and not more often | 312 // Check only nodes whose descendants have changed, and not more often |
307 // than once a second. Otherwise large pages with a lot of DOM mutations | 313 // than once a second. Otherwise large pages with a lot of DOM mutations |
308 // (like YouTube) freeze when the devtools panel is active. | 314 // (like YouTube) freeze when the devtools panel is active. |
309 if (this.timeout == null) | 315 if (this.timeout == null) |
310 this.timeout = setTimeout(this.onTimeout.bind(this), 1000); | 316 this.timeout = setTimeout(this.onTimeout.bind(this), 1000); |
311 }, | 317 }, |
312 | 318 |
313 trace: function() | 319 trace: function() |
314 { | 320 { |
315 this.checkNodes([document]); | 321 this.checkNodes([document], this.selectors, this.filters); |
316 | 322 |
317 this.observer.observe( | 323 this.observer.observe( |
318 document, | 324 document, |
319 { | 325 { |
320 childList: true, | 326 childList: true, |
321 attributes: true, | 327 attributes: true, |
322 subtree: true | 328 subtree: true |
323 } | 329 } |
324 ); | 330 ); |
325 }, | 331 }, |
(...skipping 157 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
483 var shadow = shadowRoot(this); | 489 var shadow = shadowRoot(this); |
484 return shadow == ourShadowRoot ? null : shadow; | 490 return shadow == ourShadowRoot ? null : shadow; |
485 } | 491 } |
486 }); | 492 }); |
487 }, null); | 493 }, null); |
488 } | 494 } |
489 | 495 |
490 return shadow; | 496 return shadow; |
491 }, | 497 }, |
492 | 498 |
493 addSelectors: function(selectors) | 499 addSelectors: function(selectors, filters) |
494 { | 500 { |
495 if (selectors.length == 0) | 501 if (!selectors.length) |
Sebastian Noack
2017/02/17 13:55:31
I find the purpose of this check more clear when c
wspee
2017/02/18 11:20:23
Done.
| |
496 return; | 502 return; |
497 | 503 |
498 if (!this.style) | 504 if (!this.style) |
499 { | 505 { |
500 // Create <style> element lazily, only if we add styles. Add it to | 506 // Create <style> element lazily, only if we add styles. Add it to |
501 // the shadow DOM if possible. Otherwise fallback to the <head> or | 507 // the shadow DOM if possible. Otherwise fallback to the <head> or |
502 // <html> element. If we have injected a style element before that | 508 // <html> element. If we have injected a style element before that |
503 // has been removed (the sheet property is null), create a new one. | 509 // has been removed (the sheet property is null), create a new one. |
504 this.style = document.createElement("style"); | 510 this.style = document.createElement("style"); |
505 (this.shadow || document.head | 511 (this.shadow || document.head |
(...skipping 12 matching lines...) Expand all Loading... | |
518 // insertion point. | 524 // insertion point. |
519 if (this.shadow) | 525 if (this.shadow) |
520 { | 526 { |
521 var preparedSelectors = []; | 527 var preparedSelectors = []; |
522 for (var i = 0; i < selectors.length; i++) | 528 for (var i = 0; i < selectors.length; i++) |
523 { | 529 { |
524 var subSelectors = splitSelector(selectors[i]); | 530 var subSelectors = splitSelector(selectors[i]); |
525 for (var j = 0; j < subSelectors.length; j++) | 531 for (var j = 0; j < subSelectors.length; j++) |
526 preparedSelectors.push("::content " + subSelectors[j]); | 532 preparedSelectors.push("::content " + subSelectors[j]); |
527 } | 533 } |
528 selectors = preparedSelectors; | |
529 } | 534 } |
530 | 535 |
531 // Safari only allows 8192 primitive selectors to be injected at once[1], we | 536 // Safari only allows 8192 primitive selectors to be injected at once[1], we |
532 // therefore chunk the inserted selectors into groups of 200 to be safe. | 537 // therefore chunk the inserted selectors into groups of 200 to be safe. |
533 // (Chrome also has a limit, larger... but we're not certain exactly what it | 538 // (Chrome also has a limit, larger... but we're not certain exactly what it |
534 // is! Edge apparently has no such limit.) | 539 // is! Edge apparently has no such limit.) |
535 // [1] - https://github.com/WebKit/webkit/blob/1cb2227f6b2a1035f7bdc46e5ab69 debb75fc1de/Source/WebCore/css/RuleSet.h#L68 | 540 // [1] - https://github.com/WebKit/webkit/blob/1cb2227f6b2a1035f7bdc46e5ab69 debb75fc1de/Source/WebCore/css/RuleSet.h#L68 |
536 for (var i = 0; i < selectors.length; i += this.selectorGroupSize) | 541 for (var i = 0; i < preparedSelectors.length; i += this.selectorGroupSize) |
Sebastian Noack
2017/02/17 13:55:31
Wouldn't preparedSelectors be undefined, on browse
wspee
2017/02/18 11:20:23
Done.
| |
537 { | 542 { |
538 var selector = selectors.slice(i, i + this.selectorGroupSize).join(", "); | 543 var selector = preparedSelectors.slice(i, i + this.selectorGroupSize).join (", "); |
539 this.style.sheet.insertRule(selector + "{display: none !important;}", | 544 this.style.sheet.insertRule(selector + "{display: none !important;}", |
540 this.style.sheet.cssRules.length); | 545 this.style.sheet.cssRules.length); |
541 } | 546 } |
547 | |
548 if (this.tracer) | |
549 this.tracer.addSelectors(selectors, filters); | |
542 }, | 550 }, |
543 | 551 |
544 apply: function() | 552 apply: function() |
545 { | 553 { |
546 var selectors = null; | 554 if (this.tracer) |
Sebastian Noack
2017/02/17 13:55:31
We should still wait until we have a response for
wspee
2017/02/18 11:20:23
Done.
| |
547 var elemHideEmulationLoaded = false; | 555 this.tracer.disconnect(); |
556 this.tracer = null; | |
548 | 557 |
549 var checkLoaded = function() | 558 if (this.style && this.style.parentElement) |
559 this.style.parentElement.removeChild(this.style); | |
560 this.style = null; | |
561 | |
562 ext.backgroundPage.sendMessage({type: "get-selectors"}, selectors => | |
550 { | 563 { |
551 if (!selectors || !elemHideEmulationLoaded) | 564 if (selectors.trace) |
552 return; | 565 this.tracer = new ElementHidingTracer(); |
553 | 566 |
554 if (this.tracer) | 567 if (selectors.selectors) |
555 this.tracer.disconnect(); | 568 this.addSelectors(selectors.selectors); |
556 this.tracer = null; | |
557 | 569 |
558 if (this.style && this.style.parentElement) | 570 this.elemHideEmulation.load( |
Sebastian Noack
2017/02/17 13:55:31
The of the load() and apply() method did only exis
wspee
2017/02/18 11:20:24
Done, see:
https://codereview.adblockplus.org/293
| |
559 this.style.parentElement.removeChild(this.style); | 571 this.elemHideEmulation.apply.bind(this.elemHideEmulation)); |
560 this.style = null; | |
561 | |
562 this.addSelectors(selectors.selectors); | |
563 this.elemHideEmulation.apply(); | |
564 | |
565 if (selectors.trace) | |
566 this.tracer = new ElementHidingTracer(selectors.selectors); | |
567 }.bind(this); | |
568 | |
569 ext.backgroundPage.sendMessage({type: "get-selectors"}, function(response) | |
570 { | |
571 selectors = response; | |
572 checkLoaded(); | |
573 }); | |
574 | |
575 this.elemHideEmulation.load(function() | |
576 { | |
577 elemHideEmulationLoaded = true; | |
578 checkLoaded(); | |
579 }); | 572 }); |
580 } | 573 } |
581 }; | 574 }; |
582 | 575 |
583 if (document instanceof HTMLDocument) | 576 if (document instanceof HTMLDocument) |
584 { | 577 { |
585 checkSitekey(); | 578 checkSitekey(); |
586 wrapWebSocket(); | 579 wrapWebSocket(); |
587 | 580 |
588 var elemhide = new ElemHide(); | 581 var elemhide = new ElemHide(); |
589 elemhide.apply(); | 582 elemhide.apply(); |
590 | 583 |
591 document.addEventListener("error", function(event) | 584 document.addEventListener("error", function(event) |
592 { | 585 { |
593 checkCollapse(event.target); | 586 checkCollapse(event.target); |
594 }, true); | 587 }, true); |
595 | 588 |
596 document.addEventListener("load", function(event) | 589 document.addEventListener("load", function(event) |
597 { | 590 { |
598 var element = event.target; | 591 var element = event.target; |
599 if (/^i?frame$/.test(element.localName)) | 592 if (/^i?frame$/.test(element.localName)) |
600 checkCollapse(element); | 593 checkCollapse(element); |
601 }, true); | 594 }, true); |
602 } | 595 } |
OLD | NEW |