Closed Bug 1479365 Opened 2 years ago Closed 2 years ago

Selection is unreadable with dark theme


(DevTools :: JSON Viewer, defect, P3)



(firefox68 fixed)

Firefox 68
Tracking Status
firefox68 --- fixed


(Reporter: fvsch, Assigned: fvsch)


(Whiteboard: [good first verify])


(3 files)

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.)
Cannot reproduce, when I select, the text color becomes white. (And this happens everywhere, not just in the JSON Viewer).
Did you try on macOS?

This might be a macOS-only issue, perhaps related to bug 1476524.
I tried Lubuntu and Windows.
Attached image image.png

Attaching a screenshot from MacOS.

Selected text is not white -> it should be.


Ever confirmed: true
Priority: -- → P3

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.

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);

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


Flags: needinfo?(florens)

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

Assignee: nobody → florens
Flags: needinfo?(florens)

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.
Pushed by
Invert selection colors in selected rows; r=Honza,yzen,nchevobbe
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
Whiteboard: [good first verify]
You need to log in before you can comment on or make changes to this bug.