Closed Bug 1709634 Opened 3 months ago Closed 3 months ago

Native input accent colors appear desaturated

Categories

(Core :: Widget, defect)

Unspecified
macOS
defect

Tracking

()

VERIFIED FIXED
90 Branch
Tracking Status
firefox-esr78 --- disabled
firefox88 --- disabled
firefox89 --- verified
firefox90 --- verified

People

(Reporter: jheavener, Assigned: emilio)

References

Details

(Whiteboard: [foxfooding][internal] [proton-foxfooding])

Attachments

(2 files)

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.
Whiteboard: [foxfooding][internal] [proton-foxfooding]

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

Component: Foxfooding → Widget
Flags: needinfo?(spohl.mozilla.bugs)
OS: Unspecified → macOS
Product: Firefox → Core
OS: macOS → All

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

OS: All → macOS
Assignee: nobody → emilio
Flags: needinfo?(spohl.mozilla.bugs)

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 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
Attachment #9220500 - Flags: approval-mozilla-beta?
Flags: qe-verify+
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/e7f5b9027004
Fix -moz-accent-color on macOS. r=mstange,mac-reviewers
Status: NEW → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → 90 Branch

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.

Attachment #9220500 - Flags: approval-mozilla-beta? → approval-mozilla-beta+

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.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.