Block element tool highlighting is broken by certain element hiding filters

[xqwztis]

Environment

Chrome 54, Adblock Plus 1.12.4

No filter subscriptions at all, only this filter:

##div[class^="_"][style*="absolute"][style*="position"][style*="z-index"]

How to reproduce

1. Browse to ​https://reddit.com (or any other website)
2. Click the Adblock Plus icon and then "Block element".
3. Roll the cursor over the page to select an element to block.

Observed behaviour

No elements are highlighted as the mouse passes over them.

Expected behaviour

Blockable elements should be highlighted yellow.

[xqwztis]

Environment

Extensions: 13

• TransOver: ​https://chrome.google.com/webstore/detail/aggiiclaiamajehmlfpkjmlbadmkledi
• Adblock Plus: ​https://chrome.google.com/webstore/detail/cfhdojbkjhnklbpkdaibdccddilifddb
• Share Extensions: ​https://chrome.google.com/webstore/detail/chdafcbnfkfenoeejpaeenpdamhmalhe
• Search by Image (by Google): ​https://chrome.google.com/webstore/detail/dajedkncpodkggklbegccjpmnglmnflm
• Session Buddy: ​https://chrome.google.com/webstore/detail/edacconmaakjimmfgnblocblbcdcpbko
• Модуль проверки ссылок: ​https://chrome.google.com/webstore/detail/fipcbkgepjlnemlkgialpomkajcpneop
• Yandex Music Fisher: ​https://chrome.google.com/webstore/detail/gkdpmbjlfgjbnleinnojgpgoljaokbni
• Unlimited Free VPN - Hola: ​https://chrome.google.com/webstore/detail/gkojfkhlekighikafcpjkiklfbnlmeio
• Wizmage Image Blocker: ​https://chrome.google.com/webstore/detail/ifoggbfaoakkojipahnplnbfnhhhnmlp
• Bookmark Checker: ​https://chrome.google.com/webstore/detail/lnboppjpcdnckcklbmjmdahfkpmgglec
• Ghostery: ​https://chrome.google.com/webstore/detail/mlomiejdfkolichcflejclcbmpeaniij
• Modern New Tab Page: ​https://chrome.google.com/webstore/detail/ogllliimbhgmclkgjldeffhjbhaenapo
• Элементы Яндекса: Погода: ​https://chrome.google.com/webstore/detail/omehaopbmkbpcpbgldgooblpgehpldfl
• Application Launcher for Drive (by Google): ​https://chrome.google.com/webstore/detail/lmjegmlicamnimmfhcmpkclmigmmcbeh

Apps: 5

• Документы Google: ​https://chrome.google.com/webstore/detail/aohghmighlieiainnegkcijnfilokake
• Диск Google: ​https://chrome.google.com/webstore/detail/apdfllckaahabafndbhieahigkjlhalf
• YouTube: ​https://chrome.google.com/webstore/detail/blpcfgokakmgnkcojhhkbfbldkacnbeo
• Google Search: ​https://chrome.google.com/webstore/detail/coobgpohoikkiipiblmjeljniedjpjpf
• Gmail: ​https://chrome.google.com/webstore/detail/pjkljhegncpnkpknbcohdijeoejaedia

[mapx]

well, all this strange behaviour is due to this filter in ruadlist:

##div[class^="_"][style*="absolute"][style*="position"][style*="z-index"]

whitelisting it all is ok.

The question is: how could a hiding filter provoke such weird behaviour ?

[mapx]

see also
​https://adblockplus.org/forum/viewtopic.php?f=14&t=49790

[dimisa]

This commit was to solve the problem:
​https://hg.adblockplus.org/ruadlist/rev/278e26786745#l1.15

[kzar]

Can also reproduce this on Linux so seems unrelated to operating system.

[kzar]

The filter composer highlights elements by creating an overlay on top of them which is translucent yellow / red. The troublesome filter was simply hiding those elements!

Turns out our code had a typo, it was giving the overlay elements the style of display: inline-box instead of display: inline-block, but I also needed to add !important in order to fix this problem.

(What made this a little trickier to debug was that a code comment was out of date and the code was a little confusing. (We used to sometimes highlight elements by adding styles to them, instead of always using overlays. But that is no longer the case.) I added ​another review to at least improve the comments.)

[abpbot]

A commit referencing this issue has landed:
​Issue 4603 - Prevent element hiding filters hiding composer overlays

[mapx]

well, the solution is unfortunately based on the inability of ABP for chrome to hide the elements with style's !important keyword.

if I use Lain's userscript (in tampermonkey) "it's not important" the issue is still not fixed.
​https://greasyfork.org/en/scripts/14720-it-s-not-important

This userscript is used exactly to fight the increasingly large number of sites using the !important trick.

[Lain_13]

I'd actually recommend to give an element a random string as an ID and operate it through a STYLE element. This way it will have only an ID and will never be hidden by complex style-based filters.
Please, don't use static prefixes or suffixes since some sites attempt to exploit it in order to break user's ability to hide ads on their page in an easy way.

[kzar]

Well I considered using the random ID / class approach, but that would add quite a bit of complexity for almost no gain. The case of element hiding filters matching our overlays is already rare enough, the combination of that with the use of Lain's userscript is even rarer.

At some point in the future it would be nice to tidy up some of the block element code further, perhaps then we could improve this too, but in the mean time I think the !important workaround is good enough, sorry.

[Ross]

Fixed. Element hiding is improved compared to 1.12.4.

ABP 1.12.4.1739
Chrome 49 / 56 / Windows 10
Chrome 56 / OS X 10.12
Chrome 56 / Ubuntu 16.04
Opera 37 / 41 / Windows 7
Safari 10 / OS X 10.12