Closed Bug 1550064 Opened 2 years ago Closed 2 years ago

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

Categories

(DevTools :: Debugger, defect, P3)

defect

Tracking

(firefox69 fixed)

RESOLVED FIXED
Firefox 69
Tracking Status
firefox69 --- fixed

People

(Reporter: bmiriam1230, Assigned: bmiriam1230)

References

(Blocks 1 open bug)

Details

Attachments

(4 files, 1 obsolete file)

Attached image 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.

Priority: -- → P3

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

Flags: needinfo?(victoria)
Attached image 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.

Flags: needinfo?(victoria)

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

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

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

Attached image 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.

Pushed by jlaster@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/5b2d94daeeaf
Improve debug line highlight visibility.
Assignee: nobody → bmiriam1230
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 69

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

Attachment #9071005 - Attachment is obsolete: true
Blocks: 1565711
Blocks: 1565713
No longer blocks: 1565711
No longer blocks: 1565713
You need to log in before you can comment on or make changes to this bug.