Bug 148050 – Web Inspector: Make DOM node attribute changes highlighting less obnoxious

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Nikita Vasilyev]

Created attachment 259076 [details]
Animated GIF with the patch applied

The current blue highlight color makes the text hardly readable.

[Radar WebKit Bug Importer]

<rdar://problem/22297097>

[Nikita Vasilyev]

Created attachment 259077 [details]
Patch

[Timothy Hatcher]

My favorite color is yellow. But I'm not keen on using yellow for this. Can you show what it currently is using?

[Nikita Vasilyev]

Created attachment 259079 [details]
[Animated GIF] Current behavior

Real world example — https://www.irccloud.com/. Attributes are less readable while  flashing.

[Timothy Hatcher]

I agree the blue is hard to read. But I don't think the bright yellow is much better. I think a light blue (like the hover row color) would work well. It does not need to be so in-your-face to notice it.

[Nikita Vasilyev]

I chose yellow because it has the highest luminance.

http://www.workwithcolor.com/color-luminance-2233.htm

For our case, out of all colors with the same saturation and lightness, yellow would produce the most readable text.

[Nikita Vasilyev]

Also, the red color we use for attributes, hsl(1, 79%, 42%), is fairly light. It doesn't give us too much flexibility with the background color — it's very easy to produce low contrast unreadable text.

[Nikita Vasilyev]

Created attachment 259112 [details]
[Video] Hover row color

(In reply to comment #5)
> I agree the blue is hard to read. But I don't think the bright yellow is
> much better. I think a light blue (like the hover row color) would work
> well. It does not need to be so in-your-face to notice it.

I think, now it isn't noticeable enough.

I had to use QuickTime to do the screen recording because LICEcap altered the colors too much.

[Devin Rousso]

I also think that attribute changes on the selected node should still show flashes.  It definitely needs a different color (blue on blue is just bad), but it should show that there is a change regardless of if the node is selected.

[Nikita Vasilyev]

Created attachment 259825 [details]
[Animated GIF] Light green

Okay, how about light green?

[Nikita Vasilyev]

Created attachment 259826 [details]
[Patch] Light green

[Timothy Hatcher]

Do you think this is too light? It isn't that noticeable.

[Nikita Vasilyev]

Created attachment 259929 [details]
[Animated GIF] Darker light green

[Nikita Vasilyev]

Created attachment 259931 [details]
Patch

Increased the opacity by 0.1 to make it darker.

[WebKit Commit Bot]

Comment on attachment 259931 [details]
Patch

Clearing flags on attachment: 259931

Committed r188963: <http://trac.webkit.org/changeset/188963>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.