fix scanner debugging

src/DeviceInterface/InterfacePrototype.js

@@ -19,7 +19,8 @@ import {DeviceApi} from '../../packages/device-api/index.js'
 import {
     GetAutofillCredentialsCall,
     StoreFormDataCall,
-    SendJSPixelCall
+    SendJSPixelCall,
+    AddDebugFlagCall
 } from '../deviceApiCalls/__generated__/deviceApiCalls.js'
 import {initFormSubmissionsApi} from './initFormSubmissionsApi.js'
 import {EmailProtection} from '../EmailProtection.js'
@@ -313,6 +314,9 @@ class InterfacePrototype {
 
     postInit () {
         const cleanup = this.scanner.init()
+        if (this.globalConfig.isExtension) {
+            this.deviceApi.notify(new AddDebugFlagCall({ flag: 'autofill' }))
+        }
         this.addLogoutListener(() => {
             cleanup('Logged out')
             if (this.globalConfig.isDDGDomain) {

src/Form/Form.js

@@ -61,7 +61,7 @@ class Form {
         this.device = deviceInterface
         this.hasShadowTree = hasShadowTree
 
-        /** @type Record<'all' | SupportedMainTypes, Set> */
+        /** @type {Record<'all' | SupportedMainTypes, Set>} */
         this.inputs = {
             all: new Set(),
             credentials: new Set(),

src/Scanner.debug.js

@@ -1,7 +1,5 @@
 import { createScanner } from './Scanner.js'
 
-sessionStorage.setItem('ddg-autofill-debug', 'true')
-
 /**
  * Scanner.debug.js
  *
@@ -21,6 +19,12 @@ const mockInterface = {
             inputType_credentials: true,
             inputType_identities: true,
             inputType_creditCards: true
+        },
+        populateDataIfNeeded: () => {
+            // console.log('populateDataIfNeeded');
+        },
+        canAutofillType: () => {
+            return true
         }
     },
     globalConfig: {
@@ -34,12 +38,80 @@ const mockInterface = {
     },
     attachTooltip (...args) {
         console.log('device.attachTooltip', args)
+    },
+    isTooltipActive: () => {
+        return false
+    },
+    get scanner() {
+        return state.scanner
     }
 }
 
-// @ts-ignore
-const scanner = createScanner(mockInterface, {
-    initialDelay: 1 // allow debugging directly on macOS - if this was 0 then it would try to use requestIdleCallback, which is absent in WebKit
-})
+let state = {
+    /** @type {import('./Scanner.js').Scanner | undefined} */
+    scanner: undefined,
+    /** @type {HTMLSelectElement|null} */
+    list: document.querySelector('select[name="html-list"]'),
+}
+
+const url = new URL(window.location.href);
+const initial = url.searchParams.get('form');
+const log = url.searchParams.has('log');
 
-scanner.init()
+if (log) {
+    sessionStorage.setItem('ddg-autofill-debug', 'true')
+} else {
+    sessionStorage.setItem('ddg-autofill-debug', 'false')
+}
+
+loadList()
+    .then(() => {
+        if (initial) {
+            loadNewForm(initial).catch(console.error)
+        }
+    })
+
+
+async function loadList() {
+    const url = new URL(`/test-forms/index.json`, window.location.href);
+    fetch(url)
+        .then(response => response.json())
+        .then(x => {
+            x.forEach(item => {
+                const option = document.createElement('option');
+                option.value = item.html;
+                option.textContent = item.html;
+                state.list?.appendChild(option);
+            });
+        })
+}
+async function loadNewForm(filename) {
+    const url = new URL(`/test-forms/${filename}`, window.location.href);
+    fetch(url)
+        .then(response => response.text())
+        .then(html => {
+            let mainElement = document.querySelector('main');
+            if (mainElement) {
+                mainElement.innerHTML = html;
+                if (state.list) {
+                    state.list.value = filename
+                }
+                state.scanner = createScanner(/** @type {any} */(mockInterface), {
+                    initialDelay: 1 // allow debugging directly on macOS - if this was 0 then it would try to use requestIdleCallback, which is absent in WebKit
+                })
+                state.scanner?.init();
+            } else {
+                console.log("'main' element not found on the page.");
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+        });
+}
+
+document.querySelector('select[name="html-list"]')?.addEventListener('change', (e) => {
+    const elem = /** @type {HTMLSelectElement} */(e.target);
+    const next = new URL(window.location.href);
+    next.searchParams.set('form', elem.value);
+    window.location.href = next.href;
+})

src/Scanner.js

@@ -7,7 +7,6 @@ import {
     shouldLog, pierceShadowTree,
     findEnclosedElements
 } from './autofill-utils.js'
-import { AddDebugFlagCall } from './deviceApiCalls/__generated__/deviceApiCalls.js'
 
 const {
     MAX_INPUTS_PER_PAGE,
@@ -106,10 +105,6 @@ class DefaultScanner {
      * @returns {(reason: string, ...rest) => void}
      */
     init () {
-        if (this.device.globalConfig.isExtension) {
-            this.device.deviceApi.notify(new AddDebugFlagCall({ flag: 'autofill' }))
-        }
-
         // Add the shadow DOM listener. Handlers in handleEvent
         window.addEventListener('pointerdown', this, true)
         // We don't listen for focus events on mobile, they can cause keyboard flashing

src/scanner-debug.html

@@ -6,15 +6,37 @@
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Scanner Test</title>
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+        }
+        .header {
+            padding: 1em;
+            box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+        }
+        main {
+            padding: 1em;
+        }
+    </style>
 </head>
 <body>
-<div>
-    <form action="">
-        <label for="email"><input type="text" id="email"></label>
-        <label for="password"><input type="password" id="password"></label>
-        <button type="submit">Sign in</button>
-    </form>
-</div>
+<script type="importmap">
+    {
+        "imports": {
+            "@duckduckgo/content-scope-scripts/src/apple-utils": "/node_modules/@duckduckgo/content-scope-scripts/src/apple-utils.js"
+        }
+    }
+</script>
+<header class="header">
+    <label>
+        Select a form:
+        <select name="html-list">
+            <option disabled selected></option>
+        </select>
+    </label>
+</header>
+<main><!-- Content will be loaded here --></main>
 <script type="module" src="./Scanner.debug.js"></script>
 </body>
 </html>