Issue 5899 - Use CSS attribute selectors for collapsing media elements

include.preload.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 "use strict";
 
-let {splitSelector} = require("common");
-let {ElemHideEmulation} = require("content_elemHideEmulation");
+let {splitSelector} = require("./adblockpluscore/lib/common");
+let {ElemHideEmulation} =
+  require("./adblockpluscore/lib/content/elemHideEmulation");
 
 // This variable is also used by our other content scripts.
 let elemhide;
 
 const typeMap = new Map([
   ["img", "IMAGE"],
   ["input", "IMAGE"],
   ["picture", "IMAGE"],
   ["audio", "MEDIA"],
   ["video", "MEDIA"],
@@ skipping 105 matching lines @@
 
   if (!element.getAttribute("src"))
     return false;
 
   for (let child of element.children)
   {
     // If the <video> or <audio> element contains any <source> or <track>
     // children, we cannot address it in CSS by the source URL; in that case we
     // don't "collapse" it using a CSS selector but rather hide it directly by
     // setting the style="..." attribute.
-    if (["source", "track"].includes(child.localName))
+    if (child.localName == "source" || child.localName == "track")
       return false;
   }
 
   return true;
 }
 
 function collapseMediaElement(element, srcValue)
 {
   if (!srcValue)
     return;
 
   let selector = element.localName + "[src=" + CSS.escape(srcValue) + "]";
 
   // Adding selectors is expensive so do it only if we really have a new
   // selector.
   if (!collapsingSelectors.has(selector))
   {
     collapsingSelectors.add(selector);
-    elemhide.addSelectors(Array.from(collapsingSelectors), null, "collapsing");
+    elemhide.addSelectors([selector], null, "collapsing", true);
   }
 }
 
 function hideElement(element)
 {
   function doHide()
   {
     let propertyName = "display";
     let propertyValue = "none";
     if (element.localName == "frame")
@@ skipping 209 matching lines @@
   }
 };
 
 function ElemHide()
 {
   this.shadow = this.createShadowTree();
   this.styles = new Map();
   this.tracer = null;
   this.inline = true;
   this.inlineEmulated = true;
-  this.emulatedPatterns = null;
 
   this.elemHideEmulation = new ElemHideEmulation(
     this.addSelectors.bind(this),
     this.hideElements.bind(this)
   );
 }
 ElemHide.prototype = {
   selectorGroupSize: 1024,
 
   createShadowTree()
   {
     // Use Shadow DOM if available as to not mess with with web pages that
     // rely on the order of their own <style> tags (#309). However, creating
     // a shadow root breaks running CSS transitions. So we have to create
     // the shadow root before transistions might start (#452).
     if (!("createShadowRoot" in document.documentElement))
       return null;
 
+    // Both Firefox and Chrome 66+ support user style sheets, so we can avoid
+    // creating an unnecessary shadow root on these platforms.
+    let match = /\bChrome\/(\d+)/.exec(navigator.userAgent);
+    if (!match || match[1] >= 66)
+      return null;
+
     // Using shadow DOM causes issues on some Google websites,
     // including Google Docs, Gmail and Blogger (#1770, #2602, #2687).
     if (/\.(?:google|blogger)\.com$/.test(document.domain))
       return null;
 
     // Finally since some users have both AdBlock and Adblock Plus installed we
     // have to consider how the two extensions interact. For example we want to
     // avoid creating the shadowRoot twice.
     let shadow = document.documentElement.shadowRoot ||
                  document.documentElement.createShadowRoot();
-    shadow.appendChild(document.createElement("shadow"));
+    shadow.appendChild(document.createElement("content"));
 
     return shadow;
   },
 
-  addSelectorsInline(selectors, groupName)
+  addSelectorsInline(selectors, groupName, appendOnly = false)
   {
     let style = this.styles.get(groupName);
 
-    if (style)
+    if (style && !appendOnly)
     {
       while (style.sheet.cssRules.length > 0)
         style.sheet.deleteRule(0);
     }
 
     if (selectors.length == 0)
       return;
 
     if (!style)
     {
@@ skipping 47 matching lines @@
     for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize)
     {
       let selector = preparedSelectors.slice(
         i, i + this.selectorGroupSize
       ).join(", ");
       style.sheet.insertRule(selector + "{display: none !important;}",
                              style.sheet.cssRules.length);
     }
   },
 
-  addSelectors(selectors, filters, groupName = "emulated")
+  addSelectors(selectors, filters, groupName = "emulated", appendOnly = false)
   {
     if (this.inline || this.inlineEmulated)
     {
       // Insert the style rules inline if we have been instructed by the
       // background page to do so. This is usually the case, except on platforms
       // that do support user stylesheets via the browser.tabs.insertCSS API
       // (Firefox 53 onwards for now and possibly Chrome in the near future).
       // Once all supported platforms have implemented this API, we can remove
       // the code below. See issue #5090.
       // Related Chrome and Firefox issues:
       // https://bugs.chromium.org/p/chromium/issues/detail?id=632009
       // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026
-      this.addSelectorsInline(selectors, groupName);
+      this.addSelectorsInline(selectors, groupName, appendOnly);
     }
     else
     {
       browser.runtime.sendMessage({
         type: "elemhide.injectSelectors",
         selectors,
-        groupName
+        groupName,
+        appendOnly
       });
     }
 
-    if (this.tracer)
+    // Only trace selectors that are based directly on hiding filters
+    // (i.e. leave out collapsing selectors).
+    if (this.tracer && groupName != "collapsing")
       this.tracer.addSelectors(selectors, filters);
   },
 
   hideElements(elements, filters)
   {
     for (let element of elements)
       hideElement(element);
 
     if (this.tracer)
     {
@@ skipping 18 matching lines @@
 
       this.inline = response.inline;
       this.inlineEmulated = !!response.inlineEmulated;
 
       if (this.inline)
         this.addSelectorsInline(response.selectors, "standard");
 
       if (this.tracer)
         this.tracer.addSelectors(response.selectors);
 
+      // Prefer CSS selectors for -abp-has and -abp-contains unless the
+      // background page has asked us to use inline styles.
+      this.elemHideEmulation.useInlineStyles = this.inline ||
+                                               this.inlineEmulated;
+
       this.elemHideEmulation.apply(response.emulatedPatterns);
     });
   }
 };
 
 if (document instanceof HTMLDocument)
 {
   checkSitekey();
 
   elemhide = new ElemHide();
   elemhide.apply();
 
   document.addEventListener("error", event =>
   {
     checkCollapse(event.target);
   }, true);
 
   document.addEventListener("load", event =>
   {
     let element = event.target;
     if (/^i?frame$/.test(element.localName))
       checkCollapse(element);
   }, true);
 }
 
 window.checkCollapse = checkCollapse;
 window.elemhide = elemhide;
 window.typeMap = typeMap;
 window.getURLsFromElement = getURLsFromElement;