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
@@ skipping 299 matching lines @@
   }
 };
 
 function ElemHideEmulation(window, getFiltersFunc, addSelectorsFunc,
                            hideElemsFunc)
 {
   this.window = window;
   this.getFiltersFunc = getFiltersFunc;
   this.addSelectorsFunc = addSelectorsFunc;
   this.hideElemsFunc = hideElemsFunc;
+  this.observer = new MutationObserver(this.observe.bind(this));

[Wladimir Palant, 2017/07/21 21:37:28]

new window.MutationObserver?

[hub, 2017/07/22 01:31:24]

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Also that's what we do albeit in the WebExt code. But since this won't run in
the Firefox extension, it'll be moved out.

[hub, 2017/07/23 15:36:34]

My bad. will actually do that.

 }
 
 ElemHideEmulation.prototype = {
   isSameOrigin(stylesheet)
   {
     try
     {
       return new URL(stylesheet.href).origin == this.window.location.origin;
     }
     catch (e)
@@ skipping 150 matching lines @@
         }
       }
     }
 
     this.addSelectorsFunc(selectors, selectorFilters);
     this.hideElemsFunc(elements, elementFilters);
   },
 
   _stylesheetQueue: null,
 
+  queueFiltering()
+  {
+    if (!this._stylesheetQueue &&
+        Date.now() - this._lastInvocation < MIN_INVOCATION_INTERVAL)
+    {
+      this._stylesheetQueue = [];
+      this.window.setTimeout(() =>
+      {
+        let stylesheets = this._stylesheetQueue;
+        this._stylesheetQueue = null;
+        this.addSelectors(stylesheets);
+      }, MIN_INVOCATION_INTERVAL - (Date.now() - this._lastInvocation));
+    }
+  },
+
   onLoad(event)
   {
     let stylesheet = event.target.sheet;
     if (stylesheet)
     {
-      if (!this._stylesheetQueue &&
-          Date.now() - this._lastInvocation < MIN_INVOCATION_INTERVAL)
-      {
-        this._stylesheetQueue = [];
-        this.window.setTimeout(() =>
-        {
-          let stylesheets = this._stylesheetQueue;
-          this._stylesheetQueue = null;
-          this.addSelectors(stylesheets);
-        }, MIN_INVOCATION_INTERVAL - (Date.now() - this._lastInvocation));
-      }
+      this.queueFiltering();
 
       if (this._stylesheetQueue)
         this._stylesheetQueue.push(stylesheet);
       else
         this.addSelectors([stylesheet]);
     }
   },
 
+  observe(mutations)
+  {
+    for (let mutation of mutations)
+    {
+      if (mutation.type == "childList")
+      {
+        this.queueFiltering();

[Wladimir Palant, 2017/07/21 21:37:28]

a) Reapplying the rules on the entire document is quite wasteful when we only
need to process a single subtree.

b) There are other mutation types having relevant side-effects as well, e.g.
attribute changes.

[hub, 2017/07/22 01:31:24]

Acknowledged.

+        break;
+      }
+    }
+  },
+
   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.observer.observe(
+          document,
+          {
+            childList: true,
+            subtree: true
+          }
+        );
         document.addEventListener("load", this.onLoad.bind(this), true);
       }
     });
   }
 };