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"],
   ["frame", "SUBDOCUMENT"],
   ["iframe", "SUBDOCUMENT"],
   ["object", "OBJECT"],
   ["embed", "OBJECT"]
 ]);
 
-let collapsedElements = new WeakMap();
+let collapsingSelectors = new Set();
 
 function getURLsFromObjectElement(element)
 {
   let url = element.getAttribute("data");
   if (url)
     return [url];
 
   for (let child of element.children)
   {
     if (child.localName != "param")
@@ skipping 45 matching lines @@
     if (child.localName == "source" || child.localName == "track")
       urls.push(...getURLsFromAttributes(child));
   }
 
   if (element.poster)
     urls.push(element.poster);
 
   return urls;
 }
 
-function getURLsFromElement(element, all)
+function getURLsFromElement(element)
 {
   let urls;
   switch (element.localName)
   {
     case "object":
       urls = getURLsFromObjectElement(element);
       break;
 
     case "video":
     case "audio":
     case "picture":
       urls = getURLsFromMediaElement(element);
       break;
 
     default:
       urls = getURLsFromAttributes(element);
       break;
   }
 
-  if (all)
-    return urls;
-
   for (let i = 0; i < urls.length; i++)
   {
     if (/^(?!https?:)[\w-]+:/i.test(urls[i]))
       urls.splice(i--, 1);
   }
 
   return urls;
 }
 
-function collapseElement(element)
-{
-  let value = element.style.getPropertyValue("display");
-  let priority = element.style.getPropertyPriority("display");
-  if (value != "none" || priority != "important")
-  {
-    element.style.setProperty("display", "none", "important");
-    collapsedElements.set(element, {value, priority});
-  }
-}
-
-function restoreCollapsedElement(element)
-{
-  let display = collapsedElements.get(element);
-  if (display)
-  {
-    element.style.setProperty("display", display.value, display.priority);
-    collapsedElements.delete(element);
+function isCollapsibleMediaElement(element, mediatype)
+{
+  if (mediatype != "MEDIA")
+    return false;
+
+  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 (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([selector], null, "collapsing", true);
   }
 }
 
 function hideElement(element)
 {
   function doHide()
   {
     let propertyName = "display";
     let propertyValue = "none";
     if (element.localName == "frame")
@@ skipping 16 matching lines @@
     }
   );
 }
 
 function checkCollapse(element)
 {
   let mediatype = typeMap.get(element.localName);
   if (!mediatype)
     return;
 
-  let urls = getURLsFromElement(element, mediatype == "MEDIA");
+  let urls = getURLsFromElement(element);
   if (urls.length == 0)
     return;
+
+  let collapsibleMediaElement = isCollapsibleMediaElement(element, mediatype);
+
+  // Save the value of the src attribute because it can change between now and
+  // when we get the response from the background page.
+  let srcValue = collapsibleMediaElement ? element.getAttribute("src") : null;
 
   browser.runtime.sendMessage(
     {
       type: "filters.collapse",
       urls,
       mediatype,
       baseURL: document.location.href
     },
-
     collapse =>
     {
-      if (mediatype == "MEDIA")
+      if (collapse)
       {
-        if (collapse)
-          collapseElement(element);
+        if (collapsibleMediaElement)
+          collapseMediaElement(element, srcValue);
         else
-          restoreCollapsedElement(element);
-      }
-      else if (collapse)
-      {
-        hideElement(element);
+          hideElement(element);
       }
     }
   );
 }
 
 function checkSitekey()
 {
   let attr = document.documentElement.getAttribute("data-adblockkey");
   if (attr)
     browser.runtime.sendMessage({type: "filters.addKey", token: attr});
@@ skipping 148 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)
+  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, "emulated");
+      this.addSelectorsInline(selectors, groupName, appendOnly);
     }
     else
     {
       browser.runtime.sendMessage({
         type: "elemhide.injectSelectors",
         selectors,
-        groupName: "emulated"
+        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);
-
-  document.addEventListener("loadstart", event =>
-  {
-    let element = event.target;
-    if (typeMap.get(element.localName) == "MEDIA")
-      checkCollapse(element);
-  }, true);
 }
 
 window.checkCollapse = checkCollapse;
 window.elemhide = elemhide;
 window.typeMap = typeMap;
 window.getURLsFromElement = getURLsFromElement;