1697110 - Accent color is not applied consistently in OSX and OS 11

Status: RESOLVED FIXED

(Core :: Widget: Cocoa, defect, P2)

Description

[Martin Balfanz [:mbalfanz]]

Mac users can define an accent color that is applied to certain form elements, icons etc.
We seem to have inconsistent behavior in applying the styles at some places, but not in others.

STR: select an accent color other than blue, like pink. Then test different form controls

Here are some examples:

OS 11

• form controls and "active tab line" in devtools remain blue

OS X

• focus styles in page content as well as places like the awesome bar remain blue
• form controls in general appear blue
• only text selection and hovering (e.g. context menu, select) seem to be respected

Comment 1

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1697110 - Enable widget.non-native-theme.use-theme-accent on macOS. r=mstange

Comment 2

[Emilio Cobos Álvarez [:emilio]]

So with that patch and the other fixes I think the non-native theme is pretty decent. Of course it's up to Markus if we want to do this, but I think it's the less bad option tbh.

Markus, do you have an idea of what the issues in OSX can be? I recall reading something about us forcing aqua appearance in some OSX versions or something which I think it might be related? Anyhow use-theme-accent should peek the cell highlight color so...

Comment 3

[Markus Stange [:mstange]]

We have access to the right accent color regardless of forcing aqua. And any trouble we run into when we stop forcing aqua is something we can investigate once we do that, in bug 1623684 or bug 1644261.

The patch in this bug doesn't change the focus ring color used in the native theme, does it? The accent color affects native focus rings as well, they get a lighter and more transparent version of the focus ring. We have -moz-mac-focusring for that color. I think we should switch the NNT (and outline:auto) to draw a native-looking focus ring, that is a 3.5px thick single-layer ring with the right color.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

Yeah, I think the issue described in comment 0 was bug 1697150, which is a proton issue.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

And no, it doesn't change the native theme outline of course. Not sure if we want to start diverging on focus outlines across platforms that use the non-native theme, though if we want to do that it should be relatively easy to implement.

Comment 6

[Markus Stange [:mstange]]

Well, if we're already diverging on the accent color across platforms that use the non-native theme, it doesn't seem like a stretch to diverge on the focus as well, at least on macOS. macOS has a very consistent focus style that we shouldn't diverge from without good reason, and since the accent color controls the focus color in native macOS apps, it seems strange for us to make the choice to respect the accent color in some places but not in focus rings.

Comment 7

[Markus Stange [:mstange]]

Oh, nevermind - with this patch, we are respecting the accent color when drawing NNT focus rings. We're just not using the native style. Rather than drawing one ring -moz-mac-focusring, we are drawing one ring with the accent color and another ring with a transparent version of the accent color. Ok that's definitely better than what I thought we were doing.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c1707412f6fe
Enable widget.non-native-theme.use-theme-accent on macOS. r=mstange

Comment 9

[Dorel Luca [:dluca]]

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