Issue 4394 - Create a filter class for element hiding emulation filters

chrome/content/elemHideEmulation.js

 function splitSelector(selector)
 {
   if (selector.indexOf(",") == -1)
     return [selector];
 
   var selectors = [];
   var start = 0;
   var level = 0;
   var sep = "";
 
@@ skipping 18 matching lines @@
         selectors.push(selector.substring(start, i));
         start = i + 1;
       }
     }
   }
 
   selectors.push(selector.substring(start));
   return selectors;
 }
 
-function CSSPropertyFilters(window, getFiltersFunc, addSelectorsFunc)
+function ElemHideEmulation(window, getFiltersFunc, addSelectorsFunc)
 {
   this.window = window;
   this.getFiltersFunc = getFiltersFunc;
   this.addSelectorsFunc = addSelectorsFunc;
 }
 
-CSSPropertyFilters.prototype = {
+ElemHideEmulation.prototype = {
   stringifyStyle: function(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 : "") + ";");
     }
@@ skipping 28 matching lines @@
     for (var i = 0; i < rules.length; i++)
     {
       var rule = rules[i];
       if (rule.type != rule.STYLE_RULE)
         continue;
 
       var style = this.stringifyStyle(rule.style);
       for (var j = 0; j < this.patterns.length; j++)
       {
         var pattern = this.patterns[j];
-        var regexp = pattern.regexp;
-
-        if (typeof regexp == "string")
-          regexp = pattern.regexp = new RegExp(regexp);
-
-        if (regexp.test(style))
+        if (pattern.regexp.test(style))
         {
           var subSelectors = splitSelector(rule.selectorText);
           for (var k = 0; k < subSelectors.length; k++)
             selectors.push(pattern.prefix + subSelectors[k] + pattern.suffix);
           filters[pattern.text] = true;
         }
       }
     }
   },
 
@@ skipping 10 matching lines @@
   {
     var stylesheet = event.target.sheet;
     if (stylesheet)
       this.addSelectors([stylesheet]);
   },
 
   load: function(callback)
   {
     this.getFiltersFunc(function(patterns)
     {
-      this.patterns = patterns;
+      this.patterns = [];
+      for (var i = 0; i < patterns.length; i++)
+      {
+        var pattern = patterns[i];
+
+        // We currently don't support any element hiding emulation feature
+        // except for property selectors, so we remove rules that use other
+        // features. See https://issues.adblockplus.org/ticket/3143.
+        if (pattern.features != elemHideEmulationFeatureMap.PROPERTY_SELECTOR)

[kzar, 2016/11/04 15:45:56]

Before I suggested adding a supportedFeatures parameters to the
ElemHideEmulation constructor but I had another idea.

How about we turn the parameters into a single options Object, so things like
getFiltersFunc and addSelectorsFunc are properties on that? Since most features
will require some special functions to be passed in I suppose we can make them
all optional and then only enable features for which the functions have been
provided. ElemHideEmulation instances could then have a supportedFeatures
property which is assigned based on the functions provided to the constructor.

Then we could do something like `if (pattern.features &
~this.supportedFeatures)` to check if any unsupported features are required for
the filter.

[Felix Dahlke, 2016/11/04 16:43:35]

I'm not sure. For one, I feel that logic belongs in filterClasses: A filter is
an ElemHideEmulation filter if it has features that need to be emulated. A
filter is an ElemHide filter if its syntax is natively supported by the browser.
In that case we wouldn't even have to run this content script.

Secondly, while I tried to make sure we already have an idea for how we could
deal with features that are natively supported in some browsers but not all, for
now this is a completely theoretical discussion since -abp-properties is a bit
unlikely to be natively supported anywhere, and :has is not supported in any
browser, it's still just a draft. IMO this is something we can deal with much
later.

+          continue;
+
+        var propertySelectorRegExp = /\[\-abp\-properties=(["'])([^"']+)\1\]/;
+        var match = propertySelectorRegExp.exec(pattern.selector);

[kzar, 2016/11/04 15:45:56]

I guess the regexp won't necessarily match and if it doesn't we should continue
too?

[Felix Dahlke, 2016/11/04 16:43:35]

Oops, true, I'll fix that.

[Felix Dahlke, 2016/11/11 11:51:42]

Done.

+        this.patterns.push({
+          text: pattern.text,
+          regexp: new RegExp(filterToRegExp(match[2])),
+          prefix: pattern.selector.substr(0, match.index),
+          suffix: pattern.selector.substr(match.index + match[0].length)
+        });
+      }
+
       callback();
     }.bind(this));
   },
 
   apply: function()
   {
     if (this.patterns.length > 0)
     {
       var document = this.window.document;
       this.addSelectors(document.styleSheets);
       document.addEventListener("load", this.onLoad.bind(this), true);
     }
   }
 };