1550064 - Debug line color is faint and needs more contrast for better visibility.

Status: RESOLVED FIXED

(DevTools :: Debugger, defect, P3)

Description

[Miriam]

Attachment: f_contrast_examples.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36

Steps to reproduce:

Trigger breakpoint to render the debug line.

The highlighting is difficult to see because there is little contrast between the transparent background and the highlighting color.

I have attached a screenshot of better contrast just as an example, but there are many ways we could improve contrast with different color schemes.

Comment 1

[David Walsh :davidwalsh]

@Victoria: Do you have ideas for contrast improvement? Windows seems even lighter than Mac.

Comment 2

[Victoria Wang [:victoria]]

Attachment: image.png

Thanks for this report and the screenshot! A deeper highlight is a good start, but would make it harder to read the text. We could do white text on blue background, like the Inspector selected row style, but it's probably not worth losing the syntax highlighting.

What about making the underline/upperline darker (Blue 50) right where the highlighted part is? Attached a rough mockup of how this could look.

Comment 3

[Miriam]

Attachment: Bug 1550064 - Improve debug line highlight visibility.

Implements Victoria's recommendation for improving debug line highlight visibility.

Comment 4

[Miriam]

Attachment: Bug 1550064 - Improve debug line highlight visibility.

This implements Victoria's suggestion for improving highlight line visibility.

Comment 5

[Miriam]

I have created a patch so everyone can demo the proposed changes. Thanks Victoria for helping!

Comment 6

[Jason Laster [:jlast]]

Attachment: debug line.png

Here is a slightly higher fidelity mockup with a couple of variants (original, inset borders, and flush borders).

I'm a fan of flush 2px borders because that is identical with the debug line and just adds emphasis without affecting the layout.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5b2d94daeeaf
Improve debug line highlight visibility.

Comment 8

[Stefan Hindli [:stefan_hindli]]

https://hg.mozilla.org/mozilla-central/rev/5b2d94daeeaf

Comment 9

[Victoria Wang [:victoria]]

Flush 2px looks good to me! We can revisit this if it's still too subtle.