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

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

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

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

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

[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.)

   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)

[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);
+        else
+          restoreCollapsedElement(element);
+      }
+      else if (collapse)
       {
         hideElement(element);
       }
     }
   );
 }
 
 function checkSitekey()
@@ -517,14 +550,21 @@
   }, 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;