After you canceled blocking an element there are still color marks of it

[passbrains]

Adapted from ​https://www.passbrains.com/dashboard/view-ticket.php?ticket_no=AOP-32

Environment

Mac OS X 10.8 Opera German
ABP version 1.8.3.1207

How to reproduce

1. Install ABP
2. Open for example ​http://www.dict.cc/?s=ausnahmen
3. Choose "Block an element"
4. Click through the site
5. Click "Cancel" in the bubble

Observed behaviour

It has still color marks of element blocking

Expected behaviour

The site will be displayed like it looked before.

[passbrains]

1 - 02 Sep 2014 09:48:53 posted by Timo Scherf
Hello Claudia,
could you please focus on the Opera browser and reload the page and not switch between Safari and Opera.
Greetings from Passbrains

2 - 04 Sep 2014 07:57:46 posted by Claudia Figura
A file was deleted: abp_op_block.swf

3 - 04 Sep 2014 12:58:22 posted by Sebastian Noack
I can not reproduce that behavior as described above. Also I can not watch the attached screencast. Please don't use flash, but a more portable format like webm, mpeg4, avi or Theora.

4 - 04 Sep 2014 13:10:43 posted by Claudia Figura
A file was deleted: abp_op_cancel.swf

5 - 04 Sep 2014 13:11:10 posted by Claudia Figura
Added a screencast in the right format. Sorry for that!

[sebastian]

Also reproducible on Chrome. Might be related to #1122.

[saroyanm]

I've looked through the issue and it's looks not related to #1122,
So far what I can reproduce, when you click cancel button in popup the Block Element functionality is being disabled on that page.
Also noticed that the style which is changed during hovering elements in Blocking Element mode enabled is the one what the page is using when onmouseover event is triggered on the row.
So it more looks like that When Block Element is enabled onmouseout event is not triggered on the html element.

Only one concern I have - in the video after canceling Block Element functionality mouse hovers the yellow elements and they were not changing their style to initial state while after clicking cancel button and hovering the elements the styles are changing to their initial states during my reproduction.

[sebastian]

The problem here is that our mouseout handler is called and restores the previous background color, after their mouseout handler already updated the background color.

I think the best solution would be to use shadow DOM if possible when highlighting elements. Of course this won't work for Safari, and in some scenarios like when the element cannot have a shadow root, or when the element has important inline styles.

[sebastian]

​https://hg.adblockplus.org/adblockpluschrome/rev/0885f1a018f7