[Autofill] ios credit card support and overall cc fixes #801

dbajpeyi · 2025-04-29T21:24:07Z

Reviewer:
Asana: https://app.asana.com/1/137249556945/task/1210112883952078?focus=true

Description

Match creditCards prompting behavior on mobile to credentials data type,
Add icons for credit card inputs, but only for mobile (icons may update during Ship Review)

Steps to test

To see the specific tasks where the Asana app for GitHub is being used, see below:

borgateo · 2025-04-30T16:47:10Z

This is exactly what I was looking for regarding Windows and credit card support.
I know it's still a draft, but do you plan on adding integration tests to cover these changes?

borgateo · 2025-04-30T16:53:18Z

src/UI/img/ddgInputIcons.js


 const ddgCcIconFilled =
-    'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+CiAgICA8cGF0aCBkPSJNNSA5Yy0uNTUyIDAtMSAuNDQ4LTEgMXYyYzAgLjU1Mi40NDggMSAxIDFoM2MuNTUyIDAgMS0uNDQ4IDEtMXYtMmMwLS41NTItLjQ0OC0xLTEtMUg1eiIgZmlsbD0iIzc2NDMxMCIvPgogICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xIDZjMC0yLjIxIDEuNzktNCA0LTRoMTRjMi4yMSAwIDQgMS43OSA0IDR2MTJjMCAyLjIxLTEuNzkgNC00IDRINWMtMi4yMSAwLTQtMS43OS00LTRWNnptNC0yYy0xLjEwNSAwLTIgLjg5NS0yIDJ2OWgxOFY2YzAtMS4xMDUtLjg5NS0yLTItMkg1em0wIDE2Yy0xLjEwNSAwLTItLjg5NS0yLTJoMThjMCAxLjEwNS0uODk1IDItMiAySDV6IiBmaWxsPSIjNzY0MzEwIi8+Cjwvc3ZnPgo=';
+    'data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzc2NDMxMCIgZD0iTTYuODQyIDhBLjg0MS44NDEgMCAwIDAgNiA4Ljg0MXYyLjMxOGMwIC40NjQuMzc3Ljg0MS44NDIuODQxaDMuMzE3YS44NDEuODQxIDAgMCAwIC44NDEtLjg0MVY4Ljg0YS44NDEuODQxIDAgMCAwLS44NC0uODRINi44NDJaIi8+PHBhdGggZmlsbD0iIzc2NDMxMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMiA4YTUgNSAwIDAgMSA1LTVoMTBhNSA1IDAgMCAxIDUgNXY4YTUgNSAwIDAgMS01IDVIN2E1IDUgMCAwIDEtNS01VjhabTUtMy41QTMuNSAzLjUgMCAwIDAgMy41IDh2NmgxN1Y4QTMuNSAzLjUgMCAwIDAgMTcgNC41SDdabTAgMTVBMy41MDIgMy41MDIgMCAwIDEgMy42NDUgMTdoMTYuNzFBMy41MDIgMy41MDIgMCAwIDEgMTcgMTkuNUg3WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+';



I wonder if we could start using URL references along with the new ESLint loader you recently created. That would really help cut down on some of the noise here too.

We could in a separate build step, although maybe a bit better improvement as a follow-up.

GioSensation · 2025-05-01T07:25:13Z

src/Form/Form.js

@@ -531,7 +531,7 @@ class Form {
     * @param {boolean} shouldCheckForDecorate
     */
    execOnInputs(fn, inputType = 'all', shouldCheckForDecorate = true) {
-        const inputs = this.inputs[inputType];
+        const inputs = [...this.inputs[inputType]];


Why is this needed? We're using a for…of loop which is supported for all iterables.

Not necessary at all, originally I had changed the type of SupportedMainTypes to be an array, so it's from the remains of that work.

Anyway I am changing the approach overall.

GioSensation · 2025-05-01T07:30:37Z

src/Form/Form.js

-    getFirstViableCredentialsInput() {
-        return [...this.inputs.credentials].find((input) => canBeInteractedWith(input) && isPotentiallyViewable(input));
+    getFirstViableInputForType(dataType) {
+        return [...this.inputs[dataType]].find((input) => canBeInteractedWith(input) && isPotentiallyViewable(input));
    }

    async promptLoginIfNeeded() {


I don't understand why we're doing it here. This method is about autoprompting for login forms (lacks a comment, ouch), whereas the change we're looking at should be done after the initial manual prompt of a credit card prompt.

* Temporary speedup to cc testing Signed-off-by: Emanuele Feliziani <[email protected]> * Add Yahoo payment form Signed-off-by: Emanuele Feliziani <[email protected]> * test: add form for payment step on att * Better phone and more resilient clicking Signed-off-by: Emanuele Feliziani <[email protected]> * test: sams club card * Support prompting from all cc fields Signed-off-by: Emanuele Feliziani <[email protected]> * Fix Yahoo credit card form Signed-off-by: Emanuele Feliziani <[email protected]> * Fixed the cc touched thing Signed-off-by: Emanuele Feliziani <[email protected]> * Fix sams club test (it had wrong manual values) Signed-off-by: Emanuele Feliziani <[email protected]> * Prettier Signed-off-by: Emanuele Feliziani <[email protected]> * Minor regex tweak Signed-off-by: Emanuele Feliziani <[email protected]> * Add Time form + fix it Signed-off-by: Emanuele Feliziani <[email protected]> * Rename file, lol Signed-off-by: Emanuele Feliziani <[email protected]> * Add victoriassecret + fix it Signed-off-by: Emanuele Feliziani <[email protected]> * Add uhaul form + fix it Signed-off-by: Emanuele Feliziani <[email protected]> * fix: dispatch minimal events for creditcard number * Remove console.log Signed-off-by: Emanuele Feliziani <[email protected]> * fix: dispatch minimal events for creditcard number * Recompile Signed-off-by: Emanuele Feliziani <[email protected]> * Revert "fix: dispatch minimal events for creditcard number" This reverts commit f86d194. * fix: remove dummy code * Revert "fix: dispatch minimal events for creditcard number" This reverts commit e9b1b85. --------- Signed-off-by: Emanuele Feliziani <[email protected]> Co-authored-by: dbajpeyi <[email protected]>

dbajpeyi · 2025-05-14T13:37:21Z

src/Form/Form.js

            // Don't open the tooltip on input focus whenever it's showing in-context signup
            if (isIncontextSignupAvailable) return false;
        }

+        // On ios, always send the calls to the native side, so they can decide on the UX
+        // On ios we either show a tooltip or the keyboard extension which non-blocking.
+        if (isIos && mainType === 'creditCards') return true;


WIP, just pass all calls to native side to try out how the whole extension UX fills. Probably we will be a bit more conservative after Ship Review/playing around with the ios build.

…ose keyboard

fix: prompt cc only once, and add cc input icons

553a50e

dbajpeyi force-pushed the dbajpeyi/fix/ios-prompt-cc-once-and-icons branch from 5c99972 to 553a50e Compare April 30, 2025 07:27

fix: run exec only when relevant

beb2f9d

dbajpeyi force-pushed the dbajpeyi/fix/ios-prompt-cc-once-and-icons branch from 9c7a56b to beb2f9d Compare April 30, 2025 09:18

dbajpeyi changed the title ~~fix: prompt cc only once, and add cc input icons~~ [Autofill] Match CreditCards prompts and style to Credentials Apr 30, 2025

fix: update icons

ba960c7

borgateo reviewed Apr 30, 2025

View reviewed changes

GioSensation reviewed May 1, 2025

View reviewed changes

dbajpeyi force-pushed the dbajpeyi/fix/ios-prompt-cc-once-and-icons branch from 9a756cf to 1a19ce9 Compare May 5, 2025 11:39

refactor: move logic to shouldOpenTooltip

fa7cef1

dbajpeyi force-pushed the dbajpeyi/fix/ios-prompt-cc-once-and-icons branch from 1a19ce9 to fa7cef1 Compare May 5, 2025 11:40

dbajpeyi and others added 4 commits May 5, 2025 14:42

Merge branch 'main' into dbajpeyi/fix/ios-prompt-cc-once-and-icons

ef40eec

fix: check if any field was touched

03c7328

chore: merge main

2e1d999

fix: only apply to applicable inputs

0d0d804

dbajpeyi force-pushed the dbajpeyi/fix/ios-prompt-cc-once-and-icons branch from 3a954f0 to 0d0d804 Compare May 6, 2025 13:25

dbajpeyi and others added 3 commits May 6, 2025 17:46

chore: merge main

7738fcb

fix: remove icon

d78fbaf

dbajpeyi force-pushed the dbajpeyi/fix/ios-prompt-cc-once-and-icons branch from aaaddee to d78fbaf Compare May 14, 2025 11:18

dbajpeyi changed the title ~~[Autofill] Match CreditCards prompts and style to Credentials~~ [Autofill] ios credit card support and fixes May 14, 2025

dbajpeyi changed the title ~~[Autofill] ios credit card support and fixes~~ [Autofill] ios credit card support and overall cc fixes May 14, 2025

wip: allow focus on mobile

ac794ab

dbajpeyi force-pushed the dbajpeyi/fix/ios-prompt-cc-once-and-icons branch 2 times, most recently from 3079445 to 0b25311 Compare May 14, 2025 13:22

Merge branch 'main' into dbajpeyi/fix/ios-prompt-cc-once-and-icons

a8d7c02

dbajpeyi force-pushed the dbajpeyi/fix/ios-prompt-cc-once-and-icons branch from 0b25311 to a8d7c02 Compare May 14, 2025 13:30

refactor: inline config call

0d6b1d7

dbajpeyi commented May 14, 2025

View reviewed changes

fix: blur input even if the input was already autofilled, to force cl…

b67d04b

…ose keyboard

dbajpeyi force-pushed the dbajpeyi/fix/ios-prompt-cc-once-and-icons branch from 4924aea to b67d04b Compare May 16, 2025 10:51

Merge branch 'main' into dbajpeyi/fix/ios-prompt-cc-once-and-icons

d8b5044

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Autofill] ios credit card support and overall cc fixes #801

[Autofill] ios credit card support and overall cc fixes #801

dbajpeyi commented Apr 29, 2025 •

edited

Loading

borgateo commented Apr 30, 2025

borgateo Apr 30, 2025

dbajpeyi May 5, 2025

GioSensation May 1, 2025

dbajpeyi May 5, 2025

GioSensation May 1, 2025

dbajpeyi May 14, 2025

[Autofill] ios credit card support and overall cc fixes #801

Are you sure you want to change the base?

[Autofill] ios credit card support and overall cc fixes #801

Conversation

dbajpeyi commented Apr 29, 2025 • edited Loading

Description

Steps to test

borgateo commented Apr 30, 2025

borgateo Apr 30, 2025

Choose a reason for hiding this comment

dbajpeyi May 5, 2025

Choose a reason for hiding this comment

GioSensation May 1, 2025

Choose a reason for hiding this comment

dbajpeyi May 5, 2025

Choose a reason for hiding this comment

GioSensation May 1, 2025

Choose a reason for hiding this comment

dbajpeyi May 14, 2025

Choose a reason for hiding this comment

dbajpeyi commented Apr 29, 2025 •

edited

Loading