Issue 5249 - Implement :-abp-contains()

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 232 matching lines @@
     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 == this._text)

[Wladimir Palant, 2017/06/28 10:47:24]

An exact match is definitely not what we want here, especially if you think
about whitespace. Just confirmed by looking at the implementation in Sizzle: a
case-sensitive substring match is the expected behavior. In other words:

  if (element.textContent.contains(this._text))

As to your concerns about this behavior being greedy: yes, if we have a selector
like `:contains(Advertisement)` without any further qualifiers we'll potentially
hide the document element. While it doesn't make a whole lot of sense, this is
the correct behavior IMHO. If overshooting like this isn't the idea, the
selector should have additional qualifiers to limit the number of potentially
matching elements.

I think that we can catch this issue by rejecting chains consisting only of a
single ContainsSelector instance - these never make sense. On the top level,
such filters will either hide nothing (text not found on the page) or the entire
document element. Inside an :-abp-has() pseudo they don't make sense either,
:-abp-has() should simply be replaced by :-abp-contains() to achieve the same
effect. Selectors like `#sidebar > :contains(Advertisement)` or
`:contains(Advertisement) + .block` are valid however as they will only apply to
specific elements (the latter being quite suboptimal performance-wise but
still).

As to your considerations about textContent vs. innerText, getting the text "as
rendered" is a very complicated affair and switching to a bogus IE-compat
feature won't save us here. A quick test in Firefox shows inconsistent handling
of display:none (hidden nodes as children are ignored but element.innerText of a
hidden node returns text content). Also, tricks like `font-size:0` or `::before`
pseudo aren't being considered here. So dealing with potential circumvention
isn't trivial, let's wait and see what shows up in the wild first.

[hub, 2017/06/28 14:39:10]

Done.

+      if (element.textContent.includes(this._text))
         yield element;
   }
 };
 
 function PropsSelector(propertyExpression)
 {
   let regexpString;
   if (propertyExpression.length >= 2 && propertyExpression[0] == "/" &&
       propertyExpression[propertyExpression.length - 1] == "/")
   {
@@ skipping 95 matching lines @@
                         `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;
   },
 
   addSelectors(stylesheets)
   {
     let selectors = [];
     let selectorFilters = [];
 
     let elements = [];
     let elementFilters = [];
@@ skipping 68 matching lines @@
 
       if (this.patterns.length > 0)
       {
         let {document} = this.window;
         this.addSelectors(document.styleSheets);
         document.addEventListener("load", this.onLoad.bind(this), true);
       }
     });
   }
 };