Issue 5650 - Apply emulation filters to shadow DOMs

lib/content/elemHideEmulation.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present 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 18 matching lines @@
  */
 function positionInParent(node)
 {
   let {children} = node.parentNode;
   for (let i = 0; i < children.length; i++)
     if (children[i] == node)
       return i + 1;
   return 0;
 }
 
+function isShadowRoot(node)
+{
+  return typeof ShadowRoot != "undefined" && node instanceof ShadowRoot;
+}
+
 function makeSelector(node, selector)
 {
   if (node == null)
     return null;
 
   // If this is the topmost element in a shadow DOM, climb up one more level
   // and then use a ":host" prefix.
-  if (!node.parentElement && !(node.parentNode instanceof ShadowRoot))

[Manish Jethani, 2017/09/29 23:31:30]

BODY has a parent element (HTML), but the topmost element in a shadow DOM
doesn't. We still need to add a ":host" prefix in this case, but the topmost
element must be included in the CSS selector.

-  {
-    let newSelector = node instanceof ShadowRoot ? ":host" : ":root";
+  if (!node.parentElement && !isShadowRoot(node.parentNode))
+  {
+    let newSelector = isShadowRoot(node) ? ":host" : ":root";
     if (selector)
       newSelector += " > " + selector;
     return newSelector;
   }
   let idx = positionInParent(node);
   if (idx > 0)
   {
     let newSelector = `${node.tagName}:nth-child(${idx})`;
     if (selector)
       newSelector += " > " + selector;
@@ skipping 78 matching lines @@
   {
     if (selector == null)
       yield null;
     else
       yield* evaluate(chain, index + 1, selector, element, styles);
   }
   // Just in case the getSelectors() generator above had to run some heavy
   // document.querySelectorAll() call which didn't produce any results, make
   // sure there is at least one point where execution can pause.
   yield null;
+}
+
+function isDescendantOf(node, subtrees)
+{
+  return subtrees.some(subtree => subtree.contains(node));
+}
+
+function* extractAddedSubtrees(mutations)
+{
+  let knownSubtrees = [];
+
+  for (let mutation of mutations)
+  {
+    for (let node of mutation.addedNodes)
+    {
+      if (node instanceof Element && !isDescendantOf(node, knownSubtrees))
+      {
+        knownSubtrees.push(node);
+        yield node;
+      }
+    }
+  }
+}
+
+function* traverse(nodes)
+{
+  for (let node of nodes)
+  {
+    yield* traverse(node.children);
+    yield node;
+  }
+}
+
+function niceLoop(iterator, callback)
+{
+  let loop = () =>
+  {
+    let cycleStart = performance.now();
+
+    for (let next = iterator.next(); !next.done; next = iterator.next())
+    {
+      callback(next.value);
+
+      if (performance.now() - cycleStart > MAX_SYNCHRONOUS_PROCESSING_TIME)
+      {
+        setTimeout(loop, 0);
+        return;
+      }
+    }
+  };
+
+  loop();
 }
 
 function PlainSelector(selector)
 {
   this._selector = selector;
 }
 
 PlainSelector.prototype = {
   /**
    * Generator function returning a pair of selector
@@ skipping 141 matching lines @@
       yield [selector, subtree];
   }
 };
 
 function isSelectorHidingOnlyPattern(pattern)
 {
   return pattern.selectors.some(s => s.preferHideWithSelector) &&
     !pattern.selectors.some(s => s.requiresHiding);
 }
 
-function ElemHideEmulation(addSelectorsFunc, hideElemsFunc)
+function ElemHideEmulation(document, root, addSelectorsFunc, hideElemsFunc,
+                           shadowAttachedEventType)
 {
   this.document = document;
-  this.root = document;

[Manish Jethani, 2017/09/29 23:31:30]

Now we have a root property that can be a document or a document fragment
(shadow root).

+  this.root = root || document;
   this.addSelectorsFunc = addSelectorsFunc;
   this.hideElemsFunc = hideElemsFunc;
+  this.shadowAttachedEventType = shadowAttachedEventType;
+  this.patterns = [];
   this.observer = new MutationObserver(this.observe.bind(this));
   this.shadowEmulations = new WeakMap();

[Manish Jethani, 2017/09/29 23:31:30]

Using WeakMap here, though I suspect the shadow root object may be held on to in
other ways (via MutationObserver for example), even after the host element has
been removed from the document. I'll look further into this.

+
+  if (shadowAttachedEventType)
+  {
+    this.root.addEventListener(shadowAttachedEventType,
+                               this.onShadowAttached.bind(this), true);
+  }
+
+  if (this.root == this.document)
+    this.document.addEventListener("load", this.onLoad.bind(this), true);
+  else
+    this.findShadowRoots(this.root.children);
 }
 
 ElemHideEmulation.prototype = {
   isSameOrigin(stylesheet)
   {
     try
     {
       return new URL(stylesheet.href).origin == this.document.location.origin;
     }
     catch (e)
@@ skipping 232 matching lines @@
     }
     else
     {
       this._filteringInProgress = true;
       this._addSelectors(stylesheets, completion);
     }
   },
 
   onLoad(event)
   {
+    this.findShadowRoots(this.root.children);
+
+    if (this.patterns.length == 0)
+      return;
+
     let stylesheet = event.target.sheet;
     if (stylesheet)
       this.queueFiltering([stylesheet]);
   },
 
   onShadowAttached(event)
   {
-    // The shadow root won't be available if it's a closed shadow root. Even
-    // though we override Element.attachShadow to create an open shadow root,
-    // it is possible that some other extension has overridden it before us to
-    // create a closed shadow root.
+    event.stopImmediatePropagation();
+
+    if (this.patterns.length == 0)
+      return;
+
+    // The shadow root may not be available if it's a closed shadow root.
     let shadowRoot = event.target.shadowRoot;
     if (!shadowRoot)
       return;
 
     this.addShadowRoot(shadowRoot);
   },
 
   addShadowRoot(shadowRoot)
   {
     if (!this.shadowEmulations.has(shadowRoot))
     {
-      let emulation = new ElemHideEmulation(this.addSelectorsFunc,
-                                            this.hideElemsFunc);
+      let emulation = new ElemHideEmulation(this.document,
+                                            shadowRoot,
+                                            this.addSelectorsFunc,
+                                            this.hideElemsFunc,
+                                            this.shadowAttachedEventType);
       this.shadowEmulations.set(shadowRoot, emulation);
-      emulation.root = shadowRoot;
       emulation.apply(this.patterns, true);
     }
   },
 
-  findShadowRoots(node)
-  {
-    let shadowRoot = node.shadowRoot;
-    if (shadowRoot)
-      this.addShadowRoot(shadowRoot);
-
-    for (let child of node.children)

[Manish Jethani, 2017/09/29 23:43:56]

We could use a generator and setTimeout here to keep things in the background.

-      this.findShadowRoots(child);
+  findShadowRoots(nodes)
+  {
+    niceLoop(traverse(nodes), node =>
+    {
+      let shadowRoot = node.shadowRoot;
+      if (shadowRoot)
+        this.addShadowRoot(shadowRoot);
+    });
   },
 
   observe(mutations)
   {
-    for (let mutation of mutations)

[Manish Jethani, 2017/09/29 23:31:30]

We listen for "shadowAttached" on the document, but if the shadow host hasn't
been added to the document then the event won't reach us. When new nodes are
added, we must find shadow roots within those nodes, recursively.

+    if (typeof ShadowRoot != "undefined")
     {
       // Find any preattached shadows.
-      for (let node of mutation.addedNodes)
-        this.findShadowRoots(node);
+      this.findShadowRoots(extractAddedSubtrees(mutations));
     }
 
     this.queueFiltering();
   },
 
   apply(patterns, parsed)
   {
     if (parsed)
     {
       this.patterns = patterns;
@@ skipping 14 matching lines @@
       this.queueFiltering();
       this.observer.observe(
         this.root,
         {
           childList: true,
           attributes: true,
           characterData: true,
           subtree: true
         }
       );
-
-      if (this.root == this.document)

[Manish Jethani, 2017/09/29 23:31:30]

Listen for these events only if this is the main instance.

-      {
-        this.document.addEventListener("load", this.onLoad.bind(this), true);
-        this.document.addEventListener("shadowAttached",
-                                       this.onShadowAttached.bind(this), true);
-      }
     }
   }
 };
 
 exports.ElemHideEmulation = ElemHideEmulation;