Issue 5650 - Apply emulation filters to shadow DOMs

lib/content/elemHideEmulation.js

Index: lib/content/elemHideEmulation.js
===================================================================
--- a/lib/content/elemHideEmulation.js
+++ b/lib/content/elemHideEmulation.js
@@ -35,30 +35,33 @@
       return i + 1;
   return 0;
 }
 
 function makeSelector(node, selector)
 {
   if (node == null)
     return null;
-  if (!node.parentElement)
+
+  // 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 = ":root";
+    let newSelector = node instanceof ShadowRoot ? ":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;
-    return makeSelector(node.parentElement, newSelector);
+    return makeSelector(node.parentElement || node.parentNode, newSelector);
   }
 
   return selector;
 }
 
 function parseSelectorContent(content, startIndex)
 {
   let parens = 1;
@@ -300,19 +303,21 @@
 {
   return pattern.selectors.some(s => s.preferHideWithSelector) &&
     !pattern.selectors.some(s => s.requiresHiding);
 }
 
 function ElemHideEmulation(addSelectorsFunc, hideElemsFunc)
 {
   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.addSelectorsFunc = addSelectorsFunc;
   this.hideElemsFunc = hideElemsFunc;
   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.

 }
 
 ElemHideEmulation.prototype = {
   isSameOrigin(stylesheet)
   {
     try
     {
       return new URL(stylesheet.href).origin == this.document.location.origin;
@@ -404,17 +409,17 @@
 
     let elements = [];
     let elementFilters = [];
 
     let cssStyles = [];
 
     let stylesheetOnlyChange = !!stylesheets;
     if (!stylesheets)
-      stylesheets = this.document.styleSheets;
+      stylesheets = this.root.styleSheets;
 
     for (let stylesheet of stylesheets)
     {
       // Explicitly ignore third-party stylesheets to ensure consistent behavior
       // between Firefox and Chrome.
       if (!this.isSameOrigin(stylesheet))
         continue;
 
@@ -454,30 +459,30 @@
 
         if (stylesheetOnlyChange &&
             !pattern.selectors.some(selector => selector.dependsOnStyles))
         {
           pattern = null;
           return processPatterns();
         }
         generator = evaluate(pattern.selectors, 0, "",
-                             this.document, cssStyles);
+                             this.root, cssStyles);
       }
       for (let selector of generator)
       {
         if (selector != null)
         {
           if (isSelectorHidingOnlyPattern(pattern))
           {
             selectors.push(selector);
             selectorFilters.push(pattern.text);
           }
           else
           {
-            for (let element of this.document.querySelectorAll(selector))
+            for (let element of this.root.querySelectorAll(selector))
             {
               elements.push(element);
               elementFilters.push(pattern.text);
             }
           }
         }
         if (performance.now() - cycleStart > MAX_SYNCHRONOUS_PROCESSING_TIME)
         {
@@ -560,41 +565,96 @@
 
   onLoad(event)
   {
     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.
+    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);
+      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);
+  },
+
   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.

+    {
+      // Find any preattached shadows.
+      for (let node of mutation.addedNodes)
+        this.findShadowRoots(node);
+    }
+
     this.queueFiltering();
   },
 
-  apply(patterns)
+  apply(patterns, parsed)
   {
-    this.patterns = [];
-    for (let pattern of patterns)
+    if (parsed)
+    {
+      this.patterns = patterns;
+    }
+    else
     {
-      let selectors = this.parseSelector(pattern.selector);
-      if (selectors != null && selectors.length > 0)
-        this.patterns.push({selectors, text: pattern.text});
+      this.patterns = [];
+      for (let pattern of patterns)
+      {
+        let selectors = this.parseSelector(pattern.selector);
+        if (selectors != null && selectors.length > 0)
+          this.patterns.push({selectors, text: pattern.text});
+      }
     }
 
     if (this.patterns.length > 0)
     {
       this.queueFiltering();
       this.observer.observe(
-        this.document,
+        this.root,
         {
           childList: true,
           attributes: true,
           characterData: true,
           subtree: true
         }
       );
-      this.document.addEventListener("load", this.onLoad.bind(this), 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;