Keep the connect buttons disabled until the app has loaded

src/ViperIDE.html

@@ -32,10 +32,10 @@
             <button title="Run File [F5]"        onclick="app.runCurrentFile()"  id="btn-run"><i class="fa-solid fa-circle-play" id="btn-run-icon"></i></button>
         </div>
         <div>
-            <button title="Simulator (virtual device)" onclick="app.connectDevice('sim')" id="btn-conn-sim"><i class="fa-solid fa-display"></i></button>
-            <button title="Connect WebREPL"      onclick="app.connectDevice('ws')"  id="btn-conn-ws" ><i class="fa-solid fa-link"></i></button>
-            <button title="Connect Bluetooth"    onclick="app.connectDevice('ble')" id="btn-conn-ble"><i class="fa-brands fa-bluetooth-b"></i></button>
-            <button title="Connect USB/Serial"   onclick="app.connectDevice('usb')" id="btn-conn-usb"><i class="fa-brands fa-usb"></i></button>
+            <button title="Simulator (virtual device)" onclick="app.connectDevice('sim')" id="btn-conn-sim" disabled><i class="fa-solid fa-display"></i></button>
+            <button title="Connect WebREPL"      onclick="app.connectDevice('ws')"  id="btn-conn-ws" disabled ><i class="fa-solid fa-link"></i></button>
+            <button title="Connect Bluetooth"    onclick="app.connectDevice('ble')" id="btn-conn-ble" disabled><i class="fa-brands fa-bluetooth-b"></i></button>
+            <button title="Connect USB/Serial"   onclick="app.connectDevice('usb')" id="btn-conn-usb" disabled><i class="fa-brands fa-usb"></i></button>
             <button title="Full Screen" onclick="app.toggleFullScreen('app')"  id="app-expand"><i class="fa-solid fa-expand"></i></button>
         </div>
     </div>

src/app.js

@@ -2606,6 +2606,12 @@ function showOfflineReadyToast(version) {
         openWelcomeTab()
     })
 
+    /* The connect buttons ship disabled: until this script has wired up the
+       terminal and the handlers, a click has nothing to act on. */
+    for (const t of ['sim', 'ws', 'ble', 'usb']) {
+        QID(`btn-conn-${t}`).disabled = false
+    }
+
     setTimeout(() => {
         document.body.classList.add('loaded')
     }, 100)

test/browser/early-connect.spec.js

@@ -0,0 +1,46 @@
+// SPDX-License-Identifier: MIT
+//
+// A click on Connect made the instant the page starts loading used to be
+// lost: the button was live before the script behind it had run, so the click
+// hit an undefined `app` and nothing happened. The buttons now stay disabled
+// until the app can honour the click, so an early click waits for that and
+// then connects.
+import { test, expect } from '@playwright/test'
+
+const DELAY_MS = 3000
+
+/* The app ships as one inline script at the end of index.html. To simulate a
+   slow load, serve the same page with that script parked in an inert block
+   and only started DELAY_MS later; the buttons above it are on screen the
+   whole time. */
+async function slowApp(page) {
+    await page.route('**/index.html', async (route) => {
+        const res = await route.fetch()
+        const html = await res.text()
+        const start = html.indexOf('<script>', html.indexOf('id="dpi-ruler"'))
+        const end = html.lastIndexOf('</script>')
+        const code = html.slice(start + '<script>'.length, end)
+        const late = `<script type="text/plain" id="late-app">${code}</script>
+<script>setTimeout(function () {
+  var s = document.createElement('script')
+  s.textContent = document.getElementById('late-app').textContent
+  document.body.appendChild(s)
+}, ${DELAY_MS})</script>`
+        await route.fulfill({ response: res, body: html.slice(0, start) + late + html.slice(end + '</script>'.length) })
+    })
+}
+
+test('connect clicked while the page is still loading connects once ready', async ({ page }) => {
+    await slowApp(page)
+    await page.goto('/index.html')
+    // Playwright waits for the button to be enabled before it clicks.
+    await page.locator('#btn-conn-sim').click()
+    await expect(page.locator('#xterm')).toContainText('>>>', { timeout: 45_000 })
+})
+
+test('connect buttons are disabled until the app is ready', async ({ page }) => {
+    await slowApp(page)
+    await page.goto('/index.html')
+    await expect(page.locator('#btn-conn-sim')).toBeDisabled()
+    await expect(page.locator('#btn-conn-sim')).toBeEnabled({ timeout: 15_000 })
+})