Gutter line number colors

[DPX-designer]

The objective of the issue linked below was to nominate Photon compliant colors for use as the debugger line numbers, both empty and standard.

firefox-devtools/ux#43

We now have a decision on these colors which are now ready to be implemented.

Here is a mockup of the final colors in action:

Dark Mode
Line number: Grey 40 #b1b1b3
Empty line number: Grey 50 #737373

Light Mode
Line number: Grey 50 #737373
Empty line number: Grey 40 #b1b1b3

[waqardm]

hey i'd be happy to do this. First issue, so may need some guidance :)

[darkwing]

Welcome @waqardm ! Let us know if you need help :)

[waqardm]

thank you @darkwing

[mangooose]

Hey, is anyone working on this issue?

[waqardm]

@mangooose yes, i am attempting it 🤞🏼

[darkwing]

With regard to changing the base line number color in light and dark mode, that's a change that takes place in MC:

https://searchfox.org/mozilla-central/source/devtools/client/themes/light-theme.css#231

@mcroud Do you know if we have permission to make this change for every devtool? I'm assuming so.

[darkwing]

Filed PR #7731 for empty line color, and patch for standard line colors in MC: https://bugzilla.mozilla.org/show_bug.cgi?id=1520341

[DPX-designer]

@darkwing Oh so whether we can apply these line number colors to the Style Editor gutter for example?
I would suggest that the appearance of line numbers should look consistent throughout other DevTools, otherwise it would be confusing for users to grasp different representations of what a "standard" line number is. It will also help highlight that empty line numbers are different and in which panels they occur.

Not sure in terms of permission, if you know what other tools this will affect I'd happily get their input!