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))
-  {
-    let newSelector = node instanceof ShadowRoot ? ":host" : ":root";

[hub, 2017/10/20 15:37:57]

In Firefox Nightly 

`document.querySelector("div") instanceof ShadowRoot` cause an exception
"ReferenceError" because ShadowRoot is not defined.

In Chrome it returns `false` which is expected (or `true` if it really is)

[Manish Jethani, 2017/10/20 16:16:41]

Done.

+  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 80 matching lines @@
       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 extractSubtrees(nodes)
-{
-  return nodes.filter(
-    (node, index) => !nodes.some(
-      // The index comparison is based on the fact that a node always appears
-      // in the list before any of its descendants.
-      (otherNode, otherIndex) => otherIndex < index && otherNode.contains(node)
-    )
-  );
+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;
   }
 }
@@ skipping 496 matching lines @@
     niceLoop(traverse(nodes), node =>
     {
       let shadowRoot = node.shadowRoot;
       if (shadowRoot)
         this.addShadowRoot(shadowRoot);
     });
   },
 
   observe(mutations)
   {
-    let allAddedElements = [];
-    for (let mutation of mutations)
-    {
-      for (let node of mutation.addedNodes)
-      {
-        if (node instanceof Element)

[lainverse, 2017/10/20 15:37:07]

Actually if nodes are always added in parent -> child order then why not check
does last node in the list contains current one?

Something like:
node instanceof Element && !elements.some(other => other.contains(node))

Then extractSubtrees won't be needed at all.

[Manish Jethani, 2017/10/20 16:16:41]

That's a very good point!

While it is better in theory, I tried it out and it seems to run slightly slower
for whatever reason. Maybe it's because extractSubtrees is a pure function and
it always runs on the same unmodified array object in both the outer and inner
loops.

I've left it as it is for now.

[lainverse, 2017/10/20 17:37:36]

Most likely that's because arrow function were defined within a loop. It may
create a new instance every time it runs. Try to move it out of the loop.

let elements = [];
let isRoot = node => node instanceof Element && !elements.some(other =>
other.contains(node));
// as I understand 'let node' within a loop creates new one each time
let mutation, node;
for (mutation of mutations)
    for (node of mutation.addedNodes)
        if (isRoot(node))
            elements.push(node);

[Manish Jethani, 2017/10/22 20:01:34]

Simply moving the array function out of the loop did not help. But I tried
moving it out entirely to make it a pure function with no reference to the
surrounding scope, and that helped. Then I moved the entire loop out into its
own pure function, that helped more. Finally I thought why not make it a
generator, that way it can participate in niceLoop's niceness.

Done.

-          allAddedElements.push(node);
-      }
-    }
-
-    // Find any preattached shadows.
-    this.findShadowRoots(extractSubtrees(allAddedElements));
+    if (typeof ShadowRoot != "undefined")
+    {
+      // Find any preattached shadows.
+      this.findShadowRoots(extractAddedSubtrees(mutations));
+    }
 
     this.queueFiltering();
   },
 
   apply(patterns, parsed)
   {
     if (parsed)
     {
       this.patterns = patterns;
     }
@@ skipping 18 matching lines @@
           attributes: true,
           characterData: true,
           subtree: true
         }
       );
     }
   }
 };
 
 exports.ElemHideEmulation = ElemHideEmulation;