Add support to hide-if-contains for hiding a different ancestor of the element containing the search string

[mjethani]

Background

The hide-if-contains snippet takes a CSS selector as its second argument. If an element that matches the selector contains the given search string, it hides the element. This sometimes is not enough, because the element to be hidden is in fact an ancestor of the element containing the search string.

For example:

<li>
  <span>Kool-Aid</span><span>Ad</span>
</li>

Here searching for the label "Ad" with the script hide-if-contains ad li doesn't work, even with regular expressions (#6847), because the text content is read out as "Kool-AidAd". The correct script for this would be hide-if-contains ad li 'li > span' where the third argument is the CSS selector to use while searching for the text.

What to change

Add a third argument called searchSelector to hide-if-contains, which should be a CSS selector that should be used to search for the text. Its value should default to the value of the selector argument.

Hints for testers

Test that both hide-if-contains and hide-if-shadow-contains work as described in #6809 and #6798 respectively (i.e. no regressions).

For this change, try the following test:

<!-- test.html -->
<div>
  Lorem ipsum dolor sit amet, consectetur
  adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.
</div>
<script src="script.js"></script>

/* script.js */
setTimeout(() =>
{       
  let ad = document.createElement("div");
  ad.id = Math.random().toString(36).substring(2);
  ad.innerHTML = "<div><span>Check this!</span><span class='label'>Ad</span></div>";
  document.body.appendChild(ad);
  
  let result = document.createElement("div");
  result.id = Math.random().toString(36).substring(2);
  result.innerHTML = "<div><span>The Adventures of Tom Sawyer</span></div>";
  document.body.appendChild(result);
},
500);

The filter #$#hide-if-contains Ad div[id] span.label should hide the "Check this!" ad and not the "The Adventures of Tom Sawyer" content.

[abpbot]

A commit referencing this issue has landed:
​Issue 6848 - Add searchSelector parameter to hide-if-contains snippet

[abpbot]

A commit referencing this issue has landed:
​Issue 6848 - Add searchSelector parameter to hide-if-contains snippet

[Ross]

Tested and working in Firefox so far.

[Ross]

Done. Tested and working. Original behaviour for hide-if-contains and hide-if-shadow-contains described in #6809 and #6798 still works as expected. Have not noticed any regressions so far.

ABP 3.3.0.2117
Chrome 68 / 62 / 49 / Windows 10
Firefox 61 / 60 (ESR) / 51 / Windows 10