1755033 - [meta] Make user agent autofill styles more important

Status: RESOLVED FIXED

(Toolkit :: Form Autofill, enhancement)

Description

[Tim Giles [:tgiles]]

Recently we've had an influx of bugs regarding autofill appearing to be broken on many sites. Most of these cases are due to websites implementing styles that overwrite the background-image of our yellow autofill highlight. We should consider making the user agent autofill styles more important to show when fields have been autofilled by the browser.

Comment 1

[Tim Giles [:tgiles]]

Emilio, what's your opinion on making our autofill styling !important in the user agent style sheet? We're seeing a lot of bugs due to autofill highlighting not working as expected on various websites. Not sure who else would need to be part of this conversation so feel free to add others as needed, especially since this feels like a philosophical question more than a simple implementation question.

Should we make our user agent styles for autofill more important so there's a visibly clear distinction between cases where the browser has filled data versus the website versus the user?

Should all of these linked bugs be marked as invalid since this kind of behavior (websites overriding autofill styles) is expected from the browser's point of view?

Comment 2

[Emilio Cobos Álvarez [:emilio]]

I don't have a super-strong opinion. It feels a bit unfortunate for the page to lose the ability to style the autofill state, but it might be the case that most websites don't care / accidentally break this, and making it !important would be beneficial for most users...

Anyways, this feels like this could benefit from asking UX... Also, do you know what does Safari do here? Do they enforce their preview?

There's another concern here, which is that we'll ~always be stuck with one color (that, furthermore, will need to be close-ish or the same as Chrome's), and we won't be able to change it without causing issues, because even if pages can't change the text color of the field itself, they usually overlay stuff on top and they need to make sure the contrast is enough. But again, that might be worth it if the end result is better for users.

BTW, some of the blocked bugs like bug 1755917 don't seem related to this? That's about failing to auto-fill a state/region code, right?

Comment 3

[Tim Giles [:tgiles]]

Anyways, this feels like this could benefit from asking UX

Who would be the best person to start this conversation with? Aaron Benson maybe?

Also, do you know what does Safari do here? Do they enforce their preview?

It doesn't look like Safari does a preview like Firefox or Chrome, you just select an option from the autocomplete menu and then that option's data is filled. It appears that Safari has !important on their user agent styles, causing the yellow highlight (seems to be the same yellow that we use) to appear as expected on Walmart.com.

There's another concern here, which is that we'll ~always be stuck with one color (that, furthermore, will need to be close-ish or the same as Chrome's), and we won't be able to change it without causing issues, because even if pages can't change the text color of the field itself, they usually overlay stuff on top and they need to make sure the contrast is enough. But again, that might be worth it if the end result is better for users.

It seems like Safari's autofill highlight is the same yellow that we currently use, so I guess there's only the Chrome blue highlight (which seems to be relatively new, I don't remember the blue highlight but I also don't trust my memory in this situation) or the yellow highlight that we and Safari use.

BTW, some of the blocked bugs like bug 1755917 don't seem related to this? That's about failing to auto-fill a state/region code, right?

Unfortunately it is related. While yes, the actual filling of data seems to not work as expected, we also don't highlight the previewed or filled fields correctly either due to Walmart having background styles that overwrite our background autofill styles. There's many issues in that bug you linked and potentially in the other linked bugs in this meta. I should probably go and separate these multiple issue bugs into "one issue per bug" but haven't had time yet.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

(In reply to Tim Giles [:tgiles] from comment #3)

Anyways, this feels like this could benefit from asking UX

Who would be the best person to start this conversation with? Aaron Benson maybe?

Huh, not sure, sorry :/

Comment 5

[Tim Giles [:tgiles]]

Didn't realize we had a bug specifically for autofill highlight issue on Walmart, sorry about that emilio. thanks for making me double check.

Comment 7

[Dimi Lee [:dimi]]

Attachment: Bug 1755033 - P1. Make user agent autofill styles more important r=#credential-management-reviewers

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/40d985e1af4e
Make user agent autofill styles more important r=credential-management-reviewers,emilio,issammani

Comment 9

[Cristian Tuns]

Backed out for causing reftest failures in autofill.html

• Backout link
• Push with failures
• Failure Log
• Failure line: REFTEST TEST-UNEXPECTED-FAIL | layout/reftests/forms/input/text/autofill.html != layout/reftests/forms/input/text/autofill-preview.html | image comparison, max difference: 0, number of differing pixels: 0

Comment 10

[Dimi Lee [:dimi]]

Attachment: Bug 1755033 - P2. Use the same text color for `autofill` and `-moz-autofill-preview` r=#credential-management-reviewers

UX suggests to use the same text color for autofill and autofill
preview.

Depends on D202410

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5e26aac6ca16
P1. Make user agent autofill styles more important r=credential-management-reviewers,emilio,issammani
https://hg.mozilla.org/integration/autoland/rev/4fde36e8266a
P2. Use the same text color for `autofill` and `-moz-autofill-preview` r=credential-management-reviewers,emilio,sgalich

Comment 12

[Cristian Tuns]

Backed out for causing mochitest failures in test_formautofill_preview_highlight.html

• Backout link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | browser/extensions/formautofill/test/mochitest/test_formautofill_preview_highlight.html | Checking #organization preview style

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5b36e2c1bc59
P1. Make user agent autofill styles more important r=credential-management-reviewers,emilio,issammani
https://hg.mozilla.org/integration/autoland/rev/ab2f491c1f6a
P2. Use the same text color for `autofill` and `-moz-autofill-preview` r=credential-management-reviewers,emilio,sgalich

Comment 14

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/5b36e2c1bc59
https://hg.mozilla.org/mozilla-central/rev/ab2f491c1f6a

Comment 15

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/5b36e2c1bc59
https://hg.mozilla.org/mozilla-central/rev/ab2f491c1f6a