1520866 - Improve colors of file name and line number in dark theme

Status: RESOLVED FIXED

(DevTools :: Console, enhancement, P2)

Description

[Florens Verschelde :fvsch]

Attachment: console-dark-current-source-color.png

In the light theme, we are using two different shades of blue for the source file name and for the line number; file name is more contrasted, and line number is a bit less contrasted and a bit more vibrant.

In the dark theme, we're using #6b89ff for both, so we lose the small differentiation between file and line number.

We also have some contrast issues with the different backgrounds:

• default background: 4.52:1 (Pass)
• error background: 3.78:1 (Fail)
• warning background: 3.66:1 (Fail)

If we make the source colors a bit more contrasted, we can make it more readable in all those contexts.

I tried this change in devtools/client/themes/components-frame.css:

.theme-dark {
+  --frame-link-line-color: hsl(210, 40%, 60%);
+  --frame-link-source: var(--blue-40);
-  --frame-link-source: #6B89FF;
}

See the "Dark, Proposed" option in the attached screenshot.

I also tried reusing the --object-color which is a lighter and less redish blue ("Dark, Alternative").

Finally, I thought that since the Console has already a lot of colors and the Dark theme especially has a lot of vibrant colors (including the error background to some extent), why not try grayscale? So I included a test using Grey 50 and Grey 40.

Using grayscale looks tempting because it makes us consistent with Inspector>Rules (and with line numbers in source views). We also tend to use blue for "active" states of buttons, so not having too much blue elsewhere helps IMO.

Comment 1

[Florens Verschelde :fvsch]

Feedback from Slack:

Victoria:

I like the Gray 40/50 :)

Nicolas:

I'm not sure here. The grey feels like the location get less noticable, almost like if the link was disabled in some way ?

Matt:

I'm split! I think all three suggestions have merit over the current colour. The current actually looks like there is a blend mode applied to the blue filename text where it interacts with the Warning and Error backgrounds.
The gray suggestion uses explicit Photon colors and as mentioned in the bug has parity with the Rules pane. On the other hand I find the Dark Proposed (which uses a Photon color too) has better contrast for line numbers. I personally find myself clicking these links more frequently than that of CSS (again, different for everybody!). In my head, these links are the action buttons for logs, so I'm A-OK with them being blue.
So Gray or Dark Proposed I feel would be a step forward.

Comment 2

[Florens Verschelde :fvsch]

Focusing on the "Dark, Proposed" option, here are the contrast ratios for the main and line number colors:

• Normal background: 5.02 & 4.53
• Error background: 4.24 & 3.82
• Warning background: 4.09 & 3.68

We're still failing the 4.5 contrast for errors and warnings, but not as much.
So that could be a decent improvement, especially if those colors seem to fit in better than the current one.

Comment 3

[Florens Verschelde :fvsch]

Another option is to use Blue 40 (like the file name in "Dark, Proposed") for both parts, so it would be:

.theme-dark {
+  --frame-link-line-color: inherit;
+  --frame-link-source: var(--blue-40);
-  --frame-link-source: #6B89FF;
}

Nicolas, do you have a preference between the different "blue" options?

• Blue 40 + new washed out color for line number ("Dark, Proposed")
• Blue 30 + new washed out color for line number ("Dark, Alternative")
• Blue 40 only
• Blue 30 only

(Note: Blue 30 is the lighter blue that we use for --object-color and for the status string of network requests in the console.)

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Thanks Florens!
"Dark, Proposed" would be my favorite. The 2 colors (script + numbers) help the location to stand out, which is also why I prefer this one over object-color too.

Comment 5

[Florens Verschelde :fvsch]

Let's go with that for now. We can always tweak later (and maybe harmonize with request status color too).

Comment 6

[Florens Verschelde :fvsch]

Attachment: Bug 1520866 - Tweak Console source location colors (dark theme); r=nchevobbe

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4dff7e13943f
Tweak Console source location colors (dark theme); r=nchevobbe

Comment 8

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/4dff7e13943f