| LEFT | RIGHT |
| 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 |
| 11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | 11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| 12 * GNU General Public License for more details. | 12 * GNU General Public License for more details. |
| 13 * | 13 * |
| 14 * You should have received a copy of the GNU General Public License | 14 * You should have received a copy of the GNU General Public License |
| 15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>. | 15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>. |
| 16 */ | 16 */ |
| 17 | 17 |
| 18 "use strict"; | 18 "use strict"; |
| 19 | 19 |
| 20 let typeMap = { | 20 const typeMap = { |
| 21 "img": "IMAGE", | 21 "img": "IMAGE", |
| 22 "input": "IMAGE", | 22 "input": "IMAGE", |
| 23 "picture": "IMAGE", | 23 "picture": "IMAGE", |
| 24 "audio": "MEDIA", | 24 "audio": "MEDIA", |
| 25 "video": "MEDIA", | 25 "video": "MEDIA", |
| 26 "frame": "SUBDOCUMENT", | 26 "frame": "SUBDOCUMENT", |
| 27 "iframe": "SUBDOCUMENT", | 27 "iframe": "SUBDOCUMENT", |
| 28 "object": "OBJECT", | 28 "object": "OBJECT", |
| 29 "embed": "OBJECT" | 29 "embed": "OBJECT" |
| 30 }; | 30 }; |
| (...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 75 } | 75 } |
| 76 | 76 |
| 77 return urls; | 77 return urls; |
| 78 } | 78 } |
| 79 | 79 |
| 80 function getURLsFromMediaElement(element) | 80 function getURLsFromMediaElement(element) |
| 81 { | 81 { |
| 82 let urls = getURLsFromAttributes(element); | 82 let urls = getURLsFromAttributes(element); |
| 83 | 83 |
| 84 for (let child of element.children) | 84 for (let child of element.children) |
| 85 { |
| 85 if (child.localName == "source" || child.localName == "track") | 86 if (child.localName == "source" || child.localName == "track") |
| 86 urls.push.apply(urls, getURLsFromAttributes(child)); | 87 urls.push.apply(urls, getURLsFromAttributes(child)); |
| 88 } |
| 87 | 89 |
| 88 if (element.poster) | 90 if (element.poster) |
| 89 urls.push(element.poster); | 91 urls.push(element.poster); |
| 90 | 92 |
| 91 return urls; | 93 return urls; |
| 92 } | 94 } |
| 93 | 95 |
| 94 function getURLsFromElement(element) | 96 function getURLsFromElement(element) |
| 95 { | 97 { |
| 96 let urls; | 98 let urls; |
| (...skipping 101 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 198 | 200 |
| 199 this.observer = new MutationObserver(this.observe.bind(this)); | 201 this.observer = new MutationObserver(this.observe.bind(this)); |
| 200 this.trace = this.trace.bind(this); | 202 this.trace = this.trace.bind(this); |
| 201 | 203 |
| 202 if (document.readyState == "loading") | 204 if (document.readyState == "loading") |
| 203 document.addEventListener("DOMContentLoaded", this.trace); | 205 document.addEventListener("DOMContentLoaded", this.trace); |
| 204 else | 206 else |
| 205 this.trace(); | 207 this.trace(); |
| 206 } | 208 } |
| 207 ElementHidingTracer.prototype = { | 209 ElementHidingTracer.prototype = { |
| 208 checkNodes: nodes => | 210 checkNodes(nodes) |
| 209 { | 211 { |
| 210 let matchedSelectors = []; | 212 let matchedSelectors = []; |
| 211 | 213 |
| 212 // Find all selectors that match any hidden element inside the given nodes. | 214 // Find all selectors that match any hidden element inside the given nodes. |
| 213 for (let selector of this.selectors) | 215 for (let selector of this.selectors) |
| 214 { | 216 { |
| 215 for (let node of nodes) | 217 for (let node of nodes) |
| 216 { | 218 { |
| 217 let elements = node.querySelectorAll(selector); | 219 let elements = node.querySelectorAll(selector); |
| 218 let matched = false; | 220 let matched = false; |
| (...skipping 16 matching lines...) Expand all Loading... |
| 235 } | 237 } |
| 236 } | 238 } |
| 237 | 239 |
| 238 if (matchedSelectors.length > 0) | 240 if (matchedSelectors.length > 0) |
| 239 ext.backgroundPage.sendMessage({ | 241 ext.backgroundPage.sendMessage({ |
| 240 type: "devtools.traceElemHide", | 242 type: "devtools.traceElemHide", |
| 241 selectors: matchedSelectors | 243 selectors: matchedSelectors |
| 242 }); | 244 }); |
| 243 }, | 245 }, |
| 244 | 246 |
| 245 onTimeout: function() | 247 onTimeout() |
| 246 { | 248 { |
| 247 this.checkNodes(this.changedNodes); | 249 this.checkNodes(this.changedNodes); |
| 248 this.changedNodes = []; | 250 this.changedNodes = []; |
| 249 this.timeout = null; | 251 this.timeout = null; |
| 250 }, | 252 }, |
| 251 | 253 |
| 252 observe: function(mutations) | 254 observe(mutations) |
| 253 { | 255 { |
| 254 // Forget previously changed nodes that are no longer in the DOM. | 256 // Forget previously changed nodes that are no longer in the DOM. |
| 255 for (let i = 0; i < this.changedNodes.length; i++) | 257 for (let i = 0; i < this.changedNodes.length; i++) |
| 256 { | 258 { |
| 257 if (!document.contains(this.changedNodes[i])) | 259 if (!document.contains(this.changedNodes[i])) |
| 258 this.changedNodes.splice(i--, 1); | 260 this.changedNodes.splice(i--, 1); |
| 259 } | 261 } |
| 260 | 262 |
| 261 for (let mutation of mutations) | 263 for (let mutation of mutations) |
| 262 { | 264 { |
| (...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 297 this.changedNodes.push(node); | 299 this.changedNodes.push(node); |
| 298 } | 300 } |
| 299 | 301 |
| 300 // Check only nodes whose descendants have changed, and not more often | 302 // Check only nodes whose descendants have changed, and not more often |
| 301 // than once a second. Otherwise large pages with a lot of DOM mutations | 303 // than once a second. Otherwise large pages with a lot of DOM mutations |
| 302 // (like YouTube) freeze when the devtools panel is active. | 304 // (like YouTube) freeze when the devtools panel is active. |
| 303 if (this.timeout == null) | 305 if (this.timeout == null) |
| 304 this.timeout = setTimeout(this.onTimeout.bind(this), 1000); | 306 this.timeout = setTimeout(this.onTimeout.bind(this), 1000); |
| 305 }, | 307 }, |
| 306 | 308 |
| 307 trace: function() | 309 trace() |
| 308 { | 310 { |
| 309 this.checkNodes([document]); | 311 this.checkNodes([document]); |
| 310 | 312 |
| 311 this.observer.observe( | 313 this.observer.observe( |
| 312 document, | 314 document, |
| 313 { | 315 { |
| 314 childList: true, | 316 childList: true, |
| 315 attributes: true, | 317 attributes: true, |
| 316 subtree: true | 318 subtree: true |
| 317 } | 319 } |
| 318 ); | 320 ); |
| 319 }, | 321 }, |
| 320 | 322 |
| 321 disconnect: function() | 323 disconnect() |
| 322 { | 324 { |
| 323 document.removeEventListener("DOMContentLoaded", this.trace); | 325 document.removeEventListener("DOMContentLoaded", this.trace); |
| 324 this.observer.disconnect(); | 326 this.observer.disconnect(); |
| 325 clearTimeout(this.timeout); | 327 clearTimeout(this.timeout); |
| 326 } | 328 } |
| 327 }; | 329 }; |
| 328 | 330 |
| 329 function runInPageContext(fn, arg) | 331 function runInPageContext(fn, arg) |
| 330 { | 332 { |
| 331 let script = document.createElement("script"); | 333 let script = document.createElement("script"); |
| (...skipping 100 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 432 type: "filters.get", | 434 type: "filters.get", |
| 433 what: "elemhideemulation" | 435 what: "elemhideemulation" |
| 434 }, callback); | 436 }, callback); |
| 435 }, | 437 }, |
| 436 this.addSelectors.bind(this) | 438 this.addSelectors.bind(this) |
| 437 ); | 439 ); |
| 438 } | 440 } |
| 439 ElemHide.prototype = { | 441 ElemHide.prototype = { |
| 440 selectorGroupSize: 200, | 442 selectorGroupSize: 200, |
| 441 | 443 |
| 442 createShadowTree: () => | 444 createShadowTree() |
| 443 { | 445 { |
| 444 // Use Shadow DOM if available as to not mess with with web pages that | 446 // Use Shadow DOM if available as to not mess with with web pages that |
| 445 // rely on the order of their own <style> tags (#309). However, creating | 447 // rely on the order of their own <style> tags (#309). However, creating |
| 446 // a shadow root breaks running CSS transitions. So we have to create | 448 // a shadow root breaks running CSS transitions. So we have to create |
| 447 // the shadow root before transistions might start (#452). | 449 // the shadow root before transistions might start (#452). |
| 448 if (!("createShadowRoot" in document.documentElement)) | 450 if (!("createShadowRoot" in document.documentElement)) |
| 449 return null; | 451 return null; |
| 450 | 452 |
| 451 // Using shadow DOM causes issues on some Google websites, | 453 // Using shadow DOM causes issues on some Google websites, |
| 452 // including Google Docs, Gmail and Blogger (#1770, #2602, #2687). | 454 // including Google Docs, Gmail and Blogger (#1770, #2602, #2687). |
| (...skipping 12 matching lines...) Expand all Loading... |
| 465 { | 467 { |
| 466 runInPageContext(() => | 468 runInPageContext(() => |
| 467 { | 469 { |
| 468 let ourShadowRoot = document.documentElement.shadowRoot; | 470 let ourShadowRoot = document.documentElement.shadowRoot; |
| 469 if (!ourShadowRoot) | 471 if (!ourShadowRoot) |
| 470 return; | 472 return; |
| 471 let desc = Object.getOwnPropertyDescriptor(Element.prototype, "shadowRoo
t"); | 473 let desc = Object.getOwnPropertyDescriptor(Element.prototype, "shadowRoo
t"); |
| 472 let shadowRoot = Function.prototype.call.bind(desc.get); | 474 let shadowRoot = Function.prototype.call.bind(desc.get); |
| 473 | 475 |
| 474 Object.defineProperty(Element.prototype, "shadowRoot", { | 476 Object.defineProperty(Element.prototype, "shadowRoot", { |
| 475 configurable: true, enumerable: true, get: function() | 477 configurable: true, enumerable: true, get() |
| 476 { | 478 { |
| 477 let shadow = shadowRoot(this); | 479 let shadow = shadowRoot(this); |
| 478 return shadow == ourShadowRoot ? null : shadow; | 480 return shadow == ourShadowRoot ? null : shadow; |
| 479 } | 481 } |
| 480 }); | 482 }); |
| 481 }, null); | 483 }, null); |
| 482 } | 484 } |
| 483 | 485 |
| 484 return shadow; | 486 return shadow; |
| 485 }, | 487 }, |
| 486 | 488 |
| 487 addSelectors: function(selectors) | 489 addSelectors(selectors) |
| 488 { | 490 { |
| 489 if (selectors.length == 0) | 491 if (selectors.length == 0) |
| 490 return; | 492 return; |
| 491 | 493 |
| 492 if (!this.style) | 494 if (!this.style) |
| 493 { | 495 { |
| 494 // Create <style> element lazily, only if we add styles. Add it to | 496 // Create <style> element lazily, only if we add styles. Add it to |
| 495 // the shadow DOM if possible. Otherwise fallback to the <head> or | 497 // the shadow DOM if possible. Otherwise fallback to the <head> or |
| 496 // <html> element. If we have injected a style element before that | 498 // <html> element. If we have injected a style element before that |
| 497 // has been removed (the sheet property is null), create a new one. | 499 // has been removed (the sheet property is null), create a new one. |
| (...skipping 30 matching lines...) Expand all Loading... |
| 528 // is! Edge apparently has no such limit.) | 530 // is! Edge apparently has no such limit.) |
| 529 // [1] - https://github.com/WebKit/webkit/blob/1cb2227f6b2a1035f7bdc46e5ab69
debb75fc1de/Source/WebCore/css/RuleSet.h#L68 | 531 // [1] - https://github.com/WebKit/webkit/blob/1cb2227f6b2a1035f7bdc46e5ab69
debb75fc1de/Source/WebCore/css/RuleSet.h#L68 |
| 530 for (let i = 0; i < selectors.length; i += this.selectorGroupSize) | 532 for (let i = 0; i < selectors.length; i += this.selectorGroupSize) |
| 531 { | 533 { |
| 532 let selector = selectors.slice(i, i + this.selectorGroupSize).join(", "); | 534 let selector = selectors.slice(i, i + this.selectorGroupSize).join(", "); |
| 533 this.style.sheet.insertRule(selector + "{display: none !important;}", | 535 this.style.sheet.insertRule(selector + "{display: none !important;}", |
| 534 this.style.sheet.cssRules.length); | 536 this.style.sheet.cssRules.length); |
| 535 } | 537 } |
| 536 }, | 538 }, |
| 537 | 539 |
| 538 apply: function() | 540 apply() |
| 539 { | 541 { |
| 540 let selectors = null; | 542 let selectors = null; |
| 541 let elemHideEmulationLoaded = false; | 543 let elemHideEmulationLoaded = false; |
| 542 | 544 |
| 543 let checkLoaded = function() | 545 let checkLoaded = function() |
| 544 { | 546 { |
| 545 if (!selectors || !elemHideEmulationLoaded) | 547 if (!selectors || !elemHideEmulationLoaded) |
| 546 return; | 548 return; |
| 547 | 549 |
| 548 if (this.tracer) | 550 if (this.tracer) |
| (...skipping 23 matching lines...) Expand all Loading... |
| 572 checkLoaded(); | 574 checkLoaded(); |
| 573 }); | 575 }); |
| 574 } | 576 } |
| 575 }; | 577 }; |
| 576 | 578 |
| 577 if (document instanceof HTMLDocument) | 579 if (document instanceof HTMLDocument) |
| 578 { | 580 { |
| 579 checkSitekey(); | 581 checkSitekey(); |
| 580 wrapWebSocket(); | 582 wrapWebSocket(); |
| 581 | 583 |
| 582 let elemhide = new ElemHide(); | 584 // This variable is also used by our other content scripts, outside of the |
| 585 // current scope. |
| 586 var elemhide = new ElemHide(); |
| 583 elemhide.apply(); | 587 elemhide.apply(); |
| 584 | 588 |
| 585 document.addEventListener("error", event => | 589 document.addEventListener("error", event => |
| 586 { | 590 { |
| 587 checkCollapse(event.target); | 591 checkCollapse(event.target); |
| 588 }, true); | 592 }, true); |
| 589 | 593 |
| 590 document.addEventListener("load", event => | 594 document.addEventListener("load", event => |
| 591 { | 595 { |
| 592 let element = event.target; | 596 let element = event.target; |
| 593 if (/^i?frame$/.test(element.localName)) | 597 if (/^i?frame$/.test(element.localName)) |
| 594 checkCollapse(element); | 598 checkCollapse(element); |
| 595 }, true); | 599 }, true); |
| 596 } | 600 } |
| LEFT | RIGHT |