Closed Bug 1550064 Opened 2 years ago Closed 2 years ago

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


(DevTools :: Debugger, defect, P3)



(firefox69 fixed)

Firefox 69
Tracking Status
firefox69 --- fixed


(Reporter: bmiriam1230, Assigned: bmiriam1230)


(Blocks 1 open bug)



(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
Improve debug line highlight visibility.
Assignee: nobody → bmiriam1230
Ever confirmed: true
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.