Empty lines and line number appearance

[DPX-designer]

Empty lines, lines which one can't add a breakpoint, should have a visually distintive line number to those which can receive a breakpoint.

The inital mockup presented three variants. A best-match Photon swap (A), an effort to increase contrast and accessibility (B) and an effort to increase the distinction between empty and non-empty lines (C):

From this iteration A and B receieved the most feedback, the general consensus was that all line numbers (empty or not) should seek decent contrast from the background color. The light theme struggled with this more so than the dark theme.

Another visual was produced to provide some alternatives for the light theme:

Comments were made that the further the line numbers reached an acceptable contrast from the background, the less contrast was seen between the empty and non-empty line numbers.

Using declared Photon colors would be favourable so an additional mockup was produced using best fit Photon colors from the design system docs:

Observations were made that increasing the visiblity of the empty line numbers reduces the contrast between the empty and non-empty line numbers.

[fvsch]

To sum up, my preference would be:

• Light: Grey 60 (contrast 8.8) / Grey 45 (contrast 5.6)
• Dark: Grey 40 (contrast 8.0) / Grey 50 (contrast 3.6)

That's in line with our overall direction of having the light theme more contrasted and the dark theme contrasts be a bit more subtle.

Blake also had doubts that the color/contrast difference is working for users as a hint that some lines are breakpoint opportunities and others are not. (I tend to agree, especially for people who are new to Debugger-like tools. But that's a broader issue that is probably beyond those visual changes.)

[violasong]

I'll defer to you all on this, but just wanted to record my reasons for preferring line numbers that are no darker than 50 in light mode :D

• the 60 seems odd to me because it's darker than the gray syntax color color in the code which should have more prominence. (Maybe the future path is to darken the syntax colors)
• while the 40 doesn't meet AA requirements, it's there to indicate 'empty/inactive' lines so I don't feel it needs high legibility
• I noticed Chrome and Xcode just allow for clicking on an empty line to create a breakpoint (for the next line) - I assume idea was discarded?

[yzen]

Hi folks, @mcroud suggested I chime in.

As Victoria mentioned, for disabled (inactive) rows colour contrast requirement is not necessary. Even the spec mentions it: "Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement." So in this case it's probably best to have the best range between interactive and non interactive rows - that contrast is more meaningful.

My main concern is that inactive/interactive rows are differentiated via colour only. This way of conveying information via colour only is considered inaccessible. I wonder if we can think of a way to display this distinction with colour + something else?

[digitarald]

I noticed Chrome and Xcode just allow for clicking on an empty line to create a breakpoint (for the next line) - I assume idea was discarded?

Sliding breakpoints confused a lot of people. When disabled line styling was removed for a while, users wanted it back.

[violasong]

are part of a picture that contains significant other visual content

Ooo, I didn't realize the spec had accommodations for text in ✨Art✨ :D

I wonder if we can think of a way to display this distinction with colour + something else?

Ah, nothing comes immediately to mind, but seems like the inactive state of the line of code is the main indicator. Maybe we should move forward with just the colors for now, and try to improve it later?

Sliding breakpoints confused a lot of people

Ah, didn't know this. It seems elegant to me to just allow inexact clicks

[DPX-designer]

Taking the feedback from this thread and Slack, there are a few patterns we can see:

• Contrast between line numbers over contrast between empty line numbers and backgrounds.
• Genuine Photon colors over '-5' colors.

With that, I keep returning to the following pair:

The new Dark 40/50 appears contrasty and uses proper Photon colors (unlike before). When these numbers are swapped we then get Light 50/40 which was the original A, in light of yzen's comment there may not be the accessiblity concern originally thought while providing contrast between numbers which seemed more apparent then when using darker colors.

I wonder if we can think of a way to display this distinction with colour + something else?

Absolutely! It's something that deserves a bit of divergent thought and I will acknowledge that this issue is titled "appearance" not just color. I'm going to echo Victoria's comment though and suggest that as we're in the process of converging on color we should stick with that for now.