Skip to content

Improve `hideIfContainsVisibleText` Snippet

Background

Currently, the hideIfContainsVisibleText snippet suffers a couple of issues that make it less portable/useful/optimal:

  • sub-optimal performance due recursive check inside-out with the closest visibility. The only visibility check that makes sense with the closest container is the first one, because every other sub-node would otherwise recursively crawl up to the parent node again and again, making the result unnecessarily slower, as the top most closest element is the only one that matters, and no invisible nodes should be ever considered within the loop, so that keep checking up to the parent per each inner node makes no sense.
  • pseudo elements are not considered in the equation, so that content could be visible on the page but neither textContent nor innerText would reflect such content in the searched string, making it less powerful.

What to change

  • do not crawl up within nested nodes. Verify the closest node is visible only for the top-most element, and avoid parsing nodes that are invisible while traversing the tree. This is one linear crawling against current exponential approach.
  • involve visible pseudo elements in the equation, prefixing the text with the possible ::before and suffixing it via ::after CSS content directive.
  • since this snippet might need debug ability, expose details when the debug flag is used.

What to test

  • The snippet should work exactly as before but it should also consider pseudo elements with content.
  • In debug the snippet should display the content in the console.
Edited by Hubert Figuière