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 22 matching lines @@
   for (let i = 0; i < children.length; i++)
     if (children[i] == node)
       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;
   let quote = null;
   let i = startIndex;
@@ skipping 231 matching lines @@
 
 function isSelectorHidingOnlyPattern(pattern)
 {
   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;
     }
     catch (e)
@@ skipping 81 matching lines @@
     let selectors = [];
     let selectorFilters = [];
 
     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;
 
       let rules = stylesheet.cssRules;
       if (!rules)
@@ skipping 29 matching lines @@
 
         pattern = patterns.shift();
 
         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)
         {
           setTimeout(processPatterns, 0);
           return;
@@ skipping 72 matching lines @@
     }
   },
 
   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)
     {
-      let selectors = this.parseSelector(pattern.selector);
-      if (selectors != null && selectors.length > 0)
-        this.patterns.push({selectors, text: pattern.text});
+      this.patterns = patterns;
+    }
+    else
+    {
+      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;