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)
+function hideElement(element)
+{
+  function doHide(el)
   {
     let propertyName = "display";
     let propertyValue = "none";
-    if (element.localName == "frame")
+    if (el.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(
+    if (el.style.getPropertyValue(propertyName) != propertyValue ||
+        el.style.getPropertyPriority(propertyName) != "important")
+      el.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 =>
     {
       if (collapse)
       {
-        collapseElement(element);
+        hideElement(element);
       }
     }
   );
 }
 
 function checkSitekey()
 {
   let attr = document.documentElement.getAttribute("data-adblockkey");
   if (attr)
     ext.backgroundPage.sendMessage({type: "filters.addKey", token: attr});
 }
 
 function ElementHidingTracer()
 {
   this.selectors = [];
-  this.filters = [];
-
   this.changedNodes = [];
   this.timeout = null;
-
   this.observer = new MutationObserver(this.observe.bind(this));
   this.trace = this.trace.bind(this);
 
   if (document.readyState == "loading")
     document.addEventListener("DOMContentLoaded", this.trace);
   else
     this.trace();
 }
 ElementHidingTracer.prototype = {
   addSelectors(selectors, filters)
   {
+    let pairs = selectors.map((sel, i) => [sel, filters && filters[i]]);
+
     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++)
+      this.checkNodes([document], pairs);
+
+    this.selectors.push(...pairs);
+  },
+
+  checkNodes(nodes, pairs)
+  {
+    let selectors = [];
+    let filters = [];
+
+    for (let [selector, filter] of pairs)
     {
       nodes: for (let node of nodes)
       {
-        let elements = node.querySelectorAll(selectors[i]);
-
-        for (let element of elements)
+        for (let element of node.querySelectorAll(selector))
         {
           // 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(/^.*?##/, ""));
+            // For regular element hiding, we don't know the exact filter,
+            // but the background page can find it with the given selector.
+            // In case of element hiding emulation, the generated selector
+            // we got here is different from the selector part of the filter,
+            // but in this case we can send the whole filter text instead.
+            if (filter)
+              filters.push(filter);
+            else
+              selectors.push(selector);
+
             break nodes;
           }
         }
       }
     }
 
-    if (matchedSelectors.length > 0)
+    if (selectors.length > 0 || filters.length > 0)
     {
       ext.backgroundPage.sendMessage({
         type: "devtools.traceElemHide",
-        selectors: matchedSelectors
+        selectors, filters
       });
     }
   },
 
   onTimeout()
   {
-    this.checkNodes(this.changedNodes, this.selectors, this.filters);
+    this.checkNodes(this.changedNodes, this.selectors);
     this.changedNodes = [];
     this.timeout = null;
   },
 
   observe(mutations)
   {
     // Forget previously changed nodes that are no longer in the DOM.
     for (let i = 0; i < this.changedNodes.length; i++)
     {
       if (!document.contains(this.changedNodes[i]))
@@ skipping 41 matching lines @@
 
     // Check only nodes whose descendants have changed, and not more often
     // than once a second. Otherwise large pages with a lot of DOM mutations
     // (like YouTube) freeze when the devtools panel is active.
     if (this.timeout == null)
       this.timeout = setTimeout(this.onTimeout.bind(this), 1000);
   },
 
   trace()
   {
-    this.checkNodes([document], this.selectors, this.filters);
+    this.checkNodes([document], this.selectors);
 
     this.observer.observe(
       document,
       {
         childList: true,
         attributes: true,
         subtree: true
       }
     );
   },
 
   disconnect()
   {
     document.removeEventListener("DOMContentLoaded", this.trace);
     this.observer.disconnect();
     clearTimeout(this.timeout);
   }
 };
 
-function runInPageContext(fn, arg)
-{
-  let script = document.createElement("script");
-  script.type = "application/javascript";
-  script.async = false;
-  script.textContent = "(" + fn + ")(" + JSON.stringify(arg) + ");";
-  document.documentElement.appendChild(script);
-  document.documentElement.removeChild(script);
-}
-
-// Before Chrome 58 the webRequest API didn't allow us to intercept
-// WebSockets[1], and therefore some ad networks are misusing them as a way to
-// serve adverts and circumvent us. As a workaround we wrap WebSocket,
-// preventing blocked WebSocket connections from being opened.
-// [1] - https://bugs.chromium.org/p/chromium/issues/detail?id=129353
-function wrapWebSocket()
-{
-  let randomEventName = "abpws-" + Math.random().toString(36).substr(2);
-
-  document.addEventListener(randomEventName, event =>
-  {
-    ext.backgroundPage.sendMessage({
-      type: "request.websocket",
-      url: event.detail.url
-    }, block =>
-    {
-      document.dispatchEvent(new CustomEvent(
-        randomEventName + "-" + event.detail.url, {detail: block}
-      ));
-    });
-  });
-
-  runInPageContext(eventName =>
-  {
-    // As far as possible we must track everything we use that could be
-    // sabotaged by the website later in order to circumvent us.
-    let RealWebSocket = WebSocket;
-    let RealCustomEvent = window.CustomEvent;
-    let closeWebSocket = Function.prototype.call.bind(
-      RealWebSocket.prototype.close
-    );
-    let addEventListener = document.addEventListener.bind(document);
-    let removeEventListener = document.removeEventListener.bind(document);
-    let dispatchEvent = document.dispatchEvent.bind(document);
-
-    function checkRequest(url, callback)
-    {
-      let incomingEventName = eventName + "-" + url;
-      function listener(event)
-      {
-        callback(event.detail);
-        removeEventListener(incomingEventName, listener);
-      }
-      addEventListener(incomingEventName, listener);
-
-      dispatchEvent(new RealCustomEvent(eventName, {detail: {url}}));
-    }
-
-    function WrappedWebSocket(url, ...args)
-    {
-      // Throw correct exceptions if the constructor is used improperly.
-      if (!(this instanceof WrappedWebSocket)) return RealWebSocket();
-      if (arguments.length < 1) return new RealWebSocket();
-
-      let websocket = new RealWebSocket(url, ...args);
-
-      checkRequest(websocket.url, blocked =>
-      {
-        if (blocked)
-          closeWebSocket(websocket);
-      });
-
-      return websocket;
-    }
-    WrappedWebSocket.prototype = RealWebSocket.prototype;
-    window.WebSocket = WrappedWebSocket.bind();
-    Object.defineProperties(WebSocket, {
-      CONNECTING: {value: RealWebSocket.CONNECTING, enumerable: true},
-      OPEN: {value: RealWebSocket.OPEN, enumerable: true},
-      CLOSING: {value: RealWebSocket.CLOSING, enumerable: true},
-      CLOSED: {value: RealWebSocket.CLOSED, enumerable: true},
-      prototype: {value: RealWebSocket.prototype}
-    });
-
-    RealWebSocket.prototype.constructor = WebSocket;
-  }, randomEventName);
-}
-
 function ElemHide()
 {
   this.shadow = this.createShadowTree();
   this.style = null;
   this.tracer = null;
 
   this.elemHideEmulation = new ElemHideEmulation(
     window,
     callback =>
     {
@@ skipping 23 matching lines @@
     if (/\.(?:google|blogger)\.com$/.test(document.domain))
       return null;
 
     // Finally since some users have both AdBlock and Adblock Plus installed we
     // have to consider how the two extensions interact. For example we want to
     // avoid creating the shadowRoot twice.
     let shadow = document.documentElement.shadowRoot ||
                  document.documentElement.createShadowRoot();
     shadow.appendChild(document.createElement("shadow"));
 
-    // Stop the website from messing with our shadow root (#4191, #4298).
-    if ("shadowRoot" in Element.prototype)
-    {
-      runInPageContext(() =>
-      {
-        let ourShadowRoot = document.documentElement.shadowRoot;
-        if (!ourShadowRoot)
-          return;
-        let desc = Object.getOwnPropertyDescriptor(Element.prototype,
-                                                   "shadowRoot");
-        let shadowRoot = Function.prototype.call.bind(desc.get);
-
-        Object.defineProperty(Element.prototype, "shadowRoot", {
-          configurable: true, enumerable: true, get()
-          {
-            let thisShadow = shadowRoot(this);
-            return thisShadow == ourShadowRoot ? null : thisShadow;
-          }
-        });
-      }, null);
-    }
-
     return shadow;
   },
 
   addSelectors(selectors, filters)
   {
     if (selectors.length == 0)
       return;
 
     if (!this.style)
     {
@@ skipping 39 matching lines @@
     for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize)
     {
       let selector = preparedSelectors.slice(
         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);
+      this.tracer.addSelectors(selectors, filters);
   },
 
   hideElements(elements, filters)
   {
     for (let element of elements)
-      collapseElement(element);
+      hideElement(element);
 
     if (this.tracer)
-      this.tracer.hideElements(filters);
+    {
+      ext.backgroundPage.sendMessage({
+        type: "devtools.traceElemHide",
+        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);
       this.style = null;
 
       if (response.trace)
         this.tracer = new ElementHidingTracer();
 
       this.addSelectors(response.selectors);
       this.elemHideEmulation.apply();
     });
   }
 };
 
 if (document instanceof HTMLDocument)
 {
   checkSitekey();
-  wrapWebSocket();
 
   elemhide = new ElemHide();
   elemhide.apply();
 
   document.addEventListener("error", event =>
   {
     checkCollapse(event.target);
   }, true);
 
   document.addEventListener("load", event =>
   {
     let element = event.target;
     if (/^i?frame$/.test(element.localName))
       checkCollapse(element);
   }, true);
 }