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-present eyeo GmbH | 3 * Copyright (C) 2006-present 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 {splitSelector} = require("common"); | 20 let {splitSelector} = require("./adblockpluscore/lib/common"); |
21 let {ElemHideEmulation} = require("content_elemHideEmulation"); | 21 let {ElemHideEmulation} = |
| 22 require("./adblockpluscore/lib/content/elemHideEmulation"); |
22 | 23 |
23 // This variable is also used by our other content scripts. | 24 // This variable is also used by our other content scripts. |
24 let elemhide; | 25 let elemhide; |
25 | 26 |
26 const typeMap = new Map([ | 27 const typeMap = new Map([ |
27 ["img", "IMAGE"], | 28 ["img", "IMAGE"], |
28 ["input", "IMAGE"], | 29 ["input", "IMAGE"], |
29 ["picture", "IMAGE"], | 30 ["picture", "IMAGE"], |
30 ["audio", "MEDIA"], | 31 ["audio", "MEDIA"], |
31 ["video", "MEDIA"], | 32 ["video", "MEDIA"], |
32 ["frame", "SUBDOCUMENT"], | 33 ["frame", "SUBDOCUMENT"], |
33 ["iframe", "SUBDOCUMENT"], | 34 ["iframe", "SUBDOCUMENT"], |
34 ["object", "OBJECT"], | 35 ["object", "OBJECT"], |
35 ["embed", "OBJECT"] | 36 ["embed", "OBJECT"] |
36 ]); | 37 ]); |
37 | 38 |
| 39 let collapsingSelectors = new Set(); |
| 40 |
38 function getURLsFromObjectElement(element) | 41 function getURLsFromObjectElement(element) |
39 { | 42 { |
40 let url = element.getAttribute("data"); | 43 let url = element.getAttribute("data"); |
41 if (url) | 44 if (url) |
42 return [url]; | 45 return [url]; |
43 | 46 |
44 for (let child of element.children) | 47 for (let child of element.children) |
45 { | 48 { |
46 if (child.localName != "param") | 49 if (child.localName != "param") |
47 continue; | 50 continue; |
(...skipping 73 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
121 | 124 |
122 for (let i = 0; i < urls.length; i++) | 125 for (let i = 0; i < urls.length; i++) |
123 { | 126 { |
124 if (/^(?!https?:)[\w-]+:/i.test(urls[i])) | 127 if (/^(?!https?:)[\w-]+:/i.test(urls[i])) |
125 urls.splice(i--, 1); | 128 urls.splice(i--, 1); |
126 } | 129 } |
127 | 130 |
128 return urls; | 131 return urls; |
129 } | 132 } |
130 | 133 |
| 134 function isCollapsibleMediaElement(element, mediatype) |
| 135 { |
| 136 if (mediatype != "MEDIA") |
| 137 return false; |
| 138 |
| 139 if (!element.getAttribute("src")) |
| 140 return false; |
| 141 |
| 142 for (let child of element.children) |
| 143 { |
| 144 // If the <video> or <audio> element contains any <source> or <track> |
| 145 // children, we cannot address it in CSS by the source URL; in that case we |
| 146 // don't "collapse" it using a CSS selector but rather hide it directly by |
| 147 // setting the style="..." attribute. |
| 148 if (child.localName == "source" || child.localName == "track") |
| 149 return false; |
| 150 } |
| 151 |
| 152 return true; |
| 153 } |
| 154 |
| 155 function collapseMediaElement(element, srcValue) |
| 156 { |
| 157 if (!srcValue) |
| 158 return; |
| 159 |
| 160 let selector = element.localName + "[src=" + CSS.escape(srcValue) + "]"; |
| 161 |
| 162 // Adding selectors is expensive so do it only if we really have a new |
| 163 // selector. |
| 164 if (!collapsingSelectors.has(selector)) |
| 165 { |
| 166 collapsingSelectors.add(selector); |
| 167 elemhide.addSelectors([selector], null, "collapsing", true); |
| 168 } |
| 169 } |
| 170 |
131 function hideElement(element) | 171 function hideElement(element) |
132 { | 172 { |
133 function doHide() | 173 function doHide() |
134 { | 174 { |
135 let propertyName = "display"; | 175 let propertyName = "display"; |
136 let propertyValue = "none"; | 176 let propertyValue = "none"; |
137 if (element.localName == "frame") | 177 if (element.localName == "frame") |
138 { | 178 { |
139 propertyName = "visibility"; | 179 propertyName = "visibility"; |
140 propertyValue = "hidden"; | 180 propertyValue = "hidden"; |
(...skipping 16 matching lines...) Expand all Loading... |
157 | 197 |
158 function checkCollapse(element) | 198 function checkCollapse(element) |
159 { | 199 { |
160 let mediatype = typeMap.get(element.localName); | 200 let mediatype = typeMap.get(element.localName); |
161 if (!mediatype) | 201 if (!mediatype) |
162 return; | 202 return; |
163 | 203 |
164 let urls = getURLsFromElement(element); | 204 let urls = getURLsFromElement(element); |
165 if (urls.length == 0) | 205 if (urls.length == 0) |
166 return; | 206 return; |
| 207 |
| 208 let collapsibleMediaElement = isCollapsibleMediaElement(element, mediatype); |
| 209 |
| 210 // Save the value of the src attribute because it can change between now and |
| 211 // when we get the response from the background page. |
| 212 let srcValue = collapsibleMediaElement ? element.getAttribute("src") : null; |
167 | 213 |
168 browser.runtime.sendMessage( | 214 browser.runtime.sendMessage( |
169 { | 215 { |
170 type: "filters.collapse", | 216 type: "filters.collapse", |
171 urls, | 217 urls, |
172 mediatype, | 218 mediatype, |
173 baseURL: document.location.href | 219 baseURL: document.location.href |
174 }, | 220 }, |
175 | |
176 collapse => | 221 collapse => |
177 { | 222 { |
178 if (collapse) | 223 if (collapse) |
179 { | 224 { |
180 hideElement(element); | 225 if (collapsibleMediaElement) |
| 226 collapseMediaElement(element, srcValue); |
| 227 else |
| 228 hideElement(element); |
181 } | 229 } |
182 } | 230 } |
183 ); | 231 ); |
184 } | 232 } |
185 | 233 |
186 function checkSitekey() | 234 function checkSitekey() |
187 { | 235 { |
188 let attr = document.documentElement.getAttribute("data-adblockkey"); | 236 let attr = document.documentElement.getAttribute("data-adblockkey"); |
189 if (attr) | 237 if (attr) |
190 browser.runtime.sendMessage({type: "filters.addKey", token: attr}); | 238 browser.runtime.sendMessage({type: "filters.addKey", token: attr}); |
(...skipping 148 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
339 } | 387 } |
340 }; | 388 }; |
341 | 389 |
342 function ElemHide() | 390 function ElemHide() |
343 { | 391 { |
344 this.shadow = this.createShadowTree(); | 392 this.shadow = this.createShadowTree(); |
345 this.styles = new Map(); | 393 this.styles = new Map(); |
346 this.tracer = null; | 394 this.tracer = null; |
347 this.inline = true; | 395 this.inline = true; |
348 this.inlineEmulated = true; | 396 this.inlineEmulated = true; |
349 this.emulatedPatterns = null; | |
350 | 397 |
351 this.elemHideEmulation = new ElemHideEmulation( | 398 this.elemHideEmulation = new ElemHideEmulation( |
352 this.addSelectors.bind(this), | 399 this.addSelectors.bind(this), |
353 this.hideElements.bind(this) | 400 this.hideElements.bind(this) |
354 ); | 401 ); |
355 } | 402 } |
356 ElemHide.prototype = { | 403 ElemHide.prototype = { |
357 selectorGroupSize: 1024, | 404 selectorGroupSize: 1024, |
358 | 405 |
359 createShadowTree() | 406 createShadowTree() |
(...skipping 19 matching lines...) Expand all Loading... |
379 // Finally since some users have both AdBlock and Adblock Plus installed we | 426 // Finally since some users have both AdBlock and Adblock Plus installed we |
380 // have to consider how the two extensions interact. For example we want to | 427 // have to consider how the two extensions interact. For example we want to |
381 // avoid creating the shadowRoot twice. | 428 // avoid creating the shadowRoot twice. |
382 let shadow = document.documentElement.shadowRoot || | 429 let shadow = document.documentElement.shadowRoot || |
383 document.documentElement.createShadowRoot(); | 430 document.documentElement.createShadowRoot(); |
384 shadow.appendChild(document.createElement("content")); | 431 shadow.appendChild(document.createElement("content")); |
385 | 432 |
386 return shadow; | 433 return shadow; |
387 }, | 434 }, |
388 | 435 |
389 addSelectorsInline(selectors, groupName) | 436 addSelectorsInline(selectors, groupName, appendOnly = false) |
390 { | 437 { |
391 let style = this.styles.get(groupName); | 438 let style = this.styles.get(groupName); |
392 | 439 |
393 if (style) | 440 if (style && !appendOnly) |
394 { | 441 { |
395 while (style.sheet.cssRules.length > 0) | 442 while (style.sheet.cssRules.length > 0) |
396 style.sheet.deleteRule(0); | 443 style.sheet.deleteRule(0); |
397 } | 444 } |
398 | 445 |
399 if (selectors.length == 0) | 446 if (selectors.length == 0) |
400 return; | 447 return; |
401 | 448 |
402 if (!style) | 449 if (!style) |
403 { | 450 { |
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
451 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize) | 498 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize) |
452 { | 499 { |
453 let selector = preparedSelectors.slice( | 500 let selector = preparedSelectors.slice( |
454 i, i + this.selectorGroupSize | 501 i, i + this.selectorGroupSize |
455 ).join(", "); | 502 ).join(", "); |
456 style.sheet.insertRule(selector + "{display: none !important;}", | 503 style.sheet.insertRule(selector + "{display: none !important;}", |
457 style.sheet.cssRules.length); | 504 style.sheet.cssRules.length); |
458 } | 505 } |
459 }, | 506 }, |
460 | 507 |
461 addSelectors(selectors, filters) | 508 addSelectors(selectors, filters, groupName = "emulated", appendOnly = false) |
462 { | 509 { |
463 if (this.inline || this.inlineEmulated) | 510 if (this.inline || this.inlineEmulated) |
464 { | 511 { |
465 // Insert the style rules inline if we have been instructed by the | 512 // Insert the style rules inline if we have been instructed by the |
466 // background page to do so. This is usually the case, except on platforms | 513 // background page to do so. This is usually the case, except on platforms |
467 // that do support user stylesheets via the browser.tabs.insertCSS API | 514 // that do support user stylesheets via the browser.tabs.insertCSS API |
468 // (Firefox 53 onwards for now and possibly Chrome in the near future). | 515 // (Firefox 53 onwards for now and possibly Chrome in the near future). |
469 // Once all supported platforms have implemented this API, we can remove | 516 // Once all supported platforms have implemented this API, we can remove |
470 // the code below. See issue #5090. | 517 // the code below. See issue #5090. |
471 // Related Chrome and Firefox issues: | 518 // Related Chrome and Firefox issues: |
472 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009 | 519 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009 |
473 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026 | 520 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026 |
474 this.addSelectorsInline(selectors, "emulated"); | 521 this.addSelectorsInline(selectors, groupName, appendOnly); |
475 } | 522 } |
476 else | 523 else |
477 { | 524 { |
478 browser.runtime.sendMessage({ | 525 browser.runtime.sendMessage({ |
479 type: "elemhide.injectSelectors", | 526 type: "elemhide.injectSelectors", |
480 selectors, | 527 selectors, |
481 groupName: "emulated" | 528 groupName, |
| 529 appendOnly |
482 }); | 530 }); |
483 } | 531 } |
484 | 532 |
485 if (this.tracer) | 533 // Only trace selectors that are based directly on hiding filters |
| 534 // (i.e. leave out collapsing selectors). |
| 535 if (this.tracer && groupName != "collapsing") |
486 this.tracer.addSelectors(selectors, filters); | 536 this.tracer.addSelectors(selectors, filters); |
487 }, | 537 }, |
488 | 538 |
489 hideElements(elements, filters) | 539 hideElements(elements, filters) |
490 { | 540 { |
491 for (let element of elements) | 541 for (let element of elements) |
492 hideElement(element); | 542 hideElement(element); |
493 | 543 |
494 if (this.tracer) | 544 if (this.tracer) |
495 { | 545 { |
(...skipping 18 matching lines...) Expand all Loading... |
514 | 564 |
515 this.inline = response.inline; | 565 this.inline = response.inline; |
516 this.inlineEmulated = !!response.inlineEmulated; | 566 this.inlineEmulated = !!response.inlineEmulated; |
517 | 567 |
518 if (this.inline) | 568 if (this.inline) |
519 this.addSelectorsInline(response.selectors, "standard"); | 569 this.addSelectorsInline(response.selectors, "standard"); |
520 | 570 |
521 if (this.tracer) | 571 if (this.tracer) |
522 this.tracer.addSelectors(response.selectors); | 572 this.tracer.addSelectors(response.selectors); |
523 | 573 |
| 574 // Prefer CSS selectors for -abp-has and -abp-contains unless the |
| 575 // background page has asked us to use inline styles. |
| 576 this.elemHideEmulation.useInlineStyles = this.inline || |
| 577 this.inlineEmulated; |
| 578 |
524 this.elemHideEmulation.apply(response.emulatedPatterns); | 579 this.elemHideEmulation.apply(response.emulatedPatterns); |
525 }); | 580 }); |
526 } | 581 } |
527 }; | 582 }; |
528 | 583 |
529 if (document instanceof HTMLDocument) | 584 if (document instanceof HTMLDocument) |
530 { | 585 { |
531 checkSitekey(); | 586 checkSitekey(); |
532 | 587 |
533 elemhide = new ElemHide(); | 588 elemhide = new ElemHide(); |
534 elemhide.apply(); | 589 elemhide.apply(); |
535 | 590 |
536 document.addEventListener("error", event => | 591 document.addEventListener("error", event => |
537 { | 592 { |
538 checkCollapse(event.target); | 593 checkCollapse(event.target); |
539 }, true); | 594 }, true); |
540 | 595 |
541 document.addEventListener("load", event => | 596 document.addEventListener("load", event => |
542 { | 597 { |
543 let element = event.target; | 598 let element = event.target; |
544 if (/^i?frame$/.test(element.localName)) | 599 if (/^i?frame$/.test(element.localName)) |
545 checkCollapse(element); | 600 checkCollapse(element); |
546 }, true); | 601 }, true); |
547 } | 602 } |
548 | 603 |
549 window.checkCollapse = checkCollapse; | 604 window.checkCollapse = checkCollapse; |
550 window.elemhide = elemhide; | 605 window.elemhide = elemhide; |
551 window.typeMap = typeMap; | 606 window.typeMap = typeMap; |
552 window.getURLsFromElement = getURLsFromElement; | 607 window.getURLsFromElement = getURLsFromElement; |
LEFT | RIGHT |