Bug 146956

Summary:

Web Inspector: Change syntax highlighting color for regular expressions to make them more readable

Product:

WebKit

Reporter:

Nikita Vasilyev <nvasilyev>

Component:

Web Inspector

Assignee:

Nikita Vasilyev <nvasilyev>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

burg, commit-queue, graouts, joepeck, jonowells, mattbaker, nvasilyev, timothy, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

528+ (Nightly build)

Hardware:

All

OS:

All

Attachments:

Description	Flags
[Animated GIF] Before/after	none
Patch	none
Patch	none
[Animated GIF] Before/after (@1x)	none

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.