Debugging functionality missing in conditional hiding snippets

Background

Conditional hiding snippets lack the possibility of debugging. After applying a filter based on such snippets, it is impossible to visualize the elements affected by it.

What to change

The hideElement function in lib/content/snippets.js is used for element hiding by all the conditional hiding snippets. By using the debug flag available in snippets logic, we can decide on a special behavior when on debug mode. For example, highlighting and logging the affected elements would be useful for filter developers to see the impact of a hiding snippet.

The highlight style applied on debugging can be moved outside adblockpluscore, alongside the ones defined for basic/emulation hiding filters.

Integration notes

In eyeo/adblockplus/adblockpluschrome> in lib/contentFiltering.js, make sure debugCSSProperties is set in the second argument to compileScript() if Prefs.elemhide_debug is true and not set otherwise.

Hint for testers

As of now there is no UI to enable element hiding debug mode, but you can do so by running following code from any extension page (e.g. the options page):

browser.runtime.sendMessage({type: "prefs.set", key: "elemhide_debug", value: true});

Elements targeted by conditional hiding snippets should not be hidden but highlighted in a shade of cyan with red dashed border with this preference set.

Adding the debug flag on conditional hiding snippet filters will not affect the style of the targeted element. In other words, adding the debug will enable just logging not highlighting. Each hidden element should be logged once in the Developer Console of the page.

Test any hiding snippets but specifically do not miss hide-if-shadow-contains (see https://gitlab.com/eyeo/adblockplus/adblockpluscore/-/merge_requests/311#note_326591401).