Issue 6645 - Collapse elements through user style sheets if possible

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 113 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)
+function getSelectorForUserStyleSheet(element)
 {
-  if (mediatype != "MEDIA")
-    return false;
+  // Setting the "display" CSS property to "none" doesn't have any effect on
+  // <frame> elements (in framesets). So we have to hide it inline through
+  // the "visisiblity" CSS property.
+  if (element.localName == "frame")
+    return null;
 
-  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 (element.localName == "video" || element.localName == "audio")
   {
-    // 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;
+    for (let child of element.children)
+    {
+      if (child.localName == "source" || child.localName == "track")
+        return null;
+    }
   }
 
-  return true;
-}
+  // Microsoft Edge does not support CSS.escape(). However, it doesn't
+  // support user stylesheets either. So the selector would be added as
+  // an author style sheet anyway.
+  if (!("escape" in CSS))
+    return null;
 
-function collapseMediaElement(element, srcValue)
-{
-  if (!srcValue)
-    return;
+  let selector = element.localName;
+  let hasSrc = false;
+  for (let attr of ["src", "srcset"])
+  {
+    if (attr in element)
+    {
+      let value = element.getAttribute(attr);
+      if (value)
+      {
+        selector += "[" + attr + "=" + CSS.escape(value) + "]";
+        hasSrc = true;
+      }
+    }
+  }
 
-  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);
-  }
+  return hasSrc ? selector : null;
 }
 
 function hideElement(element)
 {
   function doHide()
   {
     let propertyName = "display";
     let propertyValue = "none";
     if (element.localName == "frame")
     {
@@ skipping 19 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;
+  // Construct the selector here, because the attributes it relies on can change
+  // between now and when we get the response from the background page.
+  let selector = getSelectorForUserStyleSheet(element);
 
   browser.runtime.sendMessage(
     {
       type: "filters.collapse",
       urls,
       mediatype,
       baseURL: document.location.href
     },
     collapse =>
     {
       if (collapse)
       {
-        if (collapsibleMediaElement)
-          collapseMediaElement(element, srcValue);
+        if (selector)
+        {
+          if (!collapsingSelectors.has(selector))
+          {
+            collapsingSelectors.add(selector);
+            elemhide.addSelectors([selector], null, "collapsing", true);
+          }
+        }
         else
+        {
           hideElement(element);
+        }
       }
     }
   );
 }
 
 function checkSitekey()
 {
   let attr = document.documentElement.getAttribute("data-adblockkey");
   if (attr)
     browser.runtime.sendMessage({type: "filters.addKey", token: attr});
@@ skipping 359 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;