1709634 - Native input accent colors appear desaturated

Status: VERIFIED FIXED

(Core :: Widget, defect)

Description

[Jody Heavener]

Attachment: Screen Shot 2021-05-05 at 10.48.33 AM.png

steps to reproduce/what did you do?

• Set an accent color for your system (e.g. I set mine to orange on macOS)
• Create a page with native HTML inputs (radio, checkbox, text) - here's a handy one: https://codepen.io/jodyheavener/pen/yLMLNMJ
• Compare the accent color of the input with the new Proton design versus current release which uses system native input styles
• Try this with a few accent colors

expected behavior/ what did you think will happen?

• Accent colors are generally consistent across old and new style of inputs

actual behavior/ what actually happened?

• For certain accent colors these inputs appear darker or desaturated. My example was the orange accent, but I notice it with green and pink as well. It's less noticeable with yellow and blue.

Comment 1

[Chris Peterson [:cpeterson]]

Stephen, here is a bug about non-native theming's widget colors. This bug was filed against macOS, but I see that Nightly's non-native theming on Windows uses a slightly more darker (blue) color than Chrome's non-native widgets. (I can't compare Nightly's widget colors with the old native theme because the old native theme doesn't use colors.)

Comment 2

[Emilio Cobos Álvarez (:emilio)]

On Windows / Android the OS accent color is not used. On GTK the accent color looks fine.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1709634 - Fix -moz-accent-color on macOS. r=mstange,#mac-reviewers

When I initially implemented it for GTK, I just followed the Highlight color
everywhere, but on macOS it makes of course a lot of sense to use
NSColor.controlAccentColor.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Comment on attachment 9220500 [details]
Bug 1709634 - Fix -moz-accent-color on macOS. r=mstange,#mac-reviewers

Beta/Release Uplift Approval Request

• User impact if declined: Comment 0
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: comment 0
• List of other uplifts needed: none
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): one-liner to use the right accent color
• String changes made/needed: none

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e7f5b9027004
Fix -moz-accent-color on macOS. r=mstange,mac-reviewers

Comment 6

[Cristian Brindusan [:cbrindusan]]

https://hg.mozilla.org/mozilla-central/rev/e7f5b9027004

Comment 7

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

Comment on attachment 9220500 [details]
Bug 1709634 - Fix -moz-accent-color on macOS. r=mstange,#mac-reviewers

One liner in early beta, approved for 89 beta 10, thanks.

Comment 8

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

https://hg.mozilla.org/releases/mozilla-beta/rev/04672992fb33

Comment 9

[Catalin Sasca, Desktop QA [:csasca]]

Reproduced the issue on Firefox 90.0a1 (2021-05-05) under macOS 10.15.7 with the informations provided in Comment 0.

The color accents are brighter in Firefox 89.0b10 (treeherder build - 20210507073536) and Firefox 90.0a1 (2021-05-06) under macOS 10.15.7.