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 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
242 | 290 |
243 break nodes; | 291 break nodes; |
244 } | 292 } |
245 } | 293 } |
246 } | 294 } |
247 } | 295 } |
248 | 296 |
249 if (selectors.length > 0 || filters.length > 0) | 297 if (selectors.length > 0 || filters.length > 0) |
250 { | 298 { |
251 browser.runtime.sendMessage({ | 299 browser.runtime.sendMessage({ |
252 type: "devlogger.traceElemHide", | 300 type: "hitLogger.traceElemHide", |
253 selectors, filters | 301 selectors, filters |
254 }); | 302 }); |
255 } | 303 } |
256 }, | 304 }, |
257 | 305 |
258 onTimeout() | 306 onTimeout() |
259 { | 307 { |
260 this.checkNodes(this.changedNodes, this.selectors); | 308 this.checkNodes(this.changedNodes, this.selectors); |
261 this.changedNodes = []; | 309 this.changedNodes = []; |
262 this.timeout = null; | 310 this.timeout = null; |
(...skipping 76 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() |
360 { | 407 { |
361 // Use Shadow DOM if available as to not mess with with web pages that | 408 // Use Shadow DOM if available as to not mess with with web pages that |
362 // rely on the order of their own <style> tags (#309). However, creating | 409 // rely on the order of their own <style> tags (#309). However, creating |
363 // a shadow root breaks running CSS transitions. So we have to create | 410 // a shadow root breaks running CSS transitions. So we have to create |
364 // the shadow root before transistions might start (#452). | 411 // the shadow root before transistions might start (#452). |
365 if (!("createShadowRoot" in document.documentElement)) | 412 if (!("createShadowRoot" in document.documentElement)) |
366 return null; | 413 return null; |
367 | 414 |
| 415 // Both Firefox and Chrome 66+ support user style sheets, so we can avoid |
| 416 // creating an unnecessary shadow root on these platforms. |
| 417 let match = /\bChrome\/(\d+)/.exec(navigator.userAgent); |
| 418 if (!match || match[1] >= 66) |
| 419 return null; |
| 420 |
368 // Using shadow DOM causes issues on some Google websites, | 421 // Using shadow DOM causes issues on some Google websites, |
369 // including Google Docs, Gmail and Blogger (#1770, #2602, #2687). | 422 // including Google Docs, Gmail and Blogger (#1770, #2602, #2687). |
370 if (/\.(?:google|blogger)\.com$/.test(document.domain)) | 423 if (/\.(?:google|blogger)\.com$/.test(document.domain)) |
371 return null; | 424 return null; |
372 | 425 |
373 // 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 |
374 // 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 |
375 // avoid creating the shadowRoot twice. | 428 // avoid creating the shadowRoot twice. |
376 let shadow = document.documentElement.shadowRoot || | 429 let shadow = document.documentElement.shadowRoot || |
377 document.documentElement.createShadowRoot(); | 430 document.documentElement.createShadowRoot(); |
378 shadow.appendChild(document.createElement("shadow")); | 431 shadow.appendChild(document.createElement("content")); |
379 | 432 |
380 return shadow; | 433 return shadow; |
381 }, | 434 }, |
382 | 435 |
383 addSelectorsInline(selectors, groupName) | 436 addSelectorsInline(selectors, groupName, appendOnly = false) |
384 { | 437 { |
385 let style = this.styles.get(groupName); | 438 let style = this.styles.get(groupName); |
386 | 439 |
387 if (style) | 440 if (style && !appendOnly) |
388 { | 441 { |
389 while (style.sheet.cssRules.length > 0) | 442 while (style.sheet.cssRules.length > 0) |
390 style.sheet.deleteRule(0); | 443 style.sheet.deleteRule(0); |
391 } | 444 } |
392 | 445 |
393 if (selectors.length == 0) | 446 if (selectors.length == 0) |
394 return; | 447 return; |
395 | 448 |
396 if (!style) | 449 if (!style) |
397 { | 450 { |
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
445 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize) | 498 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize) |
446 { | 499 { |
447 let selector = preparedSelectors.slice( | 500 let selector = preparedSelectors.slice( |
448 i, i + this.selectorGroupSize | 501 i, i + this.selectorGroupSize |
449 ).join(", "); | 502 ).join(", "); |
450 style.sheet.insertRule(selector + "{display: none !important;}", | 503 style.sheet.insertRule(selector + "{display: none !important;}", |
451 style.sheet.cssRules.length); | 504 style.sheet.cssRules.length); |
452 } | 505 } |
453 }, | 506 }, |
454 | 507 |
455 addSelectors(selectors, filters) | 508 addSelectors(selectors, filters, groupName = "emulated", appendOnly = false) |
456 { | 509 { |
457 if (this.inline || this.inlineEmulated) | 510 if (this.inline || this.inlineEmulated) |
458 { | 511 { |
459 // 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 |
460 // 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 |
461 // that do support user stylesheets via the browser.tabs.insertCSS API | 514 // that do support user stylesheets via the browser.tabs.insertCSS API |
462 // (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). |
463 // Once all supported platforms have implemented this API, we can remove | 516 // Once all supported platforms have implemented this API, we can remove |
464 // the code below. See issue #5090. | 517 // the code below. See issue #5090. |
465 // Related Chrome and Firefox issues: | 518 // Related Chrome and Firefox issues: |
466 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009 | 519 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009 |
467 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026 | 520 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026 |
468 this.addSelectorsInline(selectors, "emulated"); | 521 this.addSelectorsInline(selectors, groupName, appendOnly); |
469 } | 522 } |
470 else | 523 else |
471 { | 524 { |
472 browser.runtime.sendMessage({ | 525 browser.runtime.sendMessage({ |
473 type: "elemhide.injectSelectors", | 526 type: "elemhide.injectSelectors", |
474 selectors, | 527 selectors, |
475 groupName: "emulated" | 528 groupName, |
| 529 appendOnly |
476 }); | 530 }); |
477 } | 531 } |
478 | 532 |
479 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") |
480 this.tracer.addSelectors(selectors, filters); | 536 this.tracer.addSelectors(selectors, filters); |
481 }, | 537 }, |
482 | 538 |
483 hideElements(elements, filters) | 539 hideElements(elements, filters) |
484 { | 540 { |
485 for (let element of elements) | 541 for (let element of elements) |
486 hideElement(element); | 542 hideElement(element); |
487 | 543 |
488 if (this.tracer) | 544 if (this.tracer) |
489 { | 545 { |
490 browser.runtime.sendMessage({ | 546 browser.runtime.sendMessage({ |
491 type: "devlogger.traceElemHide", | 547 type: "hitLogger.traceElemHide", |
492 selectors: [], | 548 selectors: [], |
493 filters | 549 filters |
494 }); | 550 }); |
495 } | 551 } |
496 }, | 552 }, |
497 | 553 |
498 apply() | 554 apply() |
499 { | 555 { |
500 browser.runtime.sendMessage({type: "elemhide.getSelectors"}, response => | 556 browser.runtime.sendMessage({type: "elemhide.getSelectors"}, response => |
501 { | 557 { |
502 if (this.tracer) | 558 if (this.tracer) |
503 this.tracer.disconnect(); | 559 this.tracer.disconnect(); |
504 this.tracer = null; | 560 this.tracer = null; |
505 | 561 |
506 if (response.trace) | 562 if (response.trace) |
507 this.tracer = new ElementHidingTracer(); | 563 this.tracer = new ElementHidingTracer(); |
508 | 564 |
509 this.inline = response.inline; | 565 this.inline = response.inline; |
510 this.inlineEmulated = !!response.inlineEmulated; | 566 this.inlineEmulated = !!response.inlineEmulated; |
511 | 567 |
512 if (this.inline) | 568 if (this.inline) |
513 this.addSelectorsInline(response.selectors, "standard"); | 569 this.addSelectorsInline(response.selectors, "standard"); |
514 | 570 |
515 if (this.tracer) | 571 if (this.tracer) |
516 this.tracer.addSelectors(response.selectors); | 572 this.tracer.addSelectors(response.selectors); |
| 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; |
517 | 578 |
518 this.elemHideEmulation.apply(response.emulatedPatterns); | 579 this.elemHideEmulation.apply(response.emulatedPatterns); |
519 }); | 580 }); |
520 } | 581 } |
521 }; | 582 }; |
522 | 583 |
523 if (document instanceof HTMLDocument) | 584 if (document instanceof HTMLDocument) |
524 { | 585 { |
525 checkSitekey(); | 586 checkSitekey(); |
526 | 587 |
(...skipping 10 matching lines...) Expand all Loading... |
537 let element = event.target; | 598 let element = event.target; |
538 if (/^i?frame$/.test(element.localName)) | 599 if (/^i?frame$/.test(element.localName)) |
539 checkCollapse(element); | 600 checkCollapse(element); |
540 }, true); | 601 }, true); |
541 } | 602 } |
542 | 603 |
543 window.checkCollapse = checkCollapse; | 604 window.checkCollapse = checkCollapse; |
544 window.elemhide = elemhide; | 605 window.elemhide = elemhide; |
545 window.typeMap = typeMap; | 606 window.typeMap = typeMap; |
546 window.getURLsFromElement = getURLsFromElement; | 607 window.getURLsFromElement = getURLsFromElement; |
LEFT | RIGHT |