Issue 6848 - Add searchSelector parameter to hide-if-contains snippet

lib/content/snippets.js

Index: lib/content/snippets.js
===================================================================
--- a/lib/content/snippets.js
+++ b/lib/content/snippets.js
@@ -92,17 +92,17 @@
  */
 function makeInjector(injectable, ...dependencies)
 {
   return (...args) => injectCode(stringifyFunctionCall(injectable, ...args),
                                  dependencies);
 }
 
 /**
- * Hides an HTML element by settings its <code>style</code> attribute to
+ * Hides an HTML element by setting its <code>style</code> attribute to
  * <code>display: none !important</code>.
  *
  * @param {HTMLElement} element The HTML element to hide.
  */
 function hideElement(element)
 {
   element.style.setProperty("display", "none", "important");
 
@@ -115,16 +115,39 @@
     {
       element.style.setProperty("display", "none", "important");
     }
   })
   .observe(element, {attributes: true, attributeFilter: ["style"]});
 }
 
 /**
+ * Hides an HTML element or one of its ancestors matching a CSS selector by
+ * setting its <code>style</code> attribute to
+ * <code>display: none !important</code>.
+ *
+ * @param {HTMLElement} element The HTML element or a descendant of the HTML
+ *   element to hide.
+ * @param {string} [selector] The CSS selector that the HTML element or one of
+ *   its ancestors must match for it to be hidden.
+ */
+function hideAncestor(element, selector = "*")
+{
+  do
+  {
+    if (element.matches(selector))

[hub, 2018/08/10 12:30:41]

Wouldn't https://developer.mozilla.org/en-US/docs/Web/API/Element/closest work
here?

[Manish Jethani, 2018/08/10 14:57:02]

Ah, you're right. Element.closest is perfect.

It's only supported from Edge 15 onwards but I'm not sure we have to worry about
that.

[hub, 2018/08/10 19:54:57]

We support EdgeHTML 16 and up if I read things correctly.

+    {
+      hideElement(element);
+      break;
+    }
+  }
+  while (element = element.parentElement);
+}
+
+/**
  * Observes changes to a DOM node using a <code>MutationObserver</code>.
  *
  * @param {Node} target The DOM node to observe for changes.
  * @param {MutationObserverInit?} [options] Options that describe what DOM
  *   mutations should be reported to the callback.
  * @param {function} callback A function that will be called on each DOM
  *   mutation, taking a <code>MutationRecord</code> as its parameter.
  */
@@ -211,29 +234,17 @@
     // shadow has been removed.
     if (!host || !root)
       return;
 
     // If the shadow contains the given text, check if the host or one of its
     // ancestors matches the selector; if a matching element is found, hide
     // it.
     if (root.textContent.includes(search))
-    {
-      let element = host;
-
-      do
-      {
-        if (element.matches(selector))
-        {
-          hideElement(element);
-          break;
-        }
-      }
-      while (element = element.parentElement);
-    }
+      hideAncestor(host, selector);
   }
 
   Object.defineProperty(Element.prototype, "attachShadow", {
     value(...args)
     {
       // Create the shadow root first. It doesn't matter if it's a closed
       // shadow root, we keep the reference in a weak map.
       let root = originalAttachShadow.apply(this, args);
@@ -253,34 +264,40 @@
       shadows.set(observer, {host: this, root});
 
       return root;
     }
   });
 }
 
 exports["hide-if-shadow-contains"] = makeInjector(hideIfShadowContains,
-                                                  hideElement);
+                                                  hideAncestor, hideElement);
 
 /**
- * Hides any HTML element if the text content of the element contains a given
- * string.
+ * 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 every HTML element.
+ * @param {string} search The string to look for in HTML elements.
  * @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 hideIfContains(search, selector = "*")
+function hideIfContains(search, selector = "*", searchSelector = null)
 {
+  if (searchSelector == null)
+    searchSelector = selector;
+
   new MutationObserver(() =>
   {
-    for (let element of document.querySelectorAll(selector))
+    for (let element of document.querySelectorAll(searchSelector))
     {
       if (element.textContent.includes(search))
-        hideElement(element);
+        hideAncestor(element, selector);
     }
   })
   .observe(document, {childList: true, characterData: true, subtree: true});
 }
 
 exports["hide-if-contains"] = hideIfContains;
 
 /**