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");
@@ -205,16 +210,28 @@
   {
     if (document.readyState != "loading")
       this.checkNodes([document], selectors, filters);
 
     this.selectors.push(...selectors);
     this.filters.push(...filters);
   },
 
+  reportFilters(filters)
+  {
+    let matchedSelectors = [];
+    for (let filter of filters)
+      matchedSelectors.push(filter.replace(/^.*?##/, ""));
+
+    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)
       {
@@ -222,30 +239,25 @@
 
         for (let element of elements)
         {
           // Only consider selectors that actually have an effect on the
           // computed styles, and aren't overridden by rules with higher
           // priority, or haven't been circumvented in a different way.
           if (getComputedStyle(element).display == "none")
           {
-            matchedSelectors.push(filters[i].replace(/^.*?##/, ""));
+            matchedSelectors.push(filters[i]);
             break nodes;
           }
         }
       }
     }
 
     if (matchedSelectors.length > 0)
-    {
-      ext.backgroundPage.sendMessage({
-        type: "devtools.traceElemHide",
-        selectors: matchedSelectors
-      });
-    }
+      this.reportFilters(matchedSelectors);
   },
 
   onTimeout()
   {
     this.checkNodes(this.changedNodes, this.selectors, this.filters);
     this.changedNodes = [];
     this.timeout = null;
   },
@@ -425,17 +437,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 +549,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)
+      hideElement(element);
+
+    if (this.tracer)
+      this.tracer.reportFilters(filters);
+  },
+
   apply()
   {
     ext.backgroundPage.sendMessage({type: "get-selectors"}, response =>
     {
       if (this.tracer)
         this.tracer.disconnect();
       this.tracer = null;