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(el)
+  {
+    let propertyName = "display";
+    let propertyValue = "none";
+    if (el.localName == "frame")
+    {
+      propertyName = "visibility";
+      propertyValue = "hidden";
+    }
+
+    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 =>
     {
-      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});
 }
 
 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);
-  },
-
-  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)
-    {
-      element.style.display = "none";

[Sebastian Noack, 2017/04/04 10:14:45]

We should use the same logic as we have in checkCollapse(), i.e. "display: none
!important" + MutationObserver preventing the web page from changing that style.
In order to avoid duplication, that logic should be moved to a separate function
that is called both, here and in checkCollapse().

[hub, 2017/04/05 09:05:53]

Done.

-    }
-    // XXX first arg is supposed to be selectors
+      hideElement(element);
+
     if (this.tracer)
-      this.tracer.addSelectors(filters, filters);

[Sebastian Noack, 2017/04/04 10:14:45]

ElementHidingTracer.addSelectors() will search for hidden elements that match
the given selectors (now and on DOM mutation) and reports the corresponding
filters to the devtools panel if it found any match.

This step is unnecessary in the scenario here, as the elements just got hidden
there is no need to confirm that, and in fact we don't even have any selectors
that we could rely on for this purpose.

Instead we should add a method to ElementHidingTracer that reports a list of
filters to the devtools panel no matter what, and use this method here instead.

[hub, 2017/04/05 09:05:53]

Done.

+    {
+      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);
 }