Issue 6741 - Use ES2015 classes in lib/content/elemHideEmulation.js

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 221 matching lines @@
       yield null;
     else
       yield* evaluate(chain, index + 1, selector, element, styles, targets);
   }
   // 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)
+class PlainSelector
 {
-  this._selector = selector;
-  this.maybeDependsOnAttributes = /[#.]|\[.+\]/.test(selector);
-  this.dependsOnDOM = this.maybeDependsOnAttributes;
-  this.maybeContainsSiblingCombinators = /[~+]/.test(selector);
-}
+  constructor(selector)
+  {
+    this._selector = selector;
+    this.maybeDependsOnAttributes = /[#.]|\[.+\]/.test(selector);
+    this.dependsOnDOM = this.maybeDependsOnAttributes;
+    this.maybeContainsSiblingCombinators = /[~+]/.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.
    * @param {Node[]} [targets] the nodes we are interested in.
    */
   *getSelectors(prefix, subtree, styles, targets)
   {
     yield [prefix + this._selector, subtree];
   }
-};
+}
 
 const incompletePrefixRegexp = /[\s>+~]$/;
 
-function HasSelector(selectors)
+class HasSelector
 {
-  this._innerSelectors = selectors;
-}
-
-HasSelector.prototype = {
-  dependsOnDOM: true,
+  constructor(selectors)
+  {
+    this._innerSelectors = selectors;
+    this.dependsOnDOM = true;

[hub, 2018/08/20 19:51:21]

I'd feel better if the properties that have a default value were initialised
before anything else in the constructor.

[Manish Jethani, 2018/08/21 03:45:30]

OK, that makes sense.

Done.

+  }
 
   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, targets)
   {
     for (let element of this.getElements(prefix, subtree, styles, targets))
       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.
    * @param {Node[]} [targets] the nodes we are interested in.
    */
   *getElements(prefix, subtree, styles, targets)
   {
@@ skipping 22 matching lines @@
           else if (scopedQuerySelector(element, selector))
             yield element;
         }
         yield null;
 
         if (testInfo)
           testInfo.lastProcessedElements.add(element);
       }
     }
   }
-};
-
-function ContainsSelector(textContent)
-{
-  this._regexp = makeRegExpParameter(textContent);
 }
 
-ContainsSelector.prototype = {
-  dependsOnDOM: true,
-  dependsOnCharacterData: true,
+class ContainsSelector
+{
+  constructor(textContent)
+  {
+    this._regexp = makeRegExpParameter(textContent);
+    this.dependsOnDOM = true;
+    this.dependsOnCharacterData = true;

[hub, 2018/08/20 19:51:21]

same here.

[Manish Jethani, 2018/08/21 03:45:30]

Done.

+  }
 
   *getSelectors(prefix, subtree, styles, targets)
   {
     for (let element of this.getElements(prefix, subtree, styles, targets))
       yield [makeSelector(element), subtree];
-  },
+  }
 
   *getElements(prefix, subtree, styles, targets)
   {
     let actualPrefix = (!prefix || incompletePrefixRegexp.test(prefix)) ?
         prefix + "*" : prefix;
 
     let elements = scopedQuerySelectorAll(subtree, actualPrefix);
 
     if (elements)
     {
@@ skipping 21 matching lines @@
         if (this._regexp && this._regexp.test(element.textContent))
           yield element;
         else
           yield null;
 
         if (testInfo)
           testInfo.lastProcessedElements.add(element);
       }
     }
   }
-};
-
-function PropsSelector(propertyExpression)
-{
-  let regexpString;
-  if (propertyExpression.length >= 2 && propertyExpression[0] == "/" &&
-      propertyExpression[propertyExpression.length - 1] == "/")
-  {
-    regexpString = propertyExpression.slice(1, -1)
-      .replace("\\7B ", "{").replace("\\7D ", "}");
-  }
-  else
-    regexpString = filterToRegExp(propertyExpression);
-
-  this._regexp = new RegExp(regexpString, "i");
 }
 
-PropsSelector.prototype = {
-  dependsOnStyles: true,
-  dependsOnDOM: true,
+class PropsSelector
+{
+  constructor(propertyExpression)
+  {
+    let regexpString;
+    if (propertyExpression.length >= 2 && propertyExpression[0] == "/" &&
+        propertyExpression[propertyExpression.length - 1] == "/")
+    {
+      regexpString = propertyExpression.slice(1, -1)
+        .replace("\\7B ", "{").replace("\\7D ", "}");
+    }
+    else
+      regexpString = filterToRegExp(propertyExpression);
+
+    this._regexp = new RegExp(regexpString, "i");
+
+    this.dependsOnStyles = true;
+    this.dependsOnDOM = true;

[hub, 2018/08/20 19:51:21]

and here.

[Manish Jethani, 2018/08/21 03:45:30]

Done.

+  }
 
   *findPropsSelectors(styles, prefix, regexp)
   {
     for (let style of styles)
       if (regexp.test(style.style))
         for (let subSelector of style.subSelectors)
         {
           if (subSelector.startsWith("*") &&
               !incompletePrefixRegexp.test(prefix))
           {
             subSelector = subSelector.substr(1);
           }
           let idx = subSelector.lastIndexOf("::");
           if (idx != -1)
             subSelector = subSelector.substr(0, idx);
           yield qualifySelector(subSelector, prefix);
         }
-  },
+  }
 
   *getSelectors(prefix, subtree, styles, targets)
   {
     for (let selector of this.findPropsSelectors(styles, prefix, this._regexp))
       yield [selector, subtree];
   }
-};
-
-function Pattern(selectors, text)
-{
-  this.selectors = selectors;
-  this.text = text;
 }
 
-Pattern.prototype = {
+class Pattern
+{
+  constructor(selectors, text)
+  {
+    this.selectors = selectors;
+    this.text = text;
+  }
+
   get dependsOnStyles()
   {
     return getCachedPropertyValue(
       this, "_dependsOnStyles",
       () => this.selectors.some(selector => selector.dependsOnStyles)
     );
-  },
+  }
 
   get dependsOnDOM()
   {
     return getCachedPropertyValue(
       this, "_dependsOnDOM",
       () => this.selectors.some(selector => selector.dependsOnDOM)
     );
-  },
+  }
 
   get dependsOnStylesAndDOM()
   {
     return getCachedPropertyValue(
       this, "_dependsOnStylesAndDOM",
       () => this.selectors.some(selector => selector.dependsOnStyles &&
                                             selector.dependsOnDOM)
     );
-  },
+  }
 
   get maybeDependsOnAttributes()
   {
     // 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 getCachedPropertyValue(
       this, "_maybeDependsOnAttributes",
       () => this.selectors.some(
               selector => selector.maybeDependsOnAttributes ||
                           (selector instanceof HasSelector &&
                            selector.dependsOnStyles)
             )
     );
-  },
+  }
 
   get dependsOnCharacterData()
   {
     // Observe changes to character data only if there's a contains selector in
     // one of the patterns.
     return getCachedPropertyValue(
       this, "_dependsOnCharacterData",
       () => this.selectors.some(selector => selector.dependsOnCharacterData)
     );
-  },
+  }
 
   get maybeContainsSiblingCombinators()
   {
     return getCachedPropertyValue(
       this, "_maybeContainsSiblingCombinators",
       () => this.selectors.some(selector =>
                                 selector.maybeContainsSiblingCombinators)
     );
-  },
+  }
 
   matchesMutationTypes(mutationTypes)
   {
     let mutationTypeMatchMap = getCachedPropertyValue(
       this, "_mutationTypeMatchMap",
       () => new Map([
         // All types of DOM-dependent patterns are affected by mutations of
         // type "childList".
         ["childList", true],
         ["attributes", this.maybeDependsOnAttributes],
         ["characterData", this.dependsOnCharacterData]
       ])
     );
 
     for (let mutationType of mutationTypes)
     {
       if (mutationTypeMatchMap.get(mutationType))
         return true;
     }
 
     return false;
   }
-};
+}
 
 function extractMutationTypes(mutations)
 {
   let types = new Set();
 
   for (let mutation of mutations)
   {
     types.add(mutation.type);
 
     // There are only 3 types of mutations: "attributes", "characterData", and
@@ skipping 47 matching lines @@
 function shouldObserveAttributes(patterns)
 {
   return patterns.some(pattern => pattern.maybeDependsOnAttributes);
 }
 
 function shouldObserveCharacterData(patterns)
 {
   return patterns.some(pattern => pattern.dependsOnCharacterData);
 }
 
-function ElemHideEmulation(addSelectorsFunc, hideElemsFunc)
+class ElemHideEmulation
 {
-  this.document = document;
-  this.addSelectorsFunc = addSelectorsFunc;
-  this.hideElemsFunc = hideElemsFunc;
-  this.observer = new MutationObserver(this.observe.bind(this));
-}
+  constructor(addSelectorsFunc, hideElemsFunc)
+  {
+    this._filteringInProgress = false;
+    this._lastInvocation = -MIN_INVOCATION_INTERVAL;
+    this._scheduledProcessing = null;
 
-ElemHideEmulation.prototype = {
+    this.document = document;
+    this.addSelectorsFunc = addSelectorsFunc;
+    this.hideElemsFunc = hideElemsFunc;
+    this.observer = new MutationObserver(this.observe.bind(this));
+  }
+
   isSameOrigin(stylesheet)
   {
     try
     {
       return new URL(stylesheet.href).origin == this.document.location.origin;
     }
     catch (e)
     {
       // Invalid URL, assume that it is first-party.
       return true;
     }
-  },
+  }
 
   /** Parse the selector
    * @param {string} selector the selector to parse
    * @return {Array} selectors is an array of objects,
    * or null in case of errors.
    */
   parseSelector(selector)
   {
     if (selector.length == 0)
       return [];
@@ skipping 42 matching lines @@
     selectors.push(...suffix);
 
     if (selectors.length == 1 && selectors[0] instanceof ContainsSelector)
     {
       console.error(new SyntaxError("Failed to parse Adblock Plus " +
                                     `selector ${selector}, can't ` +
                                     "have a lonely :-abp-contains()."));
       return null;
     }
     return selectors;
-  },
+  }
 
   /**
    * 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 {MutationRecord[]} [mutations]
    *    The list of DOM mutations that have been applied to the document and
@@ skipping 115 matching lines @@
         {
           setTimeout(processPatterns, 0);
           return;
         }
       }
       pattern = null;
       return processPatterns();
     };
 
     processPatterns();
-  },
+  }
 
   // This property is only used in the tests
   // to shorten the invocation interval
   get MIN_INVOCATION_INTERVAL()
   {
     return MIN_INVOCATION_INTERVAL;
-  },
+  }
 
   set MIN_INVOCATION_INTERVAL(interval)
   {
     MIN_INVOCATION_INTERVAL = interval;
-  },
-
-  _filteringInProgress: false,
-  _lastInvocation: -MIN_INVOCATION_INTERVAL,
-  _scheduledProcessing: null,
+  }
 
   /**
    * Re-run filtering either immediately or queued.
    * @param {CSSStyleSheet[]} [stylesheets]
    *    new stylesheets to be processed. This parameter should be omitted
    *    for full reprocessing.
    * @param {MutationRecord[]} [mutations]
    *    new DOM mutations to be processed. This parameter should be omitted
    *    for full reprocessing.
    */
@@ skipping 61 matching lines @@
         this._scheduledProcessing = null;
         this._addSelectors(params.stylesheets, params.mutations, completion);
       };
       this.document.addEventListener("DOMContentLoaded", handler);
     }
     else
     {
       this._filteringInProgress = true;
       this._addSelectors(stylesheets, mutations, completion);
     }
-  },
+  }
 
   onLoad(event)
   {
     let stylesheet = event.target.sheet;
     if (stylesheet)
       this.queueFiltering([stylesheet]);
-  },
+  }
 
   observe(mutations)
   {
     if (testInfo)
     {
       // In test mode, filter out any mutations likely done by us
       // (i.e. style="display: none !important"). This makes it easier to
       // observe how the code responds to DOM mutations.
       mutations = mutations.filter(
         ({type, attributeName, target: {style: newValue}, oldValue}) =>
         !(type == "attributes" && attributeName == "style" &&
           newValue.display == "none" && oldValue.display != "none")
       );
 
       if (mutations.length == 0)
         return;
     }
 
     this.queueFiltering(null, mutations);
-  },
+  }
 
   apply(patterns)
   {
     this.patterns = [];
     for (let pattern of patterns)
     {
       let selectors = this.parseSelector(pattern.selector);
       if (selectors != null && selectors.length > 0)
         this.patterns.push(new Pattern(selectors, pattern.text));
     }
 
     if (this.patterns.length > 0)
     {
       this.queueFiltering();
       this.observer.observe(
         this.document,
         {
           childList: true,
           attributes: shouldObserveAttributes(this.patterns),
           characterData: shouldObserveCharacterData(this.patterns),
           subtree: true
         }
       );
       this.document.addEventListener("load", this.onLoad.bind(this), true);
     }
   }
-};
+}
 
 exports.ElemHideEmulation = ElemHideEmulation;