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)'},