Bug 148050

Summary:

Web Inspector: Make DOM node attribute changes highlighting less obnoxious

Product:

WebKit

Reporter:

Nikita Vasilyev <nvasilyev>

Component:

Web Inspector

Assignee:

Nikita Vasilyev <nvasilyev>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

bburg, commit-queue, graouts, hi, joepeck, mattbaker, nvasilyev, timothy, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

528+ (Nightly build)

Hardware:

All

OS:

All

Attachments:

Description	Flags
Animated GIF with the patch applied	none
Patch	none
[Animated GIF] Current behavior	none
[Video] Hover row color	none
[Animated GIF] Light green	none
[Patch] Light green	none
[Animated GIF] Darker light green	none
Patch	none

Nikita Vasilyev

Reported 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.

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
Show Obsolete (2) View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2015-08-14 20:07:58 PDT

<rdar://problem/22297097>

Nikita Vasilyev

Comment 2 2015-08-14 20:20:32 PDT

Created attachment 259077 [details] Patch

Timothy Hatcher

Comment 3 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?

Nikita Vasilyev

Comment 4 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.

Timothy Hatcher

Comment 5 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.

Nikita Vasilyev

Comment 6 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.

Nikita Vasilyev

Comment 7 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.

Nikita Vasilyev

Comment 8 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.

Devin Rousso

Comment 9 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.

Nikita Vasilyev

Comment 10 2015-08-24 22:40:20 PDT

Created attachment 259825 [details] [Animated GIF] Light green Okay, how about light green?

Nikita Vasilyev

Comment 11 2015-08-24 22:46:56 PDT

Created attachment 259826 [details] [Patch] Light green

Timothy Hatcher

Comment 12 2015-08-25 10:31:24 PDT

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

Nikita Vasilyev

Comment 13 2015-08-25 22:44:38 PDT

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

Nikita Vasilyev

Comment 14 2015-08-25 22:52:19 PDT

Created attachment 259931 [details] Patch Increased the opacity by 0.1 to make it darker.

WebKit Commit Bot

Comment 15 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>

WebKit Commit Bot

Comment 16 2015-08-26 03:22:43 PDT

All reviewed patches have been landed. Closing bug.

Note You need to log in before you can comment on or make changes to this bug.