Bug 146956 - Web Inspector: Change syntax highlighting color for regular expressions to make them more readable
Summary: Web Inspector: Change syntax highlighting color for regular expressions to ma...
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-07-14 20:45 PDT by Nikita Vasilyev
Modified: 2015-07-22 08:45 PDT (History)
9 users (show)

See Also:


Attachments
[Animated GIF] Before/after (114.43 KB, image/gif)
2015-07-14 20:45 PDT, Nikita Vasilyev
no flags Details
Patch (2.24 KB, patch)
2015-07-14 20:51 PDT, Nikita Vasilyev
no flags Details | Formatted Diff | Diff
Patch (2.32 KB, patch)
2015-07-22 02:45 PDT, Nikita Vasilyev
no flags Details | Formatted Diff | Diff
[Animated GIF] Before/after (@1x) (43.05 KB, image/gif)
2015-07-22 02:45 PDT, Nikita Vasilyev
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Nikita Vasilyev 2015-07-14 20:45:53 PDT
Created attachment 256821 [details]
[Animated GIF] Before/after

Current color is too bright and doesn't produce enough contrast with white background. 

The following tool uses luminance-based contrast formula defined by Web Content Accessibility Guidelines 2.0 (http://www.w3.org/TR/WCAG20/#contrast-ratiodef)

Current color: http://jxnblk.com/colorable/demos/text/?background=%23FFFFFF&foreground=%23ff5800
Color in the patch: http://jxnblk.com/colorable/demos/text/?background=%23FFFFFF&foreground=%23D81878
Comment 1 Radar WebKit Bug Importer 2015-07-14 20:46:27 PDT
<rdar://problem/21828730>
Comment 2 Nikita Vasilyev 2015-07-14 20:51:44 PDT
Created attachment 256822 [details]
Patch
Comment 3 Brian Burg 2015-07-16 09:41:09 PDT
I am a concerned that with this change, regex colors look very similar to string literals. Anyone else have thoughts or suggestions?
Comment 4 Nikita Vasilyev 2015-07-17 09:41:44 PDT
That was actually intentional.

I was more concerned that it would look too similar to the color of keywords (var, function, etc.), HTML tag names, and object property names in the console. Those are all the exact same shade of purple.
Comment 5 Nikita Vasilyev 2015-07-17 09:44:55 PDT
(In reply to comment #4)
> That was actually intentional.
> 
> I was more concerned that it would look too similar to the color of keywords
> (var, function, etc.), HTML tag names, and object property names in the
> console. Those are all the exact same shade of purple.

Correction: object property names in the console are darker than keywords
and HTML tag names.
Comment 6 Timothy Hatcher 2015-07-21 18:56:27 PDT
I am not sure the new color is great. Is there a better orange color we could use that still has better contrast?
Comment 7 Nikita Vasilyev 2015-07-22 02:45:10 PDT
Created attachment 257255 [details]
Patch

Same hue, decreased lightness.
Comment 8 Nikita Vasilyev 2015-07-22 02:45:58 PDT
Created attachment 257256 [details]
[Animated GIF] Before/after (@1x)
Comment 9 WebKit Commit Bot 2015-07-22 08:45:24 PDT
Comment on attachment 257255 [details]
Patch

Clearing flags on attachment: 257255

Committed r187158: <http://trac.webkit.org/changeset/187158>
Comment 10 WebKit Commit Bot 2015-07-22 08:45:28 PDT
All reviewed patches have been landed.  Closing bug.