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 18 matching lines @@
 ElementHidingTracer.prototype = {
   addSelectors(selectors, filters)
   {
     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)
       {
         let elements = node.querySelectorAll(selectors[i]);
 
         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;
   },
 
   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 || 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;
 
       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);
 }