1603785 - Cannot see/edit Color or Icon radio input at about:preferences#containers when using dark mode

Status: NEW

(Firefox :: Settings UI, defect, P3)

Description

[Rob Wu [:robwu]]

I wanted to create a new container in Nightly on macOS, but was not able to because the Color/Icon radio inputs cannot be chosen. Upon pressing the mouse, a focus ring appears, but upon releasing, the input is deselected.

This is not limited to the "Add New Container" functionality; when I click on "Preferences" at an existing container, none of the radio inputs are selected. Oddly, when I close the panel, the background of the container becomes white (instead of greyish color from dark theme). When the panel is closed, a dotted focus ring appears on the viewport, as if the body of the preferences page is focused.

STR (short version):

1. Visit about:preferences#containers
2. Click on "Preferences" of an existing container.
3. Click on a Color and/or Icon input.
4. Close the panel, e.g. by clickin on the X or pressing Esc.

Expected:

• After step 2, a panel should be shown with a ring around the color/icon that is used by the container.
• After step 3, the rings should be arond the selection.
• After step 4, the UI should look normal.

Actual:

• After steps 2 and 3, no rings are shown at all.
• After step 4, in dark mode, the background of the container row is white. It only becomes normal again after reloading the page.

Reproduced with: Nightly 73.0a1 buildID 20191213094653 on macOS.
Not reproducible on Linux.

Comment 1

[Rob Wu [:robwu]]

Note: This is only a visual issue. When I click on the radio input, the chosen color/icon does seem to register when I confirm the creation of the container.

Comment 2

[:Gijs (he/him)]

WFM on both 20191212095326 and 20191215214948 (on macOS), when not turning on dark mode.

Does this only reproduce on dark mode for you? From comment #0, I can't tell if you also tested light mode.

Do you know if this is a regression?

Comment 3

[Itiel]

(In reply to Rob Wu [:robwu] from comment #0)

I wanted to create a new container in Nightly on macOS, but was not able to because the Color/Icon radio inputs cannot be chosen. Upon pressing the mouse, a focus ring appears, but upon releasing, the input is deselected.

I can reproduce this if I'm moving focus to the Name field / the other radio button section.

Oddly, when I close the panel, the background of the container becomes white (instead of greyish color from dark theme).

Yes, I see this as well.
This is because of:
https://searchfox.org/mozilla-central/rev/6bceafe72cad5d5752667b4b6bd595d3a4047ca3/toolkit/themes/windows/global/richlistbox.css#20

When the panel is closed, a dotted focus ring appears on the viewport, as if the body of the preferences page is focused.

I think this is bug 1601708.

I'm on Windows 10 btw.

Comment 4

[:Gijs (he/him)]

I can reproduce this in 68 nightly, but we didn't flip the in-content.dark-mode pref on esr, so I guess these flags are accurate and this isn't a regression.

Comment 5

[Rob Wu [:robwu]]

To reproduce the issue, dark theme is required, e.g. by setting ui.systemUsesDarkTheme to 1 at about:config .

On macOS, the visual focus ring only appears as long as the mouse button is pressed;
On Linux, a blue-ish focus ring appears even after releasing the mouse.
In both cases, there is no visual ring when the icon/color buttons are not focused.

I can reproduce on Nightly and release (71.0).