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();

[Manish Jethani, 2018/01/16 10:47:27]

A weak map of collapsed elements to their original display settings.

+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)

[Manish Jethani, 2018/01/16 10:47:27]

This is basically what hideElement does, except it's simpler.

We don't need to set up a MutationObserver for collapsed elements. If a website
insists on displaying an element that we have collapsed, it's up to them, since
we are blocking the URL anyway. The hiding of the element here is more of a
cosmetic touch, it does not affect ad blocking if the hiding is overridden.

-{
-  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)

[Manish Jethani, 2018/01/16 10:47:27]

Restore the original display settings.

-  {
-    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");

[Manish Jethani, 2018/01/16 10:47:27]

We have to pass true here as the second argument, because media elements can
have blob URLs, data URLs, and so on. We should restore the element if the URLs
has changed to any one of these types as well. (Actually the page mentioned in
the original issue report has this situation.)

+  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)

[Manish Jethani, 2018/01/16 10:47:27]

I'm distinguishing "collapsing" from "hiding" here. I think it's different:
collapsing should not be so aggressive (no need to set up a MutationObserver),
and it should restore the original display settings when the URL changes to
something that isn't blocked. Hiding on the other hand is based on hiding
filters and it should remain the way it is.

So I think we should consider doing the "collapsing" for all types, not just
media.

-          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 144 matching lines @@
   {
     document.removeEventListener("DOMContentLoaded", this.trace);
     this.observer.disconnect();
     clearTimeout(this.timeout);
   }
 };
 
 function ElemHide()
 {
   this.shadow = this.createShadowTree();
-  this.style = null;
+  this.styles = new Map();
   this.tracer = null;
-  this.inject = true;
-  this.emulatedPatterns = null;
+  this.inline = true;
+  this.inlineEmulated = true;
 
   this.elemHideEmulation = new ElemHideEmulation(
     this.addSelectors.bind(this),
     this.hideElements.bind(this)
   );
 }
 ElemHide.prototype = {
-  selectorGroupSize: 200,
+  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;
   },
 
-  injectSelectors(selectors, filters)
-  {
-    if (!this.style)
+  addSelectorsInline(selectors, groupName, appendOnly = false)
+  {
+    let style = this.styles.get(groupName);
+
+    if (style && !appendOnly)
+    {
+      while (style.sheet.cssRules.length > 0)
+        style.sheet.deleteRule(0);
+    }
+
+    if (selectors.length == 0)
+      return;
+
+    if (!style)
     {
       // Create <style> element lazily, only if we add styles. Add it to
       // the shadow DOM if possible. Otherwise fallback to the <head> or
       // <html> element. If we have injected a style element before that
       // has been removed (the sheet property is null), create a new one.
-      this.style = document.createElement("style");
+      style = document.createElement("style");
       (this.shadow || document.head ||
-                      document.documentElement).appendChild(this.style);
+                      document.documentElement).appendChild(style);
 
       // It can happen that the frame already navigated to a different
       // document while we were waiting for the background page to respond.
       // In that case the sheet property will stay null, after addind the
       // <style> element to the shadow DOM.
-      if (!this.style.sheet)
+      if (!style.sheet)
         return;
+
+      this.styles.set(groupName, style);
     }
 
     // If using shadow DOM, we have to add the ::content pseudo-element
     // before each selector, in order to match elements within the
     // insertion point.
     let preparedSelectors = [];
     if (this.shadow)
     {
       for (let selector of selectors)
       {
         let subSelectors = splitSelector(selector);
         for (let subSelector of subSelectors)
           preparedSelectors.push("::content " + subSelector);
       }
     }
     else
     {
       preparedSelectors = selectors;
     }
 
-    // Safari only allows 8192 primitive selectors to be injected at once[1], we
-    // therefore chunk the inserted selectors into groups of 200 to be safe.
-    // (Chrome also has a limit, larger... but we're not certain exactly what it
-    //  is! Edge apparently has no such limit.)
-    // [1] - https://github.com/WebKit/webkit/blob/1cb2227f6b2a1035f7bdc46e5ab69debb75fc1de/Source/WebCore/css/RuleSet.h#L68
+    // Chromium's Blink engine supports only up to 8,192 simple selectors, and
+    // even fewer compound selectors, in a rule. The exact number of selectors
+    // that would work depends on their sizes (e.g. "#foo .bar" has a
+    // size of 2). Since we don't know the sizes of the selectors here, we
+    // simply split them into groups of 1,024, based on the reasonable
+    // assumption that the average selector won't have a size greater than 8.
+    // The alternative would be to calculate the sizes of the selectors and
+    // divide them up accordingly, but this approach is more efficient and has
+    // worked well in practice. In theory this could still lead to some
+    // selectors not working on Chromium, but it is highly unlikely.
+    // See issue #6298 and https://crbug.com/804179
     for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize)
     {
       let selector = preparedSelectors.slice(
         i, i + this.selectorGroupSize
       ).join(", ");
-      this.style.sheet.insertRule(selector + "{display: none !important;}",
-                                  this.style.sheet.cssRules.length);
-    }
-  },
-
-  addSelectors(selectors, filters)
-  {
-    if (selectors.length == 0)
-      return;
-
-    if (this.inject)
+      style.sheet.insertRule(selector + "{display: none !important;}",
+                             style.sheet.cssRules.length);
+    }
+  },
+
+  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.injectSelectors(selectors, filters);
+      this.addSelectorsInline(selectors, groupName, appendOnly);
     }
     else
     {
       browser.runtime.sendMessage({
         type: "elemhide.injectSelectors",
-        selectors
+        selectors,
+        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)
     {
       browser.runtime.sendMessage({
         type: "devtools.traceElemHide",
         selectors: [],
         filters
       });
     }
   },
 
   apply()
   {
     browser.runtime.sendMessage({type: "elemhide.getSelectors"}, response =>
     {
       if (this.tracer)
         this.tracer.disconnect();
       this.tracer = null;
 
-      if (this.style && this.style.parentElement)
-        this.style.parentElement.removeChild(this.style);
-      this.style = null;
-
       if (response.trace)
         this.tracer = new ElementHidingTracer();
 
-      this.inject = response.inject;
-
-      if (this.inject)
-        this.addSelectors(response.selectors);
-      else if (this.tracer)
+      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 =>

[Manish Jethani, 2018/01/16 10:47:27]

The "loadstart" event is dispatched by VIDEO and AUDIO elements when the URL
begins to load. We do get an "error" event afterwards after the URL is blocked
by Adblock Plus. It means now we end up collapsing the element even before the
URL has been blocked, but that's OK, it doesn't make much of a difference.

This is mainly for restoring the element since we won't be getting an "error"
event if the URL isn't blocked.

-  {
-    let element = event.target;
-    if (typeMap.get(element.localName) == "MEDIA")

[Manish Jethani, 2018/01/16 10:47:27]

We have to do this check because IMG and PICTURE elements also dispatch a
"loadstart" event.

-      checkCollapse(element);
-  }, true);
 }
 
 window.checkCollapse = checkCollapse;
 window.elemhide = elemhide;
 window.typeMap = typeMap;
 window.getURLsFromElement = getURLsFromElement;