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

include.preload.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2017 eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 109 matching lines @@
 
   for (let i = 0; i < urls.length; i++)
   {
     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)
     return;
 
   ext.backgroundPage.sendMessage(
     {
       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");
   if (attr)
     ext.backgroundPage.sendMessage({type: "filters.addKey", token: attr});
@@ skipping 16 matching lines @@
   addSelectors(selectors, filters)
   {
     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)
       {
         for (let element of node.querySelectorAll(selector))
@@ skipping 13 matching lines @@
             else
               selectors.push(selector);
 
             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;
   },
 
   observe(mutations)
@@ skipping 169 matching lines @@
 
   this.elemHideEmulation = new ElemHideEmulation(
     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
     // rely on the order of their own <style> tags (#309). However, creating
     // a shadow root breaks running CSS transitions. So we have to create
@@ skipping 90 matching lines @@
         i, i + this.selectorGroupSize
       ).join(", ");
       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;
 
       if (this.style && this.style.parentElement)
         this.style.parentElement.removeChild(this.style);
@@ skipping 21 matching lines @@
     checkCollapse(event.target);
   }, true);
 
   document.addEventListener("load", event =>
   {
     let element = event.target;
     if (/^i?frame$/.test(element.localName))
       checkCollapse(element);
   }, true);
 }