Issue 3143 - Filter elements with :-abp-has()

chrome/content/elemHideEmulation.js

-// We are currently limited to ECMAScript 5 in this file, because it is being
-// used in the browser tests. See https://issues.adblockplus.org/ticket/4796

[Wladimir Palant, 2017/04/25 10:57:52]

This is really a PITA. Given that https://issues.adblockplus.org/ticket/4796 is
no longer blocked, I wonder whether we can fix it before changing this script.

[hub, 2017/04/25 19:42:47]

If issue 4796 lands before this, then I'll fix it.

[Wladimir Palant, 2017/04/26 00:03:09]

As I suggested on IRC, it would probably be easiest if you work on issue 4796 -
I can answer any questions you might have on that. Otherwise I'll try to find
time, adding more ECMAScript 5 code here doesn't seem to be a good idea to me.

[hub, 2017/04/27 17:43:04]

Newer patch is now ES6 based on top of your patch. Consider this done.

-
-var propertySelectorRegExp = /\[-abp-properties=(["'])([^"']+)\1\]/;
-var abpSelectorRegExp = /\[-abp-selector=(["'])(.+)\1\]/;
-var pseudoClassHasSelectorRegExp = /:has\((.*)\)/;
-var pseudoClassPropsSelectorRegExp = /:-abp-properties\((["'])([^"']+)\1\)/;

[Wladimir Palant, 2017/04/25 11:30:46]

Having :has() but :-abp-properties() is inconsistent. Either we say that
[-abp-selector="..."] wrapper is sufficient as a warning and we can have our
custom pseudos inside unprefixed. Or we say that we want to indicate our custom
pseudos explicitly and then it should be :-abp-has() as well. I don't think that
we can claim standards compliance and compatibility with future browser
implementations for our :has() pseudo, so it isn't any better off than
:properties(). If you ask me, it's probably better to have :-abp-has() and
:-abp-properties().

[hub, 2017/04/25 19:42:47]

OK.

+/*
+ * 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 abpSelectorRegexp = /:-abp-([\w-]+)\(/i;
+
+let reportError = () => {};
 
 function splitSelector(selector)
 {
   if (selector.indexOf(",") == -1)
     return [selector];
 
-  var selectors = [];
-  var start = 0;
-  var level = 0;
-  var sep = "";
-
-  for (var i = 0; i < selector.length; i++)
-  {
-    var chr = selector[i];
+  let selectors = [];
+  let start = 0;
+  let level = 0;
+  let sep = "";
+
+  for (let i = 0; i < selector.length; i++)
+  {
+    let chr = selector[i];
 
     if (chr == "\\")        // ignore escaped characters
       i++;
     else if (chr == sep)    // don't split within quoted text
       sep = "";             // e.g. [attr=","]
     else if (sep == "")
     {
       if (chr == '"' || chr == "'")
         sep = chr;
       else if (chr == "(")  // don't split between parentheses
         level++;            // e.g. :matches(div,span)
       else if (chr == ")")
         level = Math.max(0, level - 1);
       else if (chr == "," && level == 0)
       {
         selectors.push(selector.substring(start, i));
         start = i + 1;
       }
     }
   }
 
   selectors.push(selector.substring(start));
   return selectors;
 }
 
-const ABP_ATTR = "abp-0ac791f0-a03b-4f2c-a935-a285bc2e668e";
-const ABP_ATTR_SEL = "[" + ABP_ATTR + "] ";
-
-function matchChildren(e, selector)
-{
-  var subElement;
-  var newSelector = ABP_ATTR_SEL + selector;
-  var parentNode = e.parentNode || document;
-
-  e.setAttribute(ABP_ATTR, "");
-  subElement = parentNode.querySelector(newSelector);
-  e.removeAttribute(ABP_ATTR);

[Wladimir Palant, 2017/04/25 10:57:52]

This hack is problematic. Even if we make the attribute random, the website can
get notified about us adding it via mutation observers and mess with us (e.g. by
removing it again immediately). Given that the point is creating a selector to
uniquely identify an element, there is a better solution - we can generate a
selector of the form :root > :nth-child(2) > :nth-child(8) > :nth-child(1).
Given that the browser evaluates CSS selectors starting at the end, this won't
even be noticeable slower than what you have here. Note that these selectors
won't stay valid if the document structure changes, but they don't have to - as
long as the code is evaluated synchronously and we don't touch the DOM the
website cannot become active and change something.

[hub, 2017/04/25 19:42:47]

I was thinking we could generate an actually random attribute to counter this,
but this would just be raising the bar.

[hub, 2017/04/27 17:43:04]

On 2017/04/25 19:42:47, hub wrote:

Newer patch removed this and followed your other suggestion.

-
-  return subElement != null;
-}
-
-function selectChildren(e, selector)
-{
-  var subElements;
-  var newSelector = ABP_ATTR_SEL + selector;
-  var parentNode = e.parentNode || document;
-
-  e.setAttribute(ABP_ATTR, "");
-  subElements = parentNode.querySelectorAll(newSelector);
-  e.removeAttribute(ABP_ATTR);
-
-  return subElements;
-}
-
-/** Unwrap the pattern out of a [-abp-selector=''] if necessary
- * @param {object} pattern - The pattern object to unwrap
- * @return {object} the parsed pattern object or undefined if nothing parse.
+/** Return position of node from parent.
+ * @param {Node} node the node to find the position of.
+ * @return {number} One-based index like for :nth-child(), or 0 on error.
  */
-function unwrapPattern(pattern)

[Wladimir Palant, 2017/04/25 10:57:53]

This unwrapping belongs into lib/filterClasses.js IMHO - it needs to recognize
emulation filters by the fact that their selector matches
/^\[-abp-selector=(["']).*\1\]$/, so it can return the "inner part" as the
actual selector. The content script shouldn't get the wrapper at all. Note that
IMHO the entire selector should be wrapped in [-abp-selector="..."] because the
entire selector will be processed via our custom logic.

[hub, 2017/04/25 19:42:47]

ok, moving it.

-{
-  var match = abpSelectorRegExp.exec(pattern.selector);
-  if (match)
-  {
-    var prefix = pattern.selector.substr(0, match.index).trim();
-    var suffix = pattern.selector.substr(match.index + match[0].length).trim();
-    var selector = prefix + match[2] + suffix;
-    return parsePattern({selector: selector}, true);
-  }
-
-  return parsePattern(pattern, false);
-}
-
-function parsePattern(pattern, unwrapped)
-{
-  var selector = pattern.selector;
-  var match;
-
-  if (unwrapped)
-  {
-    // Seems that the pattern should be unwrapped.
-    // This is a fundamental error.
-    if (selector.indexOf("[-abp-selector=") != -1)
-      return;
-
-    match = pseudoClassHasSelectorRegExp.exec(selector);

[Wladimir Palant, 2017/04/25 10:57:52]

The syntax is getting too complex, parsing CSS with regular expressions won't
work. For example, your current regular expression will mistreat "p:has(div) >
span:not(.foo)". If you switch to non-greedy expressions you will get issues
with "p:has(div:not(.foo))". There is no way around it - we need to count
parentheses properly and consider quotation marks and backslashes. Feel free to
test which one is faster in JavaScript - going though characters one by one like
you would do in C++ or using `selector.replace(/([^()"'\\]+)|([()"']|(\\.))/g,
match => {...})`.

-    if (match)
-      return {
-        type: "has",
-        text: pattern.text,
-        elementMatcher: new PseudoHasMatcher(match[1]),
-        prefix: selector.substr(0, match.index).trim(),
-        suffix: selector.substr(match.index + match[0].length).trim()
-      };
-    match = pseudoClassPropsSelectorRegExp.exec(selector);
-  }
-
+function positionInParent(node)
+{
+  let {children} = node.parentNode;
+  for (let i = 0; i < children.length; i++)
+    if (children[i] == node)
+      return i + 1;
+  return 0;
+}
+
+function makeSelector(node, selector)
+{
+  if (!node.parentElement)
+  {
+    let newSelector = ":root";
+    if (selector)
+      newSelector += " > " + selector;
+    return newSelector;
+  }
+  let idx = positionInParent(node);
+  if (idx > 0)
+  {
+    let newSelector = `${node.tagName}:nth-child(${idx})`;
+    if (selector)
+      newSelector += " > " + selector;
+    return makeSelector(node.parentElement, newSelector);
+  }
+
+  return selector;
+}
+
+function parseSelectorContent(content, startIndex)
+{
+  let parens = 1;
+  let quote = null;
+  let i = startIndex;
+  for (; i < content.length; i++)
+  {
+    let c = content[i];
+    if (c == "\\")
+    {
+      // Ignore escaped characters
+      i++;
+    }
+    else if (quote)
+    {
+      if (c == quote)
+        quote = null;
+    }
+    else if (c == "'" || c == '"')
+      quote = c;
+    else if (c == "(")
+      parens++;
+    else if (c == ")")
+    {
+      parens--;
+      if (parens == 0)
+        break;
+    }
+  }
+
+  if (parens > 0)
+    return null;
+  return {text: content.substring(startIndex, i), end: i};
+}
+
+/** Parse the selector
+ * @param {string} selector the selector to parse
+ * @return {Object} selectors is an array of objects,
+ * or null in case of errors. hide is true if we'll hide
+ * elements instead of styles..
+ */
+function parseSelector(selector)
+{
+  if (selector.length == 0)
+    return [];
+
+  let match = abpSelectorRegexp.exec(selector);
   if (!match)
-    match = propertySelectorRegExp.exec(selector);

[Wladimir Palant, 2017/04/25 10:57:52]

I don't think that we should have this special handling for the legacy property
filter syntax here. We can instead modify ElemHideBase.fromText() in
lib/filterClasses.js in such a way that it converts such filters immediately -
'example.com##foo [-abp-properties="foobar"] bar' should become
'example.com##[-abp-selector="foo :-abp-properties(foobar) bar"]' and show up in
the filter list like that. So when we are working with filters we can assume
that they always have the current syntax.

[hub, 2017/04/25 19:42:47]

good idea. Like unwrap above.

-  if (match)
-  {
-    var regexpString;
-    var propertyExpression = match[2];
-    if (propertyExpression.length >= 2 && propertyExpression[0] == "/" &&
-        propertyExpression[propertyExpression.length - 1] == "/")
-      regexpString = propertyExpression.slice(1, -1)
+    return [new PlainSelector(selector)];
+
+  let selectors = [];
+  if (match.index > 0)
+    selectors.push(new PlainSelector(selector.substr(0, match.index)));
+
+  let startIndex = match.index + match[0].length;
+  let content = parseSelectorContent(selector, startIndex);
+  if (!content)
+  {
+    reportError(new SyntaxError("Failed to parse Adblock Plus " +
+                                `selector ${selector}, ` +
+                                "due to unmatched parentheses."));
+    return null;
+  }
+  if (match[1] == "properties")
+    selectors.push(new PropsSelector(content.text));
+  else if (match[1] == "has")
+  {
+    let hasSelector = new HasSelector(content.text);
+    if (!hasSelector.valid())
+      return null;
+    selectors.push(hasSelector);
+  }
+  else
+  {
+    // this is an error, can't parse selector.
+    reportError(new SyntaxError("Failed to parse Adblock Plus " +
+                                `selector ${selector}, invalid ` +
+                                `pseudo-class :-abp-${match[1]}().`));
+    return null;
+  }
+
+  let suffix = parseSelector(selector.substr(content.end + 1));
+  if (suffix == null)
+    return null;
+
+  selectors.push(...suffix);
+
+  return selectors;
+}
+
+/** Stringified style objects
+ * @typedef {Object} StringifiedStyle
+ * @property {string} style CSS style represented by a string.
+ * @property {string[]} subSelectors selectors the CSS properties apply to.
+ */
+
+/**
+ * Produce a string representation of the stylesheet entry.
+ * @param {CSSStyleRule} rule the CSS style rule.
+ * @return {StringifiedStyle} the stringified style.
+ */
+function stringifyStyle(rule)
+{
+  let styles = [];
+  for (let i = 0; i < rule.style.length; i++)
+  {
+    let property = rule.style.item(i);
+    let value = rule.style.getPropertyValue(property);
+    let priority = rule.style.getPropertyPriority(property);
+    styles.push(`${property}: ${value}${priority ? " !" + priority : ""};`);
+  }
+  styles.sort();
+  return {
+    style: styles.join(" "),
+    subSelectors: splitSelector(rule.selectorText)
+  };
+}
+
+function* evaluate(chain, index, prefix, subtree, styles)
+{
+  if (index >= chain.length)
+  {
+    yield prefix;
+    return;
+  }
+  for (let [selector, element] of
+       chain[index].getSelectors(prefix, subtree, styles))
+    yield* evaluate(chain, index + 1, selector, element, styles);
+}
+
+function PlainSelector(selector)
+{
+  this._selector = 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.
+   */
+  *getSelectors(prefix, subtree, styles)
+  {
+    yield [prefix + this._selector, subtree];
+  }
+};
+
+const incompletePrefixRegexp = /[\s>+~]$/;
+
+function HasSelector(selector)
+{
+  this._innerSelectors = parseSelector(selector);
+}
+
+HasSelector.prototype = {
+  requiresHiding: true,
+
+  valid()
+  {
+    return this._innerSelectors != null;
+  },
+
+  *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.
+   * @param {StringifiedStyle[]} styles the stringified style objects.
+   */
+  *getElements(prefix, subtree, styles)
+  {
+    let actualPrefix = (!prefix || incompletePrefixRegexp.test(prefix)) ?
+        prefix + "*" : prefix;
+    let elements = subtree.querySelectorAll(actualPrefix);
+    for (let element of elements)
+    {
+      let newPrefix = makeSelector(element, "");
+      let iter = evaluate(this._innerSelectors, 0, newPrefix + " ",
+                          element, styles);
+      for (let selector of iter)
+        // we insert a space between the two. It becomes a no-op if selector
+        // doesn't have a combinator
+        if (subtree.querySelector(selector))
+          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);
-    return {
-      type: "props",
-      text: pattern.text,
-      regexp: new RegExp(regexpString, "i"),
-      prefix: selector.substr(0, match.index),
-      suffix: selector.substr(match.index + match[0].length)
-    };
-  }
-}
-
-function matchStyleProps(style, rule, pattern, selectors, filters)
-{
-  if (pattern.regexp.test(style))
-  {
-    var subSelectors = splitSelector(rule.selectorText);
-    for (var i = 0; i < subSelectors.length; i++)
-    {
-      var subSelector = subSelectors[i];
-      selectors.push(pattern.prefix + subSelector + pattern.suffix);
-      filters.push(pattern.text);
-    }
-  }
-}
-
-function findPropsSelectors(stylesheet, patterns, selectors, filters)
-{
-  var rules = stylesheet.cssRules;
-  if (!rules)
-    return;
-
-  for (var i = 0; i < rules.length; i++)
-  {
-    var rule = rules[i];
-    if (rule.type != rule.STYLE_RULE)
-      continue;
-
-    var style = stringifyStyle(rule.style);
-    for (var j = 0; j < patterns.length; j++)
-    {
-      matchStyleProps(style, rule, patterns[j], selectors, filters);
-    }
-  }
-}
-
-/**
- * Match the selector @pattern containing :has() starting from @node.
- * @param {string} pattern - the pattern to match
- * @param {object} node - the top level node.
- */
-function pseudoClassHasMatch(pattern, node, stylesheets, elements, filters)
-{
-  // select element for the prefix pattern. Or just use node.
-  var haveEl = pattern.prefix ? node.querySelectorAll(pattern.prefix) : [ node ];

[Wladimir Palant, 2017/04/25 10:57:53]

This will work correctly for selectors like "div > span:has(...)" - but you
should also consider the scenario where we have :has() without additional
qualifiers, e.g. "div > span > :has(...)". Looking at
https://drafts.csswg.org/selectors-3/#selectors, we need special handling for
combinator selectors. So if prefix ends with [\s>+~] we need to add "*" to it.
For my example you would run node.querySelectorAll("div > span > *") here.

There is also the question how we are supposed to deal with selectors like
"div:has(...):not(...)". We could detect :has() not being followed by a
combinator and reorder it so that we effectively process
"div:not(...):has(...)". It should be easier however to mandate that :has()
should always be the last specifier before a combinator and merely enforce it
here. So if we find :has() that is not at the end of the selector and is not
followed by [\s>+~] we should warn about an invalid selector and ignore it.

[hub, 2017/04/25 19:42:47]

I naively assumed that since these are filters, we could have a more restricted
syntax, at least on the extension. Even though sanitisation of the input isn't
performed at the moment.

[Wladimir Palant, 2017/04/26 00:03:09]

Feel free to suggest a meaningful subset of the syntax that we can parse in a
simpler fashion and enforce. Note that enforcing is important, people will
expect things to work as with any CSS selectors - if they don't, we at least
need to produce a meaningful error message.

-  for (var j = 0; j < haveEl.length; j++)
-  {
-    var matched = pattern.elementMatcher.match(haveEl[j], stylesheets);
-    if (!matched)
-      continue;
-
-    if (pattern.suffix)
-    {
-      var subElements = selectChildren(haveEl[j], pattern.suffix);
-      if (subElements)
-      {
-        for (var k = 0; k < subElements.length; k++)
-        {
-          elements.push(subElements[k]);
-          filters.push(pattern.text);
-        }
-      }
-    }
-    else
-    {
-      elements.push(haveEl[j]);
-      filters.push(pattern.text);
-    }
-  }
-}
-
-function stringifyStyle(style)
-{
-  var styles = [];
-  for (var i = 0; i < style.length; i++)
-  {
-    var property = style.item(i);
-    var value = style.getPropertyValue(property);
-    var priority = style.getPropertyPriority(property);
-    styles.push(property + ": " + value + (priority ? " !" + priority : "") + ";");
-  }
-  styles.sort();
-  return styles.join(" ");
-}
-
-/** matcher for the pseudo CSS4 class :has()
- * For those browser that don't have it yet.
- */
-function PseudoHasMatcher(selector)
-{
-  this.hasSelector = selector;
-  this.parsed = parsePattern({selector: this.hasSelector}, true);
-}
-
-PseudoHasMatcher.prototype = {
-  match: function(elem, stylesheets)
-  {
-    var selectors = [];
-
-    if (this.parsed)
-    {
-      var filters = []; // don't need this, we have a partial filter.
-      if (this.parsed.type == "has")
-      {
-        var child = elem.firstChild;
-        while (child)
-        {
-          if (child.nodeType === Node.ELEMENT_NODE)
-          {
-            var matches = [];
-            pseudoClassHasMatch(this.parsed, child, stylesheets, matches, filters);
-            if (matches.length > 0)
-              return true;
-          }
-          child = child.nextSibling;
-        }
-        return false;
-      }
-      if (this.parsed.type == "props")
-      {
-        for (var i = 0; i < stylesheets.length; i++)
-          findPropsSelectors(stylesheets[i], [this.parsed], selectors, filters);

[Wladimir Palant, 2017/04/25 10:57:52]

We will be going through the stylesheets multiple times, this is rather
suboptimal.

-      }
-    }
-    else
-    {
-      selectors = [this.hasSelector];
-    }
-
-    var matched = false;
-    // look up for all elements that match the :has().
-    for (var k = 0; k < selectors.length; k++)
-    {
-      try
-      {
-        matched = matchChildren(elem, selectors[k]);
-        if (matched)
-          break;
-      }
-      catch (e)
-      {
-        console.error("Exception with querySelector()", selectors[k], e);
-      }
-    }
-    return matched;
+  }
+  else
+    regexpString = filterToRegExp(propertyExpression);
+
+  this._regexp = new RegExp(regexpString, "i");
+}
+
+PropsSelector.prototype = {
+  *findPropsSelectors(styles, prefix, regexp)
+  {
+    for (let style of styles)
+      if (regexp.test(style.style))
+        for (let subSelector of style.subSelectors)
+          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, hideElementsFunc)
+function ElemHideEmulation(window, getFiltersFunc, addSelectorsFunc,
+                           hideElemsFunc)
 {
   this.window = window;
   this.getFiltersFunc = getFiltersFunc;
   this.addSelectorsFunc = addSelectorsFunc;
-  this.hideElementsFunc = hideElementsFunc;

[Wladimir Palant, 2017/04/25 10:57:53]

I guess that hideElementsFunc should do some kind of DOM modification. If
somehow possible, we should avoid that, already because we might end up fighting
mutation observers then. Ideal solution would generate selectors for the
elements to be hidden and pass them to the existing addSelectorsFunc.

+  this.hideElemsFunc = hideElemsFunc;
 }
 
 ElemHideEmulation.prototype = {
-
-  isSameOrigin: function(stylesheet)
+  isSameOrigin(stylesheet)
   {
     try
     {
       return new URL(stylesheet.href).origin == this.window.location.origin;
     }
     catch (e)
     {
       // Invalid URL, assume that it is first-party.
       return true;
     }
   },
 
-  findPseudoClassHasElements: function(node, stylesheets, elements, filters)
-  {
-    for (var i = 0; i < this.pseudoHasPatterns.length; i++)
-    {
-      pseudoClassHasMatch(this.pseudoHasPatterns[i], node, stylesheets, elements, filters);
-    }
-  },
-
-  addSelectors: function(stylesheets)
-  {
-    var selectors = [];
-    var filters = [];
-    for (var i = 0; i < stylesheets.length; i++)
+  addSelectors(stylesheets)
+  {
+    let selectors = [];
+    let selectorFilters = [];
+
+    let elements = [];
+    let elementFilters = [];
+
+    let cssStyles = [];
+
+    for (let stylesheet of stylesheets)
     {
       // Explicitly ignore third-party stylesheets to ensure consistent behavior
       // between Firefox and Chrome.
-      if (!this.isSameOrigin(stylesheets[i]))
+      if (!this.isSameOrigin(stylesheet))
         continue;
-      findPropsSelectors(stylesheets[i], this.propSelPatterns, selectors, filters);
-    }
-    this.addSelectorsFunc(selectors, filters);
-  },
-
-  hideElements: function(stylesheets)
-  {
-    var elements = [];
-    var filters = [];
-    this.findPseudoClassHasElements(document, stylesheets, elements, filters);
-    this.hideElementsFunc(elements, filters);
-  },
-
-  onLoad: function(event)
-  {
-    var stylesheet = event.target.sheet;
+
+      let rules = stylesheet.cssRules;
+      if (!rules)
+        continue;
+
+      for (let rule of rules)
+      {
+        if (rule.type != rule.STYLE_RULE)
+          continue;
+
+        cssStyles.push(stringifyStyle(rule));
+      }
+    }
+
+    let {document} = this.window;
+    for (let pattern of this.patterns)
+    {
+      for (let selector of evaluate(pattern.selectors,
+                                    0, "", document, cssStyles))
+      {
+        if (!pattern.selectors.some(s => s.requiresHiding))
+        {
+          selectors.push(selector);
+          selectorFilters.push(pattern.text);
+        }
+        else
+        {
+          for (let element of document.querySelectorAll(selector))
+          {
+            elements.push(element);
+            elementFilters.push(pattern.text);
+          }
+        }
+      }
+    }
+
+    this.addSelectorsFunc(selectors, selectorFilters);
+    this.hideElemsFunc(elements, elementFilters);
+  },
+
+  onLoad(event)
+  {
+    let stylesheet = event.target.sheet;
     if (stylesheet)
       this.addSelectors([stylesheet]);
-    this.hideElements([stylesheet]);
-  },
-
-  apply: function()
-  {
-    this.getFiltersFunc(function(patterns)
-    {
-      this.propSelPatterns = [];
-      this.pseudoHasPatterns = [];
-      for (var i = 0; i < patterns.length; i++)
+  },
+
+  apply()
+  {
+    this.getFiltersFunc(patterns =>
+    {
+      let oldReportError = reportError;
+      reportError = error => this.window.console.error(error);
+
+      this.patterns = [];
+      for (let pattern of patterns)
       {
-        var pattern = patterns[i];
-        var parsed = unwrapPattern(pattern);
-        if (parsed == undefined)
-          continue;
-        if (parsed.type == "props")
-        {
-          this.propSelPatterns.push(parsed);
-        }
-        else if (parsed.type == "has")
-        {
-          this.pseudoHasPatterns.push(parsed);
-        }
+        let selectors = parseSelector(pattern.selector);
+        if (selectors != null && selectors.length > 0)
+          this.patterns.push({selectors, text: pattern.text});
       }
 
-      if (this.pseudoHasPatterns.length > 0 || this.propSelPatterns.length > 0)
+      if (this.patterns.length > 0)
       {
-        var document = this.window.document;
+        let {document} = this.window;
         this.addSelectors(document.styleSheets);
-        this.hideElements(document.styleSheets);
         document.addEventListener("load", this.onLoad.bind(this), true);
       }
-    }.bind(this));
+      reportError = oldReportError;
+    });
   }
 };