Issue 6423 - Observe only relevant mutation types

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
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 "use strict";
 
-const {filterToRegExp, splitSelector} = require("common");
+const {filterToRegExp, splitSelector} = require("../common");
 
 let MIN_INVOCATION_INTERVAL = 3000;
 const MAX_SYNCHRONOUS_PROCESSING_TIME = 50;
 const abpSelectorRegexp = /:-abp-([\w-]+)\(/i;
 
 /** Return position of node from parent.
  * @param {Node} node the node to find the position of.
  * @return {number} One-based index like for :nth-child(), or 0 on error.
  */
 function positionInParent(node)
@@ skipping 84 matching lines @@
     let priority = rule.style.getPropertyPriority(property);
     styles.push(`${property}: ${value}${priority ? " !" + priority : ""};`);
   }
   styles.sort();
   return {
     style: styles.join(" "),
     subSelectors: splitSelector(rule.selectorText)
   };
 }
 
+let scopeSupported = null;
+
+function tryQuerySelector(subtree, selector, all)
+{
+  let elements = null;
+  try
+  {
+    elements = all ? subtree.querySelectorAll(selector) :
+      subtree.querySelector(selector);
+    scopeSupported = true;
+  }
+  catch (e)
+  {
+    // Edge doesn't support ":scope"
+    scopeSupported = false;
+  }
+  return elements;
+}
+
+/**
+ * Query selector. If it is relative, will try :scope.
+ * @param {Node} subtree the element to query selector
+ * @param {string} selector the selector to query
+ * @param {bool} [all=false] true to perform querySelectorAll()
+ * @returns {?(Node|NodeList)} result of the query. null in case of error.
+ */
+function scopedQuerySelector(subtree, selector, all)
+{
+  if (selector[0] == ">")
+  {
+    selector = ":scope" + selector;
+    if (scopeSupported)
+    {
+      return all ? subtree.querySelectorAll(selector) :
+        subtree.querySelector(selector);
+    }
+    if (scopeSupported == null)
+      return tryQuerySelector(subtree, selector, all);
+    return null;
+  }
+  return all ? subtree.querySelectorAll(selector) :
+    subtree.querySelector(selector);
+}
+
+function scopedQuerySelectorAll(subtree, selector)
+{
+  return scopedQuerySelector(subtree, selector, true);
+}
+
 function* evaluate(chain, index, prefix, subtree, styles)
 {
   if (index >= chain.length)
   {
     yield prefix;
     return;
   }
   for (let [selector, element] of
        chain[index].getSelectors(prefix, subtree, styles))
   {
     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 PlainSelector(selector)
 {
   this._selector = selector;
+  this.maybeDependsOnAttributes = /[#.]|\[.+\]/.test(selector);
 }
 
 PlainSelector.prototype = {
   /**
    * Generator function returning a pair of selector
    * string and subtree.
    * @param {string} prefix the prefix for the selector.
    * @param {Node} subtree the subtree we work on.
    * @param {StringifiedStyle[]} styles the stringified style objects.
    */
   *getSelectors(prefix, subtree, styles)
   {
     yield [prefix + this._selector, subtree];
   }
 };
 
 const incompletePrefixRegexp = /[\s>+~]$/;
-const relativeSelectorRegexp = /^[>+~]/;
 
 function HasSelector(selectors)
 {
   this._innerSelectors = selectors;
 }
 
 HasSelector.prototype = {
   requiresHiding: true,
 
   get dependsOnStyles()
   {
     return this._innerSelectors.some(selector => selector.dependsOnStyles);
+  },
+
+  get dependsOnCharacterData()
+  {
+    return this._innerSelectors.some(
+      selector => selector.dependsOnCharacterData
+    );
+  },
+
+  get maybeDependsOnAttributes()
+  {
+    return this._innerSelectors.some(
+      selector => selector.maybeDependsOnAttributes
+    );
   },
 
   *getSelectors(prefix, subtree, styles)
   {
     for (let element of this.getElements(prefix, subtree, styles))
       yield [makeSelector(element, ""), element];
   },
 
   /**
    * Generator function returning selected elements.
    * @param {string} prefix the prefix for the selector.
    * @param {Node} subtree the subtree we work on.
    * @param {StringifiedStyle[]} styles the stringified style objects.
    */
   *getElements(prefix, subtree, styles)
   {
     let actualPrefix = (!prefix || incompletePrefixRegexp.test(prefix)) ?
         prefix + "*" : prefix;
-    let elements = subtree.querySelectorAll(actualPrefix);
-    for (let element of elements)
-    {
-      let iter = evaluate(this._innerSelectors, 0, "", element, styles);
-      for (let selector of iter)
-      {
-        if (selector == null)
+    let elements = scopedQuerySelectorAll(subtree, actualPrefix);
+    if (elements)
+    {
+      for (let element of elements)
+      {
+        let iter = evaluate(this._innerSelectors, 0, "", element, styles);
+        for (let selector of iter)
         {
-          yield null;
-          continue;
-        }
-        if (relativeSelectorRegexp.test(selector))
-          selector = ":scope" + selector;
-        try
-        {
-          if (element.querySelector(selector))
+          if (selector == null)
+            yield null;
+          else if (scopedQuerySelector(element, selector))
             yield element;
         }
-        catch (e)
-        {
-          // :scope isn't supported on Edge, ignore error caused by it.
-        }
+        yield null;
       }
-      yield null;
     }
   }
 };
 
 function ContainsSelector(textContent)
 {
   this._text = textContent;
 }
 
 ContainsSelector.prototype = {
   requiresHiding: true,
+  dependsOnCharacterData: true,
 
   *getSelectors(prefix, subtree, stylesheet)
   {
     for (let element of this.getElements(prefix, subtree, stylesheet))
       yield [makeSelector(element, ""), subtree];
   },
 
   *getElements(prefix, subtree, stylesheet)
   {
     let actualPrefix = (!prefix || incompletePrefixRegexp.test(prefix)) ?
         prefix + "*" : prefix;
-    let elements = subtree.querySelectorAll(actualPrefix);
-
-    for (let element of elements)
-    {
-      if (element.textContent.includes(this._text))
-        yield element;
-      else
-        yield null;
+
+    let elements = scopedQuerySelectorAll(subtree, actualPrefix);
+    if (elements)
+    {
+      for (let element of elements)
+      {
+        if (element.textContent.includes(this._text))
+          yield element;
+        else
+          yield null;
+      }
     }
   }
 };
 
 function PropsSelector(propertyExpression)
 {
   let regexpString;
   if (propertyExpression.length >= 2 && propertyExpression[0] == "/" &&
       propertyExpression[propertyExpression.length - 1] == "/")
   {
@@ skipping 37 matching lines @@
 
 function isSelectorHidingOnlyPattern(pattern)
 {
   return pattern.selectors.some(s => s.preferHideWithSelector) &&
     !pattern.selectors.some(s => s.requiresHiding);
 }
 
 function shouldObserveAttributes(patterns)
 {
   // Observe changes to attributes if either there's a plain selector that
-  // looks like an attribute selector in one of the patterns
-  // (e.g. "a[href='https://example.com/']")
+  // looks like an ID selector, class selector, or attribute selector in one of
+  // the patterns (e.g. "a[href='https://example.com/']")
   // or there's a properties selector nested inside a has selector
   // (e.g. "div:-abp-has(:-abp-properties(color: blue))")
   return patterns.some(
     pattern => pattern.selectors.some(
-      selector => (selector instanceof PlainSelector &&
-                   /\[.+\]/.test(selector._selector))||

[Manish Jethani, 2017/10/22 22:58:13]

This check for attribute selector syntax can give false positives in very rare
cases, but it doesn't matter since this is just an optimization anyway.

-                  (pattern.selectors[0] instanceof HasSelector &&

[Manish Jethani, 2017/10/22 22:58:13]

I realize that the second check is essentially
pattern.selectors[0].dependsOnStyle. I think this logic generally should be
moved into the respective classes.

[Manish Jethani, 2017/10/23 00:12:09]

Done.

-                   selector instanceof PropsSelector)
+      selector => selector.maybeDependsOnAttributes ||
+                  (selector instanceof HasSelector &&
+                   selector.dependsOnStyles)
     )
   );
 }
 
 function shouldObserveCharacterData(patterns)
 {
   // Observe changes to character data only if there's a contains selector in
   // one of the patterns.
   return patterns.some(
     pattern => pattern.selectors.some(
-      selector => selector instanceof ContainsSelector
+      selector => selector.dependsOnCharacterData
     )
   );
 }
 
 function ElemHideEmulation(addSelectorsFunc, hideElemsFunc)
 {
   this.document = document;
   this.addSelectorsFunc = addSelectorsFunc;
   this.hideElemsFunc = hideElemsFunc;
   this.observer = new MutationObserver(this.observe.bind(this));
@@ skipping 233 matching lines @@
       this._scheduledProcessing = {stylesheets};
       setTimeout(() =>
       {
         let newStylesheets = this._scheduledProcessing.stylesheets;
         this._filteringInProgress = true;
         this._scheduledProcessing = null;
         this._addSelectors(newStylesheets, completion);
       },
       MIN_INVOCATION_INTERVAL - (performance.now() - this._lastInvocation));
     }
+    else if (this.document.readyState == "loading")
+    {
+      this._scheduledProcessing = {stylesheets};
+      let handler = () =>
+      {
+        document.removeEventListener("DOMContentLoaded", handler);
+        let newStylesheets = this._scheduledProcessing.stylesheets;
+        this._filteringInProgress = true;
+        this._scheduledProcessing = null;
+        this._addSelectors(newStylesheets, completion);
+      };
+      document.addEventListener("DOMContentLoaded", handler);
+    }
     else
     {
       this._filteringInProgress = true;
       this._addSelectors(stylesheets, completion);
     }
   },
 
   onLoad(event)
   {
     let stylesheet = event.target.sheet;
@@ skipping 27 matching lines @@
           characterData: shouldObserveCharacterData(this.patterns),
           subtree: true
         }
       );
       this.document.addEventListener("load", this.onLoad.bind(this), true);
     }
   }
 };
 
 exports.ElemHideEmulation = ElemHideEmulation;