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;
 }
 
+/* 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)
     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"]
-          }
-        );
+        collapseElement(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);
   },
 
+  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)
       {
         let elements = node.querySelectorAll(selectors[i]);
 
@@ skipping 200 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)
+      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;
 
       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);
 }