Implement a tool to debug hiding filters including -abp-properties filters (and :has in the future)

[Lain_13]

Background

With introduction of -abp-properties filters it became complicated to figure out which elements on the page will be affected by the filter. Previously with default CSS hiding filters it was possible to open Page Inspector and simply search by selector to find elements which will be affected, but this doesn't work with -abp-properties and this won't work with upcoming :has() filters (until browsers will catch up and implement it natively).

What to change

Implement a tool which will highlight object on the page which will be hidden by entered hiding filter and let you quickly browse between these objects.
Also, these should be an option to apply filter to see how page will look with it without refreshing the page.
Also, there should be a way to see a list of selectors generated by -abp-properties filters since right now it's really hard to use them in conjunction with normal selectors like div[-abp-properties='something'].

Things to remember

Some sites implement methods to break functions injected by ABP and other blockers into a page to make it harder to make hiding/blocking filters there. For example I've seen a script which performed a query on the page by set of specific filters and removed everything it found. Everything injected by "Block element" option from ABP menu were removed by this script which effectively blocks usage of this option. So, anything injected into a page at least must not have any obvious patterns in the element names. In the best case only scripts and styles used to highlight elements should be injected and the rest of the interface must not be part of the page.

[Lain_13]

BTW, that issue with removal of ABP overlay is #4385.

[mapx]

issue related
https://issues.adblockplus.org/ticket/4179

[greiner]

Closing this ticket in favor of ​ui#608.