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.

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

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.

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!

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.

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

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