From 68e1d498081b488a33d60917918d5c70ca285bd3 Mon Sep 17 00:00:00 2001
From: Mark Haslinghuis <mark@numloq.nl>
Date: Fri, 3 May 2024 13:06:27 +0200
Subject: [PATCH] Rebased

---
 locales/en/messages.json        |   3 +
 src/js/port_handler.js          | 232 +++++++++++---------------------
 src/js/serial_backend.js        | 123 +++++------------
 src/js/tabs/firmware_flasher.js |  21 +--
 4 files changed, 119 insertions(+), 260 deletions(-)

diff --git a/locales/en/messages.json b/locales/en/messages.json
index af923fdb304..a956439b537 100755
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -55,6 +55,9 @@
     "portsSelectManual": {
         "message": "Manual Selection"
     },
+    "portsSelectNone": {
+        "message": "No connection available"
+    },
     "portsSelectVirtual": {
         "message": "Virtual Mode (Experimental)",
         "description": "Configure a Virtual Flight Controller without the need of a physical FC."
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index 29b51eefa3d..d61e36bc0af 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -108,8 +108,8 @@ PortHandler.check_serial_devices = function () {
 
         // auto-select port (only during initialization)
         if (!self.initialPorts) {
-            self.currentPorts = self.updatePortSelect(self.currentPorts);
-            self.selectPort(self.currentPorts);
+            self.updatePortSelect(self.currentPorts);
+            self.selectActivePort();
             self.initialPorts = self.currentPorts;
             GUI.updateManualPortVisibility();
         } else {
@@ -121,64 +121,43 @@ PortHandler.check_serial_devices = function () {
 
 PortHandler.check_usb_devices = function (callback) {
     const self = this;
-    const portSelect = document.querySelector('#port');
 
     chrome.usb.getDevices(usbDevices, function (result) {
-        const dfuActive = !!portSelect.value.startsWith('DFU');
 
+        const dfuElement = self.portPickerElement.children("[value='DFU']");
         if (result.length) {
             // Found device in DFU mode, add it to the list
-            if (!dfuActive) {
-                self.clearOptions();
-
-                // self.portPickerElement.append($('<option/>', {
-                //     value: "DFU",
-                //     text: usbText,
-                //     /**
-                //      * @deprecated please avoid using `isDFU` and friends for new code.
-                //      */
-                //     data: {isDFU: true},
-                // }));
-
-                // self.portPickerElement.append($('<option/>', {
-                //     value: 'manual',
-                //     text: i18n.getMessage('portsSelectManual'),
-                //     /**
-                //      * @deprecated please avoid using `isDFU` and friends for new code.
-                //      */
-                //     data: {isManual: true},
-                // }));
-                const usbText = result[0].productName ? `DFU - ${result[0].productName}` : "DFU";
-                const dfuOption = document.createElement('option');
-
-                dfuOption.value = 'DFU';
-                dfuOption.text = usbText;
-
-                portSelect.add(dfuOption);
-                // portSelect.value = 'DFU';
+            if (!dfuElement.length) {
+                self.portPickerElement.empty();
 
-                self.setPortsInputWidth();
+                const productName = result[0].productName;
+                const usbText = productName ? `DFU - ${productName}` : 'DFU';
+
+                self.portPickerElement.append($('<option/>', {
+                    value: "DFU",
+                    text: usbText,
+                    /**
+                     * @deprecated please avoid using `isDFU` and friends for new code.
+                     */
+                    data: {isDFU: true},
+                }));
 
+                self.setPortsInputWidth();
                 self.dfu_available = true;
             }
-        } else {
-            // We are not in DFU mode anymore. Add items here as check_serial_devices() will not be called without a change in serial devices.
-            if (dfuActive) {
-                self.clearOptions();
+        } else if (dfuElement.length) {
+            // No device in DFU mode, remove it from the list
+            dfuElement.remove();
 
-                self.addManualOption();
-                self.addVirtualOption();
-                self.addNoPortsOption();
+            self.addNoPortSelection();
 
-                self.setPortsInputWidth();
+            GUI.connect_lock = false;
 
-                self.dfu_available = false;
-            }
+            self.setPortsInputWidth();
+            self.dfu_available = false;
         }
 
-        // if ($('option:selected', self.portPickerElement).val() !== 'DFU') {
-
-        if (!dfuActive) {
+        if ($('option:selected', self.portPickerElement).val() !== 'DFU') {
             if (!(GUI.connected_to || GUI.connect_lock)) {
                 FC.resetState();
             }
@@ -194,59 +173,6 @@ PortHandler.check_usb_devices = function (callback) {
     });
 };
 
-PortHandler.clearOptions = function () {
-    const portSelect = document.querySelector('#port');
-    let index = portSelect.length;
-
-    while (index--) {
-        if (portSelect.options[index]) {
-            portSelect.remove(index);
-        }
-    }
-};
-
-PortHandler.addManualOption = function() {
-    const self = this;
-
-    if (self.showManualMode) {
-        const portSelect = document.querySelector('#port');
-        const manualOption = document.createElement('option');
-
-        manualOption.value = 'manual';
-        manualOption.text = i18n.getMessage('portsSelectManual');
-
-        portSelect.add(manualOption);
-    }
-};
-
-PortHandler.addVirtualOption = function() {
-    const self = this;
-
-    if (self.showVirtualMode) {
-        const portSelect = document.querySelector('#port');
-        const virtualOption = document.createElement('option');
-
-        virtualOption.value = 'virtual';
-        virtualOption.text = i18n.getMessage('portsSelectVirtual');
-
-        portSelect.add(virtualOption);
-    }
-};
-
-PortHandler.addNoPortsOption = function() {
-    const self = this;
-
-    if (!self.showVirtualMode && !self.showManualMode) {
-        const portSelect = document.querySelector('#port');
-        const noPortsOption = document.createElement('option');
-
-        noPortsOption.value = 'none';
-        noPortsOption.text = 'No connections available';
-
-        portSelect.add(noPortsOption);
-    }
-};
-
 PortHandler.removePort = function() {
     const self = this;
     const removePorts = self.array_difference(self.initialPorts, self.currentPorts);
@@ -258,11 +184,8 @@ PortHandler.removePort = function() {
         if (GUI.connected_to) {
             for (let i = 0; i < removePorts.length; i++) {
                 if (removePorts[i].path === GUI.connected_to) {
-                    const button = document.querySelector('div.connect_controls a.connect');
-                    button.click();
-
-                    const buttonActive = document.querySelector('div.connect_controls a.connect.active');
-                    buttonActive.click();
+                    $('div.connect_controls a.connect').click();
+                    $('div.connect_controls a.connect.active').click();
                 }
             }
         }
@@ -295,13 +218,13 @@ PortHandler.detectPort = function() {
     const newPorts = self.array_difference(self.currentPorts, self.initialPorts);
 
     if (newPorts.length) {
-        self.currentPorts = self.updatePortSelect(self.currentPorts);
+        self.updatePortSelect(self.currentPorts);
         console.log(`PortHandler - Found: ${JSON.stringify(newPorts)}`);
 
         if (newPorts.length === 1) {
             self.portPickerElement.val(newPorts[0].path);
         } else if (newPorts.length > 1) {
-            self.selectPort(self.currentPorts);
+            self.selectActivePort();
         }
 
         self.port_available = true;
@@ -316,8 +239,7 @@ PortHandler.detectPort = function() {
         if (GUI.auto_connect && !GUI.connecting_to && !GUI.connected_to) {
             // start connect procedure. We need firmware flasher protection over here
             if (GUI.active_tab !== 'firmware_flasher') {
-                const button = document.querySelector('div.connect_controls a.connect');
-                button.click();
+                $('div.connect_controls a.connect').click();
             }
         }
         // trigger callbacks
@@ -349,62 +271,64 @@ PortHandler.sortPorts = function(ports) {
     });
 };
 
-PortHandler.updatePortSelect = function (ports) {
-    const portSelect = document.querySelector('#port');
+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},
+        }));
+    }
 
-    this.clearOptions();
-
-    for (let i = 0; i < ports.length; i++) {
-        const portOption = document.createElement('option');
-        const portText = ports[i].displayName ? `${ports[i].path} - ${ports[i].displayName}` : ports[i].path;
-
-    //     this.portPickerElement.append($("<option/>", {
-    //         value: ports[i].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},
-    //     }));
-    // }
-
-    // this.portPickerElement.append($("<option/>", {
-    //     value: 'manual',
-    //     text: i18n.getMessage('portsSelectManual'),
-    //     /**
-    //      * @deprecated please avoid using `isDFU` and friends for new code.
-    //      */
-    //     data: {isManual: true},
-    // }));
-        portOption.value = ports[i].path;
-        portOption.text = portText;
-
-        portSelect.add(portOption);
+    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},
+        }));
     }
 
-    this.addVirtualOption();
-    this.addManualOption();
+    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.addNoPortsOption(); }
+    if (!ports.length) {
+        this.addNoPortSelection();
+    }
 
     this.setPortsInputWidth();
-    return ports;
+    this.currentPorts = ports;
 };
 
-PortHandler.selectPort = function(ports) {
+PortHandler.selectActivePort = function() {
+    const ports = this.currentPorts;
     const OS = GUI.operating_system;
     for (let i = 0; i < ports.length; i++) {
         const portName = ports[i].displayName;
diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js
index 8cf3f6e1cfd..dc17175bce9 100644
--- a/src/js/serial_backend.js
+++ b/src/js/serial_backend.js
@@ -55,24 +55,11 @@ export function initializeSerialBackend() {
         }
         const selected_port = $('#port').val();
 
-        if (selected_port === 'manual') {
-        // const portSelect = document.querySelector('#port');
+        $('#port-override-option').toggle(selected_port === 'manual');
 
-        // console.log(`Port select value: ${portSelect.value}`);
-        // if (portSelect.value.startsWith("manual")) {
-            $('#port-override-option').show();
-        } else {
-            $('#port-override-option').hide();
-        }
-        if (selected_port === 'virtual') {
-        // if (portSelect.value.startsWith("virtual")) {
-            $('#firmware-virtual-option').show();
-        } else {
-            $('#firmware-virtual-option').hide();
-        }
+        $('#firmware-virtual-option').toggle(selected_port === 'virtual');
 
         $('#auto-connect-and-baud').toggle(selected_port !== 'DFU');
-        // $('#auto-connect-and-baud').toggle(!portSelect.value.startsWith("DFU"));
     };
 
     GUI.updateManualPortVisibility();
@@ -96,22 +83,12 @@ export function initializeSerialBackend() {
         const selectedPort = $('#port').val();
         let portName;
         if (selectedPort === 'manual') {
-    // $("div.connect_controls a.connect").on('click', function (e) {
-    //     const portSelect = document.querySelector('#port');
-    //     let portName;
-
-    //     if (portSelect.value.startsWith('none')) {
-    //         e.preventDefault();
-    //         return;
-    //     }
-
-    //     if (portSelect.value.startsWith("manual")) {
             portName = $('#port-override').val();
         } else {
             portName = String($('div#port-picker #port').val());
         }
 
-        if (!GUI.connect_lock) {
+        if (!GUI.connect_lock && selectedPort !== 'none') {
             // GUI control overrides the user control
 
             GUI.configuration_loaded = false;
@@ -120,12 +97,7 @@ export function initializeSerialBackend() {
             const selectedPort = $('#port').val();
 
             if (selectedPort === 'DFU') {
-
-            // const portSelect = document.querySelector('#port');
-
-            // if (portSelect.value.startsWith('DFU')) {
                 $('select#baud').hide();
-                e.preventDefault();
                 return;
             }
 
@@ -133,75 +105,48 @@ export function initializeSerialBackend() {
                 console.log(`Connecting to: ${portName}`);
                 GUI.connecting_to = portName;
 
-                    const baudRate = parseInt($('#baud').val());
-                    if (selectedPort === 'virtual') {
-                        CONFIGURATOR.virtualMode = true;
-                        CONFIGURATOR.virtualApiVersion = $('#firmware-version-dropdown').val();
-
-                        // Hack to get virtual working on the web
-                        serial = serialShim();
-                        serial.connect('virtual', {}, onOpenVirtual);
-                    } else if (isWeb()) {
-                        CONFIGURATOR.virtualMode = false;
-                        serial = serialShim();
-                        // Explicitly disconnect the event listeners before attaching the new ones.
-                        serial.removeEventListener('connect', connectHandler);
-                        serial.addEventListener('connect', connectHandler);
-                // // 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.connect_controls div.connect_state').text(i18n.getMessage('connecting'));
-                // const baudRate = document.querySelector('div#port-picker #baud').value;
-                // console.log(`Baud rate: ${baudRate}`);
-                // if (portSelect.value.startsWith('virtual')) {
-                //     CONFIGURATOR.virtualMode = true;
-                //     CONFIGURATOR.virtualApiVersion = document.querySelector('#firmware-version-dropdown').value;
-
-                //     serial.connect('virtual', {}, onOpenVirtual);
-                // } else if (isWeb()) {
-                //     // Explicitly disconnect the event listeners before attaching the new ones.
-                //     serial.removeEventListener('connect', connectHandler);
-                //     serial.addEventListener('connect', connectHandler);
+                // 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.connect_controls div.connect_state').text(i18n.getMessage('connecting'));
+
+                const baudRate = parseInt($('#baud').val());
+                if (selectedPort === 'virtual') {
+                    CONFIGURATOR.virtualMode = true;
+                    CONFIGURATOR.virtualApiVersion = $('#firmware-version-dropdown').val();
+
+                    // Hack to get virtual working on the web
+                    serial = serialShim();
+                    serial.connect('virtual', {}, onOpenVirtual);
+                } else if (isWeb()) {
+                    CONFIGURATOR.virtualMode = false;
+                    serial = serialShim();
+                    // Explicitly disconnect the event listeners before attaching the new ones.
+                    serial.removeEventListener('connect', connectHandler);
+                    serial.addEventListener('connect', connectHandler);
 
                     serial.removeEventListener('disconnect', disconnectHandler);
                     serial.addEventListener('disconnect', disconnectHandler);
 
                     serial.connect({ baudRate });
                 } else {
-                    if ($('div#flashbutton a.flash_state').hasClass('active') && $('div#flashbutton a.flash').hasClass('active')) {
-                        $('div#flashbutton a.flash_state').removeClass('active');
-                        $('div#flashbutton a.flash').removeClass('active');
-                    }
-                    GUI.timeout_kill_all();
-                    GUI.interval_kill_all();
-                    GUI.tab_switch_cleanup(() => GUI.tab_switch_in_progress = false);
-
-                    function onFinishCallback() {
-                        finishClose(toggleStatus);
-                    }
-
-                    mspHelper?.setArmingEnabled(true, false, onFinishCallback);
-                    serial.connect(
-                        portName,
-                        { bitrate: selected_baud },
-                        onOpen,
-                    );
+                    serial.connect(portName, { bitrate: selected_baud }, onOpen);
                     toggleStatus();
                 }
 
-            // } else {
-            //     if ($('div#flashbutton a.flash_state').hasClass('active') && $('div#flashbutton a.flash').hasClass('active')) {
-            //         $('div#flashbutton a.flash_state').removeClass('active');
-            //         $('div#flashbutton a.flash').removeClass('active');
-            //     }
-            //     GUI.timeout_kill_all();
-            //     GUI.interval_kill_all();
-            //     GUI.tab_switch_cleanup(() => GUI.tab_switch_in_progress = false);
+            } else {
+                if ($('div#flashbutton a.flash_state').hasClass('active') && $('div#flashbutton a.flash').hasClass('active')) {
+                    $('div#flashbutton a.flash_state').removeClass('active');
+                    $('div#flashbutton a.flash').removeClass('active');
+                }
+                GUI.timeout_kill_all();
+                GUI.interval_kill_all();
+                GUI.tab_switch_cleanup(() => GUI.tab_switch_in_progress = false);
 
-            //     function onFinishCallback() {
-            //         finishClose(toggleStatus);
-            //     }
+                function onFinishCallback() {
+                    finishClose(toggleStatus);
+                }
 
-            //     mspHelper.setArmingEnabled(true, false, onFinishCallback);
+                mspHelper?.setArmingEnabled(true, false, onFinishCallback);
             }
         }
     });
diff --git a/src/js/tabs/firmware_flasher.js b/src/js/tabs/firmware_flasher.js
index 33006f2868b..f9615f08232 100644
--- a/src/js/tabs/firmware_flasher.js
+++ b/src/js/tabs/firmware_flasher.js
@@ -585,10 +585,9 @@ firmware_flasher.initialize = function (callback) {
                 eraseAll = true;
             }
 
-            const portSelect = document.querySelector('#port');
-            if (!portSelect.value.startsWith('DFU')) {
-                if (portSelect.value !== '0') {
-                    const port = portSelect.value;
+            if (!$('option:selected', portPickerElement).data().isDFU) {
+                if (String(portPickerElement.val()) !== '0') {
+                    const port = String(portPickerElement.val());
 
                     if ($('input.updating').is(':checked')) {
                         options.no_reboot = true;
@@ -968,12 +967,10 @@ firmware_flasher.initialize = function (callback) {
             }
         });
 
-        const portSelect = document.querySelector('#port');
-
         portPickerElement.on('change', function () {
             if (GUI.active_tab === 'firmware_flasher') {
                 if (!GUI.connect_lock) {
-                    if (portSelect.value.startsWith('DFU')) {
+                    if ($('option:selected', this).data().isDFU) {
                         self.enableDfuExitButton(true);
                     } else {
                         if (!self.isFlashing) {
@@ -1230,16 +1227,6 @@ firmware_flasher.initialize = function (callback) {
 
 
 firmware_flasher.isSerialPortAvailable = function() {
-    // const selected_port = $('div#port-picker #port option:selected');
-    // const isBusy = GUI.connect_lock;
-    // const isDfu = PortHandler.dfu_available;
-    // const portSelect = document.querySelector('#port');
-    // console.log(portSelect.value.includes('manual'), portSelect.value, portSelect);
-    // console.log('isManual', selected_port.data().isManual, 'isVirtual', selected_port.data().isVirtual, 'isBusy', isBusy, 'isDfu', isDfu);
-    // const isManual = selected_port.data().isManual || false;
-    // const isVirtual = selected_port.data().isVirtual || false;
-
-    // return !isDfu && !isManual && !isVirtual && !isBusy;
     return PortHandler.port_available && !GUI.connect_lock;
 };