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
 
 var propertySelectorRegExp = /\[\-abp\-properties=(["'])([^"']+)\1\]/;
+var pseudoClassHasSelectorRegExp = /:has\((.*)\)/;
 
 function splitSelector(selector)
 {
   if (selector.indexOf(",") == -1)
     return [selector];
 
   var selectors = [];
   var start = 0;
   var level = 0;
   var sep = "";
@@ skipping 19 matching lines @@
         selectors.push(selector.substring(start, i));
         start = i + 1;
       }
     }
   }
 
   selectors.push(selector.substring(start));
   return selectors;
 }
 
-function ElemHideEmulation(window, getFiltersFunc, addSelectorsFunc)
+// matcher for the pseudo CSS4 class :has
+// For those browser that don't have it yet.
+function PseudoHasMatcher(selector)
+{
+  this.hasSelector = selector;
+}
+
+PseudoHasMatcher.prototype = {
+  match: function(elem, firstOnly)
+  {
+    var matches = [];
+    // look up for all elements that match the :has().
+    var children = elem.children;
+    for (var i = 0; i < children.length; i++)
+    {
+      var hasElem = elem.querySelector(this.hasSelector);
+      if (hasElem != null)
+      {
+        matches.push(hasElem);
+        if (firstOnly)
+          break;
+      }
+    }
+    return matches;
+  }
+};
+
+function ElemHideEmulation(window, getFiltersFunc, addSelectorsFunc, hideElementsFunc)
 {
   this.window = window;
   this.getFiltersFunc = getFiltersFunc;
   this.addSelectorsFunc = addSelectorsFunc;
+  this.hideElementsFunc = hideElementsFunc;
 }
 
 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);
@@ skipping 28 matching lines @@
     if (!rules)
       return;
 
     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++)
+      for (var j = 0; j < this.propSelPatterns.length; j++)
       {
-        var pattern = this.patterns[j];
+        var pattern = this.propSelPatterns[j];
         if (pattern.regexp.test(style))
         {
           var subSelectors = splitSelector(rule.selectorText);
           for (var k = 0; k < subSelectors.length; k++)
           {
             var subSelector = subSelectors[k];
             selectors.push(pattern.prefix + subSelector + pattern.suffix);
             filters.push(pattern.text);
           }
         }
       }
     }
   },
 
+  findPseudoClassHasElements: function(stylesheets, elements, filters)
+  {
+    for (var i = 0; i < this.pseudoHasPatterns.length; i++)
+    {
+      var pattern = this.pseudoHasPatterns[i];
+
+      var haveEl = document.querySelectorAll(pattern.prefix);
+      for (var j = 0; j < haveEl.length; j++)
+      {
+        var matched = pattern.elementMatcher.match(haveEl[j], !pattern.suffix);
+        if (matched.length == 0)
+          continue;
+
+        if (pattern.suffix)
+        {
+          matched.forEach(function(e)
+          {
+            var sel = pattern.suffix;
+            // XXX we should have a more elegant way
+            // also startsWith isn't available in PhantomJS.
+            if (sel.substr(0, 1) == ">")
+              sel = sel.substr(1);
+            var subElements = e.querySelectorAll(sel);
+            for (var k = 0; k < subElements.length; k++)
+            {
+              elements.push(subElements[i]);
+              filters.push(pattern.text);
+            }
+          });
+        }
+        else
+        {
+          elements.push(haveEl[j]);
+          filters.push(pattern.text);
+        }
+      }
+    }
+  },
+
   addSelectors: function(stylesheets)
   {
     var selectors = [];
     var filters = [];
     for (var i = 0; i < stylesheets.length; i++)
       this.findSelectors(stylesheets[i], selectors, filters);
     this.addSelectorsFunc(selectors, filters);
   },
 
+  hideElements: function(stylesheets)
+  {
+    var elements = [];
+    var filters = [];
+    this.findPseudoClassHasElements(stylesheets, elements, filters);
+    this.hideElementsFunc(elements, filters);
+  },
+
   onLoad: function(event)
   {
     var stylesheet = event.target.sheet;
     if (stylesheet)
       this.addSelectors([stylesheet]);
+    this.hideElements();
+  },
+
+  parsePattern: function(pattern)
+  {
+    // we should catch the :has() pseudo class first.
+    var match = pseudoClassHasSelectorRegExp.exec(pattern.selector);
+    if (match)
+    {
+      return {
+        type: "has",
+        text: pattern.text,
+        elementMatcher: new PseudoHasMatcher(match[1]),
+        prefix: pattern.selector.substr(0, match.index).trim(),
+        suffix: pattern.selector.substr(match.index + match[0].length).trim()
+      };
+    }
+
+    match = propertySelectorRegExp.exec(pattern.selector);
+    if (match)
+    {
+      var regexpString;
+      var propertyExpression = match[2];
+      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: pattern.selector.substr(0, match.index),
+        suffix: pattern.selector.substr(match.index + match[0].length)
+      };
+    }
   },
 
   apply: function()
   {
     this.getFiltersFunc(function(patterns)
     {
-      this.patterns = [];
+      this.propSelPatterns = [];
+      this.pseudoHasPatterns = [];
       for (var i = 0; i < patterns.length; i++)
       {
         var pattern = patterns[i];
-        var match = propertySelectorRegExp.exec(pattern.selector);
-        if (!match)
+        var parsed = this.parsePattern(pattern);
+        if (parsed == undefined)
           continue;
-
-        var propertyExpression = match[2];
-        var 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.patterns.push({
-          text: pattern.text,
-          regexp: new RegExp(regexpString, "i"),
-          prefix: pattern.selector.substr(0, match.index),
-          suffix: pattern.selector.substr(match.index + match[0].length)
-        });
+        if (parsed.type == "props")
+        {
+          this.propSelPatterns.push(parsed);
+        }
+        else if (parsed.type == "has")
+        {
+          this.pseudoHasPatterns.push(parsed);
+        }
       }
 
-      if (this.patterns.length > 0)
+      if (this.pseudoHasPatterns.length > 0 || this.propSelPatterns.length > 0)
       {
         var document = this.window.document;
         this.addSelectors(document.styleSheets);
+        this.hideElements();
         document.addEventListener("load", this.onLoad.bind(this), true);
       }
     }.bind(this));
   }
 };