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
@@ skipping 128 matching lines @@
   }
   // 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.
    */
@@ skipping 12 matching lines @@
 }
 
 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.
@@ skipping 31 matching lines @@
   }
 };
 
 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)) ?
@@ skipping 53 matching lines @@
       yield [selector, subtree];
   }
 };
 
 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 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.maybeDependsOnAttributes ||
+                  selector instanceof HasSelector &&
+                  selector.dependsOnStyles

[hub, 2018/02/21 18:12:27]

I'm always forgetting operator precedence. Should there be braces here to show
explicitly the evaluation order? (I would put them)

[Manish Jethani, 2018/02/22 07:14:32]

Done.

+    )
+  );
+}
+
+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.dependsOnCharacterData
+    )
+  );
+}
+
 function ElemHideEmulation(addSelectorsFunc, hideElemsFunc)
 {
   this.document = document;
   this.addSelectorsFunc = addSelectorsFunc;
   this.hideElemsFunc = hideElemsFunc;
   this.observer = new MutationObserver(this.observe.bind(this));
 }
 
 ElemHideEmulation.prototype = {
   isSameOrigin(stylesheet)
@@ skipping 265 matching lines @@
         this.patterns.push({selectors, text: pattern.text});
     }
 
     if (this.patterns.length > 0)
     {
       this.queueFiltering();
       this.observer.observe(
         this.document,
         {
           childList: true,
-          attributes: true,
-          characterData: true,
+          attributes: shouldObserveAttributes(this.patterns),
+          characterData: shouldObserveCharacterData(this.patterns),
           subtree: true
         }
       );
       this.document.addEventListener("load", this.onLoad.bind(this), true);
     }
   }
 };
 
 exports.ElemHideEmulation = ElemHideEmulation;