Issue 5899 - Use CSS attribute selectors for collapsing media elements

include.preload.js

Index: include.preload.js
===================================================================
--- a/include.preload.js
+++ b/include.preload.js
@@ -30,16 +30,18 @@
   ["audio", "MEDIA"],
   ["video", "MEDIA"],
   ["frame", "SUBDOCUMENT"],
   ["iframe", "SUBDOCUMENT"],
   ["object", "OBJECT"],
   ["embed", "OBJECT"]
 ]);
 
+let collapsedElements = new WeakMap();
+
 function getURLsFromObjectElement(element)
 {
   let url = element.getAttribute("data");
   if (url)
     return [url];
 
   for (let child of element.children)
   {
@@ -94,17 +96,17 @@
   }
 
   if (element.poster)
     urls.push(element.poster);
 
   return urls;
 }
 
-function getURLsFromElement(element)
+function getURLsFromElement(element, all)
 {
   let urls;
   switch (element.localName)
   {
     case "object":
       urls = getURLsFromObjectElement(element);
       break;
 
@@ -114,25 +116,49 @@
       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 hideElement(element)
 {
   function doHide()
   {
     let propertyName = "display";
     let propertyValue = "none";
     if (element.localName == "frame")
     {
@@ -156,31 +182,38 @@
 }
 
 function checkCollapse(element)
 {
   let mediatype = typeMap.get(element.localName);
   if (!mediatype)
     return;
 
-  let urls = getURLsFromElement(element);
+  let urls = getURLsFromElement(element, mediatype == "MEDIA");
   if (urls.length == 0)
     return;
 
   browser.runtime.sendMessage(
     {
       type: "filters.collapse",
       urls,
       mediatype,
       baseURL: document.location.href
     },
 
     collapse =>
     {
-      if (collapse)
+      if (mediatype == "MEDIA")
+      {
+        if (collapse)
+          collapseElement(element);
+        else
+          restoreCollapsedElement(element);
+      }
+      else if (collapse)
       {
         hideElement(element);
       }
     }
   );
 }
 
 function checkSitekey()
@@ -533,14 +566,21 @@
   }, 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;