[meta] Make user agent autofill styles more important
Categories
(Toolkit :: Form Autofill, enhancement)
Tracking
()
Tracking | Status | |
---|---|---|
firefox125 | --- | fixed |
People
(Reporter: tgiles, Assigned: dlee)
References
(Depends on 5 open bugs, Blocks 40 open bugs, Regressed 1 open bug)
Details
(Keywords: access, meta, Whiteboard: [fxcm-quality-compat-form-autofill])
Attachments
(2 files)
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.
Reporter | ||
Comment 1•2 years ago
|
||
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•2 years ago
|
||
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?
Reporter | ||
Comment 3•2 years ago
•
|
||
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•2 years ago
|
||
(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 :/
Reporter | ||
Comment 5•2 years ago
|
||
Didn't realize we had a bug specifically for autofill highlight issue on Walmart, sorry about that emilio. thanks for making me double check.
Reporter | ||
Updated•2 years ago
|
Updated•1 year ago
|
Updated•1 year ago
|
Updated•11 months ago
|
Updated•11 months ago
|
Assignee | ||
Comment 7•2 months ago
|
||
Updated•2 months ago
|
Pushed by dlee@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/40d985e1af4e Make user agent autofill styles more important r=credential-management-reviewers,emilio,issammani
Comment 9•2 months ago
|
||
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
Updated•2 months ago
|
Assignee | ||
Comment 10•2 months ago
|
||
UX suggests to use the same text color for autofill and autofill
preview.
Depends on D202410
Comment 11•2 months ago
|
||
Pushed by dlee@mozilla.com: 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•2 months ago
|
||
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•2 months ago
|
||
Pushed by dlee@mozilla.com: 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•2 months ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/5b36e2c1bc59
https://hg.mozilla.org/mozilla-central/rev/ab2f491c1f6a
Comment 15•2 months ago
|
||
bugherder |
Assignee | ||
Updated•2 months ago
|
Description
•