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
@@ skipping 17 matching lines @@
   ["input", "IMAGE"],
   ["picture", "IMAGE"],
   ["audio", "MEDIA"],
   ["video", "MEDIA"],
   ["frame", "SUBDOCUMENT"],
   ["iframe", "SUBDOCUMENT"],
   ["object", "OBJECT"],
   ["embed", "OBJECT"]
 ]);
 
+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")
       continue;
@@ skipping 73 matching lines @@
 
   for (let i = 0; i < urls.length; i++)
   {
     if (/^(?!https?:)[\w-]+:/i.test(urls[i]))
       urls.splice(i--, 1);
   }
 
   return urls;
 }
 
+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 (["source", "track"].includes(child.localName))
+      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")
     {
       propertyName = "visibility";
       propertyValue = "hidden";
@@ skipping 17 matching lines @@
 function checkCollapse(element)
 {
   let mediatype = typeMap.get(element.localName);
   if (!mediatype)
     return;
 
   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 (collapse)
       {
-        hideElement(element);
+        if (collapsibleMediaElement)
+          collapseMediaElement(element, srcValue);
+        else
+          hideElement(element);
       }
     }
   );
 }
 
 function checkSitekey()
 {
   let attr = document.documentElement.getAttribute("data-adblockkey");
   if (attr)
     browser.runtime.sendMessage({type: "filters.addKey", token: attr});
@@ skipping 182 matching lines @@
     // 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"));
 
     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)
       this.tracer.addSelectors(selectors, filters);
   },
 
   hideElements(elements, filters)
   {
     for (let element of elements)
@@ skipping 51 matching lines @@
     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;