1555570 - Low-contrast console color for strings

Status: RESOLVED FIXED

(DevTools :: Console, defect, P3)

Description

[juandesouza7]

Attachment: Screenshot.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0

Steps to reproduce:

Hi, I'm using Firefox Developer Edition. I'd like to suggest to change the color of the console(F12 - Console) to a darker shade of grey. When we are writing in the console, the color of the background is black, and while it's black it is good to read. But when we hit enter, the background turns to a grey shade, that becomes a little difficult to read. It's not a problem when we are going to use the console for some minutes, but for someone like me, who spends the whole day in the console, it becomes to be annoying. So I suggest that you use a darker shade of grey in the background of the Console tab, so we can read a little better.

Comment 1

[juandesouza7]

Attachment: Screenshot-1.png

Comment 2

[:Harald Kirschner :digitarald]

Attachment: a11y check

Contrast-wise it is within the limits, but I can totally understand that the darkish blue on light gray causes contrast issues with this small font.

:victoria, I thought we have a bug about improving contrast for dark mode; or should we file a meta to collect this feedback?

Comment 3

[juandesouza7]

Attachment: Screenshot-2.png

Not only the light blue gets difficult to read with the light grey background. All the colors get difficult to read with it, as shown in this image. It's understandable that the purpose was to make clear the spaces of the previous code with its output, and new code being entered. But I think that to enlighten the background to that tone of grey is too light. I recommend to leave that background black, or change only a little, to a very dark grey, and not a light one.

Comment 4

[Victoria Wang [:victoria]]

Attachment: #232327 background

Hi juandesouza7, thanks for filing this bug! I see what you mean. I was originally planning to brighten up the two purple text colors as I think they're too dim even against the black. But changing the gray background would be fine as well, and it would be a good first step. The reason why it's that particular color ("Gray 80") is to match the main Firefox's dark theme, but it's worth it to diverge for better usability.

I just tested it with a color between Gray 80 and 90 - #232327 - and it does look quite a bit more contrasting (with a 4.96 contrast ratio) while still being separate enough from Gray 90.

Going to needinfo Florens to see what they think. (We might want to darken the message borders a bit to match.) It'll be nice to have this background color changed for the other panels as well.

Comment 5

[Florens Verschelde :fvsch]

Current background colors in the dark theme look like:

--theme-body-background: var(--grey-80); /* #2a2a2e */
--theme-sidebar-background: var(--grey-85); /* #1b1b1d */
--theme-tab-toolbar-background: var(--grey-90); /* #0c0c0d */
--theme-toolbar-background: var(--grey-85); /* #1b1b1d */

And the border color in Console uses the main border color (in the dark theme; we tweaked it in the light theme only):

--theme-splitter-color: #3c3c3d;

We can change --theme-body-background to #232327 and see how it looks.

Comment 6

[Florens Verschelde :fvsch]

For reference, the RDM's main background is using the toolbar background color: #1b1b1d.
Maybe --theme-body-background (currently at #2a2a2e) was deemed too light.

Comment 7

[Florens Verschelde :fvsch]

Ran a few tests with these color changes (listing colors from darker to lighter):

Name	Variable	Original value	Test value (a bit darker)
Main toolbar (toolbox)	--theme-tab-toolbar-background	#0c0c0d (Grey 90)	#0c0c0d (Grey 90)
Other toolbars	--theme-toolbar-background	#1b1b1d (Grey ~85)	#18181a (Grey ~87)
Sidebars	--theme-sidebar-background	#1b1b1d (Grey ~85)	#18181a (Grey ~87)
Body background	--theme-body-background	#2a2a2e (Grey 80)	#232327 (Grey ~83)
Splitter color	--theme-splitter-color	#3c3c3d (Grey ~67)	#38383d (Grey 70)
Emphasized splitter	--theme-emphasized-splitter-color	#4a4a4f (Grey 60)	#4a4a4f (Grey 60)

Here's the code if you want to give it a spin:

:root.theme-dark {
  --theme-tab-toolbar-background: var(--grey-90);
  --theme-sidebar-background: #18181a;
  --theme-toolbar-background: #18181a;
  --theme-body-background: #232327;
  --theme-splitter-color: var(--grey-70);
}

I'm going to post screenshots of different panels with these changes. Sorry for the mail noise.

My main takeaways:

• I like the small contrast bump in Console, Style Editor, Debugger and Network.
• We have 3 close background colors (90-87-83), and visually it's hard to tell them apart, so I'm not sure it's still communicating something. Should we perhaps use only two steps, like 90-85?
• If we do use these slightly darker colors, it might be interesting to also adjust the background color of the current text line in CodeMirror and the hover background in the Markup view.

Comment 8

[Florens Verschelde :fvsch]

Attachment: dark-backgrounds-inspector.png

Comment 9

[Florens Verschelde :fvsch]

Attachment: dark-backgrounds-console.png

Current colors on top, darker colors below.

Comment 10

[Florens Verschelde :fvsch]

Attachment: dark-backgrounds-styleeditor.png

Current colors on top, darker colors below.

Comment 11

[Florens Verschelde :fvsch]

Attachment: dark-backgrounds-network.png

Comment 12

[Florens Verschelde :fvsch]

Attachment: dark-backgrounds-debugger-file.png

Comment 13

[Florens Verschelde :fvsch]

Attachment: dark-backgrounds-two-colors.png

Here's an alternative take which uses two main colors instead of 3-4 currently:

1. #0c0c0d for the toolbox toolbar, other toolbars (except the ones we changed to the body-background), and for sidebars.
2. #202024 for the body background and for accordion headers.

I quite like the result, it feels less messy than having 3 close-but-different colors (4, counting the accordion headers).

That test is a bit on the dark side though, we could go with something like #121214/#242428 for something lighter.

Comment 14

[Florens Verschelde :fvsch]

Victoria, what do you think?

Comment 15

[Victoria Wang [:victoria]]

Florens, thanks for your explorations! I love how the 3-tone screenshots look - seems like a big improvement for each panel. I'm not noticing the messy feeling you mentioned. To me, it feels like a soothing mix of grays with a hint of delineation, while the two-tone variants look a little too segmented/blocky.

Comment 16

[Florens Verschelde :fvsch]

Attachment: Bug 1555570 - Slightly darken background colors in devtools dark theme; r=rcaliman

Following the color tests in https://bugzilla.mozilla.org/show_bug.cgi?id=1555570#c7

• Use a slightly darker background color for the body background, to improve text-to-background contrast
• As a result, tweak the sidebar and toolbar background, and the selection hover background

Comment 17

[Florens Verschelde :fvsch]

Attachment: console-dark-theme-string-color.png

Cool, let's try to land those background changes.

This color change does bring the contrast for the blue strings to 4.96:1, which is an improvement. But looking at different types of code, it looks like our medium-blue strings (#6B89FF) are the least contrasted text we're showing.

What's more, when we have strings in object representations, they're using a more contrasted pink instead of blue.

Should we try to:

• Make this blue a bit lighter?
• Or use a different color because when I lighten this blue it becomes hard to distinguish from either the light blue or the purple we're already using for other stuff?
• Or maybe use pink instead?

Comment 18

[Florens Verschelde :fvsch]

Attachment: console-dark-theme-string-color-test.png

I tried using other colors but nothing was satisfying. Anything that is close to pink, purple, light blue or light green is already used for other stuff. Orange can be contrasted but we avoid it, and yellow/red are reserved for warnings and errors.

So I think we can just tweak the blue string color a bit and reach a higher contrast (5.78:1) with:

.cm-s-mozilla .cm-string,
.cm-s-mozilla .cm-string-2,
.variable-or-property .token-string,
.CodeMirror-Tern-farg {
-  color: #6B89FF;
+  color: #709AFF;
}

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/12a473968ffd
Slightly darken background colors in devtools dark theme; r=rcaliman

Comment 20

[Raul Gurzau (:RaulG)]

https://hg.mozilla.org/mozilla-central/rev/12a473968ffd

Comment 21

[Florens Verschelde :fvsch]

Tweaking the string color will be done in bug 1560142.