Issue 6296 - Handle relative prefix in :-abp-has()

lib/content/elemHideEmulation.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present 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 104 matching lines @@
     let priority = rule.style.getPropertyPriority(property);
     styles.push(`${property}: ${value}${priority ? " !" + priority : ""};`);
   }
   styles.sort();
   return {
     style: styles.join(" "),
     subSelectors: splitSelector(rule.selectorText)
   };
 }
 
+let scopeSupported = null;
+
+function tryQuerySelector(subtree, selector, all)
+{
+  let elements = null;
+  try
+  {
+    elements = all ? subtree.querySelectorAll(selector) :
+      subtree.querySelector(selector);
+    scopeSupported = true;
+  }
+  catch (e)
+  {
+    scopeSupported = false;

[Manish Jethani, 2018/01/30 05:53:41]

Maybe we should add that comment here saying that Edge does not support :scope

[hub, 2018/01/30 16:03:57]

Done.

+  }
+  return elements;
+}
+
+/**
+ * Query selector. If it is relative, will try :scoped.

[Manish Jethani, 2018/01/30 05:53:41]

You meant ":scope" (without the D)?

[hub, 2018/01/30 16:03:57]

Done.

+ * @param {Node} subtree the element to query selector
+ * @param {string} selector the selector to query
+ * @param {bool} all True to perform querySelectorAll()

[Manish Jethani, 2018/01/30 05:53:41]

Since all is optional and defaults to false, I guess this should be
"[all=false]".

Also I think "true" should not be capitalized.

[hub, 2018/01/30 16:03:57]

Done.

+ * @returns {Node|NodeList} result of the query. null in case of error.

[Manish Jethani, 2018/01/30 05:53:41]

Since this can return null I think it should be "{?(Node|NodeList)}".

[lainverse, 2018/01/30 15:28:29]

BTW, wouldn't it be better to return empty array when all == true? This way
extra check if scopedQuerySelectorAll() returned something won't be necessary.

I mean it would be possible to use it like this

for (let element of scopedQuerySelectorAll(subtree, actualPrefix))

instead of

let elements = scopedQuerySelectorAll(subtree, actualPrefix);
if (elements)
{
  for (let element of elements)
...


That is similar to original querySelectorAll which always returns NodeList even
when it's empty.

[hub, 2018/01/30 16:03:57]

Done.

+ */
+function scopedQuerySelector(subtree, selector, all)
+{
+  if (relativeSelectorRegexp.test(selector))
+  {
+    selector = ":scope" + selector;
+    if (scopeSupported)
+    {
+      return all ? subtree.querySelectorAll(selector) :
+        subtree.querySelector(selector);
+    }
+    if (scopeSupported == null)
+      return tryQuerySelector(subtree, selector, all);
+    return null;
+  }
+  return all ? subtree.querySelectorAll(selector) :
+    subtree.querySelector(selector);
+}
+
+function scopedQuerySelectorAll(subtree, selector)
+{
+  return scopedQuerySelector(subtree, selector, true);
+}
+
 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))
   {
@@ skipping 21 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 = /^[>+~]/;
+const relativeSelectorRegexp = /^>/;

[Manish Jethani, 2018/01/30 06:13:06]

So I ran this on Chrome and Firefox:

{
  let u = [];
  let n = 10000000;
  let c = 0;
  let r = /^>/;
  for (let i = 0; i < n; i++)
  {
    if (Math.random() < .1)
      u.push(">foo bar");
    else
      u.push("foo bar");
  }
  let s = performance.now();
  for (let i = 0; i < n; i++)
  {
    // if (r.test(u[i]))
    // if (u[i].charCodeAt(0) == 62)
    if (u[i][0] == ">")
      c++;
  }
  let t = (performance.now() - s) | 0;
  console.log(c + " matches found in " + t + "ms");
}

It seems comparing the first character directly is the fastest on Firefox,
whereas on Chrome the fastest is to use String.charCodeAt. On both platforms the
regular expression is the slowest, and it's significantly slower.

I think we should go for just string comparison here.

[hub, 2018/01/30 16:03:57]

Done.

 
 function HasSelector(selectors)
 {
   this._innerSelectors = selectors;
 }
 
 HasSelector.prototype = {
   requiresHiding: true,
 
   get dependsOnStyles()
@@ skipping 10 matching lines @@
   /**
    * 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 elements = scopedQuerySelectorAll(subtree, actualPrefix);
+    if (elements)
     {
-      let iter = evaluate(this._innerSelectors, 0, "", element, styles);
-      for (let selector of iter)
+      for (let element of elements)
       {
-        if (selector == null)
+        let iter = evaluate(this._innerSelectors, 0, "", element, styles);
+        for (let selector of iter)
         {
-          yield null;
-          continue;
-        }
-        if (relativeSelectorRegexp.test(selector))
-          selector = ":scope" + selector;
-        try
-        {
-          if (element.querySelector(selector))
+          if (selector == null)
+            yield null;
+          else if (scopedQuerySelector(element, selector))
             yield element;
         }
-        catch (e)
-        {
-          // :scope isn't supported on Edge, ignore error caused by it.
-        }
+        yield null;
       }
-      yield null;
     }
   }
 };
 
 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)
+    let elements = scopedQuerySelectorAll(subtree, actualPrefix);
+    if (elements)
     {
-      if (element.textContent.includes(this._text))
-        yield element;
-      else
-        yield null;
+      for (let element of elements)
+      {
+        if (element.textContent.includes(this._text))
+          yield element;
+        else
+          yield null;
+      }
     }
   }
 };
 
 function PropsSelector(propertyExpression)
 {
   let regexpString;
   if (propertyExpression.length >= 2 && propertyExpression[0] == "/" &&
       propertyExpression[propertyExpression.length - 1] == "/")
   {
@@ skipping 343 matching lines @@
           characterData: true,
           subtree: true
         }
       );
       this.document.addEventListener("load", this.onLoad.bind(this), true);
     }
   }
 };
 
 exports.ElemHideEmulation = ElemHideEmulation;