Improve hybrid form UX

integration-test/helpers/mocks.js

@@ -72,5 +72,9 @@ export const constants = {
             cardNumber: true
         },
         email: true
+    },
+    iconMatchers: {
+        key: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4w',
+        dax: 'data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBo'
     }
 }

integration-test/helpers/pages.js

@@ -177,11 +177,27 @@ export function loginPage (page, server, opts = {}) {
             expect(styles1).toContain('data:image/svg+xml;base64,')
             expect(styles2).toContain('data:image/svg+xml;base64,')
         },
+        async emailFieldShowsDax () {
+            // don't make assertions until the element is both found + has a none-empty 'style' attribute
+            await page.waitForFunction(() => Boolean(document.querySelector('#email')?.getAttribute('style')))
+            const emailStyle = await page.locator('#email').getAttribute('style')
+            expect(emailStyle).toContain(constants.iconMatchers.dax)
+        },
+        async emailHasDaxPasswordNoIcon () {
+            await this.emailFieldShowsDax()
+            const passwordStyle = await page.locator('#password').getAttribute('style')
+            expect(passwordStyle || '').not.toContain('data:image/svg+xml;base64,')
+        },
+        async emailHasDaxPasswordHasKey () {
+            await this.emailFieldShowsDax()
+            const passwordStyle = await page.locator('#password').getAttribute('style')
+            expect(passwordStyle || '').toContain(constants.iconMatchers.key)
+        },
         async onlyPasswordFieldHasIcon () {
             const styles1 = await page.locator('#email').getAttribute('style')
             const styles2 = await page.locator('#password').getAttribute('style')
             expect(styles1 || '').not.toContain('data:image/svg+xml;base64,')
-            expect(styles2 || '').toContain('data:image/svg+xml;base64,')
+            expect(styles2 || '').toContain(constants.iconMatchers.key)
         },
         /**
          * @param {string} username

integration-test/tests/login-form.macos.spec.js

@@ -187,6 +187,26 @@ test.describe('Auto-fill a login form on macOS', () => {
                 await login.clickIntoUsernameInput()
                 await login.fieldsDoNotContainIcons()
             })
+            test('I should see Dax if Email Protection is enabled', async ({page}) => {
+                await forwardConsoleMessages(page)
+                await createWebkitMocks()
+                    .withAvailableInputTypes({
+                        credentials: {username: false, password: false},
+                        email: true
+                    })
+                    .withPersonalEmail(personalAddress)
+                    .withPrivateEmail('random123@duck.com')
+                    .applyTo(page)
+
+                await createAutofillScript()
+                    .replaceAll(macosContentScopeReplacements())
+                    .platform('macos')
+                    .applyTo(page)
+
+                const login = loginPage(page, server)
+                await login.navigate()
+                await login.emailHasDaxPasswordNoIcon()
+            })
         })
     })
 

src/DeviceInterface/InterfacePrototype.js

@@ -65,6 +65,9 @@ class InterfacePrototype {
     /** @type {import("../../packages/device-api").DeviceApi} */
     deviceApi;
 
+    /** @type {boolean} */
+    alreadyInitialized;
+
     /**
      * @param {GlobalConfig} config
      * @param {import("../../packages/device-api").DeviceApi} deviceApi
@@ -78,6 +81,7 @@ class InterfacePrototype {
         this.scanner = createScanner(this, {
             initialDelay: this.initialSetupDelayMs
         })
+        this.alreadyInitialized = false
     }
 
     /**
@@ -236,6 +240,10 @@ class InterfacePrototype {
     }
 
     async startInit () {
+        if (this.alreadyInitialized) return
+
+        this.alreadyInitialized = true
+
         await this.refreshSettings()
 
         this.addDeviceListeners()
@@ -294,12 +302,19 @@ class InterfacePrototype {
     async init () {
         const isEnabled = await this.isEnabled()
         if (!isEnabled) return
+
+        const handler = async () => {
+            if (document.readyState === 'complete') {
+                await this.startInit()
+                window.removeEventListener('load', handler)
+                document.removeEventListener('readystatechange', handler)
+            }
+        }
         if (document.readyState === 'complete') {
             await this.startInit()
         } else {
-            window.addEventListener('load', () => {
-                this.startInit()
-            })
+            window.addEventListener('load', handler)
+            document.addEventListener('readystatechange', handler)
         }
     }
 
@@ -576,7 +591,7 @@ class InterfacePrototype {
                 this.removeTooltip()
             }
             // Redecorate fields according to the new types
-            this.scanner.forms.forEach(form => form.redecorateAllInputs())
+            this.scanner.forms.forEach(form => form.recategorizeAllInputs())
         } catch (e) {
             if (this.globalConfig.isDDGTestMode) {
                 console.log('isDDGTestMode: providerStatusUpdated error: ❌', e)

src/Form/Form.js

@@ -23,7 +23,7 @@ import {
 } from './formatters.js'
 
 import {constants} from '../constants.js'
-const {ATTR_AUTOFILL} = constants
+const {ATTR_AUTOFILL, ATTR_INPUT_TYPE} = constants
 
 class Form {
     /** @type {import("../Form/matching").Matching} */
@@ -47,6 +47,7 @@ class Form {
         this.formAnalyzer = new FormAnalyzer(form, input, matching)
         this.isLogin = this.formAnalyzer.isLogin
         this.isSignup = this.formAnalyzer.isSignup
+        this.isHybrid = this.formAnalyzer.isHybrid
         this.device = deviceInterface
 
         /** @type Record<'all' | SupportedMainTypes, Set> */
@@ -225,6 +226,25 @@ class Form {
             }
         })
     }
+
+    /**
+     * Removes all scoring attributes from the inputs and deletes them from memory
+     */
+    forgetAllInputs () {
+        this.execOnInputs((input) => {
+            input.removeAttribute(ATTR_INPUT_TYPE)
+        })
+        Object.values(this.inputs).forEach((inputSet) => inputSet.clear())
+    }
+
+    /**
+     * Resets our input scoring and starts from scratch
+     */
+    recategorizeAllInputs () {
+        this.removeAllDecorations()
+        this.forgetAllInputs()
+        this.categorizeInputs()
+    }
     resetAllInputs () {
         this.execOnInputs((input) => {
             setValue(input, '', this.device.globalConfig)
@@ -311,7 +331,13 @@ class Form {
 
         this.inputs.all.add(input)
 
-        this.matching.setInputType(input, this.form, { isLogin: this.isLogin })
+        const opts = {
+            isLogin: this.isLogin,
+            isHybrid: this.isHybrid,
+            hasCredentials: Boolean(this.device.settings.availableInputTypes.credentials?.username),
+            supportsIdentitiesAutofill: this.device.settings.featureToggles.inputType_identities
+        }
+        this.matching.setInputType(input, this.form, opts)
 
         const mainInputType = getInputMainType(input)
         this.inputs[mainInputType].add(input)

src/Form/FormAnalyzer.js

@@ -3,12 +3,12 @@ import { constants } from '../constants.js'
 import { matchingConfiguration } from './matching-configuration.js'
 import { getText, isLikelyASubmitButton } from '../autofill-utils.js'
 
-const negativeRegex = new RegExp(/sign(ing)?.?in(?!g)|log.?in|unsubscri|(forgot(ten)?|reset) (your )?password|password (forgotten|lost)/i)
-const positiveRegex = new RegExp(
+const loginRegex = new RegExp(/sign(ing)?.?in(?!g)|log.?in|unsubscri|(forgot(ten)?|reset) (your )?password|password (forgotten|lost)/i)
+const signupRegex = new RegExp(
     /sign(ing)?.?up|join|\bregist(er|ration)|newsletter|\bsubscri(be|ption)|contact|create|start|enroll|settings|preferences|profile|update|checkout|guest|purchase|buy|order|schedule|estimate|request|new.?customer|(confirm|retype|repeat) password|password confirm?/i
 )
-const conservativePositiveRegex = new RegExp(/sign.?up|join|register|enroll|newsletter|subscri(be|ption)|settings|preferences|profile|update/i)
-const strictPositiveRegex = new RegExp(/sign.?up|join|register|enroll|settings|preferences|profile|update/i)
+const conservativeSignupRegex = new RegExp(/sign.?up|join|register|enroll|newsletter|subscri(be|ption)|settings|preferences|profile|update/i)
+const strictSignupRegex = new RegExp(/sign.?up|join|register|(create|new).+account|enroll|settings|preferences|profile|update/i)
 
 class FormAnalyzer {
     /** @type HTMLElement */
@@ -23,9 +23,23 @@ class FormAnalyzer {
     constructor (form, input, matching) {
         this.form = form
         this.matching = matching || new Matching(matchingConfiguration)
+        /**
+         * The signal is a continuum where negative values imply login and positive imply signup
+         * @type {number}
+         */
         this.autofillSignal = 0
+        /**
+         * Collects the signals for debugging purposes
+         * @type {string[]}
+         */
         this.signals = []
 
+        /**
+         * A hybrid form can be either a login or a signup, the site uses a single form for both
+         * @type {boolean}
+         */
+        this.isHybrid = false
+
         // Avoid autofill on our signup page
         if (window.location.href.match(/^https:\/\/(.+\.)?duckduckgo\.com\/email\/choose-address/i)) {
             return this
@@ -37,27 +51,43 @@ class FormAnalyzer {
     }
 
     get isLogin () {
+        if (this.isHybrid) return false
+
         return this.autofillSignal < 0
     }
 
     get isSignup () {
+        if (this.isHybrid) return false
+
         return this.autofillSignal >= 0
     }
 
+    /**
+     * Tilts the scoring towards Signup
+     * @param {number} strength
+     * @param {string} signal
+     * @returns {FormAnalyzer}
+     */
     increaseSignalBy (strength, signal) {
         this.autofillSignal += strength
         this.signals.push(`${signal}: +${strength}`)
         return this
     }
 
+    /**
+     * Tilts the scoring towards Login
+     * @param {number} strength
+     * @param {string} signal
+     * @returns {FormAnalyzer}
+     */
     decreaseSignalBy (strength, signal) {
         this.autofillSignal -= strength
         this.signals.push(`${signal}: -${strength}`)
         return this
     }
 
     /**
-     *
+     * Updates the Login<->Signup signal according to the provided parameters
      * @param {object} p
      * @param {string} p.string - The string to check
      * @param {number} p.strength - Strength of the signal
@@ -75,24 +105,25 @@ class FormAnalyzer {
         shouldCheckUnifiedForm = false,
         shouldBeConservative = false
     }) {
-        const matchesNegative = string === 'current-password' || negativeRegex.test(string)
+        const matchesLogin = string === 'current-password' || loginRegex.test(string)
 
         // Check explicitly for unified login/signup forms. They should always be negative, so we increase signal
-        if (shouldCheckUnifiedForm && matchesNegative && strictPositiveRegex.test(string)) {
-            this.decreaseSignalBy(strength + 2, `Unified detected ${signalType}`)
+        if (shouldCheckUnifiedForm && matchesLogin && strictSignupRegex.test(string)) {
+            this.signals.push(`hybrid form: ${signalType}`)
+            this.isHybrid = true
             return this
         }
 
-        const positiveRegexToUse = shouldBeConservative ? conservativePositiveRegex : positiveRegex
-        const matchesPositive = string === 'new-password' || positiveRegexToUse.test(string)
+        const signupRegexToUse = shouldBeConservative ? conservativeSignupRegex : signupRegex
+        const matchesSignup = string === 'new-password' || signupRegexToUse.test(string)
 
         // In some cases a login match means the login is somewhere else, i.e. when a link points outside
         if (shouldFlip) {
-            if (matchesNegative) this.increaseSignalBy(strength, signalType)
-            if (matchesPositive) this.decreaseSignalBy(strength, signalType)
+            if (matchesLogin) this.increaseSignalBy(strength, signalType)
+            if (matchesSignup) this.decreaseSignalBy(strength, signalType)
         } else {
-            if (matchesNegative) this.decreaseSignalBy(strength, signalType)
-            if (matchesPositive) this.increaseSignalBy(strength, signalType)
+            if (matchesLogin) this.decreaseSignalBy(strength, signalType)
+            if (matchesSignup) this.increaseSignalBy(strength, signalType)
         }
         return this
     }
@@ -113,23 +144,21 @@ class FormAnalyzer {
 
     evaluatePageTitle () {
         const pageTitle = document.title
-        this.updateSignal({string: pageTitle, strength: 2, signalType: `page title: ${pageTitle}`})
+        this.updateSignal({string: pageTitle, strength: 2, signalType: `page title: ${pageTitle}`, shouldCheckUnifiedForm: true})
     }
 
     evaluatePageHeadings () {
         const headings = document.querySelectorAll('h1, h2, h3, [class*="title"], [id*="title"]')
-        if (headings) {
-            headings.forEach(({textContent}) => {
-                textContent = removeExcessWhitespace(textContent || '')
-                this.updateSignal({
-                    string: textContent,
-                    strength: 0.5,
-                    signalType: `heading: ${textContent}`,
-                    shouldCheckUnifiedForm: true,
-                    shouldBeConservative: true
-                })
+        headings.forEach(({textContent}) => {
+            textContent = removeExcessWhitespace(textContent || '')
+            this.updateSignal({
+                string: textContent,
+                strength: 0.5,
+                signalType: `heading: ${textContent}`,
+                shouldCheckUnifiedForm: true,
+                shouldBeConservative: true
             })
-        }
+        })
     }
 
     evaluatePage () {

src/Form/input-classifiers.test.js

@@ -8,6 +8,7 @@ import InterfacePrototype from '../DeviceInterface/InterfacePrototype.js'
 
 import testCases from './test-cases/index.js'
 import {SUBMIT_BUTTON_SELECTOR} from './selectors-css.js'
+import {createAvailableInputTypes} from '../../integration-test/helpers/utils.js'
 
 /**
  * @param {HTMLInputElement} el
@@ -160,7 +161,10 @@ describe.each(testCases)('Test $html fields', (testCase) => {
             button._jsdomMockOffsetHeight = 50
         })
 
-        const scanner = createScanner(InterfacePrototype.default())
+        const deviceInterface = InterfacePrototype.default()
+        const availableInputTypes = createAvailableInputTypes({credentials: {username: true, password: true}})
+        deviceInterface.settings.setAvailableInputTypes(availableInputTypes)
+        const scanner = createScanner(deviceInterface)
         scanner.findEligibleInputs(document)
 
         const detectedSubmitButtons = Array.from(scanner.forms.values()).map(form => form.submitButtons).flat()

src/Form/inputTypeConfig.js

@@ -74,9 +74,9 @@ const inputTypeConfig = {
             }
             return ''
         },
-        shouldDecorate: async (input, {isLogin, device}) => {
+        shouldDecorate: async (input, {isLogin, isHybrid, device}) => {
             // if we are on a 'login' page, check if we have data to autofill the field
-            if (isLogin) {
+            if (isLogin || isHybrid) {
                 return canBeAutofilled(input, device)
             }
 
@@ -140,7 +140,7 @@ const getInputConfig = (input) => {
 
 /**
  * Retrieves configs from an input type
- * @param {import('./matching').SupportedTypes | string} inputType
+ * @param {import('./matching').SupportedTypes} inputType
  * @returns {InputTypeConfigs}
  */
 const getInputConfigFromType = (inputType) => {

src/Form/matching-configuration.js

@@ -255,9 +255,9 @@ const matchingConfiguration = {
         /** @type {DDGMatcherConfiguration} */
         ddgMatcher: {
             matchers: {
-                email: {match: '.mail\\b', skip: 'phone|name|reservation number', forceUnknown: 'search|filter|subject|title|\btab\b'},
+                email: {match: '.mail\\b|apple.?id', skip: 'phone|name|reservation number|code', forceUnknown: 'search|filter|subject|title|\btab\b'},
                 password: {match: 'password', forceUnknown: 'captcha|mfa|2fa|two factor'},
-                username: {match: '(user|account|apple|login|net)((.)?(name|id|login).?)?(.?(or|/).+)?$|benutzername', forceUnknown: 'search|policy'},
+                username: {match: '(user|account|login|net)((.)?(name|id|login).?)?(.?(or|/).+)?$|benutzername', forceUnknown: 'search|policy'},
 
                 // CC
                 cardName: {match: '(card.*name|name.*card)|(card.*holder|holder.*card)|(card.*owner|owner.*card)'},