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

Side by Side Diff: include.preload.js

Issue 29894561: Issue 6998 - Stop using Shadow DOM v0 (Closed) Base URL: https://hg.adblockplus.org/adblockpluschrome/
Patch Set: Remove splitSelector import Created Sept. 28, 2018, 12:40 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 | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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("./adblockpluscore/lib/common");
21 let {ElemHideEmulation} = 20 let {ElemHideEmulation} =
22 require("./adblockpluscore/lib/content/elemHideEmulation"); 21 require("./adblockpluscore/lib/content/elemHideEmulation");
23 22
24 // This variable is also used by our other content scripts. 23 // This variable is also used by our other content scripts.
25 let contentFiltering; 24 let contentFiltering;
26 25
27 const typeMap = new Map([ 26 const typeMap = new Map([
28 ["img", "IMAGE"], 27 ["img", "IMAGE"],
29 ["input", "IMAGE"], 28 ["input", "IMAGE"],
30 ["picture", "IMAGE"], 29 ["picture", "IMAGE"],
(...skipping 358 matching lines...) Expand 10 before | Expand all | Expand 10 after
389 disconnect() 388 disconnect()
390 { 389 {
391 document.removeEventListener("DOMContentLoaded", this.trace); 390 document.removeEventListener("DOMContentLoaded", this.trace);
392 this.observer.disconnect(); 391 this.observer.disconnect();
393 clearTimeout(this.timeout); 392 clearTimeout(this.timeout);
394 } 393 }
395 }; 394 };
396 395
397 function ContentFiltering() 396 function ContentFiltering()
398 { 397 {
399 this.shadow = this.createShadowTree();
400 this.styles = new Map(); 398 this.styles = new Map();
401 this.tracer = null; 399 this.tracer = null;
402 this.inline = true; 400 this.inline = true;
403 this.inlineEmulated = true; 401 this.inlineEmulated = true;
404 402
405 this.elemHideEmulation = new ElemHideEmulation( 403 this.elemHideEmulation = new ElemHideEmulation(
406 this.addSelectors.bind(this), 404 this.addSelectors.bind(this),
407 this.hideElements.bind(this) 405 this.hideElements.bind(this)
408 ); 406 );
409 } 407 }
410 ContentFiltering.prototype = { 408 ContentFiltering.prototype = {
411 selectorGroupSize: 1024, 409 selectorGroupSize: 1024,
412 410
413 createShadowTree()
414 {
415 // Use Shadow DOM if available as to not mess with with web pages that
416 // rely on the order of their own <style> tags (#309). However, creating
417 // a shadow root breaks running CSS transitions. So we have to create
418 // the shadow root before transistions might start (#452).
419 if (!("createShadowRoot" in document.documentElement))
420 return null;
421
422 // Both Firefox and Chrome 66+ support user style sheets, so we can avoid
423 // creating an unnecessary shadow root on these platforms.
424 let match = /\bChrome\/(\d+)/.exec(navigator.userAgent);
425 if (!match || match[1] >= 66)
426 return null;
427
428 // Using shadow DOM causes issues on some Google websites,
429 // including Google Docs, Gmail and Blogger (#1770, #2602, #2687).
430 if (/\.(?:google|blogger)\.com$/.test(document.domain))
431 return null;
432
433 // Finally since some users have both AdBlock and Adblock Plus installed we
434 // have to consider how the two extensions interact. For example we want to
435 // avoid creating the shadowRoot twice.
436 let shadow = document.documentElement.shadowRoot ||
437 document.documentElement.createShadowRoot();
438 shadow.appendChild(document.createElement("content"));
439
440 return shadow;
441 },
442
443 addSelectorsInline(selectors, groupName, appendOnly = false) 411 addSelectorsInline(selectors, groupName, appendOnly = false)
444 { 412 {
445 let style = this.styles.get(groupName); 413 let style = this.styles.get(groupName);
446 414
447 if (style && !appendOnly) 415 if (style && !appendOnly)
448 { 416 {
449 while (style.sheet.cssRules.length > 0) 417 while (style.sheet.cssRules.length > 0)
450 style.sheet.deleteRule(0); 418 style.sheet.deleteRule(0);
451 } 419 }
452 420
453 if (selectors.length == 0) 421 if (selectors.length == 0)
454 return; 422 return;
455 423
456 if (!style) 424 if (!style)
457 { 425 {
458 // Create <style> element lazily, only if we add styles. Add it to 426 // Create <style> element lazily, only if we add styles. Add it to
459 // the shadow DOM if possible. Otherwise fallback to the <head> or 427 // the <head> or <html> element. If we have injected a style element
460 // <html> element. If we have injected a style element before that 428 // before that has been removed (the sheet property is null), create a
461 // has been removed (the sheet property is null), create a new one. 429 // new one.
462 style = document.createElement("style"); 430 style = document.createElement("style");
463 (this.shadow || document.head || 431 (document.head || document.documentElement).appendChild(style);
464 document.documentElement).appendChild(style);
465 432
466 // It can happen that the frame already navigated to a different 433 // It can happen that the frame already navigated to a different
467 // document while we were waiting for the background page to respond. 434 // document while we were waiting for the background page to respond.
468 // In that case the sheet property will stay null, after addind the 435 // In that case the sheet property may stay null, after adding the
469 // <style> element to the shadow DOM. 436 // <style> element.
470 if (!style.sheet) 437 if (!style.sheet)
471 return; 438 return;
472 439
473 this.styles.set(groupName, style); 440 this.styles.set(groupName, style);
474 } 441 }
475 442
476 // If using shadow DOM, we have to add the ::content pseudo-element
477 // before each selector, in order to match elements within the
478 // insertion point.
479 let preparedSelectors = [];
480 if (this.shadow)
481 {
482 for (let selector of selectors)
483 {
484 let subSelectors = splitSelector(selector);
485 for (let subSelector of subSelectors)
486 preparedSelectors.push("::content " + subSelector);
487 }
488 }
489 else
490 {
491 preparedSelectors = selectors;
492 }
493
494 // Chromium's Blink engine supports only up to 8,192 simple selectors, and 443 // Chromium's Blink engine supports only up to 8,192 simple selectors, and
495 // even fewer compound selectors, in a rule. The exact number of selectors 444 // even fewer compound selectors, in a rule. The exact number of selectors
496 // that would work depends on their sizes (e.g. "#foo .bar" has a 445 // that would work depends on their sizes (e.g. "#foo .bar" has a
497 // size of 2). Since we don't know the sizes of the selectors here, we 446 // size of 2). Since we don't know the sizes of the selectors here, we
498 // simply split them into groups of 1,024, based on the reasonable 447 // simply split them into groups of 1,024, based on the reasonable
499 // assumption that the average selector won't have a size greater than 8. 448 // assumption that the average selector won't have a size greater than 8.
500 // The alternative would be to calculate the sizes of the selectors and 449 // The alternative would be to calculate the sizes of the selectors and
501 // divide them up accordingly, but this approach is more efficient and has 450 // divide them up accordingly, but this approach is more efficient and has
502 // worked well in practice. In theory this could still lead to some 451 // worked well in practice. In theory this could still lead to some
503 // selectors not working on Chromium, but it is highly unlikely. 452 // selectors not working on Chromium, but it is highly unlikely.
504 // See issue #6298 and https://crbug.com/804179 453 // See issue #6298 and https://crbug.com/804179
505 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize) 454 for (let i = 0; i < selectors.length; i += this.selectorGroupSize)
506 { 455 {
507 let selector = preparedSelectors.slice( 456 let selector = selectors.slice(i, i + this.selectorGroupSize).join(", ");
508 i, i + this.selectorGroupSize
509 ).join(", ");
510 style.sheet.insertRule(selector + "{display: none !important;}", 457 style.sheet.insertRule(selector + "{display: none !important;}",
511 style.sheet.cssRules.length); 458 style.sheet.cssRules.length);
512 } 459 }
513 }, 460 },
514 461
515 addSelectors(selectors, filters, groupName = "emulated", appendOnly = false) 462 addSelectors(selectors, filters, groupName = "emulated", appendOnly = false)
516 { 463 {
517 if (this.inline || this.inlineEmulated) 464 if (this.inline || this.inlineEmulated)
518 { 465 {
519 // Insert the style rules inline if we have been instructed by the 466 // Insert the style rules inline if we have been instructed by the
(...skipping 89 matching lines...) Expand 10 before | Expand all | Expand 10 after
609 let element = event.target; 556 let element = event.target;
610 if (/^i?frame$/.test(element.localName)) 557 if (/^i?frame$/.test(element.localName))
611 checkCollapse(element); 558 checkCollapse(element);
612 }, true); 559 }, true);
613 } 560 }
614 561
615 window.checkCollapse = checkCollapse; 562 window.checkCollapse = checkCollapse;
616 window.contentFiltering = contentFiltering; 563 window.contentFiltering = contentFiltering;
617 window.typeMap = typeMap; 564 window.typeMap = typeMap;
618 window.getURLsFromElement = getURLsFromElement; 565 window.getURLsFromElement = getURLsFromElement;
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld