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 102 matching lines @@
     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))
-      hideAncestor(host, selector);
+    {
+      let closest = host.closest(selector);
+      if (closest)
+        hideElement(closest);
+    }
   }
 
   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,
-                                                  hideAncestor, hideElement);
+                                                  hideElement);
 
 /**
  * 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.
  * @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 = "*", searchSelector = null)
 {
   if (searchSelector == null)
     searchSelector = selector;
 
   new MutationObserver(() =>
   {
     for (let element of document.querySelectorAll(searchSelector))
     {
       if (element.textContent.includes(search))
-        hideAncestor(element, selector);
+      {
+        let closest = element.closest(selector);
+        if (closest)
+          hideElement(closest);
+      }
     }
   })
   .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;