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;