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

lib/content/snippets.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 390 matching lines @@
     }
   });
 }
 
 exports["hide-if-shadow-contains"] = makeInjector(hideIfShadowContains,
                                                   toRegExp, regexEscape,
                                                   hideElement);
 
 /**
  * Hides any HTML element or one of its ancestors matching a CSS selector if
+ * it matches the provided condition.
+ *
+ * @param {function} match The function that provides the matching condition.
+ * @param {string} selector The CSS selector that an HTML element must match
+ *   for it to be hidden.
+ * @param {?string} [searchSelector] The CSS selector that an HTML element
+ *   containing the given string must match. Defaults to the value of the
+ *   <code>selector</code> argument.
+ */
+function hideIfMatches(match, selector, searchSelector)
+{
+  if (searchSelector == null)
+    searchSelector = selector;
+
+  let callback = () =>
+  {
+    for (let element of document.querySelectorAll(searchSelector))
+    {
+      let closest = element.closest(selector);
+      if (closest && match(element, closest))
+        hideElement(closest);
+    }
+  };
+  new MutationObserver(callback)
+    .observe(document, {childList: true, characterData: true, subtree: true});
+  callback();
+}
+
+/**
+ * Hides any HTML element or one of its ancestors matching a CSS selector if
  * the text content of the element contains a given string.
  *
  * @param {string} search The string to look for in HTML elements. If the
  *   string begins and ends with a slash (<code>/</code>), the text in between
  *   is treated as a regular expression.
  * @param {string} selector The CSS selector that an HTML element must match
  *   for it to be hidden.
- * @param {string?} [searchSelector] The CSS selector that an HTML element
+ * @param {?string} [searchSelector] The CSS selector that an HTML element
  *   containing the given string must match. Defaults to the value of the
  *   <code>selector</code> argument.
  */
 function hideIfContains(search, selector = "*", searchSelector = null)
 {
-  if (searchSelector == null)
-    searchSelector = selector;
-
   let re = toRegExp(search);
 
-  new MutationObserver(() =>
-  {
-    for (let element of document.querySelectorAll(searchSelector))
-    {
-      if (re.test(element.textContent))
+  hideIfMatches(element => re.test(element.textContent),
+                selector, searchSelector);
+}
+
+exports["hide-if-contains"] = hideIfContains;
+
+/**
+ * Hides any HTML element matching a CSS selector if the visible text content
+ * of the element contains a given string.
+ *
+ * @param {string} search The string to match to the visible text. Is considered
+ *   visible text that isn't hidden by CSS properties or other means.
+ *   If the string begins and ends with a slash (<code>/</code>), the
+ *   text in between is treated as a regular expression.
+ * @param {string} selector The CSS selector that an HTML element must match
+ *   for it to be hidden.
+ * @param {?string} [searchSelector] The CSS selector that an HTML element
+ *   containing the given string must match. Defaults to the value of the
+ *   <code>selector</code> argument.
+ */
+function hideIfContainsVisibleText(search, selector, searchSelector = null)
+{
+  /**
+   * Determines if the text inside the element is visible.
+   * @param {Element} element The element we are checking.
+   * @param {?CSSStyleDeclaration} style The computed style of element. If
+   *   falsey it will be queried.
+   * @returns {bool} Whether the text is visible.
+   */
+  function isTextVisible(element, style)
+  {
+    if (!style)
+      style = window.getComputedStyle(element);
+
+    if (style.getPropertyValue("opacity") == "0")
+      return false;
+    if (style.getPropertyValue("font-size") == "0px")
+      return false;
+
+    let color = style.getPropertyValue("color");
+    // if color is transparent...
+    if (color == "rgba(0, 0, 0, 0)")
+      return false;
+    if (style.getPropertyValue("background-color") == color)
+      return false;
+
+    return true;
+  }
+
+  /**
+   * Check if an element is visible
+   * @param {Element} element The element to check visibility of.
+   * @param {?CSSStyleDeclaration} style The computed style of element. If
+   *   falsey it will be queried.
+   * @param {?Element} closest The closest parent to reach.
+   * @return {bool} Whether the element is visible.
+   */
+  function isVisible(element, style, closest)
+  {
+    if (!style)
+      style = window.getComputedStyle(element);
+
+    if (style.getPropertyValue("display") == "none")
+      return false;
+    let visibility = style.getPropertyValue("visibility");
+    if (visibility == "hidden" || visibility == "collapse")
+      return false;
+
+    if (!closest || element == closest)
+      return true;
+
+    let parent = element.parentElement;
+    if (!parent)
+      return true;
+
+    return isVisible(parent, null, closest);
+  }
+
+  /**
+   * Returns the visible text content from an element and its descendants.
+   * @param {Element} element The element whose visible text we want.
+   * @param {Element} closest The closest parent to reach while checking
+   *   for visibility.
+   * @returns {string} The text that is visible.
+   */
+  function getVisibleContent(element, closest)
+  {
+    let style = window.getComputedStyle(element);
+    if (!isVisible(element, style, closest))
+      return "";
+
+    let text = "";
+    for (let node of element.childNodes)
+    {
+      switch (node.nodeType)
       {
-        let closest = element.closest(selector);
-        if (closest)
-          hideElement(closest);
+        case Node.ELEMENT_NODE:
+          text += getVisibleContent(node, element);
+          break;
+        case Node.TEXT_NODE:
+          if (isTextVisible(element, style))
+            text += node.nodeValue;
+          break;
       }
     }
-  })
-  .observe(document, {childList: true, characterData: true, subtree: true});
-}
-
-exports["hide-if-contains"] = hideIfContains;
+    return text;
+  }
+
+  let re = toRegExp(search);
+
+  hideIfMatches(
+    (element, closest) => re.test(getVisibleContent(element, closest)),
+    selector, searchSelector);
+}
+
+exports["hide-if-contains-visible-text"] = hideIfContainsVisibleText;
 
 /**
  * Hides any HTML element or one of its ancestors matching a CSS selector if
  * the text content of the element contains a given string and, optionally, if
  * the element's computed style contains a given string.
  *
  * @param {string} search The string to look for in HTML elements. If the
  *   string begins and ends with a slash (<code>/</code>), the text in between
  *   is treated as a regular expression.
  * @param {string} selector The CSS selector that an HTML element must match
@@ skipping 216 matching lines @@
 function wrapPropertyAccess(object, property, descriptor)
 {
   let dotIndex = property.indexOf(".");
   if (dotIndex == -1)
   {
     // simple property case.
     let currentDescriptor = Object.getOwnPropertyDescriptor(object, property);
     if (currentDescriptor && !currentDescriptor.configurable)
       return;
 
-    descriptor.configurable = true;
-    Object.defineProperty(object, property, descriptor);
+    // Keep it configurable because the same property can be wrapped via
+    // multiple snippet filters (#7373).
+    Object.defineProperty(object, property,
+                          Object.assign({}, descriptor, {configurable: true}));
     return;
   }
 
   let name = property.slice(0, dotIndex);
   property = property.slice(dotIndex + 1);
   let value = object[name];
   if (value && (typeof value == "object" || typeof value == "function"))
     wrapPropertyAccess(value, property, descriptor);
 
   let currentDescriptor = Object.getOwnPropertyDescriptor(object, name);
@@ skipping 105 matching lines @@
  *   slash (<code>/</code>), the text in between is treated as a regular
  *   expression.
  */
 function abortCurrentInlineScript(api, search = null)
 {
   let re = search ? toRegExp(search) : null;
 
   let rid = randomId();
   let us = document.currentScript;
 
-
   let object = window;
   let path = api.split(".");
   let name = path.pop();
 
   for (let node of path)
   {
     object = object[node];
 
     if (!object || !(typeof object == "object" || typeof object == "function"))
       return;
   }
 
-  let prevGetter;
-  let prevSetter;
-  let desc = Object.getOwnPropertyDescriptor(object, name);
-  if (desc)
-  {
-    if (typeof desc.get == "function")
-      prevGetter = desc.get;
-    if (typeof desc.set == "function")
-      prevSetter = desc.set;
-  }
+  let {get: prevGetter, set: prevSetter} =
+    Object.getOwnPropertyDescriptor(object, name) || {};
 
   let currentValue = object[name];
 
   let abort = () =>
   {
     let element = document.currentScript;
     if (element instanceof HTMLScriptElement && element.src == "" &&
         element != us && (!re || re.test(element.textContent)))
     {
       throw new ReferenceError(rid);
     }
   };
 
   let descriptor = {
     get()
     {
       abort();
+
       if (prevGetter)
         return prevGetter.call(this);
 
       return currentValue;
     },
     set(value)
     {
       abort();
+
       if (prevSetter)
         prevSetter.call(this, value);
-
-      currentValue = value;
+      else
+        currentValue = value;
     }
   };
 
   wrapPropertyAccess(object, name, descriptor);
 
   overrideOnError(rid);
 }
 
 exports["abort-current-inline-script"] =
   makeInjector(abortCurrentInlineScript, wrapPropertyAccess, toRegExp,
@@ skipping 28 matching lines @@
 
       args[0] = url.href;
     }
 
     return fetch_.apply(this, args);
   };
 }
 
 exports["strip-fetch-query-parameter"] = makeInjector(stripFetchQueryParameter,
                                                       toRegExp, regexEscape);
-
-function hideIfContainsVisibleText(search, hideSelector, innerSelector = null)
-{
-  /**
-   * Determine if the text inside the element is visible.
-   * @param {Element} element the leaf element we are checking.
-   * @param {?CSSStyle} style the computed style of element.
-   * @returns {bool} whether the text is visible.
-   */
-  function isTextVisible(element, style)
-  {
-    if (!style)
-      style = window.getComputedStyle(element);
-
-    if (style.getPropertyValue("opacity") == "0")
-      return false;
-    if (style.getPropertyValue("font-size") == "0px")
-      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)
-  {
-    let style = window.getComputedStyle(element);
-    if (style.getPropertyValue("display") == "none")
-      return "";
-    let visibility = style.getPropertyValue("visibility");
-    if (visibility == "hidden" || visibility == "collapse")
-      return "";
-
-    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, style))
-            text += node.nodeValue;
-          break;
-      }
-    }
-    return text;
-  }
-
-  let re = toRegExp(search);
-
-  new MutationObserver(() =>
-  {
-    for (let element of document.querySelectorAll(hideSelector))
-    {
-      let inners =
-          innerSelector ? element.querySelectorAll(innerSelector) : [element];
-      for (let inner of inners)
-      {
-        let content = getVisibleContent(inner);
-        if (re.test(content))
-          hideElement(element);
-      }
-    }
-  })
-  .observe(document, {childList: true, characterData: true, subtree: true});
-}
-
-exports["hide-if-contains-visible-text"] =
-  makeInjector(hideIfContainsVisibleText, hideElement);