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

RESOLVED FIXED in Firefox 69

Status

defect
P3
normal
RESOLVED FIXED
3 months ago
14 days ago

People

(Reporter: bmiriam1230, Assigned: bmiriam1230)

Tracking

(Blocks 1 bug)

unspecified
Firefox 69
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox69 fixed)

Details

Attachments

(4 attachments, 1 obsolete attachment)

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)
Posted 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!

Posted 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 months 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.