From 16ae2ac65fc4d7a44c8f795b68f5aad8417c332d Mon Sep 17 00:00:00 2001
From: Mark Haslinghuis <mark@numloq.nl>
Date: Sat, 14 Jun 2025 23:40:40 +0200
Subject: [PATCH] cleanup and explicit use web prefix for protocols (#4500)

* cleanup

* more cleanup

* Reset connectionInfo

* Fix todo

* Fix default

* More explicit
---
 src/components/port-picker/PortsInput.vue |  6 +--
 src/js/data_storage.js                    |  2 -
 src/js/port_handler.js                    | 40 +++++++-------
 src/js/protocols/WebBluetooth.js          |  2 +-
 src/js/protocols/WebSerial.js             |  5 +-
 src/js/serial.js                          | 64 +++++------------------
 src/js/serial_backend.js                  |  9 ++--
 src/js/utils/checkBrowserCompatibility.js |  4 +-
 8 files changed, 50 insertions(+), 82 deletions(-)

diff --git a/src/components/port-picker/PortsInput.vue b/src/components/port-picker/PortsInput.vue
index 0b73c739..9cf896a7 100644
--- a/src/components/port-picker/PortsInput.vue
+++ b/src/components/port-picker/PortsInput.vue
@@ -42,7 +42,7 @@
                 >
                     {{ connectedUsbDevice.displayName }}
                 </option>
-                <option v-if="showSerialOption" value="requestpermission">
+                <option v-if="showSerialOption" value="requestpermissionserial">
                     {{ $t("portsSelectPermission") }}
                 </option>
                 <option v-if="showBluetoothOption" value="requestpermissionbluetooth">
@@ -173,8 +173,8 @@ export default defineComponent({
 
         const onChangePort = (event) => {
             const value = event.target.value;
-            if (value === "requestpermission") {
-                EventBus.$emit("ports-input:request-permission");
+            if (value === "requestpermissionserial") {
+                EventBus.$emit("ports-input:request-permission-serial");
             } else if (value === "requestpermissionbluetooth") {
                 EventBus.$emit("ports-input:request-permission-bluetooth");
             } else if (value === "requestpermissionusb") {
diff --git a/src/js/data_storage.js b/src/js/data_storage.js
index 4d7e5555..5b8cdc78 100644
--- a/src/js/data_storage.js
+++ b/src/js/data_storage.js
@@ -11,8 +11,6 @@ const CONFIGURATOR = {
 
     connectionValid: false,
     connectionValidCliOnly: false,
-    bluetoothMode: false,
-    manualMode: false,
     virtualMode: false,
     virtualApiVersion: "0.0.1",
     cliActive: false,
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index 0d6499e1..3299ed67 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -50,8 +50,8 @@ const PortHandler = new (function () {
 })();
 
 PortHandler.initialize = function () {
-    EventBus.$on("ports-input:request-permission-bluetooth", () => this.requestDevicePermission("bluetooth"));
-    EventBus.$on("ports-input:request-permission", () => this.requestDevicePermission("serial"));
+    EventBus.$on("ports-input:request-permission-bluetooth", () => this.requestDevicePermission("webbluetooth"));
+    EventBus.$on("ports-input:request-permission-serial", () => this.requestDevicePermission("webserial"));
     EventBus.$on("ports-input:request-permission-usb", () => this.requestDevicePermission("usb"));
     EventBus.$on("ports-input:change", this.onChangeSelectedPort.bind(this));
 
@@ -60,9 +60,9 @@ PortHandler.initialize = function () {
         const detail = event.detail;
 
         if (detail?.path?.startsWith("bluetooth")) {
-            this.handleDeviceAdded(detail, "bluetooth");
+            this.handleDeviceAdded(detail, "webbluetooth");
         } else {
-            this.handleDeviceAdded(detail, "serial");
+            this.handleDeviceAdded(detail, "webserial");
         }
     });
 
@@ -81,8 +81,8 @@ PortHandler.initialize = function () {
 PortHandler.refreshAllDeviceLists = async function () {
     // Update all device lists in parallel
     return Promise.all([
-        this.updateDeviceList("serial"),
-        this.updateDeviceList("bluetooth"),
+        this.updateDeviceList("webserial"),
+        this.updateDeviceList("webbluetooth"),
         this.updateDeviceList("usb"),
     ]).then(() => {
         this.selectActivePort();
@@ -112,7 +112,7 @@ PortHandler.removedSerialDevice = function (device) {
     if (!devicePath) {
         console.warn(`${this.logHead} Device removal event missing path information`, device);
         // Still update ports, but don't try to use the undefined path
-        this.updateDeviceList("serial").then(() => {
+        this.updateDeviceList("webserial").then(() => {
             this.selectActivePort();
         });
         return;
@@ -120,8 +120,8 @@ PortHandler.removedSerialDevice = function (device) {
 
     // Update the appropriate ports list based on the device type
     const updatePromise = devicePath.startsWith("bluetooth")
-        ? this.updateDeviceList("bluetooth")
-        : this.updateDeviceList("serial");
+        ? this.updateDeviceList("webbluetooth")
+        : this.updateDeviceList("webserial");
 
     const wasSelectedPort = this.portPicker.selectedPort === devicePath;
 
@@ -177,7 +177,9 @@ PortHandler.requestDevicePermission = function (deviceType) {
 
 PortHandler.sortPorts = function (ports) {
     return ports.sort(function (a, b) {
-        return a.path.localeCompare(b.path, window.navigator.language, {
+        const locale = typeof window !== "undefined" && window.navigator ? window.navigator.language : "en";
+
+        return a.path.localeCompare(b.path, locale, {
             numeric: true,
             sensitivity: "base",
         });
@@ -282,7 +284,7 @@ PortHandler.handleDeviceAdded = function (device, deviceType) {
 
     // Update the appropriate device list
     const updatePromise =
-        deviceType === "bluetooth" ? this.updateDeviceList("bluetooth") : this.updateDeviceList("serial");
+        deviceType === "webbluetooth" ? this.updateDeviceList("webbluetooth") : this.updateDeviceList("webserial");
 
     updatePromise.then(() => {
         const selectedPort = this.selectActivePort(device);
@@ -304,9 +306,9 @@ PortHandler.updateDeviceList = async function (deviceType) {
 
     try {
         switch (deviceType) {
-            case "bluetooth":
+            case "webbluetooth":
                 if (this.showBluetoothOption) {
-                    ports = await serial.getDevices("bluetooth");
+                    ports = await serial.getDevices("webbluetooth");
                 }
                 break;
             case "usb":
@@ -314,9 +316,9 @@ PortHandler.updateDeviceList = async function (deviceType) {
                     ports = await WEBUSBDFU.getDevices();
                 }
                 break;
-            case "serial":
+            case "webserial":
                 if (this.showSerialOption) {
-                    ports = await serial.getDevices("serial");
+                    ports = await serial.getDevices("webserial");
                 }
                 break;
             default:
@@ -329,7 +331,7 @@ PortHandler.updateDeviceList = async function (deviceType) {
 
         // Update the appropriate properties based on device type
         switch (deviceType) {
-            case "bluetooth":
+            case "webbluetooth":
                 this.bluetoothAvailable = orderedPorts.length > 0;
                 this.currentBluetoothPorts = [...orderedPorts];
                 console.log(`${this.logHead} Found bluetooth port(s)`, orderedPorts);
@@ -339,12 +341,14 @@ PortHandler.updateDeviceList = async function (deviceType) {
                 this.currentUsbPorts = [...orderedPorts];
                 console.log(`${this.logHead} Found DFU port(s)`, orderedPorts);
                 break;
-            case "serial":
-            default:
+            case "webserial":
                 this.portAvailable = orderedPorts.length > 0;
                 this.currentSerialPorts = [...orderedPorts];
                 console.log(`${this.logHead} Found serial port(s)`, orderedPorts);
                 break;
+            default:
+                console.warn(`${this.logHead} Unknown device type for updating ports: ${deviceType}`);
+                return [];
         }
 
         return orderedPorts;
diff --git a/src/js/protocols/WebBluetooth.js b/src/js/protocols/WebBluetooth.js
index 19751fdf..196708d5 100644
--- a/src/js/protocols/WebBluetooth.js
+++ b/src/js/protocols/WebBluetooth.js
@@ -44,7 +44,7 @@ class WebBluetooth extends EventTarget {
 
         this.bluetooth.addEventListener("connect", (e) => this.handleNewDevice(e.target));
         this.bluetooth.addEventListener("disconnect", (e) => this.handleRemovedDevice(e.target));
-        this.bluetooth.addEventListener("gatserverdisconnected", (e) => this.handleRemovedDevice(e.target));
+        this.bluetooth.addEventListener("gattserverdisconnected", (e) => this.handleRemovedDevice(e.target));
 
         this.loadDevices();
     }
diff --git a/src/js/protocols/WebSerial.js b/src/js/protocols/WebSerial.js
index 0e7afb0f..46214bb2 100644
--- a/src/js/protocols/WebSerial.js
+++ b/src/js/protocols/WebSerial.js
@@ -1,7 +1,7 @@
 import { webSerialDevices, vendorIdNames } from "./devices";
 import GUI from "../gui";
 
-const logHead = "[SERIAL]";
+const logHead = "[WEBSERIAL]";
 
 async function* streamAsyncIterable(reader, keepReadingFlag) {
     try {
@@ -308,6 +308,7 @@ class WebSerial extends EventTarget {
 
             this.connectionId = false;
             this.bitrate = 0;
+            this.connectionInfo = null; // Reset connectionInfo
             this.closeRequested = false;
 
             this.dispatchEvent(new CustomEvent("disconnect", { detail: true }));
@@ -315,6 +316,8 @@ class WebSerial extends EventTarget {
         } catch (error) {
             console.error(`${logHead} Error disconnecting:`, error);
             this.closeRequested = false;
+            // Ensure connectionInfo is reset even on error if port was potentially open
+            this.connectionInfo = null;
             this.dispatchEvent(new CustomEvent("disconnect", { detail: false }));
             return false;
         } finally {
diff --git a/src/js/serial.js b/src/js/serial.js
index 2bf6ca41..9296cade 100644
--- a/src/js/serial.js
+++ b/src/js/serial.js
@@ -18,21 +18,18 @@ class Serial extends EventTarget {
 
         // Initialize the available protocols
         this._webSerial = new WebSerial();
-        this._bluetooth = new WebBluetooth();
-        this._websocket = new Websocket();
+        this._webBluetooth = new WebBluetooth();
+        this._webSocket = new Websocket();
         this._virtual = new VirtualSerial();
 
         // Update protocol map to use consistent naming
         this._protocolMap = {
-            serial: this._webSerial, // TODO: should be 'webserial'
-            bluetooth: this._bluetooth, // TODO: should be 'webbluetooth'
-            websocket: this._websocket,
+            webserial: this._webSerial,
+            webbluetooth: this._webBluetooth,
+            websocket: this._webSocket,
             virtual: this._virtual,
         };
 
-        // Initialize with default protocol
-        this.selectProtocol(false);
-
         // Forward events from all protocols to the Serial class
         this._setupEventForwarding();
     }
@@ -61,10 +58,10 @@ class Serial extends EventTarget {
         if (protocol === this._webSerial) {
             return "webserial";
         }
-        if (protocol === this._bluetooth) {
+        if (protocol === this._webBluetooth) {
             return "webbluetooth";
         }
-        if (protocol === this._websocket) {
+        if (protocol === this._webSocket) {
             return "websocket";
         }
         if (protocol === this._virtual) {
@@ -77,7 +74,7 @@ class Serial extends EventTarget {
      * Set up event forwarding from all protocols to the Serial class
      */
     _setupEventForwarding() {
-        const protocols = [this._webSerial, this._bluetooth, this._websocket, this._virtual];
+        const protocols = [this._webSerial, this._webBluetooth, this._webSocket, this._virtual];
         const events = ["addedDevice", "removedDevice", "connect", "disconnect", "receive"];
 
         protocols.forEach((protocol) => {
@@ -114,12 +111,12 @@ class Serial extends EventTarget {
     }
 
     /**
-     * Selects the appropriate protocol based on port path or CONFIGURATOR settings
+     * Selects the appropriate protocol based on port path
      * @param {string|null} portPath - Optional port path to determine protocol
      * @param {boolean} forceDisconnect - Whether to force disconnect from current protocol
      */
     selectProtocol(portPath = null, forceDisconnect = true) {
-        // Determine which protocol to use based on port path first, then fall back to CONFIGURATOR
+        // Determine which protocol to use based on port path
         let newProtocol;
 
         if (portPath) {
@@ -127,46 +124,15 @@ class Serial extends EventTarget {
             if (portPath === "virtual") {
                 console.log(`${this.logHead} Using virtual protocol (based on port path)`);
                 newProtocol = this._virtual;
-                // Update CONFIGURATOR flags for consistency
-                CONFIGURATOR.virtualMode = true;
-                CONFIGURATOR.bluetoothMode = false;
-                CONFIGURATOR.manualMode = false;
             } else if (portPath === "manual") {
                 console.log(`${this.logHead} Using websocket protocol (based on port path)`);
-                newProtocol = this._websocket;
-                // Update CONFIGURATOR flags for consistency
-                CONFIGURATOR.virtualMode = false;
-                CONFIGURATOR.bluetoothMode = false;
-                CONFIGURATOR.manualMode = true;
+                newProtocol = this._webSocket;
             } else if (portPath.startsWith("bluetooth")) {
                 console.log(`${this.logHead} Using bluetooth protocol (based on port path: ${portPath})`);
-                newProtocol = this._bluetooth;
-                // Update CONFIGURATOR flags for consistency
-                CONFIGURATOR.virtualMode = false;
-                CONFIGURATOR.bluetoothMode = true;
-                CONFIGURATOR.manualMode = false;
+                newProtocol = this._webBluetooth;
             } else {
                 console.log(`${this.logHead} Using web serial protocol (based on port path: ${portPath})`);
                 newProtocol = this._webSerial;
-                // Update CONFIGURATOR flags for consistency
-                CONFIGURATOR.virtualMode = false;
-                CONFIGURATOR.bluetoothMode = false;
-                CONFIGURATOR.manualMode = false;
-            }
-        } else {
-            // Fall back to CONFIGURATOR flags if no port path is provided
-            if (CONFIGURATOR.virtualMode) {
-                console.log(`${this.logHead} Using virtual protocol (based on CONFIGURATOR flags)`);
-                newProtocol = this._virtual;
-            } else if (CONFIGURATOR.manualMode) {
-                console.log(`${this.logHead} Using websocket protocol (based on CONFIGURATOR flags)`);
-                newProtocol = this._websocket;
-            } else if (CONFIGURATOR.bluetoothMode) {
-                console.log(`${this.logHead} Using bluetooth protocol (based on CONFIGURATOR flags)`);
-                newProtocol = this._bluetooth;
-            } else {
-                console.log(`${this.logHead} Using web serial protocol (based on CONFIGURATOR flags)`);
-                newProtocol = this._webSerial;
             }
         }
 
@@ -184,8 +150,6 @@ class Serial extends EventTarget {
             // Set new protocol
             this._protocol = newProtocol;
             console.log(`${this.logHead} Protocol switched successfully to:`, this._protocol);
-        } else {
-            console.log(`${this.logHead} Same protocol selected, no switch needed`);
         }
 
         return this._protocol;
@@ -251,8 +215,6 @@ class Serial extends EventTarget {
             return false;
         }
 
-        console.log(`${this.logHead} Disconnecting from current protocol`, this._protocol);
-
         try {
             // Handle case where we're already disconnected
             if (!this._protocol.connected) {
@@ -292,7 +254,7 @@ class Serial extends EventTarget {
 
     /**
      * Get devices from a specific protocol type or current protocol
-     * @param {string} protocolType - Optional protocol type ('serial', 'bluetooth', 'websocket', 'virtual')
+     * @param {string} protocolType - Optional protocol type ('webserial', 'webbluetooth', 'websocket', 'virtual')
      * @returns {Promise<Array>} - List of devices
      */
     async getDevices(protocolType = null) {
diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js
index b3caa3d3..7c666b50 100644
--- a/src/js/serial_backend.js
+++ b/src/js/serial_backend.js
@@ -125,12 +125,9 @@ function connectDisconnect() {
 
             // Set configuration flags for consistency with other code
             CONFIGURATOR.virtualMode = selectedPort === "virtual";
-            CONFIGURATOR.bluetoothMode = selectedPort.startsWith("bluetooth");
-            CONFIGURATOR.manualMode = selectedPort === "manual";
 
             // Select the appropriate protocol based directly on the port path
             serial.selectProtocol(selectedPort);
-            console.log("Serial protocol selected:", serial._protocol, "using port", portName);
 
             if (CONFIGURATOR.virtualMode) {
                 CONFIGURATOR.virtualApiVersion = PortHandler.portPicker.virtualMspVersion;
@@ -186,7 +183,11 @@ function finishClose(finishedCallback) {
         $("#dialogResetToCustomDefaults")[0].close();
     }
 
-    serial.disconnect(onClosed);
+    serial.disconnect();
+
+    if (CONFIGURATOR.virtualMode) {
+        onClosed(true);
+    }
 
     MSP.disconnect_cleanup();
     PortUsage.reset();
diff --git a/src/js/utils/checkBrowserCompatibility.js b/src/js/utils/checkBrowserCompatibility.js
index e76e2f6b..a1a34411 100644
--- a/src/js/utils/checkBrowserCompatibility.js
+++ b/src/js/utils/checkBrowserCompatibility.js
@@ -108,13 +108,13 @@ export function checkBrowserCompatibility() {
         .css({
             height: "100%",
             display: "grid",
-            "background-image": "url(../images/osd-bg-1.jpg",
+            "background-image": "url(../images/osd-bg-1.jpg)",
             "background-size": "cover",
             "background-repeat": "no-repeat",
         })
         .append(newDiv);
 
-    $("div").append(errorMessage).css({
+    $(newDiv).append(errorMessage).css({
         "font-size": "16px",
         "background-color": "var(--surface-200)",
         color: "var(--text)",