Issue 5436 - Allow relative selectors in :-abp-has()

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 abpSelectorRegexp = /:-abp-([\w-]+)\(/i;
 
-let reportError = () => {};
-
 function splitSelector(selector)
 {
   if (selector.indexOf(",") == -1)
     return [selector];
 
   let selectors = [];
   let start = 0;
   let level = 0;
   let sep = "";
 
@@ skipping 147 matching lines @@
    * @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 = /^[\s>+~]/;

[Wladimir Palant, 2017/08/10 13:42:17]

\s doesn't belong in here.

[hub, 2017/08/14 14:25:32]

Done.

+const relativeSelectorRegexp = /^[>+~]/;
 
 function HasSelector(selectors)
 {
   this._innerSelectors = selectors;
 }
 
 HasSelector.prototype = {
   requiresHiding: true,
 
   get dependsOnStyles()
@@ skipping 17 matching lines @@
   {
     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 (relativeSelectorRegexp.test(selector))
           selector = ":scope" + selector;

[Wladimir Palant, 2017/08/10 13:36:08]

Nice one, I didn't know about :scope yet. Browser support is problematic
however. Scoped stylesheets are being cited as the primary usage example, yet
this feature appears to be dead. Chrome deprecated it
(https://www.chromestatus.com/features/5374137958662144) and Edge isn't planning
to implement it
(https://developer.microsoft.com/en-us/microsoft-edge/platform/status/scopedst...).

Now using :scoped with element.querySelector() is different and part of the DOM4
spec, so I hope that this feature won't be removed from Firefox and Chrome.
Still questionable whether/when Microsoft chooses to implement it in Edge.

I just checked with Sebastian and Dave on IRC about what they think about
missing Edge support here. It seems that not having this work on Edge is
acceptable. However, it shouldn't break things either, so you need to catch the
error element.querySelector() will throw there.

[hub, 2017/08/14 14:25:32]

Good point. Will catch the exception. I'll see if there is a better way to do
it.

-        if (element.querySelector(selector))
-          yield element;
-      }
-    }
+        try
+        {
+          if (element.querySelector(selector))
+            yield element;
+        }
+        catch (e)
+        {
+          // :scope isn't supported on Edge, ignore error caused by it.
+        }
+      }
+    }
+  }
+};
+
+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;
   }
 };
 
 function PropsSelector(propertyExpression)
 {
   let regexpString;
   if (propertyExpression.length >= 2 && propertyExpression[0] == "/" &&
       propertyExpression[propertyExpression.length - 1] == "/")
   {
     regexpString = propertyExpression.slice(1, -1)
       .replace("\\x7B ", "{").replace("\\x7D ", "}");
   }
   else
     regexpString = filterToRegExp(propertyExpression);
 
   this._regexp = new RegExp(regexpString, "i");
 }
 
 PropsSelector.prototype = {
   preferHideWithSelector: true,
   dependsOnStyles: true,
 
   *findPropsSelectors(styles, prefix, regexp)
   {
     for (let style of styles)
       if (regexp.test(style.style))
         for (let subSelector of style.subSelectors)
+        {
+          let idx = subSelector.lastIndexOf("::");
+          if (idx != -1)
+            subSelector = subSelector.substr(0, idx);
           yield prefix + subSelector;
+        }
   },
 
   *getSelectors(prefix, subtree, styles)
   {
     for (let selector of this.findPropsSelectors(styles, prefix, this._regexp))
       yield [selector, subtree];
   }
 };
 
 function ElemHideEmulation(window, getFiltersFunc, addSelectorsFunc,
@@ skipping 49 matching lines @@
     }
     if (match[1] == "properties")
       selectors.push(new PropsSelector(content.text));
     else if (match[1] == "has")
     {
       let hasSelectors = this.parseSelector(content.text);
       if (hasSelectors == null)
         return null;
       selectors.push(new HasSelector(hasSelectors));
     }
+    else if (match[1] == "contains")
+      selectors.push(new ContainsSelector(content.text));
     else
     {
       // this is an error, can't parse selector.
       this.window.console.error(
         new SyntaxError("Failed to parse Adblock Plus " +
                         `selector ${selector}, invalid ` +
                         `pseudo-class :-abp-${match[1]}().`));
       return null;
     }
 
     let suffix = this.parseSelector(selector.substr(content.end + 1));
     if (suffix == null)
       return null;
 
     selectors.push(...suffix);
 
+    if (selectors.length == 1 && selectors[0] instanceof ContainsSelector)
+    {
+      this.window.console.error(
+        new SyntaxError("Failed to parse Adblock Plus " +
+                        `selector ${selector}, can't ` +
+                        "have a lonely :-abp-contains()."));
+      return null;
+    }
     return selectors;
   },
 
   _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.
    */
   addSelectors(stylesheets)
   {
     this._lastInvocation = Date.now();
 
     let selectors = [];
     let selectorFilters = [];
 
     let elements = [];
     let elementFilters = [];
 
     let cssStyles = [];
 
     let stylesheetOnlyChange = !!stylesheets;
     if (!stylesheets)
       stylesheets = this.window.document.styleSheets;
 
-    for (let stylesheet of stylesheets)
-    {
+    // Chrome < 51 doesn't have an iterable StyleSheetList
+    // https://issues.adblockplus.org/ticket/5381
+    for (let i = 0; i < stylesheets.length; i++)
+    {
+      let stylesheet = stylesheets[i];
       // Explicitly ignore third-party stylesheets to ensure consistent behavior
       // between Firefox and Chrome.
       if (!this.isSameOrigin(stylesheet))
         continue;
 
       let rules = stylesheet.cssRules;
       if (!rules)
         continue;
 
       for (let rule of rules)
@@ skipping 78 matching lines @@
 
       if (this.patterns.length > 0)
       {
         let {document} = this.window;
         this.addSelectors();
         document.addEventListener("load", this.onLoad.bind(this), true);
       }
     });
   }
 };