Element picker normalize style attrib

[krystian3w]

Prerequisites

• I verified that this is not a filter issue
  • Filter issues MUST be reported at filter issue tracker
• This is not a support issue or a question
  • Support issues and questions are handled at /r/uBlockOrigin
• I performed a cursory search of the issue tracker to avoid opening a duplicate issue
  • Your issue may already be reported.
• I tried to reproduce the issue when...
  • uBlock Origin is the only extension
  • uBlock Origin with default lists/settings
  • using a new, unmodified browser profile
• I am running the latest version of uBlock Origin
• I checked the documentation to understand that the issue I report is not a normal behavior

Description

uBO change system colors on site form: style="background:#1e2a4b;"

to:

style="background: rgb(30, 42, 75) none repeat scroll 0% 0%;"

with preview mode.

A specific URL where the issue occurs

http://www.siemianowice.pl/

Steps to Reproduce

1. Open site www.siemianowice.pl

2. try block top dark blue banner by:

   ##div[style^="background:#1e2a4b;"]

3. activate and deactivate preview mode

4. close element picker

5. again try block banner by:

   ##div[style^="background:#1e2a4b;"]

6. filter no longer works without refresh page.

Expected behavior:

no longer reformate CSS color attrib style in tag.

Actual behavior:

still reformate CSS color attrib style in tag.

Your environment

• uBlock Origin version: 1.16.8
• Browser Name and version: Firefox 66.0.3
• Operating System and version: Windows 10

[gorhill]

uBO adds display: none !important; when previewing, and this causes Firefox to normalize the style attribute such that it no longer literally matches the original value.

A possible solution is for the picker to use a randomly generated attribute for preview purpose and avoid messing with the original style attribute.

[gwarser]

Picker preview on/off changes style attribute on previewed element from
style="background:#1e2a4b;height:96px;overflow:hidden;font-size:11px;line-height:1.3em;font-family:arial"
to
style="background: rgb(30, 42, 75) none repeat scroll 0% 0%; height: 96px; overflow: hidden; font-size: 11px; line-height: 1.3em; font-family: arial;"

[krystian3w]

Also I can use slower has / has-text (milliseconds jumping and blinking site in worse case).