1878071 - Very hard to see icons of autofill passkey entries saved in iCloud with dark theme

Status: VERIFIED FIXED

(Core :: DOM: Web Authentication, defect)

Description

[Bogdan Maris, Desktop Test Engineering [Back on 10th June]]

Attachment: Screenshot showing the issue

Found in

• Latest Nightly 124.0a1

Affected versions

• Latest Nightly 124.0a1
• Firefox 123.0b4

Tested platforms

• Affected platforms: MacOS 13
• Unaffected platforms: Windows 11, Ubuntu 22.04

Preconditions

• Have security.webauthn.enable_macos_passkeys set to true in mac 13 or mac 14
• Have a iClould account connected to the used Mac.
• Have the Dark theme active in Firefox.

Steps to reproduce

1. Visit https://webauthn.io/
2. Use a few usernames to register
3. Click the textarea where the username is entered.

Expected result

• All the passkey entries are easy visible in the autofill menu.

Actual result

• The icon of the passkeys is very hard to see when having the dark theme active..

Regression range

• Not a regression, this was introduced along with the Conditional Mediation feature enabled in bug 1865379 in Nightly 2024-01-17.

Additional notes

• The icons are clearly visible using the Light theme.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

:bmaris, if you think that's a regression, could you try to find a regression range using for example mozregression?

Comment 2

[John Schanck [:jschanck]]

:victoria, thoughts on this?

Comment 3

[Victoria Wang [:victoria]]

Hi! There should be a primary "Default" icon color in both dark and light mode, which matches other icons in Firefox. There should be a variable for #FBFBFE icons in dark mode.

Comment 4

[John Schanck [:jschanck]]

Attachment: 2024-02-01-conditional-ui-theme.png

Comment 5

[John Schanck [:jschanck]]

If I understand correctly then, the issue is that the svg has three explicit fill="black" attributes. The image in Comment 4 is what I get if I change those to fill="context-fill". Is that the right change to make?

Comment 6

[Victoria Wang [:victoria]]

Yes, that looks good!

Comment 7

[John Schanck [:jschanck]]

Attachment: Bug 1878071 - use context-fill color for passkey icon. r=keeler

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/81fbc704e4b7
use context-fill color for passkey icon. r=keeler

Comment 9

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/mozilla-central/rev/81fbc704e4b7

Comment 10

[BugBot [:suhaib / :marco/ :calixte]]

The patch landed in nightly and beta is affected.
:jschanck, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox123 to wontfix.

For more information, please visit BugBot documentation.

Comment 11

[John Schanck [:jschanck]]

Comment on attachment 9377808 [details]
Bug 1878071 - use context-fill color for passkey icon. r=keeler

Beta/Release Uplift Approval Request

• User impact if declined: The passkey icon in the autofill dropdown is the wrong color in dark mode.
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Not risky. SVG-only change.
• String changes made/needed:
• Is Android affected?: No

Comment 12

[Pascal Chevrel:pascalc]

Comment on attachment 9377808 [details]
Bug 1878071 - use context-fill color for passkey icon. r=keeler

Approved for 123 beta 7, thanks.

Comment 13

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-beta/rev/b65739114a8d

Comment 14

[Pascal Chevrel:pascalc]

https://hg.mozilla.org/releases/mozilla-beta/rev/b65739114a8d

Comment 15

[Bogdan Maris, Desktop Test Engineering [Back on 10th June]]

Looking good on both Latest Nightly 124.0a1 and Firefox 123.0b7 on macOS 13.6 with both light and dark theme, high contrast and inverted colors etc.