Ema/prevent focus extensions

integration-test/helpers/pages.js

@@ -607,6 +607,14 @@ export function emailAutofillPage (page, server) {
  if (!box) throw new Error('unreachable')
  await input.click({position: {x: box.width - (box.height / 2), y: box.height / 2}})
  },
+ async assertInputHasFocus () {
+ const input = page.locator(selectors.identity)
+ await expect(input).toBeFocused()
+ },
+ async assertInputNotFocused () {
+ const input = page.locator(selectors.identity)
+ await expect(input).not.toBeFocused()
+ },
  async assertEmailValue (emailAddress) {
  const email = page.locator(selectors.identity)
  await expect(email).toHaveValue(emailAddress)

integration-test/tests/incontext-signup.extension.spec.js

@@ -22,9 +22,11 @@ test.describe('chrome extension', () => {
  // Confirm tooltip hidden after clicking the input
  await emailPage.clickIntoInput()
  await incontextSignup.assertIsHidden()
+ await emailPage.assertInputHasFocus()
 
  // Confirm tooltip shows after clicking the Dax icon
  await emailPage.clickDirectlyOnDax()
+ await emailPage.assertInputNotFocused()
  await incontextSignup.assertIsShowing()
  await incontextSignup.getEmailProtection()
 

src/DeviceInterface.js

@@ -45,6 +45,7 @@ function createDevice () {
  }
  return new AppleDeviceInterface(globalConfig, deviceApi, settings)
  }
+ globalConfig.isExtension = true
  return new ExtensionInterface(globalConfig, deviceApi, settings)
 }
 

src/Form/Form.js

@@ -7,7 +7,7 @@ import {
  isEventWithinDax,
  isLikelyASubmitButton,
  isVisible, buttonMatchesFormType,
- safeExecute, getText
+ safeExecute, getText, wasAutofilledByChrome
 } from '../autofill-utils.js'
 
 import {getInputSubtype, getInputMainType, createMatching, safeRegex} from './matching.js'
@@ -196,6 +196,7 @@ class Form {
 
  removeInputHighlight (input) {
  removeInlineStyles(input, getIconStylesAutofilled(input, this))
+ removeInlineStyles(input, {'cursor': 'pointer'})
  input.classList.remove('ddg-autofilled')
  this.addAutofillStyles(input)
  }
@@ -374,12 +375,17 @@ class Form {
  if (hasIcon) {
  this.addAutofillStyles(input)
  this.addListener(input, 'mousemove', (e) => {
+ if (wasAutofilledByChrome(input)) return
+
  if (isEventWithinDax(e, e.target)) {
- e.target.style.setProperty('cursor', 'pointer', 'important')
+ addInlineStyles(e.target, {'cursor': 'pointer'})
  } else {
- e.target.style.removeProperty('cursor')
+ removeInlineStyles(e.target, {'cursor': 'pointer'})
  }
  })
+ this.addListener(input, 'mouseleave', (e) => {
+ removeInlineStyles(e.target, {'cursor': 'pointer'})
+ })
  }
 
  function getMainClickCoords (e) {
@@ -415,6 +421,8 @@ class Form {
  const input = e.target
  let click = null
 
+ if (wasAutofilledByChrome(input)) return
+
  if (!canBeInteractedWith(input)) return
 
  // Checks for pointerdown event
@@ -428,14 +436,17 @@ class Form {
  }
 
  if (this.shouldOpenTooltip(e, input)) {
+ // On mobile and extensions we don't trigger the focus event to avoid
+ // keyboard flashing and conflicts with browsers' own tooltips
  if (
- this.device.globalConfig.isMobileApp &&
+ (this.device.globalConfig.isMobileApp || this.device.globalConfig.isExtension) &&
  // Avoid the icon capturing clicks on small fields making it impossible to focus
  input.offsetWidth > 50 &&
  isEventWithinDax(e, input)
  ) {
  e.preventDefault()
  e.stopImmediatePropagation()
+ input.blur()
  }
 
  this.touched.add(input)

src/Form/inputTypeConfig.js

@@ -16,21 +16,21 @@ const getIdentitiesIcon = (input, {device}) => {
  if (!canBeInteractedWith(input)) return ''
 
  // In Firefox web_accessible_resources could leak a unique user identifier, so we avoid it here
- const { isDDGApp, isFirefox } = device.globalConfig
+ const { isDDGApp, isFirefox, isExtension } = device.globalConfig
  const subtype = getInputSubtype(input)
 
  if (subtype === 'emailAddress' && device.inContextSignup?.isAvailable()) {
  if (isDDGApp || isFirefox) {
  return daxGrayscaleBase64
- } else if (typeof window.chrome?.runtime !== 'undefined') {
+ } else if (isExtension) {
  return chrome.runtime.getURL('img/logo-small-grayscale.svg')
  }
  }
 
  if (subtype === 'emailAddress' && device.isDeviceSignedIn()) {
  if (isDDGApp || isFirefox) {
  return daxBase64
- } else if (typeof window.chrome?.runtime !== 'undefined') {
+ } else if (device.globalConfig.isExtension) {
  return chrome.runtime.getURL('img/logo-small.svg')
  }
  }

src/UI/styles/autofill-tooltip-styles.css

@@ -264,6 +264,7 @@ hr:first-child {
 
 /* Email Protection signup notice */
 :not(.top-autofill) .tooltip--email-signup {
+ text-align: left;
  color: #222222;
  padding: 16px 20px;
  width: 380px;
@@ -291,6 +292,7 @@ hr:first-child {
  border: 0;
  cursor: pointer;
  display: inline-block;
+ font-family: inherit;
  font-style: normal;
  font-weight: bold;
  padding: 8px 12px;

src/autofill-utils.js

@@ -378,6 +378,20 @@ function isValidTLD (hostname = window.location.hostname) {
  return tldrs.test(hostname)
 }
 
+/**
+ * Chrome's UA adds styles using this selector when using the built-in autofill
+ * @param {HTMLInputElement} input
+ * @returns {boolean}
+ */
+const wasAutofilledByChrome = (input) => {
+ try {
+ // Other browsers throw because the selector is invalid
+ return input.matches('input:-internal-autofill-selected')
+ } catch (e) {
+ return false
+ }
+}
+
 export {
  notifyWebApp,
  sendAndWaitForAnswer,
@@ -399,5 +413,6 @@ export {
  buttonMatchesFormType,
  getText,
  isLocalNetwork,
- isValidTLD
+ isValidTLD,
+ wasAutofilledByChrome
 }

src/config.js

@@ -54,13 +54,15 @@ function createGlobalConfig (overrides) {
  const isMobileApp = ['ios', 'android'].includes(userPreferences?.platform.name) || isAndroid
  const isFirefox = navigator.userAgent.includes('Firefox')
  const isDDGDomain = Boolean(window.location.href.match(DDG_DOMAIN_REGEX))
+ const isExtension = false
 
  const config = {
  isApp,
  isDDGApp,
  isAndroid,
  isFirefox,
  isMobileApp,
+ isExtension,
  isTopFrame,
  isWindows,
  secret,

src/device-interface.d.ts

@@ -89,6 +89,7 @@ interface GlobalConfig {
  isAndroid: boolean;
  isFirefox: boolean;
  isMobileApp: boolean;
+ isExtension: boolean;
  isWindows: boolean;
  isTopFrame: boolean;
  secret: string;