1479365 - Selection is unreadable with dark theme

Status: RESOLVED FIXED

(DevTools :: JSON Viewer, defect, P3)

Description

[Florens Verschelde :fvsch]

Attachment: json-viewer-selection-color-dark.png

In the JSON Viewer, using the dark theme, selected text is very hard to read. It looks like there are no ::selection styles, since the JSON viewer is not including `devtools/client/themes/(dark|light)-theme.css`.

A possible CSS fix to add in selection styles in `devtools/client/jsonview/css/general.css`:

::selection {
  color: var(--theme-selection-color);
  background-color: var(--theme-selection-background);
}

(Note: the unprefixed ::selection was enabled in Firefox 62.)

Comment 1

[Oriol Brufau [:Oriol]]

Cannot reproduce, when I select, the text color becomes white. (And this happens everywhere, not just in the JSON Viewer).

Comment 2

[Florens Verschelde :fvsch]

Did you try on macOS?

This might be a macOS-only issue, perhaps related to bug 1476524.

Comment 3

[Oriol Brufau [:Oriol]]

I tried Lubuntu and Windows.

Comment 4

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: image.png

Attaching a screenshot from MacOS.

Selected text is not white -> it should be.

Honza

Comment 5

[Florens Verschelde :fvsch]

It looks like the JSON viewer is not loading light-theme.css or dark-theme.css (which load variables.css, common.css and a few others), but loads variables.css and common.css directly.

The light|dark-theme.css stylesheet have a lot of duplicated rules, including:

::-moz-selection {
  background-color: var(--theme-selection-background);
  color: var(--theme-selection-color);
}

This could probably be moved to common.css (and the selector can be changed to just ::selection now that it's unprefixed).

That fix would still need testing on different platforms. Currently on Linux I'm getting good results and with white text on dark blue for selections, which switches to dark blue text on white on a selected row. Not sure if that is happening because of existing CSS, or (more likely) the automatic selection color that Gecko uses on Linux (and possibly on Windows too?), which differs from the selection color handling on macOS.

Comment 6

[Florens Verschelde :fvsch]

We may need something like:

/* devtools/client/themes/common.css */
::selection {
  background-color: var(--theme-selection-background);
  color: var(--theme-selection-color);
}

/* devtools/client/shared/components/tree/TreeView.css */
/* invert selection colors in a selected row */
.treeRow.selected ::selection {
  background-color: var(--theme-selection-color);
  color: var(--theme-selection-background);
}

Comment 7

[Jan Honza Odvarko [:Honza] (always need-info? me)]

@Florens: can you please attach a patch? I can test on Windows and Mac

Honza

Comment 8

[Florens Verschelde :fvsch]

Sure, I'll try to have one ready during the week.
(Keeping the needinfo to bug myself. :P)

Comment 9

[Florens Verschelde :fvsch]

Attachment: Bug 1479365 - Invert selection colors in selected rows; r=honza,yzen

Comment 10

[Florens Verschelde :fvsch]

The patch above moves the basic ::selection styles to common.css, and adds "inverted colors" selection styles for:

• shared/components/tree/TreeView.css (JSON view, Network panels, Accessibility primary panel)
• debugger/packages/devtools-components/src/tree.css (used in Console and Debugger, it seems)
• Plus a custom style for Accessibility's sidebar because it seems to put the "focused" class on a different element than what tree.css expects.

Comment 11

[Florens Verschelde :fvsch]

Try push: https://treeherder.mozilla.org/#/jobs?repo=try&revision=ed3fe48b38d8b6ea1888304687b45bc793a0c676

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9cca1de0aa39
Invert selection colors in selected rows; r=Honza,yzen,nchevobbe

Comment 13

[Raul Gurzau (:RaulG)]

https://hg.mozilla.org/mozilla-central/rev/9cca1de0aa39