Issue 5438 - Observer DOM changes to reapply filters.

chrome/content/elemHideEmulation.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2017 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/>.
  */
 
 /* globals filterToRegExp */
 
 "use strict";
 
 const MIN_INVOCATION_INTERVAL = 3000;
+const MAX_SYNCHRONOUS_PROCESSING_TIME = 50;
 const abpSelectorRegexp = /:-abp-([\w-]+)\(/i;
 
 function splitSelector(selector)
 {
   if (selector.indexOf(",") == -1)
     return [selector];
 
   let selectors = [];
   let start = 0;
   let level = 0;
@@ skipping 35 matching lines @@
 {
   let {children} = node.parentNode;
   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)
   {
     let newSelector = ":root";
     if (selector)
       newSelector += " > " + selector;
     return newSelector;
   }
   let idx = positionInParent(node);
   if (idx > 0)
   {
@@ skipping 71 matching lines @@
 
 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))
-    yield* evaluate(chain, index + 1, selector, element, 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;
 }
 
 PlainSelector.prototype = {
   /**
    * Generator function returning a pair of selector
@@ skipping 39 matching lines @@
   *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)
+        {
+          yield null;
+          continue;
+        }
         if (relativeSelector.test(selector))
           selector = ":scope" + selector;
         if (element.querySelector(selector))
           yield element;
       }
+      yield null;
     }
   }
 };
 
 function ContainsSelector(textContent)
 {
   this._text = textContent;
 }
 
 ContainsSelector.prototype = {
   requiresHiding: 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;
+    }
   }
 };
 
 function PropsSelector(propertyExpression)
 {
   let regexpString;
   if (propertyExpression.length >= 2 && propertyExpression[0] == "/" &&
       propertyExpression[propertyExpression.length - 1] == "/")
   {
     regexpString = propertyExpression.slice(1, -1)
@@ skipping 29 matching lines @@
         }
   },
 
   *getSelectors(prefix, subtree, styles)
   {
     for (let selector of this.findPropsSelectors(styles, prefix, this._regexp))
       yield [selector, subtree];
   }
 };
 
+function isSelectorHidingOnlyPattern(pattern)
+{
+  return pattern.selectors.some(s => s.preferHideWithSelector) &&
+    !pattern.selectors.some(s => s.requiresHiding);
+}
+
 function ElemHideEmulation(window, getFiltersFunc, addSelectorsFunc,
                            hideElemsFunc)
 {
   this.window = window;
   this.getFiltersFunc = getFiltersFunc;
   this.addSelectorsFunc = addSelectorsFunc;
   this.hideElemsFunc = hideElemsFunc;
+  this.observer = new window.MutationObserver(this.observe.bind(this));
 }
 
 ElemHideEmulation.prototype = {
   isSameOrigin(stylesheet)
   {
     try
     {
       return new URL(stylesheet.href).origin == this.window.location.origin;
     }
     catch (e)
@@ skipping 71 matching lines @@
 
   _lastInvocation: 0,
 
   /**
    * Processes the current document and applies all rules to it.
    * @param {CSSStyleSheet[]} [stylesheets]
    *    The list of new stylesheets that have been added to the document and
    *    made reprocessing necessary. This parameter shouldn't be passed in for
    *    the initial processing, all of document's stylesheets will be considered
    *    then and all rules, including the ones not dependent on styles.
+   * @param {function} [done]
+   *    Callback to call when done.
    */
-  addSelectors(stylesheets)
+  _addSelectors(stylesheets, done)
   {
-    this._lastInvocation = Date.now();
-
     let selectors = [];
     let selectorFilters = [];
 
     let elements = [];
     let elementFilters = [];
 
     let cssStyles = [];
 
     let stylesheetOnlyChange = !!stylesheets;
     if (!stylesheets)
@@ skipping 16 matching lines @@
       for (let rule of rules)
       {
         if (rule.type != rule.STYLE_RULE)
           continue;
 
         cssStyles.push(stringifyStyle(rule));
       }
     }
 
     let {document} = this.window;
-    for (let pattern of this.patterns)
+
+    let patterns = this.patterns.slice();
+    let pattern = null;
+    let generator = null;
+
+    let processPatterns = () =>
     {
-      if (stylesheetOnlyChange &&
-          !pattern.selectors.some(selector => selector.dependsOnStyles))
+      let cycleStart = this.window.performance.now();
+
+      if (!pattern)
       {
-        continue;
+        if (!patterns.length)
+        {
+          this.addSelectorsFunc(selectors, selectorFilters);
+          this.hideElemsFunc(elements, elementFilters);
+          if (typeof done == "function")
+            done();
+          return;
+        }
+
+        pattern = patterns.shift();
+
+        if (stylesheetOnlyChange &&
+            !pattern.selectors.some(selector => selector.dependsOnStyles))
+        {
+          pattern = null;
+          return processPatterns();
+        }
+        generator = evaluate(pattern.selectors, 0, "", document, cssStyles);
       }
-
-      for (let selector of evaluate(pattern.selectors,
-                                    0, "", document, cssStyles))
+      for (let selector of generator)
       {
-        if (pattern.selectors.some(s => s.preferHideWithSelector) &&
-            !pattern.selectors.some(s => s.requiresHiding))
+        if (selector != null)
         {
-          selectors.push(selector);
-          selectorFilters.push(pattern.text);
-        }
-        else
-        {
-          for (let element of document.querySelectorAll(selector))
+          if (isSelectorHidingOnlyPattern(pattern))
           {
-            elements.push(element);
-            elementFilters.push(pattern.text);
+            selectors.push(selector);
+            selectorFilters.push(pattern.text);
+          }
+          else
+          {
+            for (let element of document.querySelectorAll(selector))
+            {
+              elements.push(element);
+              elementFilters.push(pattern.text);
+            }
           }
         }
+        if (this.window.performance.now() -
+            cycleStart > MAX_SYNCHRONOUS_PROCESSING_TIME)
+        {
+          this.window.setTimeout(processPatterns, 0);
+          return;
+        }
       }
-    }
+      pattern = null;
+      return processPatterns();
+    };
 
-    this.addSelectorsFunc(selectors, selectorFilters);
-    this.hideElemsFunc(elements, elementFilters);
+    processPatterns();
   },
 
-  _stylesheetQueue: null,
+  _filteringInProgress: false,
+  _scheduledProcessing: null,
+
+  /**
+   * Re-run filtering either immediately or queued.
+   * @param {CSSStyleSheet[]} [reason]
+   *    the stylesheets triggered the refiltering.

[Wladimir Palant, 2017/08/16 07:19:55]

This needs to be explained better, particularly the significance of this
parameter missing. How about:

  new stylesheets to be processed. This parameter should be omitted for DOM
modification (full reprocessing required).

Also, please rename the parameter, it's no longer clear why it should be called
`reason`. `stylesheets` will do as a name.

[hub, 2017/08/16 13:57:28]

Done.

+   */
+  queueFiltering(reason)
+  {
+    let completion = () =>
+    {
+      this._lastInvocation = this.window.performance.now();
+      this._filteringInProgress = false;
+      if (this._scheduledProcessing)
+      {
+        let nextReason = this._scheduledProcessing.stylesheets;

[Wladimir Palant, 2017/08/16 07:19:54]

Please rename this variable, `stylesheets` will do as a name.

[hub, 2017/08/16 13:57:28]

Done

+        this._scheduledProcessing = null;
+        this.queueFiltering(nextReason);
+      }
+    };
+
+    if (this._scheduledProcessing)
+    {
+      if (reason)
+      {
+        if (this._scheduledProcessing.stylesheets)
+          this._scheduledProcessing.stylesheets.push(...reason);
+        else if (this._scheduledProcessing.stylesheets == undefined)
+          this._scheduledProcessing.stylesheets = reason;

[Wladimir Palant, 2017/08/16 07:19:54]

Why distinguish between null and undefined? The else case is unnecessary here -
if this._scheduledProcessing.stylesheets isn't set we are always in the "nothing
to do" case.

[hub, 2017/08/16 13:57:28]

Indeed. Done.

+      }
+      else
+        this._scheduledProcessing.stylesheets = null;
+    }
+    else if (this._filteringInProgress)
+    {
+      this._scheduledProcessing = {};
+      this._scheduledProcessing.stylesheets = reason;

[Wladimir Palant, 2017/08/16 07:19:54]

Please set this in one go (particularly easy if you rename the parameter):

  this._scheduledProcessing = {stylesheets};

[hub, 2017/08/16 13:57:28]

Done.

+    }
+    // Because we use Performance.now(), it is possible that the
+    // initial call be less than MIN_INVOCATION_INTERVAL.
+    // So if _lastInvocation is 0, we assume it never ran.

[Wladimir Palant, 2017/08/16 07:19:54]

Why so complicated? You can initialize _lastInvocation with
-MIN_INVOCATION_INTERVAL, then the interval is guaranteed to be at least
MIN_INVOCATION_INTERVAL for the initial run.

[hub, 2017/08/16 13:57:28]

Done.

+    else if ((this._lastInvocation > 0) &&
+             (this.window.performance.now() -
+              this._lastInvocation < MIN_INVOCATION_INTERVAL))
+    {
+      this._scheduledProcessing = {};
+      this._scheduledProcessing.stylesheets = reason;

[Wladimir Palant, 2017/08/16 07:19:55]

As above, please set this in one go.

[hub, 2017/08/16 13:57:28]

Done.

+      this.window.setTimeout(() =>
+      {
+        let {stylesheets} = this._scheduledProcessing;
+        this._filteringInProgress = true;
+        this._scheduledProcessing = null;
+        this._addSelectors(stylesheets, completion);
+      },
+      MIN_INVOCATION_INTERVAL -
+      (this.window.performance.now() - this._lastInvocation));
+    }
+    else
+    {
+      this._filteringInProgress = true;
+      this._addSelectors(reason, completion);
+    }
+  },
 
   onLoad(event)
   {
     let stylesheet = event.target.sheet;
     if (stylesheet)
+      this.queueFiltering([stylesheet]);
+  },
+
+  observe(mutations)
+  {
+    let stylesheets = null;
+    for (let mutation of mutations)
     {
-      if (!this._stylesheetQueue &&
-          Date.now() - this._lastInvocation < MIN_INVOCATION_INTERVAL)
+      if (mutation.type == "characterData")

[Wladimir Palant, 2017/08/16 07:19:54]

This special logic should go as well, it's the same as with a new <style> tag
because of :-abp-contains() rules.

[hub, 2017/08/16 13:57:28]

if it is a characterData change on something else, the whole filtering it
triggered. if it is on a style element I was limiting the update to stylesheet
only, which could be overridden by the next change.

Removing it.

       {
-        this._stylesheetQueue = [];
-        this.window.setTimeout(() =>
+        let element = mutation.target.parentElement;
+        if (element instanceof this.window.HTMLStyleElement &&
+            element.sheet)
         {
-          let stylesheets = this._stylesheetQueue;
-          this._stylesheetQueue = null;
-          this.addSelectors(stylesheets);
-        }, MIN_INVOCATION_INTERVAL - (Date.now() - this._lastInvocation));
+          if (!stylesheets)
+            stylesheets = [];
+          stylesheets.push(element.sheet);
+        }
       }
-
-      if (this._stylesheetQueue)
-        this._stylesheetQueue.push(stylesheet);
-      else
-        this.addSelectors([stylesheet]);
     }
+    this.queueFiltering(stylesheets);
   },
 
   apply()
   {
     this.getFiltersFunc(patterns =>
     {
       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)
       {
         let {document} = this.window;
-        this.addSelectors();
+        this.queueFiltering();
+        this.observer.observe(
+          document,
+          {
+            childList: true,
+            attributes: true,
+            characterData: true,
+            subtree: true
+          }
+        );
         document.addEventListener("load", this.onLoad.bind(this), true);
       }
     });
   }
 };