| 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: | P2 | Keywords: | InRadar | ||||||||||||||||||
| Version: | 528+ (Nightly build) | ||||||||||||||||||||
| Hardware: | All | ||||||||||||||||||||
| OS: | All | ||||||||||||||||||||
| Attachments: |
|
||||||||||||||||||||
Created attachment 259077 [details]
Patch
My favorite color is yellow. But I'm not keen on using yellow for this. Can you show what it currently is using? Created attachment 259079 [details] [Animated GIF] Current behavior Real world example — https://www.irccloud.com/. Attributes are less readable while flashing. 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 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. 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. 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. 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. Created attachment 259825 [details]
[Animated GIF] Light green
Okay, how about light green?
Created attachment 259826 [details]
[Patch] Light green
Do you think this is too light? It isn't that noticeable. Created attachment 259929 [details]
[Animated GIF] Darker light green
Created attachment 259931 [details]
Patch
Increased the opacity by 0.1 to make it darker.
Comment on attachment 259931 [details] Patch Clearing flags on attachment: 259931 Committed r188963: <http://trac.webkit.org/changeset/188963> All reviewed patches have been landed. Closing bug. |
Created attachment 259076 [details] Animated GIF with the patch applied The current blue highlight color makes the text hardly readable.