From a35e63079bd1d9d01847d0a59c9617ce3a2429a1 Mon Sep 17 00:00:00 2001
From: Miguel Angel Mulero Martinez <migmul@gmail.com>
Date: Mon, 13 May 2024 16:59:20 +0200
Subject: [PATCH 1/9] Make port_handler work with PWA

---
 locales/en/messages.json |  4 +++
 src/js/port_handler.js   | 74 ++++++++++++++++++++++++++++++++--------
 src/js/serial_backend.js | 16 ++++-----
 src/js/webSerial.js      | 44 ++++++++++++++++++++++--
 4 files changed, 113 insertions(+), 25 deletions(-)

diff --git a/locales/en/messages.json b/locales/en/messages.json
index a956439b53..d7aa9d6597 100755
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -62,6 +62,10 @@
         "message": "Virtual Mode (Experimental)",
         "description": "Configure a Virtual Flight Controller without the need of a physical FC."
     },
+    "portsSelectPermission": {
+        "message": "--- I can't find my device ---",
+        "description": "Option in the port selection dropdown to allow the user to give permissions to the system to access the device."
+    },
     "virtualMSPVersion": {
         "message": "Virtual Firmware Version"
     },
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index 7a4fbe8497..736db850b5 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -3,10 +3,12 @@ import FC from "./fc";
 import { i18n } from "./localization";
 import { generateVirtualApiVersions, getTextWidth } from './utils/common';
 import { get as getConfig } from "./ConfigStorage";
-import serial from "./serial";
 import MdnsDiscovery from "./mdns_discovery";
 import { isWeb } from "./utils/isWeb";
 import { usbDevices } from "./usb_devices";
+import { serialShim } from "./serial_shim.js";
+
+const serial = serialShim();
 
 const TIMEOUT_CHECK = 500 ; // With 250 it seems that it produces a memory leak and slowdown in some versions, reason unknown
 
@@ -26,13 +28,7 @@ const PortHandler = new function () {
 PortHandler.initialize = function () {
     const self = this;
 
-    // currently web build doesn't need port handler,
-    // so just bail out.
-    if (isWeb()) {
-        return 'not implemented';
-    }
-
-    const portPickerElementSelector = "div#port-picker #port";
+    const portPickerElementSelector = "div#port-picker #port, div.web-port-picker #port";
     self.portPickerElement = $(portPickerElementSelector);
     self.selectList = document.querySelector(portPickerElementSelector);
     self.initialWidth = self.selectList.offsetWidth + 12;
@@ -73,15 +69,29 @@ PortHandler.check = function () {
         self.check_serial_devices();
     }
 
-    self.usbCheckLoop = setTimeout(() => {
-        self.check();
-    }, TIMEOUT_CHECK);
+    if (isWeb()) {
+        serial.addEventListener("addedDevice", (e) => {
+            this.check_serial_devices();
+        });
+
+        serial.addEventListener("removedDevice", (e) => {
+            this.check_serial_devices();
+        });
+
+        this.check_serial_devices();
+
+    } else {
+        self.usbCheckLoop = setTimeout(() => {
+            self.check();
+        }, TIMEOUT_CHECK);
+    }
+
 };
 
 PortHandler.check_serial_devices = function () {
     const self = this;
 
-    serial.getDevices(function(cp) {
+    const updatePorts = function(cp) {
         self.currentPorts = [];
 
         if (self.useMdnsBrowser) {
@@ -110,10 +120,21 @@ PortHandler.check_serial_devices = function () {
             self.removePort();
             self.detectPort();
         }
-    });
+    };
+
+    if (isWeb()) {
+        serial.getDevices().then(updatePorts);
+    } else {
+        serial.getDevices(updatePorts);
+    }
 };
 
 PortHandler.check_usb_devices = function (callback) {
+
+    if (isWeb()) {
+        return;
+    }
+
     const self = this;
 
     chrome.usb.getDevices(usbDevices, function (result) {
@@ -315,10 +336,35 @@ PortHandler.updatePortSelect = function (ports) {
         this.addNoPortSelection();
     }
 
+    if (isWeb()) {
+        const askpermission = 'askpermission';
+        this.portPickerElement.append($("<option/>", {
+            value: askpermission,
+            text: i18n.getMessage('portsSelectPermission'),
+            /**
+             * @deprecated please avoid using `isDFU` and friends for new code.
+             */
+            //data: {isShowPermission: true},
+        }));
+
+        this.portPickerElement.on("change", e => {
+            if (e.target.value === askpermission) {
+                this.askPermissionPort();
+            }
+            e.target.value = e.target.options[0].value;
+        });
+    }
+
     this.setPortsInputWidth();
     this.currentPorts = ports;
 };
 
+PortHandler.askPermissionPort = function() {
+    serial.requestPermissionDevice().then(() => {
+        this.check_serial_devices();
+    });
+}
+
 PortHandler.selectActivePort = function() {
     const ports = this.currentPorts;
     const OS = GUI.operating_system;
@@ -360,7 +406,7 @@ PortHandler.setPortsInputWidth = function() {
 
     width = (width > this.initialWidth) ? width : this.initialWidth;
 
-    const portsInput = document.querySelector("div#port-picker #portsinput");
+    const portsInput = document.querySelector("div#port-picker #portsinput, div.web-port-picker #portsinput");
     portsInput.style.width = `${width}px`;
 };
 
diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js
index dc17175bce..59a90c3372 100644
--- a/src/js/serial_backend.js
+++ b/src/js/serial_backend.js
@@ -73,7 +73,7 @@ export function initializeSerialBackend() {
         $('#port-override').val(data.portOverride);
     }
 
-    $('div#port-picker #port').change(function (target) {
+    $('div#port-picker #port, div.web-port-picker #port').change(function (target) {
         GUI.updateManualPortVisibility();
     });
 
@@ -85,7 +85,7 @@ export function initializeSerialBackend() {
         if (selectedPort === 'manual') {
             portName = $('#port-override').val();
         } else {
-            portName = String($('div#port-picker #port').val());
+            portName = String($('div.web-port-picker #port').val());
         }
 
         if (!GUI.connect_lock && selectedPort !== 'none') {
@@ -93,7 +93,7 @@ export function initializeSerialBackend() {
 
             GUI.configuration_loaded = false;
 
-            const selected_baud = parseInt($('div#port-picker #baud').val());
+            const selected_baud = parseInt($('div#port-picker #baud, div.web-port-picker #baud').val());
             const selectedPort = $('#port').val();
 
             if (selectedPort === 'DFU') {
@@ -106,7 +106,7 @@ export function initializeSerialBackend() {
                 GUI.connecting_to = portName;
 
                 // lock port select & baud while we are connecting / connected
-                $('div#port-picker #port, div#port-picker #baud, div#port-picker #delay').prop('disabled', true);
+                $('div#port-picker #port, div#port-picker #baud, div#port-picker #delay, div.web-port-picker #port, div.web-port-picker #baud, div.web-port-picker #delay').prop('disabled', true);
                 $('div.connect_controls div.connect_state').text(i18n.getMessage('connecting'));
 
                 const baudRate = parseInt($('#baud').val());
@@ -127,7 +127,7 @@ export function initializeSerialBackend() {
                     serial.removeEventListener('disconnect', disconnectHandler);
                     serial.addEventListener('disconnect', disconnectHandler);
 
-                    serial.connect({ baudRate });
+                    serial.connect(portName, { baudRate });
                 } else {
                     serial.connect(portName, { bitrate: selected_baud }, onOpen);
                     toggleStatus();
@@ -230,8 +230,8 @@ function finishClose(finishedCallback) {
     $('#dialogReportProblems-closebtn').click();
 
     // unlock port select & baud
-    $('div#port-picker #port').prop('disabled', false);
-    if (!GUI.auto_connect) $('div#port-picker #baud').prop('disabled', false);
+    $('div#port-picker #port, div.web-port-picker #port').prop('disabled', false);
+    if (!GUI.auto_connect) $('div#port-picker #baud, div.web-port-picker #baud').prop('disabled', false);
 
     // reset connect / disconnect button
     $('div.connect_controls a.connect').removeClass('active');
@@ -275,7 +275,7 @@ function abortConnection() {
     $('div#connectbutton a.connect').removeClass('active');
 
     // unlock port select & baud
-    $('div#port-picker #port, div#port-picker #baud, div#port-picker #delay').prop('disabled', false);
+    $('div#port-picker #port, div#port-picker #baud, div#port-picker #delay, div.web-port-picker #port, div.web-port-picker #baud, div.web-port-picker #delay').prop('disabled', false);
 
     // reset data
     isConnected = false;
diff --git a/src/js/webSerial.js b/src/js/webSerial.js
index 9d0317335e..512ffa995e 100644
--- a/src/js/webSerial.js
+++ b/src/js/webSerial.js
@@ -30,12 +30,22 @@ class WebSerial extends EventTarget {
 
         this.logHead = "SERIAL: ";
 
+        this.port_counter = 0;
+        this.ports = null;
         this.port = null;
         this.reader = null;
         this.writer = null;
         this.reading = false;
 
         this.connect = this.connect.bind(this);
+
+        navigator.serial.addEventListener("connect", device => {
+            this.dispatchEvent(new CustomEvent("addedDevice", { detail: device.target }));
+        });
+
+        navigator.serial.addEventListener("disconnect", device => {
+            this.dispatchEvent(new CustomEvent("removedDevice", { detail: device.target }));
+        });
     }
 
     handleReceiveBytes(info) {
@@ -47,13 +57,41 @@ class WebSerial extends EventTarget {
         this.removeEventListener('disconnect', this.handleDisconnect);
     }
 
-    async connect(options) {
-        this.openRequested = true;
-        this.port = await navigator.serial.requestPort({
+    async requestPermissionDevice() {
+        const permissionPort = await navigator.serial.requestPort({
+            filters: webSerialDevices,
+        });
+
+        return permissionPort;
+    }; 
+
+    async getDevices() {
+
+        const ports = await navigator.serial.getPorts({
             filters: webSerialDevices,
         });
 
+        this.port_counter = 0;
+        this.ports = ports.map(function (port, index) {
+            return {
+                path: `${this.port_counter++}`,
+                displayName: `Betaflight Flight Controller`,
+                vendorId: port.vendorId,
+                productId: port.productId,
+                port: port,
+            };
+        }, this);
+
+        return this.ports;
+    }
+
+    async connect(path, options) {
+        this.openRequested = true;
+
+        this.port = this.ports.find(device => device.path === path).port;
+
         await this.port.open(options);
+
         const connectionInfo = this.port.getInfo();
         this.connectionInfo = connectionInfo;
         this.writer = this.port.writable.getWriter();

From 1d0527ea50f42bff859ed79e8949c4bb950bd7d6 Mon Sep 17 00:00:00 2001
From: Miguel Angel Mulero Martinez <migmul@gmail.com>
Date: Tue, 14 May 2024 19:07:29 +0200
Subject: [PATCH 2/9] Modify the port_handler more the Vue way

---
 src/components/init.js                    |   2 +
 src/components/port-picker/PortPicker.vue |  29 +++-
 src/components/port-picker/PortsInput.vue |  42 +++++-
 src/index.html                            |   6 +-
 src/js/port_handler.js                    | 164 ++++------------------
 src/js/serial_backend.js                  |  28 ++--
 src/js/serial_devices.js                  |   7 +
 src/js/webSerial.js                       |  65 ++++++---
 8 files changed, 156 insertions(+), 187 deletions(-)

diff --git a/src/components/init.js b/src/components/init.js
index d96e968e64..fb4a3678c3 100644
--- a/src/components/init.js
+++ b/src/components/init.js
@@ -13,6 +13,7 @@ import StatusBar from "./status-bar/StatusBar.vue";
 import BatteryIcon from "./quad-status/BatteryIcon.vue";
 import FC from '../js/fc.js';
 import MSP from '../js/msp.js';
+import PortHandler from '../js/port_handler.js';
 import PortUsage from '../js/port_usage.js';
 import PortPicker from './port-picker/PortPicker.vue';
 import CONFIGURATOR from '../js/data_storage.js';
@@ -26,6 +27,7 @@ const betaflightModel = {
     FC,
     MSP,
     PortUsage,
+    PortHandler,
 };
 
 i18next.on('initialized', function() {
diff --git a/src/components/port-picker/PortPicker.vue b/src/components/port-picker/PortPicker.vue
index 6d91ea31f3..86ad4761aa 100644
--- a/src/components/port-picker/PortPicker.vue
+++ b/src/components/port-picker/PortPicker.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="web-port-picker">
-    <FirmwareVirtualOption :is-virtual="port === 'virtual'" />
-    <PortsInput v-model="port" />
+    <FirmwareVirtualOption :is-virtual="value.selectedPort === 'virtual'" />
+    <PortsInput 
+      v-model="value" 
+      :connected-devices="connectedDevices"
+      :read-only="readOnly" />
   </div>
 </template>
 
@@ -10,15 +13,27 @@ import FirmwareVirtualOption from "./FirmwareVirtualOption.vue";
 import PortsInput from "./PortsInput.vue";
 
 export default {
+  props: {
+      value: {
+        type: Object,
+        default: {
+          selectedPort: "manual", 
+          selectedBaud: 115200,
+        },
+      },
+      connectedDevices: {
+        type: Array,
+        default: () => [],
+      },
+      readOnly: {
+        type: Boolean,
+        default: false,
+      },
+  },
   components: {
     FirmwareVirtualOption,
     PortsInput,
   },
-  data() {
-    return {
-      port: 'manual',
-    };
-  },
 };
 </script>
 
diff --git a/src/components/port-picker/PortsInput.vue b/src/components/port-picker/PortsInput.vue
index f17cda70ac..d7860274c8 100644
--- a/src/components/port-picker/PortsInput.vue
+++ b/src/components/port-picker/PortsInput.vue
@@ -8,8 +8,9 @@
         id="port"
         class="dropdown-select"
         :title="$t('firmwareFlasherManualPort')"
-        @value="value"
-        @input="$emit('input', $event.target.value)"
+        :disabled="readOnly"
+        v-model="value.selectedPort"
+        @change="onChange"
       >
         <option value="manual">
           {{ $t("portsSelectManual") }}
@@ -20,6 +21,16 @@
         >
           {{ $t("portsSelectVirtual") }}
         </option>
+        <option
+          v-for="connectedDevice in connectedDevices"
+          :key="connectedDevice.path"
+          :value="connectedDevice.path"
+        >
+          {{ connectedDevice.displayName }}
+        </option>
+        <option value="requestpermission">
+          {{ $t("portsSelectPermission") }}
+        </option>
       </select>
     </div>
     <div id="auto-connect-and-baud">
@@ -27,9 +38,10 @@
         <div class="dropdown dropdown-dark">
           <select
             id="baud"
-            v-model="selectedBaudRate"
+            v-model="value.selectedBauds"
             class="dropdown-select"
             :title="$t('firmwareFlasherBaudRate')"
+            :disabled="readOnly"
           >
             <option
               v-for="baudRate in baudRates"
@@ -52,15 +64,25 @@ import { EventBus } from '../eventBus';
 export default {
     props: {
       value: {
-        type: String,
-        default: 'manual',
+        type: Object,
+        default: {
+          selectedPort: 'manual', 
+          selectedBaud: 115200,
+        },
+      },
+      connectedDevices: {
+        type: Array,
+        default: () => [],
+      },
+      readOnly: {
+        type: Boolean,
+        default: false,
       },
     },
 
     data() {
         return {
             showVirtual: false,
-            selectedBaudRate: "115200",
             baudRates: [
                 { value: "1000000", label: "1000000" },
                 { value: "500000", label: "500000" },
@@ -88,6 +110,14 @@ export default {
       setShowVirtual() {
         this.showVirtual = getConfig('showVirtualMode').showVirtualMode;
       },
+      onChange(event) {
+        if (event.target.value === 'requestpermission') {
+          event.target.value = 'manual';
+          EventBus.$emit('ports-input:request-permission');
+        } else {
+          EventBus.$emit('ports-input:change', event.target.value);
+        }
+      },
     },
 };
 </script>
diff --git a/src/index.html b/src/index.html
index c9ae902b81..82ee5e532e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -26,7 +26,11 @@
             :firmware-id="FC.CONFIG.flightControllerIdentifier"
             :hardware-id="FC.CONFIG.hardwareName"
         ></betaflight-logo>
-        <port-picker></port-picker>
+        <port-picker
+            v-model="PortHandler.portPicker"
+            :connected-devices="PortHandler.currentPorts"
+            :read-only="PortHandler.readOnly"
+        ></port-picker>
         <div class="header-wrapper">
             <div id="quad-status_wrapper">
                 <battery-icon
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index 736db850b5..46c0321e6b 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -1,20 +1,26 @@
 import GUI, { TABS } from "./gui";
 import FC from "./fc";
 import { i18n } from "./localization";
-import { generateVirtualApiVersions, getTextWidth } from './utils/common';
 import { get as getConfig } from "./ConfigStorage";
 import MdnsDiscovery from "./mdns_discovery";
 import { isWeb } from "./utils/isWeb";
 import { usbDevices } from "./usb_devices";
 import { serialShim } from "./serial_shim.js";
+import { EventBus } from "../components/eventBus";
 
 const serial = serialShim();
 
-const TIMEOUT_CHECK = 500 ; // With 250 it seems that it produces a memory leak and slowdown in some versions, reason unknown
+const DEFAULT_PORT = 'manual';
+const DEFAULT_BAUDS = 115200;
 
 const PortHandler = new function () {
     this.currentPorts = [];
     this.initialPorts = false;
+    this.portPicker = {
+        selectedPort: DEFAULT_PORT,
+        selectedBauds: DEFAULT_BAUDS,
+    };
+    this.portPickerReadOnly = false;
     this.port_detected_callbacks = [];
     this.port_removed_callbacks = [];
     this.dfu_available = false;
@@ -26,15 +32,13 @@ const PortHandler = new function () {
 };
 
 PortHandler.initialize = function () {
-    const self = this;
 
-    const portPickerElementSelector = "div#port-picker #port, div.web-port-picker #port";
-    self.portPickerElement = $(portPickerElementSelector);
-    self.selectList = document.querySelector(portPickerElementSelector);
-    self.initialWidth = self.selectList.offsetWidth + 12;
+    EventBus.$on('ports-input:request-permission', this.askPermissionPort.bind(this));
+    EventBus.$on('ports-input:change', this.onChangeSelectedPort.bind(this));
+
+    serial.addEventListener("addedDevice", this.check_serial_devices.bind(this));
 
-    // fill dropdown with version numbers
-    generateVirtualApiVersions();
+    serial.addEventListener("removedDevice", this.check_serial_devices.bind(this));
 
     this.reinitialize();    // just to prevent code redundancy
 };
@@ -69,22 +73,8 @@ PortHandler.check = function () {
         self.check_serial_devices();
     }
 
-    if (isWeb()) {
-        serial.addEventListener("addedDevice", (e) => {
-            this.check_serial_devices();
-        });
-
-        serial.addEventListener("removedDevice", (e) => {
-            this.check_serial_devices();
-        });
-
-        this.check_serial_devices();
 
-    } else {
-        self.usbCheckLoop = setTimeout(() => {
-            self.check();
-        }, TIMEOUT_CHECK);
-    }
+    this.check_serial_devices();
 
 };
 
@@ -119,18 +109,21 @@ PortHandler.check_serial_devices = function () {
         } else {
             self.removePort();
             self.detectPort();
+            self.selectActivePort();
         }
     };
 
-    if (isWeb()) {
-        serial.getDevices().then(updatePorts);
-    } else {
-        serial.getDevices(updatePorts);
-    }
+
+    serial.getDevices().then(updatePorts);
+};
+
+PortHandler.onChangeSelectedPort = function(port) {
+    this.portPicker.selectedPort = port;
 };
 
 PortHandler.check_usb_devices = function (callback) {
 
+    // TODO needs USB code refactor for web
     if (isWeb()) {
         return;
     }
@@ -158,7 +151,7 @@ PortHandler.check_usb_devices = function (callback) {
                 }));
 
                 self.portPickerElement.append($('<option/>', {
-                    value: 'manual',
+                    value: DEFAULT_PORT,
                     text: i18n.getMessage('portsSelectManual'),
                     /**
                      * @deprecated please avoid using `isDFU` and friends for new code.
@@ -224,7 +217,6 @@ PortHandler.removePort = function() {
             self.initialPorts.splice(self.initialPorts.indexOf(port, 1));
         }
         self.updatePortSelect(self.initialPorts);
-        self.portPickerElement.trigger('change');
     }
 };
 
@@ -237,8 +229,8 @@ PortHandler.detectPort = function() {
         console.log(`PortHandler - Found: ${JSON.stringify(newPorts)}`);
 
         if (newPorts.length === 1) {
-            self.portPickerElement.val(newPorts[0].path);
-        } else if (newPorts.length > 1) {
+            this.portPicker.selectedPort = newPorts[0].path;
+        } else {
             self.selectActivePort();
         }
 
@@ -248,8 +240,6 @@ PortHandler.detectPort = function() {
             TABS.firmware_flasher.boardNeedsVerification = true;
         }
 
-        self.portPickerElement.trigger('change');
-
         // auto-connect if enabled
         if (GUI.auto_connect && !GUI.connecting_to && !GUI.connected_to && GUI.active_tab !== 'firmware_flasher') {
             // start connect procedure. We need firmware flasher protection over here
@@ -284,130 +274,38 @@ PortHandler.sortPorts = function(ports) {
     });
 };
 
-PortHandler.addNoPortSelection = function() {
-    if (!this.showVirtualMode && !this.showManualMode) {
-        this.portPickerElement.append($("<option/>", {
-            value: 'none',
-            text: i18n.getMessage('portsSelectNone'),
-        }));
-    }
-};
-
 PortHandler.updatePortSelect = function (ports) {
     ports = this.sortPorts(ports);
-    this.portPickerElement.empty();
-
-    for (const port of ports) {
-        const portText = port.displayName ? `${port.path} - ${port.displayName}` : port.path;
-
-        this.portPickerElement.append($("<option/>", {
-            value: port.path,
-            text: portText,
-            /**
-             * @deprecated please avoid using `isDFU` and friends for new code.
-             */
-            data: {isManual: false},
-        }));
-    }
-
-    if (this.showVirtualMode) {
-        this.portPickerElement.append($("<option/>", {
-            value: 'virtual',
-            text: i18n.getMessage('portsSelectVirtual'),
-            /**
-             * @deprecated please avoid using `isDFU` and friends for new code.
-             */
-            data: {isVirtual: true},
-        }));
-    }
-
-    if (this.showManualMode) {
-        this.portPickerElement.append($("<option/>", {
-            value: 'manual',
-            text: i18n.getMessage('portsSelectManual'),
-            /**
-             * @deprecated please avoid using `isDFU` and friends for new code.
-             */
-            data: {isManual: true},
-        }));
-    }
-
-    if (!ports.length) {
-        this.addNoPortSelection();
-    }
-
-    if (isWeb()) {
-        const askpermission = 'askpermission';
-        this.portPickerElement.append($("<option/>", {
-            value: askpermission,
-            text: i18n.getMessage('portsSelectPermission'),
-            /**
-             * @deprecated please avoid using `isDFU` and friends for new code.
-             */
-            //data: {isShowPermission: true},
-        }));
-
-        this.portPickerElement.on("change", e => {
-            if (e.target.value === askpermission) {
-                this.askPermissionPort();
-            }
-            e.target.value = e.target.options[0].value;
-        });
-    }
-
-    this.setPortsInputWidth();
-    this.currentPorts = ports;
+    this.currentPorts = ports;    
 };
 
 PortHandler.askPermissionPort = function() {
     serial.requestPermissionDevice().then(() => {
         this.check_serial_devices();
     });
-}
+};
 
 PortHandler.selectActivePort = function() {
     const ports = this.currentPorts;
     const OS = GUI.operating_system;
+    let selectedPort;
     for (let i = 0; i < ports.length; i++) {
         const portName = ports[i].displayName;
         if (portName) {
             const pathSelect = ports[i].path;
             const isWindows = (OS === 'Windows');
             const isTty = pathSelect.includes('tty');
-            const deviceFilter = ['AT32', 'CP210', 'SPR', 'STM32'];
+            const deviceFilter = ['AT32', 'CP210', 'SPR', 'STM'];
             const deviceRecognized = deviceFilter.some(device => portName.includes(device));
             const legacyDeviceRecognized = portName.includes('usb');
             if (isWindows && deviceRecognized || isTty && (deviceRecognized || legacyDeviceRecognized)) {
-                this.portPickerElement.val(pathSelect);
+                selectedPort = pathSelect;
                 this.port_available = true;
                 console.log(`Porthandler detected device ${portName} on port: ${pathSelect}`);
             }
         }
     }
-};
-
-PortHandler.setPortsInputWidth = function() {
-
-    function findMaxLengthOption(selectEl) {
-        let max = 0;
-
-        $(selectEl.options).each(function () {
-            const textSize = getTextWidth(this.textContent);
-            if (textSize > max) {
-                max = textSize;
-            }
-        });
-
-        return max;
-    }
-
-    const correction = 32; // account for up/down button and spacing
-    let width = findMaxLengthOption(this.selectList) + correction;
-
-    width = (width > this.initialWidth) ? width : this.initialWidth;
-
-    const portsInput = document.querySelector("div#port-picker #portsinput, div.web-port-picker #portsinput");
-    portsInput.style.width = `${width}px`;
+    this.portPicker.selectedPort = selectedPort || DEFAULT_PORT;
 };
 
 PortHandler.port_detected = function(name, code, timeout, ignore_timeout) {
diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js
index 59a90c3372..98381eb082 100644
--- a/src/js/serial_backend.js
+++ b/src/js/serial_backend.js
@@ -26,6 +26,7 @@ import BuildApi from "./BuildApi";
 
 import { isWeb } from "./utils/isWeb";
 import { serialShim } from "./serial_shim.js";
+import { EventBus } from "../components/eventBus";
 
 let serial = serialShim();
 
@@ -73,19 +74,16 @@ export function initializeSerialBackend() {
         $('#port-override').val(data.portOverride);
     }
 
-    $('div#port-picker #port, div.web-port-picker #port').change(function (target) {
-        GUI.updateManualPortVisibility();
-    });
-
+    EventBus.$on('ports-input:change', () => GUI.updateManualPortVisibility());
 
     $("div.connect_controls a.connect").on('click', function () {
 
-        const selectedPort = $('#port').val();
+        const selectedPort = PortHandler.portPicker.selectedPort;
         let portName;
         if (selectedPort === 'manual') {
             portName = $('#port-override').val();
         } else {
-            portName = String($('div.web-port-picker #port').val());
+            portName = selectedPort;
         }
 
         if (!GUI.connect_lock && selectedPort !== 'none') {
@@ -93,8 +91,8 @@ export function initializeSerialBackend() {
 
             GUI.configuration_loaded = false;
 
-            const selected_baud = parseInt($('div#port-picker #baud, div.web-port-picker #baud').val());
-            const selectedPort = $('#port').val();
+            const selected_baud = PortHandler.portPicker.selectedBauds;
+            const selectedPort = portName;
 
             if (selectedPort === 'DFU') {
                 $('select#baud').hide();
@@ -106,10 +104,10 @@ export function initializeSerialBackend() {
                 GUI.connecting_to = portName;
 
                 // lock port select & baud while we are connecting / connected
-                $('div#port-picker #port, div#port-picker #baud, div#port-picker #delay, div.web-port-picker #port, div.web-port-picker #baud, div.web-port-picker #delay').prop('disabled', true);
+                PortHandler.portPickerReadOnly = true;
                 $('div.connect_controls div.connect_state').text(i18n.getMessage('connecting'));
 
-                const baudRate = parseInt($('#baud').val());
+                const baudRate = selected_baud;
                 if (selectedPort === 'virtual') {
                     CONFIGURATOR.virtualMode = true;
                     CONFIGURATOR.virtualApiVersion = $('#firmware-version-dropdown').val();
@@ -117,7 +115,7 @@ export function initializeSerialBackend() {
                     // Hack to get virtual working on the web
                     serial = serialShim();
                     serial.connect('virtual', {}, onOpenVirtual);
-                } else if (isWeb()) {
+                } else {
                     CONFIGURATOR.virtualMode = false;
                     serial = serialShim();
                     // Explicitly disconnect the event listeners before attaching the new ones.
@@ -128,9 +126,6 @@ export function initializeSerialBackend() {
                     serial.addEventListener('disconnect', disconnectHandler);
 
                     serial.connect(portName, { baudRate });
-                } else {
-                    serial.connect(portName, { bitrate: selected_baud }, onOpen);
-                    toggleStatus();
                 }
 
             } else {
@@ -230,8 +225,7 @@ function finishClose(finishedCallback) {
     $('#dialogReportProblems-closebtn').click();
 
     // unlock port select & baud
-    $('div#port-picker #port, div.web-port-picker #port').prop('disabled', false);
-    if (!GUI.auto_connect) $('div#port-picker #baud, div.web-port-picker #baud').prop('disabled', false);
+    PortHandler.portPickerReadOnly = false;
 
     // reset connect / disconnect button
     $('div.connect_controls a.connect').removeClass('active');
@@ -275,7 +269,7 @@ function abortConnection() {
     $('div#connectbutton a.connect').removeClass('active');
 
     // unlock port select & baud
-    $('div#port-picker #port, div#port-picker #baud, div#port-picker #delay, div.web-port-picker #port, div.web-port-picker #baud, div.web-port-picker #delay').prop('disabled', false);
+    PortHandler.portPickerReadOnly = false;
 
     // reset data
     isConnected = false;
diff --git a/src/js/serial_devices.js b/src/js/serial_devices.js
index aa730d3f2d..bbdd2fe2a8 100644
--- a/src/js/serial_devices.js
+++ b/src/js/serial_devices.js
@@ -1,3 +1,10 @@
+export const vendorIdNames = {
+    1027: "FTDI",
+    1155: "STM Electronics",
+    4292: "Silicon Labs",
+    0x2e3c: "AT32",
+};
+
 export const serialDevices = [
     { vendorId: 1027, productId: 24577 }, // FT232R USB UART
     { vendorId: 1155, productId: 22336 }, // STM Electronics Virtual COM Port
diff --git a/src/js/webSerial.js b/src/js/webSerial.js
index 512ffa995e..112957bf26 100644
--- a/src/js/webSerial.js
+++ b/src/js/webSerial.js
@@ -1,4 +1,4 @@
-import { webSerialDevices } from "./serial_devices";
+import { webSerialDevices, vendorIdNames } from "./serial_devices";
 
 async function* streamAsyncIterable(reader, keepReadingFlag) {
     try {
@@ -39,13 +39,23 @@ class WebSerial extends EventTarget {
 
         this.connect = this.connect.bind(this);
 
-        navigator.serial.addEventListener("connect", device => {
-            this.dispatchEvent(new CustomEvent("addedDevice", { detail: device.target }));
-        });
+        navigator.serial.addEventListener("connect", e => this.handleNewDevice(e.target).bind(this));
+        navigator.serial.addEventListener("disconnect", e => this.handleRemovedDevice(e.target).bind(this));
+    }
 
-        navigator.serial.addEventListener("disconnect", device => {
-            this.dispatchEvent(new CustomEvent("removedDevice", { detail: device.target }));
-        });
+    handleNewDevice(device) {
+        const added = this.createPort(device);
+        if (this.ports === null) {
+            this.ports = [];
+        }
+        this.ports.push(added);
+        this.dispatchEvent(new CustomEvent("addedDevice", { detail: added }));
+    }
+
+    handleRemovedDevice(device) {
+        const removed = this.ports.find(port => port.port === device);
+        this.ports = this.ports.filter(port => port.port !== device);
+        this.dispatchEvent(new CustomEvent("removedDevice", { detail: removed }));
     }
 
     handleReceiveBytes(info) {
@@ -54,34 +64,44 @@ class WebSerial extends EventTarget {
 
     handleDisconnect() {
         this.removeEventListener('receive', this.handleReceiveBytes);
-        this.removeEventListener('disconnect', this.handleDisconnect);
+        this.dispatchEvent(new CustomEvent("disconnect", { detail: false }));
+    }
+
+    getConnectedPort() {
+        return this.port;
+    }
+
+    createPort(port) {
+        return {
+            path: `D${this.port_counter}`,
+            displayName: `Betaflight ${vendorIdNames[port.getInfo().usbVendorId]}`,
+            vendorId: port.getInfo().usbVendorId,
+            productId: port.getInfo().usbProductId,
+            port: port,
+        };
     }
 
     async requestPermissionDevice() {
         const permissionPort = await navigator.serial.requestPort({
             filters: webSerialDevices,
         });
-
+        this.handleNewDevice(permissionPort);
         return permissionPort;
     }; 
 
     async getDevices() {
 
-        const ports = await navigator.serial.getPorts({
-            filters: webSerialDevices,
-        });
+        if (!this.ports) {
 
-        this.port_counter = 0;
-        this.ports = ports.map(function (port, index) {
-            return {
-                path: `${this.port_counter++}`,
-                displayName: `Betaflight Flight Controller`,
-                vendorId: port.vendorId,
-                productId: port.productId,
-                port: port,
-            };
-        }, this);
+            const ports = await navigator.serial.getPorts({
+                filters: webSerialDevices,
+            });
 
+            this.port_counter = 1;
+            this.ports = ports.map(function (port) {
+                return this.createPort(port);
+            }, this);
+        }
         return this.ports;
     }
 
@@ -107,7 +127,6 @@ class WebSerial extends EventTarget {
             this.openRequested = false;
 
             this.addEventListener("receive", this.handleReceiveBytes);
-            this.addEventListener('disconnect', this.handleDisconnect);
 
             console.log(
                 `${this.logHead} Connection opened with ID: ${connectionInfo.connectionId}, Baud: ${options.baudRate}`,

From db85a9aeb886a9471f33c6ef36c19c6e6deb2c79 Mon Sep 17 00:00:00 2001
From: Miguel Angel Mulero Martinez <migmul@gmail.com>
Date: Wed, 15 May 2024 19:05:49 +0200
Subject: [PATCH 3/9] Fixes after review

---
 src/components/port-picker/PortPicker.vue |  4 +--
 src/components/port-picker/PortsInput.vue |  6 ++--
 src/index.html                            |  2 +-
 src/js/port_handler.js                    |  2 +-
 src/js/serial_backend.js                  |  6 ++--
 src/js/webSerial.js                       | 34 +++++++++++------------
 6 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/components/port-picker/PortPicker.vue b/src/components/port-picker/PortPicker.vue
index 86ad4761aa..3d0c26a668 100644
--- a/src/components/port-picker/PortPicker.vue
+++ b/src/components/port-picker/PortPicker.vue
@@ -4,7 +4,7 @@
     <PortsInput 
       v-model="value" 
       :connected-devices="connectedDevices"
-      :read-only="readOnly" />
+      :disabled="disabled" />
   </div>
 </template>
 
@@ -25,7 +25,7 @@ export default {
         type: Array,
         default: () => [],
       },
-      readOnly: {
+      disabled: {
         type: Boolean,
         default: false,
       },
diff --git a/src/components/port-picker/PortsInput.vue b/src/components/port-picker/PortsInput.vue
index d7860274c8..2ab2d21b29 100644
--- a/src/components/port-picker/PortsInput.vue
+++ b/src/components/port-picker/PortsInput.vue
@@ -8,7 +8,7 @@
         id="port"
         class="dropdown-select"
         :title="$t('firmwareFlasherManualPort')"
-        :disabled="readOnly"
+        :disabled="disabled"
         v-model="value.selectedPort"
         @change="onChange"
       >
@@ -41,7 +41,7 @@
             v-model="value.selectedBauds"
             class="dropdown-select"
             :title="$t('firmwareFlasherBaudRate')"
-            :disabled="readOnly"
+            :disabled="disabled"
           >
             <option
               v-for="baudRate in baudRates"
@@ -74,7 +74,7 @@ export default {
         type: Array,
         default: () => [],
       },
-      readOnly: {
+      disabled: {
         type: Boolean,
         default: false,
       },
diff --git a/src/index.html b/src/index.html
index 82ee5e532e..faba7bed1c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -29,7 +29,7 @@
         <port-picker
             v-model="PortHandler.portPicker"
             :connected-devices="PortHandler.currentPorts"
-            :read-only="PortHandler.readOnly"
+            :disabled="PortHandler.portPickerDisabled"
         ></port-picker>
         <div class="header-wrapper">
             <div id="quad-status_wrapper">
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index 46c0321e6b..e631251461 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -20,7 +20,7 @@ const PortHandler = new function () {
         selectedPort: DEFAULT_PORT,
         selectedBauds: DEFAULT_BAUDS,
     };
-    this.portPickerReadOnly = false;
+    this.portPickerDisabled = false;
     this.port_detected_callbacks = [];
     this.port_removed_callbacks = [];
     this.dfu_available = false;
diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js
index 98381eb082..09363d877d 100644
--- a/src/js/serial_backend.js
+++ b/src/js/serial_backend.js
@@ -104,7 +104,7 @@ export function initializeSerialBackend() {
                 GUI.connecting_to = portName;
 
                 // lock port select & baud while we are connecting / connected
-                PortHandler.portPickerReadOnly = true;
+                PortHandler.portPickerDisabled = true;
                 $('div.connect_controls div.connect_state').text(i18n.getMessage('connecting'));
 
                 const baudRate = selected_baud;
@@ -225,7 +225,7 @@ function finishClose(finishedCallback) {
     $('#dialogReportProblems-closebtn').click();
 
     // unlock port select & baud
-    PortHandler.portPickerReadOnly = false;
+    PortHandler.portPickerDisabled = false;
 
     // reset connect / disconnect button
     $('div.connect_controls a.connect').removeClass('active');
@@ -269,7 +269,7 @@ function abortConnection() {
     $('div#connectbutton a.connect').removeClass('active');
 
     // unlock port select & baud
-    PortHandler.portPickerReadOnly = false;
+    PortHandler.portPickerDisabled = false;
 
     // reset data
     isConnected = false;
diff --git a/src/js/webSerial.js b/src/js/webSerial.js
index 112957bf26..8b22b1722c 100644
--- a/src/js/webSerial.js
+++ b/src/js/webSerial.js
@@ -31,7 +31,7 @@ class WebSerial extends EventTarget {
         this.logHead = "SERIAL: ";
 
         this.port_counter = 0;
-        this.ports = null;
+        this.ports = [];
         this.port = null;
         this.reader = null;
         this.writer = null;
@@ -39,15 +39,14 @@ class WebSerial extends EventTarget {
 
         this.connect = this.connect.bind(this);
 
-        navigator.serial.addEventListener("connect", e => this.handleNewDevice(e.target).bind(this));
-        navigator.serial.addEventListener("disconnect", e => this.handleRemovedDevice(e.target).bind(this));
+        navigator.serial.addEventListener("connect", e => this.handleNewDevice(e.target));
+        navigator.serial.addEventListener("disconnect", e => this.handleRemovedDevice(e.target));
+
+        this.loadDevices();
     }
 
     handleNewDevice(device) {
         const added = this.createPort(device);
-        if (this.ports === null) {
-            this.ports = [];
-        }
         this.ports.push(added);
         this.dispatchEvent(new CustomEvent("addedDevice", { detail: added }));
     }
@@ -81,6 +80,17 @@ class WebSerial extends EventTarget {
         };
     }
 
+    async loadDevices() {
+        const ports = await navigator.serial.getPorts({
+            filters: webSerialDevices,
+        });
+
+        this.port_counter = 1;
+        this.ports = ports.map(function (port) {
+            return this.createPort(port);
+        }, this);
+    };
+
     async requestPermissionDevice() {
         const permissionPort = await navigator.serial.requestPort({
             filters: webSerialDevices,
@@ -90,18 +100,6 @@ class WebSerial extends EventTarget {
     }; 
 
     async getDevices() {
-
-        if (!this.ports) {
-
-            const ports = await navigator.serial.getPorts({
-                filters: webSerialDevices,
-            });
-
-            this.port_counter = 1;
-            this.ports = ports.map(function (port) {
-                return this.createPort(port);
-            }, this);
-        }
         return this.ports;
     }
 

From a9c862a924d7b2f19658672dfb42c512eb1eaa52 Mon Sep 17 00:00:00 2001
From: Miguel Angel Mulero Martinez <migmul@gmail.com>
Date: Wed, 15 May 2024 19:29:49 +0200
Subject: [PATCH 4/9] Fix request permission option not being deselected

---
 src/components/port-picker/PortsInput.vue | 1 -
 src/js/port_handler.js                    | 3 +++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/port-picker/PortsInput.vue b/src/components/port-picker/PortsInput.vue
index 2ab2d21b29..366387af5d 100644
--- a/src/components/port-picker/PortsInput.vue
+++ b/src/components/port-picker/PortsInput.vue
@@ -112,7 +112,6 @@ export default {
       },
       onChange(event) {
         if (event.target.value === 'requestpermission') {
-          event.target.value = 'manual';
           EventBus.$emit('ports-input:request-permission');
         } else {
           EventBus.$emit('ports-input:change', event.target.value);
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index e631251461..ff7dacc3db 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -282,6 +282,9 @@ PortHandler.updatePortSelect = function (ports) {
 PortHandler.askPermissionPort = function() {
     serial.requestPermissionDevice().then(() => {
         this.check_serial_devices();
+    }).catch(() => {
+        // In the catch we call the check_serial_devices too to change the request permission option from the select for other
+        this.check_serial_devices();
     });
 };
 

From 389c590da847fc8d9342f12b12501ef8142f8500 Mon Sep 17 00:00:00 2001
From: Miguel Angel Mulero Martinez <migmul@gmail.com>
Date: Thu, 16 May 2024 17:11:04 +0200
Subject: [PATCH 5/9] Hide baud selection in port picker if virtual port

---
 src/components/port-picker/PortsInput.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/port-picker/PortsInput.vue b/src/components/port-picker/PortsInput.vue
index 366387af5d..0cf9c9a272 100644
--- a/src/components/port-picker/PortsInput.vue
+++ b/src/components/port-picker/PortsInput.vue
@@ -34,7 +34,9 @@
       </select>
     </div>
     <div id="auto-connect-and-baud">
-      <div id="baudselect">
+      <div id="baudselect"
+        v-if="value.selectedPort !== 'virtual'"
+      >
         <div class="dropdown dropdown-dark">
           <select
             id="baud"

From eb736b273e4dbe0912d81c1612193297b3821b11 Mon Sep 17 00:00:00 2001
From: Miguel Angel Mulero Martinez <migmul@gmail.com>
Date: Thu, 16 May 2024 17:43:24 +0200
Subject: [PATCH 6/9] Added port override option for manual

---
 .../port-picker/FirmwareVirtualOption.vue     | 10 +++----
 .../port-picker/PortOverrideOption.vue        | 27 ++++++++++---------
 src/components/port-picker/PortPicker.vue     | 13 ++++++++-
 src/js/port_handler.js                        |  2 ++
 4 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/components/port-picker/FirmwareVirtualOption.vue b/src/components/port-picker/FirmwareVirtualOption.vue
index b3a11a4a35..1a943f2327 100644
--- a/src/components/port-picker/FirmwareVirtualOption.vue
+++ b/src/components/port-picker/FirmwareVirtualOption.vue
@@ -1,13 +1,13 @@
 <template>
   <div
     id="firmware-virtual-option"
-    :style="{ display: isVirtual ? 'block' : 'none' }"
   >
     <div class="dropdown dropdown-dark">
       <select
         id="firmware-version-dropdown"
         class="dropdown-select"
         :title="$t('virtualMSPVersion')"
+        v-model="value"
       >
         <option
           v-for="(version, index) in firmwareVersions"
@@ -24,9 +24,9 @@
 <script>
 export default {
     props: {
-        isVirtual: {
-            type: Boolean,
-            default: true,
+        value: {
+            type: String,
+            default: "1.46.0",
         },
     },
     data() {
@@ -50,7 +50,7 @@ export default {
     width: 180px;
     margin-right: 15px;
     margin-top: 0px;
-    display: none;
+    display: block;
 }
 .dropdown {
     display: inline-block;
diff --git a/src/components/port-picker/PortOverrideOption.vue b/src/components/port-picker/PortOverrideOption.vue
index 0d7ba9992b..15b5dc6e02 100644
--- a/src/components/port-picker/PortOverrideOption.vue
+++ b/src/components/port-picker/PortOverrideOption.vue
@@ -1,42 +1,43 @@
 <template>
-  <div
-    id="port-override-option"
-    style="display: none"
-    :style="{ display: isManual ? 'flex' : 'none' }"
-  >
+  <div id="port-override-option">
     <label
       for="port-override"
     ><span>{{ $t("portOverrideText") }}</span>
       <input
         id="port-override"
         type="text"
-        value="/dev/rfcomm0"
+        v-model="value"
       ></label>
   </div>
 </template>
 
 <script>
 export default {
-    props: {
-        isManual: {
-            type: Boolean,
-            default: true,
-        },
+  props: {
+    value: {
+      type: String,
+      default: "/dev/rfcomm0",
     },
+    isManual: {
+        type: Boolean,
+        default: true,
+    },
+  },
 };
 </script>
 <style scoped>
 #port-override-option {
     font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
     font-size: 12px;
-    margin-top: 16px;
+    margin-top: 4px;
     margin-right: 15px;
     label {
         background-color: #2b2b2b;
         border-radius: 3px;
         padding: 3px;
         color: var(--subtleAccent);
-    }
+    };
+    display: block;
 }
 
 #port-override-option label {
diff --git a/src/components/port-picker/PortPicker.vue b/src/components/port-picker/PortPicker.vue
index 3d0c26a668..317f79a6c5 100644
--- a/src/components/port-picker/PortPicker.vue
+++ b/src/components/port-picker/PortPicker.vue
@@ -1,6 +1,13 @@
 <template>
   <div class="web-port-picker">
-    <FirmwareVirtualOption :is-virtual="value.selectedPort === 'virtual'" />
+    <PortOverrideOption 
+      v-if="value.selectedPort === 'manual'"
+      v-model="value.portOverride"
+    />
+    <FirmwareVirtualOption 
+      v-if="value.selectedPort === 'virtual'" 
+      v-model="value.virtualMspVersion"
+    />
     <PortsInput 
       v-model="value" 
       :connected-devices="connectedDevices"
@@ -9,6 +16,7 @@
 </template>
 
 <script>
+import PortOverrideOption from "./PortOverrideOption.vue";
 import FirmwareVirtualOption from "./FirmwareVirtualOption.vue";
 import PortsInput from "./PortsInput.vue";
 
@@ -19,6 +27,8 @@ export default {
         default: {
           selectedPort: "manual", 
           selectedBaud: 115200,
+          portOverride: "/dev/rfcomm0",
+          virtualMspVersion: "1.46.0",
         },
       },
       connectedDevices: {
@@ -31,6 +41,7 @@ export default {
       },
   },
   components: {
+    PortOverrideOption,
     FirmwareVirtualOption,
     PortsInput,
   },
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index ff7dacc3db..8c4af1294f 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -19,6 +19,8 @@ const PortHandler = new function () {
     this.portPicker = {
         selectedPort: DEFAULT_PORT,
         selectedBauds: DEFAULT_BAUDS,
+        portOverride: "/dev/rfcomm0",
+        virtualMspVersion: "1.46.0",
     };
     this.portPickerDisabled = false;
     this.port_detected_callbacks = [];

From 4a15f841d74e72658dfba72e267233ace082b739 Mon Sep 17 00:00:00 2001
From: Miguel Angel Mulero Martinez <migmul@gmail.com>
Date: Thu, 16 May 2024 17:53:23 +0200
Subject: [PATCH 7/9] Fix virtual port state when loading the page

---
 src/components/port-picker/PortsInput.vue | 7 +++++--
 src/js/ConfigStorage.js                   | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/port-picker/PortsInput.vue b/src/components/port-picker/PortsInput.vue
index 0cf9c9a272..c9ac85d1be 100644
--- a/src/components/port-picker/PortsInput.vue
+++ b/src/components/port-picker/PortsInput.vue
@@ -104,13 +104,16 @@ export default {
     },
     mounted() {
       EventBus.$on('config-storage:set', this.setShowVirtual);
+      this.setShowVirtual('showVirtualMode');
     },
     destroyed() {
       EventBus.$off('config-storage:set', this.setShowVirtual);
     },
     methods: {
-      setShowVirtual() {
-        this.showVirtual = getConfig('showVirtualMode').showVirtualMode;
+      setShowVirtual(element) {
+        if (element === 'showVirtualMode') {
+          this.showVirtual = getConfig('showVirtualMode').showVirtualMode;
+        }
       },
       onChange(event) {
         if (event.target.value === 'requestpermission') {
diff --git a/src/js/ConfigStorage.js b/src/js/ConfigStorage.js
index bef1fe3afa..5d22aa90ee 100644
--- a/src/js/ConfigStorage.js
+++ b/src/js/ConfigStorage.js
@@ -45,7 +45,7 @@ export function set(input) {
     tmpObj[element] = input[element];
     try {
       localStorage.setItem(element, JSON.stringify(tmpObj));
-      EventBus.$emit(`config-storage:set`, 'element');
+      EventBus.$emit('config-storage:set', element);
     } catch (e) {
       console.error(e);
     }

From eb8c0dd94b9650c60805a6a33add9d6893ddeead Mon Sep 17 00:00:00 2001
From: Miguel Angel Mulero Martinez <migmul@gmail.com>
Date: Thu, 16 May 2024 19:26:53 +0200
Subject: [PATCH 8/9] Fix request permission adds the same device several times

---
 src/js/webSerial.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/js/webSerial.js b/src/js/webSerial.js
index 8b22b1722c..79accf8b18 100644
--- a/src/js/webSerial.js
+++ b/src/js/webSerial.js
@@ -46,9 +46,12 @@ class WebSerial extends EventTarget {
     }
 
     handleNewDevice(device) {
+
         const added = this.createPort(device);
         this.ports.push(added);
         this.dispatchEvent(new CustomEvent("addedDevice", { detail: added }));
+
+        return added;
     }
 
     handleRemovedDevice(device) {
@@ -95,8 +98,11 @@ class WebSerial extends EventTarget {
         const permissionPort = await navigator.serial.requestPort({
             filters: webSerialDevices,
         });
-        this.handleNewDevice(permissionPort);
-        return permissionPort;
+        const found = this.ports.find(port => port.port === device);
+        if (!found) {
+            return this.handleNewDevice(permissionPort);
+        }
+        return null;
     }; 
 
     async getDevices() {

From 5c40efcaf14e1622e2e7428ca09e793b3db8a2cc Mon Sep 17 00:00:00 2001
From: Miguel Angel Mulero Martinez <migmul@gmail.com>
Date: Thu, 16 May 2024 21:09:01 +0200
Subject: [PATCH 9/9] Fix automatic selection of device under Linux

---
 src/js/port_handler.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index 8c4af1294f..a851c4faf6 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -298,12 +298,10 @@ PortHandler.selectActivePort = function() {
         const portName = ports[i].displayName;
         if (portName) {
             const pathSelect = ports[i].path;
-            const isWindows = (OS === 'Windows');
-            const isTty = pathSelect.includes('tty');
             const deviceFilter = ['AT32', 'CP210', 'SPR', 'STM'];
             const deviceRecognized = deviceFilter.some(device => portName.includes(device));
             const legacyDeviceRecognized = portName.includes('usb');
-            if (isWindows && deviceRecognized || isTty && (deviceRecognized || legacyDeviceRecognized)) {
+            if (deviceRecognized || legacyDeviceRecognized) {
                 selectedPort = pathSelect;
                 this.port_available = true;
                 console.log(`Porthandler detected device ${portName} on port: ${pathSelect}`);