Issue 5094 - Implement support for :has() in chrome extension

include.preload.js

Index: include.preload.js
===================================================================
--- a/include.preload.js
+++ b/include.preload.js
@@ -122,16 +122,44 @@
   {
     if (/^(?!https?:)[\w-]+:/i.test(urls[i]))
       urls.splice(i--, 1);
   }
 
   return urls;
 }
 
+/* collapse the element and ensure it stays that way */

[Sebastian Noack, 2017/04/05 14:58:49]

If you feel that this function needs to be documented (I'm personally not even
sure), please use JSDoc syntax like we do in other files.

+function collapseElement(element)

[Sebastian Noack, 2017/04/05 14:58:49]

"element collapsing" is a special term in the context of Adblock Plus that
describes when a request has been blocked, and its associated element then is
also hidden in order to avoid showing placeholders which waste space. Since the
code in this function is no longer limited to this use case, "hide" seems to be
a better name than "collapse" here.

+{
+  function doCollapse(element)
+  {
+    let propertyName = "display";
+    let propertyValue = "none";
+    if (element.localName == "frame")
+    {
+      propertyName = "visibility";
+      propertyValue = "hidden";
+    }
+
+    if (element.style.getPropertyValue(propertyName) != propertyValue ||
+        element.style.getPropertyPriority(propertyName) != "important")
+      element.style.setProperty(propertyName, propertyValue, "important");
+  }
+
+  doCollapse(element);
+
+  new MutationObserver(doCollapse).observe(
+    element, {
+      attributes: true,
+      attributeFilter: ["style"]
+    }
+  );
+}
+
 function checkCollapse(element)
 {
   let mediatype = typeMap.get(element.localName);
   if (!mediatype)
     return;
 
   let urls = getURLsFromElement(element);
   if (urls.length == 0)
@@ -142,41 +170,19 @@
       type: "filters.collapse",
       urls,
       mediatype,
       baseURL: document.location.href
     },
 
     collapse =>
     {
-      function collapseElement()
-      {
-        let propertyName = "display";
-        let propertyValue = "none";
-        if (element.localName == "frame")
-        {
-          propertyName = "visibility";
-          propertyValue = "hidden";
-        }
-
-        if (element.style.getPropertyValue(propertyName) != propertyValue ||
-            element.style.getPropertyPriority(propertyName) != "important")
-          element.style.setProperty(propertyName, propertyValue, "important");
-      }
-
       if (collapse)
       {
-        collapseElement();
-
-        new MutationObserver(collapseElement).observe(
-          element, {
-            attributes: true,
-            attributeFilter: ["style"]
-          }
-        );
+        collapseElement(element);
       }
     }
   );
 }
 
 function checkSitekey()
 {
   let attr = document.documentElement.getAttribute("data-adblockkey");
@@ -205,16 +211,29 @@
   {
     if (document.readyState != "loading")
       this.checkNodes([document], selectors, filters);
 
     this.selectors.push(...selectors);
     this.filters.push(...filters);
   },
 
+  hideElements(filters)

[Sebastian Noack, 2017/04/05 14:58:49]

The name of this function isn't optimal. It doesn't hide any elements, but
reports filter matches for elements that have been hidden. Essentially it just
reports filters that have been applied. So how about "reportFilters"? 

[hub, 2017/04/06 10:15:20]

ok

+  {
+    let matchedSelectors = [];
+    for (let filter of filters)
+      matchedSelectors.push(filter.replace(/^.*?##/, ""));

[Sebastian Noack, 2017/04/05 14:58:49]

This logic is redundant with code in checkNodes(). I suggest to remove the
replace there, and call this function from checkNodes() when when it would
message the background page, instead.

[hub, 2017/04/06 10:15:20]

Acknowledged.

+
+    if (document.readyState != "loading")

[Sebastian Noack, 2017/04/05 14:58:49]

This check seems wrong. ElementHidingTracer.addSelectors() only triggers the
checks when readyState isn't loading, because the checks are performed anyway on
DOMContentLoaded. But this isn't the case here. So we have to message the
background page no matter what, when this function is called.

[hub, 2017/04/06 10:15:20]

Acknowledged.

+      ext.backgroundPage.sendMessage({
+        type: "devtools.traceElemHide",
+        selectors: matchedSelectors
+      });
+  },
+
   checkNodes(nodes, selectors, filters)
   {
     let matchedSelectors = [];
 
     for (let i = 0; i < selectors.length; i++)
     {
       nodes: for (let node of nodes)
       {
@@ -425,17 +444,18 @@
     window,
     callback =>
     {
       ext.backgroundPage.sendMessage({
         type: "filters.get",
         what: "elemhideemulation"
       }, callback);
     },
-    this.addSelectors.bind(this)
+    this.addSelectors.bind(this),
+    this.hideElements.bind(this)
   );
 }
 ElemHide.prototype = {
   selectorGroupSize: 200,
 
   createShadowTree()
   {
     // Use Shadow DOM if available as to not mess with with web pages that
@@ -536,16 +556,25 @@
       this.style.sheet.insertRule(selector + "{display: none !important;}",
                                   this.style.sheet.cssRules.length);
     }
 
     if (this.tracer)
       this.tracer.addSelectors(selectors, filters || selectors);
   },
 
+  hideElements(elements, filters)
+  {
+    for (let element of elements)
+      collapseElement(element);
+
+    if (this.tracer)
+      this.tracer.hideElements(filters);
+  },
+
   apply()
   {
     ext.backgroundPage.sendMessage({type: "get-selectors"}, response =>
     {
       if (this.tracer)
         this.tracer.disconnect();
       this.tracer = null;