Issue 6645 - Collapse elements through user style sheets if possible

include.preload.js

Index: include.preload.js
===================================================================
--- a/include.preload.js
+++ b/include.preload.js
@@ -131,41 +131,46 @@
   return urls;
 }
 
-function isCollapsibleMediaElement(element, mediatype)
+function getSelectorForBlockedElement(element)
 {
-  if (mediatype != "MEDIA")
-    return false;
-
-  if (!element.getAttribute("src"))
-    return false;
+  // Microsoft Edge does not support CSS.escape(). However, it doesn't
+  // support user style sheets either. So the selector would be added
+  // with an author style sheet anyway, which doesn't provide any benefits.
+  if (!("escape" in CSS))
+    return null;
 
-  for (let child of element.children)
+  // 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 "visibility" CSS property.
+  if (element.localName == "frame")
+    return null;
+
+  // 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;
-}
-
-function collapseMediaElement(element, srcValue)
-{
-  if (!srcValue)
-    return;
+  let selector = element.localName;
+  let hasSrc = false;
+  for (let attr of ["src", "srcset"])
+  {
+    let value = element.getAttribute(attr);
+    if (value && attr in element)
+    {
+      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)
@@ -205,11 +210,9 @@
   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 = getSelectorForBlockedElement(element);
 
   browser.runtime.sendMessage(
     {
@@ -222,10 +225,18 @@
     {
       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);
+        }
       }
     }
   );