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

Delta Between Two Patch Sets: include.preload.js

Issue 29670575: Issue 5899 - Use CSS attribute selectors for collapsing media elements (Closed) Base URL: https://hg.adblockplus.org/adblockpluschrome/
Left Patch Set: Only append new selectors Created Feb. 27, 2018, 3:57 p.m.
Right Patch Set: Compare child name directly Created April 19, 2018, 9:56 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « no previous file | lib/cssInjection.js » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
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"],
(...skipping 105 matching lines...) Expand 10 before | Expand all | Expand 10 after
137 138
138 if (!element.getAttribute("src")) 139 if (!element.getAttribute("src"))
139 return false; 140 return false;
140 141
141 for (let child of element.children) 142 for (let child of element.children)
142 { 143 {
143 // If the <video> or <audio> element contains any <source> or <track> 144 // If the <video> or <audio> element contains any <source> or <track>
144 // children, we cannot address it in CSS by the source URL; in that case we 145 // children, we cannot address it in CSS by the source URL; in that case we
145 // don't "collapse" it using a CSS selector but rather hide it directly by 146 // don't "collapse" it using a CSS selector but rather hide it directly by
146 // setting the style="..." attribute. 147 // setting the style="..." attribute.
147 if (["source", "track"].includes(child.localName)) 148 if (child.localName == "source" || child.localName == "track")
148 return false; 149 return false;
149 } 150 }
150 151
151 return true; 152 return true;
152 } 153 }
153 154
154 function collapseMediaElement(element, srcValue) 155 function collapseMediaElement(element, srcValue)
155 { 156 {
156 if (!srcValue) 157 if (!srcValue)
157 return; 158 return;
(...skipping 228 matching lines...) Expand 10 before | Expand all | Expand 10 after
386 } 387 }
387 }; 388 };
388 389
389 function ElemHide() 390 function ElemHide()
390 { 391 {
391 this.shadow = this.createShadowTree(); 392 this.shadow = this.createShadowTree();
392 this.styles = new Map(); 393 this.styles = new Map();
393 this.tracer = null; 394 this.tracer = null;
394 this.inline = true; 395 this.inline = true;
395 this.inlineEmulated = true; 396 this.inlineEmulated = true;
396 this.emulatedPatterns = null;
397 397
398 this.elemHideEmulation = new ElemHideEmulation( 398 this.elemHideEmulation = new ElemHideEmulation(
399 this.addSelectors.bind(this), 399 this.addSelectors.bind(this),
400 this.hideElements.bind(this) 400 this.hideElements.bind(this)
401 ); 401 );
402 } 402 }
403 ElemHide.prototype = { 403 ElemHide.prototype = {
404 selectorGroupSize: 1024, 404 selectorGroupSize: 1024,
405 405
406 createShadowTree() 406 createShadowTree()
407 { 407 {
408 // 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
409 // 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
410 // 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
411 // the shadow root before transistions might start (#452). 411 // the shadow root before transistions might start (#452).
412 if (!("createShadowRoot" in document.documentElement)) 412 if (!("createShadowRoot" in document.documentElement))
413 return null; 413 return null;
414 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
415 // Using shadow DOM causes issues on some Google websites, 421 // Using shadow DOM causes issues on some Google websites,
416 // including Google Docs, Gmail and Blogger (#1770, #2602, #2687). 422 // including Google Docs, Gmail and Blogger (#1770, #2602, #2687).
417 if (/\.(?:google|blogger)\.com$/.test(document.domain)) 423 if (/\.(?:google|blogger)\.com$/.test(document.domain))
418 return null; 424 return null;
419 425
420 // 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
421 // 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
422 // avoid creating the shadowRoot twice. 428 // avoid creating the shadowRoot twice.
423 let shadow = document.documentElement.shadowRoot || 429 let shadow = document.documentElement.shadowRoot ||
424 document.documentElement.createShadowRoot(); 430 document.documentElement.createShadowRoot();
425 shadow.appendChild(document.createElement("shadow")); 431 shadow.appendChild(document.createElement("content"));
426 432
427 return shadow; 433 return shadow;
428 }, 434 },
429 435
430 addSelectorsInline(selectors, groupName, appendOnly = false) 436 addSelectorsInline(selectors, groupName, appendOnly = false)
431 { 437 {
432 let style = this.styles.get(groupName); 438 let style = this.styles.get(groupName);
433 439
434 if (style && !appendOnly) 440 if (style && !appendOnly)
435 { 441 {
(...skipping 81 matching lines...) Expand 10 before | Expand all | Expand 10 after
517 else 523 else
518 { 524 {
519 browser.runtime.sendMessage({ 525 browser.runtime.sendMessage({
520 type: "elemhide.injectSelectors", 526 type: "elemhide.injectSelectors",
521 selectors, 527 selectors,
522 groupName, 528 groupName,
523 appendOnly 529 appendOnly
524 }); 530 });
525 } 531 }
526 532
527 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")
528 this.tracer.addSelectors(selectors, filters); 536 this.tracer.addSelectors(selectors, filters);
529 }, 537 },
530 538
531 hideElements(elements, filters) 539 hideElements(elements, filters)
532 { 540 {
533 for (let element of elements) 541 for (let element of elements)
534 hideElement(element); 542 hideElement(element);
535 543
536 if (this.tracer) 544 if (this.tracer)
537 { 545 {
(...skipping 18 matching lines...) Expand all
556 564
557 this.inline = response.inline; 565 this.inline = response.inline;
558 this.inlineEmulated = !!response.inlineEmulated; 566 this.inlineEmulated = !!response.inlineEmulated;
559 567
560 if (this.inline) 568 if (this.inline)
561 this.addSelectorsInline(response.selectors, "standard"); 569 this.addSelectorsInline(response.selectors, "standard");
562 570
563 if (this.tracer) 571 if (this.tracer)
564 this.tracer.addSelectors(response.selectors); 572 this.tracer.addSelectors(response.selectors);
565 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
566 this.elemHideEmulation.apply(response.emulatedPatterns); 579 this.elemHideEmulation.apply(response.emulatedPatterns);
567 }); 580 });
568 } 581 }
569 }; 582 };
570 583
571 if (document instanceof HTMLDocument) 584 if (document instanceof HTMLDocument)
572 { 585 {
573 checkSitekey(); 586 checkSitekey();
574 587
575 elemhide = new ElemHide(); 588 elemhide = new ElemHide();
576 elemhide.apply(); 589 elemhide.apply();
577 590
578 document.addEventListener("error", event => 591 document.addEventListener("error", event =>
579 { 592 {
580 checkCollapse(event.target); 593 checkCollapse(event.target);
581 }, true); 594 }, true);
582 595
583 document.addEventListener("load", event => 596 document.addEventListener("load", event =>
584 { 597 {
585 let element = event.target; 598 let element = event.target;
586 if (/^i?frame$/.test(element.localName)) 599 if (/^i?frame$/.test(element.localName))
587 checkCollapse(element); 600 checkCollapse(element);
588 }, true); 601 }, true);
589 } 602 }
590 603
591 window.checkCollapse = checkCollapse; 604 window.checkCollapse = checkCollapse;
592 window.elemhide = elemhide; 605 window.elemhide = elemhide;
593 window.typeMap = typeMap; 606 window.typeMap = typeMap;
594 window.getURLsFromElement = getURLsFromElement; 607 window.getURLsFromElement = getURLsFromElement;
LEFTRIGHT

Powered by Google App Engine
This is Rietveld