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

Side by Side Diff: include.preload.js

Issue 29893559: Issue 6999 - Generate style sheets in background page (Closed) Base URL: https://hg.adblockplus.org/adblockpluschrome/
Patch Set: Created Sept. 27, 2018, 5:35 a.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 | lib/contentFiltering.js » ('j') | 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();
401 this.tracer = null; 398 this.tracer = null;
402 this.inline = true;
403 this.inlineEmulated = true;
404 399
405 this.elemHideEmulation = new ElemHideEmulation( 400 this.elemHideEmulation = new ElemHideEmulation(
406 this.addSelectors.bind(this), 401 this.addSelectors.bind(this),
407 this.hideElements.bind(this) 402 this.hideElements.bind(this)
408 ); 403 );
409 } 404 }
410 ContentFiltering.prototype = { 405 ContentFiltering.prototype = {
411 selectorGroupSize: 1024,
412
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)
444 {
445 let style = this.styles.get(groupName);
446
447 if (style && !appendOnly)
448 {
449 while (style.sheet.cssRules.length > 0)
450 style.sheet.deleteRule(0);
451 }
452
453 if (selectors.length == 0)
454 return;
455
456 if (!style)
457 {
458 // Create <style> element lazily, only if we add styles. Add it to
459 // the shadow DOM if possible. Otherwise fallback to the <head> or
460 // <html> element. If we have injected a style element before that
461 // has been removed (the sheet property is null), create a new one.
462 style = document.createElement("style");
463 (this.shadow || document.head ||
464 document.documentElement).appendChild(style);
465
466 // It can happen that the frame already navigated to a different
467 // document while we were waiting for the background page to respond.
468 // In that case the sheet property will stay null, after addind the
469 // <style> element to the shadow DOM.
470 if (!style.sheet)
471 return;
472
473 this.styles.set(groupName, style);
474 }
475
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
495 // 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
497 // 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
499 // 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
501 // 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
503 // selectors not working on Chromium, but it is highly unlikely.
504 // See issue #6298 and https://crbug.com/804179
505 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize)
506 {
507 let selector = preparedSelectors.slice(
508 i, i + this.selectorGroupSize
509 ).join(", ");
510 style.sheet.insertRule(selector + "{display: none !important;}",
511 style.sheet.cssRules.length);
512 }
513 },
514
515 addSelectors(selectors, filters, groupName = "emulated", appendOnly = false) 406 addSelectors(selectors, filters, groupName = "emulated", appendOnly = false)
516 { 407 {
517 if (this.inline || this.inlineEmulated) 408 browser.runtime.sendMessage({
518 { 409 type: "elemhide.injectSelectors",
519 // Insert the style rules inline if we have been instructed by the 410 selectors,
520 // background page to do so. This is usually the case, except on platforms 411 groupName,
521 // that do support user stylesheets via the browser.tabs.insertCSS API 412 appendOnly
522 // (Firefox 53 onwards for now and possibly Chrome in the near future). 413 });
523 // Once all supported platforms have implemented this API, we can remove
524 // the code below. See issue #5090.
525 // Related Chrome and Firefox issues:
526 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009
527 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026
528 this.addSelectorsInline(selectors, groupName, appendOnly);
529 }
530 else
531 {
532 browser.runtime.sendMessage({
533 type: "elemhide.injectSelectors",
534 selectors,
535 groupName,
536 appendOnly
537 });
538 }
539 414
540 // Only trace selectors that are based directly on hiding filters 415 // Only trace selectors that are based directly on hiding filters
541 // (i.e. leave out collapsing selectors). 416 // (i.e. leave out collapsing selectors).
542 if (this.tracer && groupName != "collapsing") 417 if (this.tracer && groupName != "collapsing")
543 this.tracer.addSelectors(selectors, filters); 418 this.tracer.addSelectors(selectors, filters);
544 }, 419 },
545 420
546 hideElements(elements, filters) 421 hideElements(elements, filters)
547 { 422 {
548 for (let element of elements) 423 for (let element of elements)
(...skipping 17 matching lines...) Expand all
566 }, 441 },
567 response => 442 response =>
568 { 443 {
569 if (this.tracer) 444 if (this.tracer)
570 this.tracer.disconnect(); 445 this.tracer.disconnect();
571 this.tracer = null; 446 this.tracer = null;
572 447
573 if (response.trace) 448 if (response.trace)
574 this.tracer = new ElementHidingTracer(); 449 this.tracer = new ElementHidingTracer();
575 450
576 this.inline = response.inline;
577 this.inlineEmulated = !!response.inlineEmulated;
578
579 if (this.inline)
580 this.addSelectorsInline(response.selectors, "standard");
581
582 if (this.tracer) 451 if (this.tracer)
583 this.tracer.addSelectors(response.selectors); 452 this.tracer.addSelectors(response.selectors);
584 453
585 // Prefer CSS selectors for -abp-has and -abp-contains unless the
586 // background page has asked us to use inline styles.
587 this.elemHideEmulation.useInlineStyles = this.inline ||
588 this.inlineEmulated;
589
590 this.elemHideEmulation.apply(response.emulatedPatterns); 454 this.elemHideEmulation.apply(response.emulatedPatterns);
591 }); 455 });
592 } 456 }
593 }; 457 };
594 458
595 if (document instanceof HTMLDocument) 459 if (document instanceof HTMLDocument)
596 { 460 {
597 checkSitekey(); 461 checkSitekey();
598 462
599 contentFiltering = new ContentFiltering(); 463 contentFiltering = new ContentFiltering();
600 contentFiltering.apply(); 464 contentFiltering.apply();
601 465
602 document.addEventListener("error", event => 466 document.addEventListener("error", event =>
603 { 467 {
604 checkCollapse(event.target); 468 checkCollapse(event.target);
605 }, true); 469 }, true);
606 470
607 document.addEventListener("load", event => 471 document.addEventListener("load", event =>
608 { 472 {
609 let element = event.target; 473 let element = event.target;
610 if (/^i?frame$/.test(element.localName)) 474 if (/^i?frame$/.test(element.localName))
611 checkCollapse(element); 475 checkCollapse(element);
612 }, true); 476 }, true);
613 } 477 }
614 478
615 window.checkCollapse = checkCollapse; 479 window.checkCollapse = checkCollapse;
616 window.contentFiltering = contentFiltering; 480 window.contentFiltering = contentFiltering;
617 window.typeMap = typeMap; 481 window.typeMap = typeMap;
618 window.getURLsFromElement = getURLsFromElement; 482 window.getURLsFromElement = getURLsFromElement;
OLDNEW
« no previous file with comments | « no previous file | lib/contentFiltering.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld