1690778 - Select list items are using Ubuntu theme colors

Status: RESOLVED FIXED

(Core :: Widget: Gtk, defect)

Description

[Pascal Chevrel:pascalc (PTO until April 26)]

Attachment: bad colors in select

Mozilla/5.0 (X11; Linux x86_64; rv:87.0) Gecko/20100101 Firefox/87.0 ID:20210204093834

The color and background color of selected list items are still Ubuntu Yaru colors with the non native theme activated. See the attached image for demo.
Ubuntu 20.10.

Comment 1

[Stephen A Pohl [:spohl]]

This was most likely using :shorlander's form control page that used to be accessible at https://stephenhorlander.com/photon/UI-Controls/form-widgets.html. Those form controls were user-styled (with padding: 0px for example) and therefore switched back to native theme colors.

If you can reproduce on other non-user styled controls, please reopen.

Comment 2

[Pascal Chevrel:pascalc (PTO until April 26)]

Reopening, you can easily see the bug with this:
data:text/html,<select multiple><option selected>Foo

Comment 3

[Stephen A Pohl [:spohl]]

(In reply to Pascal Chevrel:pascalc from comment #2)

Reopening, you can easily see the bug with this:
data:text/html,<select multiple><option selected>Foo

Oh, I apologize, I skipped right over the fact that you mentioned the selected list items were in the native color. I think we might be getting lucky on Windows and macOS because I don't recall changing these colors there. Emilio, could you have a look on Linux and let me know what you think? Maybe this merits a cross-platform implementation to make this color explicit in the non-native theme.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1690778 - Derive accent color from theme highlight color in GTK. r=spohl

This makes form controls match the rest of the GTK theme like selection
colors, etc.

An alternative to this would be to just use non-native colors on GTK for
all content, but that seems somewhat unfortunate and we do the right
thing for scrollbars so...

I've tried on a variety of themes and this looks nice so far.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: about:config using yaru theme

So this is a sorta pre-existing problem. The issue is that we take selection / highlight colors from the gtk theme but we don't do the same for form controls.

There are three approaches:

• Don't do anything, this is no different than selecting text.
• Make controls use theme-derived colors.
• Use non-native colors for selection and such as well.

I think (2) is best, and was relatively easy to implement. We can reconsider if it causes issues but I think given we already use those colors for a bunch of other things (like selection, the url bar, ....) using the accent color derived from the GTK theme should be fine.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: Controls with Yaru theme.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Attachment: Controls with adwaita

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5913a4a254df
Derive accent color from theme highlight color in GTK. r=mstange

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/af1ad1fab16e
Add a missing include on android on a CLOSED TREE

Comment 10

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/5913a4a254df
https://hg.mozilla.org/mozilla-central/rev/af1ad1fab16e