Issue 7450 - Implement hide-if-contains-visible-text snippet

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 324 matching lines @@
         }
         yield null;
 
         if (testInfo)
           testInfo.lastProcessedElements.add(element);
       }
     }
   }
 }
 
+/**
+ * Determine if the text inside the element is visible.
+ * @param {Element} element the leaf element we are checking.
+ * @returns {bool} whether the text is visible.
+ */
+function isTextVisible(element)
+{
+  let style = window.getComputedStyle(element);

[hub, 2019/03/06 16:34:11]

I wonder if it is worth complexifying the code to call this function in the
outer code to avoid redundancy on what *may* be expensive.

[Manish Jethani, 2019/03/12 12:24:09]

If you have `<div style="display: none"><div>Sponsored</div></div>` then this
won't work anyway, because the immediate parent does not have any of the hiding
styles. We need to check whether a node is visible before descending into it.

Actually we need to check only for the non-inherited properties [1] first before
descending into a node. The inherited properties (like color) can be checked
when we're examining a text node (second case block).

[1]:
https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance#Non-inherited_pr...

[hub, 2019/03/14 10:12:40]

I think we can constrain to "visible within the specified element". With your
example from the outer div (that has the style attribute), the text "Sponsored"
is visible. But it is the outer element that is hidden.

Also I have seen some case where setting the outer element style to
`display:none` make `innerText` return the text even for the element that also
is `display: none` so it really makes for us having to drill into the node tree.

[Manish Jethani, 2019/03/14 11:36:33]

OK, perhaps I can change my example to this: `<article><div style="display:
none"><div>Sponsored</div></div></article>`. The filter
`#?#article:-abp-contains-visible(Sponsored)` should hide the `<article>`
element. With the current code it wouldn't.

[hub, 2019/03/20 14:19:55]

Actually I believe it should not hide it. But it does.

[hub, 2019/03/20 16:31:11]

This is handled properly now.

+
+  if (style.getPropertyValue("opacity") == "0")
+    return false;
+  if (style.getPropertyValue("font-size") == "0px")
+    return false;
+  let visibility = style.getPropertyValue("visibility");
+  if (visibility == "hidden" || visibility == "collapse")
+    return false;
+  if (style.getPropertyValue("display") == "none")
+    return false;
+  if (style.getPropertyValue("color") ==
+      style.getPropertyValue("background-color"))
+    return false;
+
+  return true;
+}
+
+/**
+ * Returns the visible text content from an element and its children.
+ * @param {Element} element the element whose visible text we want.
+ * @returns {String} the text that is visible.
+ */
+function getVisibleContent(element)

[Manish Jethani, 2019/03/12 08:44:01]

Instead of doing all this, why not just use the `innerText` property?

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText

[hub, 2019/03/12 09:29:29]

innerText doesn't know about opacity, 0 sized font, etc. It will only consider
`display` and `visibility`. And I need to figure out individual which text node
are visible or not.

[Manish Jethani, 2019/03/12 12:24:09]

Acknowledged.

+{
+  let text = "";
+  for (let node of element.childNodes)
+  {
+    switch (node.nodeType)
+    {
+      case Node.ELEMENT_NODE:
+        text += getVisibleContent(node);
+        break;
+      case Node.TEXT_NODE:
+        if (isTextVisible(element))
+          text += node.nodeValue;
+        break;
+    }
+  }
+  return text;
+}
+
 class ContainsSelector
 {
-  constructor(textContent)
+  constructor(textContent, onlyVisible = false)
   {
     this.dependsOnDOM = true;
     this.dependsOnCharacterData = true;
 
+    this._onlyVisible = onlyVisible;
     this._regexp = makeRegExpParameter(textContent);
   }
 
   *getSelectors(prefix, subtree, styles, targets)
   {
     for (let element of this.getElements(prefix, subtree, styles, targets))
       yield [makeSelector(element), subtree];
   }
 
   *getElements(prefix, subtree, styles, targets)
   {
     let actualPrefix = (!prefix || incompletePrefixRegexp.test(prefix)) ?
         prefix + "*" : prefix;
 
     let elements = scopedQuerySelectorAll(subtree, actualPrefix);
 
-    if (elements)
+    if (!elements)
+      return;
+
+    if (this._onlyVisible)
+    {
+      for (let element of elements)
+      {
+        let visibleContent = getVisibleContent(element);
+        if (this._regexp && this._regexp.test(visibleContent))
+          yield element;
+        else
+          yield null;
+      }
+    }
+    else
     {
       let lastRoot = null;
       for (let element of elements)
       {
         // For a filter like div:-abp-contains(Hello) and a subtree like
         // <div id="a"><div id="b"><div id="c">Hello</div></div></div>
         // we're only interested in div#a
         if (lastRoot && lastRoot.contains(element))
         {
           yield null;
@@ skipping 280 matching lines @@
       selectors.push(new PropsSelector(content.text));
     else if (match[1] == "has")
     {
       let hasSelectors = this.parseSelector(content.text);
       if (hasSelectors == null)
         return null;
       selectors.push(new HasSelector(hasSelectors));
     }
     else if (match[1] == "contains")
       selectors.push(new ContainsSelector(content.text));
+    else if (match[1] == "contains-visible")
+      selectors.push(new ContainsSelector(content.text, true));
     else
     {
       // this is an error, can't parse selector.
       console.error(new SyntaxError("Failed to parse Adblock Plus " +
                                     `selector ${selector}, invalid ` +
                                     `pseudo-class :-abp-${match[1]}().`));
       return null;
     }
 
     let suffix = this.parseSelector(selector.substring(content.end + 1));
@@ skipping 285 matching lines @@
           characterData: shouldObserveCharacterData(this.patterns),
           subtree: true
         }
       );
       this.document.addEventListener("load", this.onLoad.bind(this), true);
     }
   }
 }
 
 exports.ElemHideEmulation = ElemHideEmulation;