Issue 6848 - Add searchSelector parameter to hide-if-contains 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 79 matching lines @@
  *
  * @returns {function} The generated injector.
  */
 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");
 
   // Listen for changes to the style property and if our values are unset
   // then reset them.
   new MutationObserver(() =>
   {
     if (element.style.getPropertyValue("display") != "none" ||
         element.style.getPropertyPriority("display") != "important")
     {
       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.
  */
 function observe(target, options, callback)
 {
@@ skipping 76 matching lines @@
 
     // Since it's a weak map, it's possible that either the element or its
     // 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);
 
       // Listen for relevant DOM mutations in the shadow.
       let observer = new MutationObserver(observeShadow);
       observer.observe(root, {
         childList: true,
         characterData: true,
         subtree: true
       });
 
       // Keep references to the shadow root and its host in a weak map. If
       // either the shadow is detached or the host itself is removed from the
       // DOM, the mutation observer too will be freed eventually and the entry
       // will be removed.
       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;
 
 /**
  * Readds to the document any removed HTML elements that match a CSS selector.
  *
@@ skipping 17 matching lines @@
           // We don't have the location of the element in its former parent,
           // but it's usually OK to just add it at the end.
           mutation.target.appendChild(node);
         }
       }
     }
   });
 }
 
 exports.readd = readd;