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,43 @@
   {
     if (/^(?!https?:)[\w-]+:/i.test(urls[i]))
       urls.splice(i--, 1);
   }
 
   return urls;
 }
 
+function hideElement(element)
+{
+  function doHide(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");
+  }
+
+  doHide(element);
+
+  new MutationObserver(doHide).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 +169,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"]
-          }
-        );
+        hideElement(element);
       }
     }
   );
 }
 
 function checkSitekey()
 {
   let attr = document.documentElement.getAttribute("data-adblockkey");
@@ -203,16 +208,28 @@
     let pairs = selectors.map((sel, i) => [sel, filters && filters[i]]);
 
     if (document.readyState != "loading")
       this.checkNodes([document], pairs);
 
     this.selectors.push(...pairs);
   },
 
+  reportFilters(selectors, filters)
+  {
+    let matchedSelectors = [];
+    for (let filter of filters)
+      matchedSelectors.push(filter.replace(/^.*?##/, ""));

[Sebastian Noack, 2017/04/07 13:14:47]

This is essentially dead code.

Now after rebasing, thanks to another change that landed, no changes to
ElemementHidingTracer are necessary anymore, but you can just send
devtools.traceElemHide message with the list of selectors from hideElements():

  function hideElements(elements, filters)
  {
    ...

    if (this.tracer)
      ext.backgroundPage.sendMessage({type: "devtools.traceElemHide", filters});
  }

[hub, 2017/04/07 15:50:01]

ah ok. done now.

+
+    ext.backgroundPage.sendMessage({
+      type: "devtools.traceElemHide",
+      selectors, filters
+    });
+  },
+
   checkNodes(nodes, pairs)
   {
     let selectors = [];
     let filters = [];
 
     for (let [selector, filter] of pairs)
     {
       nodes: for (let node of nodes)
@@ -236,22 +253,17 @@
 
             break nodes;
           }
         }
       }
     }
 
     if (selectors.length > 0 || filters.length > 0)
-    {
-      ext.backgroundPage.sendMessage({
-        type: "devtools.traceElemHide",
-        selectors, filters
-      });
-    }
+      this.reportFilters(selectors, filters);
   },
 
   onTimeout()
   {
     this.checkNodes(this.changedNodes, this.selectors);
     this.changedNodes = [];
     this.timeout = null;
   },
@@ -431,17 +443,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
@@ -542,16 +555,30 @@
       this.style.sheet.insertRule(selector + "{display: none !important;}",
                                   this.style.sheet.cssRules.length);
     }
 
     if (this.tracer)
       this.tracer.addSelectors(selectors, filters);
   },
 
+  hideElements(elements, filters)
+  {
+    for (let element of elements)
+      hideElement(element);
+
+    if (this.tracer)
+    {
+      let selectors = [];
+      for (let filter of filters)
+        selectors.push(filter.replace(/^.*?##/, ""));
+      this.tracer.reportFilters(selectors, filters);
+    }
+  },
+
   apply()
   {
     ext.backgroundPage.sendMessage({type: "get-selectors"}, response =>
     {
       if (this.tracer)
         this.tracer.disconnect();
       this.tracer = null;