Bug 148050 - Web Inspector: Make DOM node attribute changes highlighting less obnoxious
Summary: Web Inspector: Make DOM node attribute changes highlighting less obnoxious
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nikita Vasilyev
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2015-08-14 20:07 PDT by Nikita Vasilyev
Modified: 2015-08-26 03:22 PDT (History)
9 users (show)

See Also:


Attachments
Animated GIF with the patch applied (348.01 KB, image/gif)
2015-08-14 20:07 PDT, Nikita Vasilyev
no flags Details
Patch (1.54 KB, patch)
2015-08-14 20:20 PDT, Nikita Vasilyev
no flags Details | Formatted Diff | Diff
[Animated GIF] Current behavior (555.41 KB, image/gif)
2015-08-14 21:04 PDT, Nikita Vasilyev
no flags Details
[Video] Hover row color (1.35 MB, video/quicktime)
2015-08-15 18:23 PDT, Nikita Vasilyev
no flags Details
[Animated GIF] Light green (195.54 KB, image/gif)
2015-08-24 22:40 PDT, Nikita Vasilyev
no flags Details
[Patch] Light green (1.38 KB, patch)
2015-08-24 22:46 PDT, Nikita Vasilyev
no flags Details | Formatted Diff | Diff
[Animated GIF] Darker light green (147.87 KB, image/gif)
2015-08-25 22:44 PDT, Nikita Vasilyev
no flags Details
Patch (1.38 KB, patch)
2015-08-25 22:52 PDT, Nikita Vasilyev
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Nikita Vasilyev 2015-08-14 20:07:29 PDT
Created attachment 259076 [details]
Animated GIF with the patch applied

The current blue highlight color makes the text hardly readable.
Comment 1 Radar WebKit Bug Importer 2015-08-14 20:07:58 PDT
<rdar://problem/22297097>
Comment 2 Nikita Vasilyev 2015-08-14 20:20:32 PDT
Created attachment 259077 [details]
Patch
Comment 3 Timothy Hatcher 2015-08-14 20:50:06 PDT
My favorite color is yellow. But I'm not keen on using yellow for this. Can you show what it currently is using?
Comment 4 Nikita Vasilyev 2015-08-14 21:04:03 PDT
Created attachment 259079 [details]
[Animated GIF] Current behavior

Real world example — https://www.irccloud.com/. Attributes are less readable while  flashing.
Comment 5 Timothy Hatcher 2015-08-15 08:30:44 PDT
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.
Comment 6 Nikita Vasilyev 2015-08-15 18:03:00 PDT
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.
Comment 7 Nikita Vasilyev 2015-08-15 18:12:36 PDT
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.
Comment 8 Nikita Vasilyev 2015-08-15 18:23:27 PDT
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.
Comment 9 Devin Rousso 2015-08-17 16:53:29 PDT
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.
Comment 10 Nikita Vasilyev 2015-08-24 22:40:20 PDT
Created attachment 259825 [details]
[Animated GIF] Light green

Okay, how about light green?
Comment 11 Nikita Vasilyev 2015-08-24 22:46:56 PDT
Created attachment 259826 [details]
[Patch] Light green
Comment 12 Timothy Hatcher 2015-08-25 10:31:24 PDT
Do you think this is too light? It isn't that noticeable.
Comment 13 Nikita Vasilyev 2015-08-25 22:44:38 PDT
Created attachment 259929 [details]
[Animated GIF] Darker light green
Comment 14 Nikita Vasilyev 2015-08-25 22:52:19 PDT
Created attachment 259931 [details]
Patch

Increased the opacity by 0.1 to make it darker.
Comment 15 WebKit Commit Bot 2015-08-26 03:22:38 PDT
Comment on attachment 259931 [details]
Patch

Clearing flags on attachment: 259931

Committed r188963: <http://trac.webkit.org/changeset/188963>
Comment 16 WebKit Commit Bot 2015-08-26 03:22:43 PDT
All reviewed patches have been landed.  Closing bug.