From f3c5a1dec63b07763d0d0556ad0e03d65c66d8e0 Mon Sep 17 00:00:00 2001
From: Mark Haslinghuis <mark@numloq.nl>
Date: Fri, 29 Dec 2023 01:31:02 +0100
Subject: [PATCH] Hide manual connection and refactor port_handler

---
 locales/en/messages.json        |   4 +
 src/js/port_handler.js          | 257 +++++++++++++++++++++-----------
 src/js/serial_backend.js        |  93 ++++++++----
 src/js/tabs/firmware_flasher.js |  21 ++-
 src/js/tabs/options.js          |  12 ++
 src/tabs/options.html           |   6 +
 6 files changed, 278 insertions(+), 115 deletions(-)

diff --git a/locales/en/messages.json b/locales/en/messages.json
index 476e9230f3..af923fdb30 100755
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -113,6 +113,10 @@
         "message": "Use mDNS Browser Device discovery on network (experimental)",
         "description": "Enable mDNS Browser Device discovery in PortHandler (experimental)"
     },
+    "showManualMode": {
+        "message": "Enable manual connection mode",
+        "description": "Text for the option to enable or disable manual connection mode"
+    },
     "showVirtualMode": {
         "message": "Enable virtual connection mode",
         "description": "Text for the option to enable or disable the virtual FC"
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index 40998156ef..29b51eefa3 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -5,7 +5,6 @@ import { generateVirtualApiVersions, getTextWidth } from './utils/common';
 import { get as getConfig } from "./ConfigStorage";
 import serial from "./serial";
 import MdnsDiscovery from "./mdns_discovery";
-import $ from 'jquery';
 import { isWeb } from "./utils/isWeb";
 
 const TIMEOUT_CHECK = 500 ; // With 250 it seems that it produces a memory leak and slowdown in some versions, reason unknown
@@ -18,6 +17,7 @@ export const usbDevices = { filters: [
 ] };
 
 const PortHandler = new function () {
+    this.currentPorts = [];
     this.initialPorts = false;
     this.port_detected_callbacks = [];
     this.port_removed_callbacks = [];
@@ -26,6 +26,7 @@ const PortHandler = new function () {
     this.showAllSerialDevices = false;
     this.useMdnsBrowser = false;
     this.showVirtualMode = false;
+    this.showManualMode = false;
 };
 
 PortHandler.initialize = function () {
@@ -56,6 +57,7 @@ PortHandler.reinitialize = function () {
     }
 
     this.showVirtualMode = getConfig('showVirtualMode').showVirtualMode;
+    this.showManualMode = getConfig('showManualMode').showManualMode;
     this.showAllSerialDevices = getConfig('showAllSerialDevices').showAllSerialDevices;
     this.useMdnsBrowser = getConfig('useMdnsBrowser').useMdnsBrowser;
 
@@ -86,10 +88,10 @@ PortHandler.check_serial_devices = function () {
     const self = this;
 
     serial.getDevices(function(cp) {
-        let currentPorts = [];
+        self.currentPorts = [];
 
         if (self.useMdnsBrowser) {
-            currentPorts = [
+            self.currentPorts = [
                 ...cp,
                 ...(MdnsDiscovery.mdnsBrowser.services?.filter(s => s.txt?.vendor === 'elrs' && s.txt?.type === 'rx' && s.ready === true)
                     .map(s => s.addresses.map(a => ({
@@ -101,65 +103,82 @@ PortHandler.check_serial_devices = function () {
                     }))).flat() ?? []),
             ].filter(Boolean);
         } else {
-            currentPorts = cp;
+            self.currentPorts = cp;
         }
 
         // auto-select port (only during initialization)
         if (!self.initialPorts) {
-            currentPorts = self.updatePortSelect(currentPorts);
-            self.selectPort(currentPorts);
-            self.initialPorts = currentPorts;
+            self.currentPorts = self.updatePortSelect(self.currentPorts);
+            self.selectPort(self.currentPorts);
+            self.initialPorts = self.currentPorts;
             GUI.updateManualPortVisibility();
         } else {
-            self.removePort(currentPorts);
-            self.detectPort(currentPorts);
+            self.removePort();
+            self.detectPort();
         }
     });
 };
 
 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) {
-            if (!dfuElement.length) {
-                self.portPickerElement.empty();
-                let usbText;
-                if (result[0].productName) {
-                    usbText = (`DFU - ${result[0].productName}`);
-                } else {
-                    usbText = "DFU";
-                }
+            // 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';
 
-                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},
-                }));
-
-                self.portPickerElement.val('DFU').trigger('change');
                 self.setPortsInputWidth();
+
                 self.dfu_available = true;
             }
-        } else if (dfuElement.length) {
-            dfuElement.remove();
-            self.setPortsInputWidth();
-            self.dfu_available = false;
+        } 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();
+
+                self.addManualOption();
+                self.addVirtualOption();
+                self.addNoPortsOption();
+
+                self.setPortsInputWidth();
+
+                self.dfu_available = false;
+            }
         }
-        if ($('option:selected', self.portPickerElement).val() !== 'DFU') {
+
+        // if ($('option:selected', self.portPickerElement).val() !== 'DFU') {
+
+        if (!dfuActive) {
             if (!(GUI.connected_to || GUI.connect_lock)) {
                 FC.resetState();
             }
@@ -175,9 +194,62 @@ PortHandler.check_usb_devices = function (callback) {
     });
 };
 
-PortHandler.removePort = function(currentPorts) {
+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, currentPorts);
+    const removePorts = self.array_difference(self.initialPorts, self.currentPorts);
 
     if (removePorts.length) {
         console.log(`PortHandler - Removed: ${JSON.stringify(removePorts)}`);
@@ -186,8 +258,11 @@ PortHandler.removePort = function(currentPorts) {
         if (GUI.connected_to) {
             for (let i = 0; i < removePorts.length; i++) {
                 if (removePorts[i].path === GUI.connected_to) {
-                    $('div.connect_controls a.connect').click();
-                    $('div.connect_controls a.connect.active').click();
+                    const button = document.querySelector('div.connect_controls a.connect');
+                    button.click();
+
+                    const buttonActive = document.querySelector('div.connect_controls a.connect.active');
+                    buttonActive.click();
                 }
             }
         }
@@ -215,18 +290,18 @@ PortHandler.removePort = function(currentPorts) {
     }
 };
 
-PortHandler.detectPort = function(currentPorts) {
+PortHandler.detectPort = function() {
     const self = this;
-    const newPorts = self.array_difference(currentPorts, self.initialPorts);
+    const newPorts = self.array_difference(self.currentPorts, self.initialPorts);
 
     if (newPorts.length) {
-        currentPorts = self.updatePortSelect(currentPorts);
+        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(currentPorts);
+            self.selectPort(self.currentPorts);
         }
 
         self.port_available = true;
@@ -241,7 +316,8 @@ PortHandler.detectPort = function(currentPorts) {
         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') {
-                $('div.connect_controls a.connect').click();
+                const button = document.querySelector('div.connect_controls a.connect');
+                button.click();
             }
         }
         // trigger callbacks
@@ -260,7 +336,7 @@ PortHandler.detectPort = function(currentPorts) {
                 self.port_detected_callbacks.splice(index, 1);
             }
         }
-        self.initialPorts = currentPorts;
+        self.initialPorts = self.currentPorts;
     }
 };
 
@@ -274,46 +350,55 @@ PortHandler.sortPorts = function(ports) {
 };
 
 PortHandler.updatePortSelect = function (ports) {
+    const portSelect = document.querySelector('#port');
+
     ports = this.sortPorts(ports);
-    this.portPickerElement.empty();
 
-    for (let i = 0; i < ports.length; i++) {
-        let portText;
-        if (ports[i].displayName) {
-            portText = (`${ports[i].path} - ${ports[i].displayName}`);
-        } else {
-            portText = ports[i].path;
-        }
+    this.clearOptions();
 
-        this.portPickerElement.append($("<option/>", {
-            value: ports[i].path,
-            text: portText,
-            /**
-             * @deprecated please avoid using `isDFU` and friends for new code.
-             */
-            data: {isManual: false},
-        }));
+    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();
 
-    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(); }
 
     this.setPortsInputWidth();
     return ports;
diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js
index 6384fca35b..8cf3f6e1cf 100644
--- a/src/js/serial_backend.js
+++ b/src/js/serial_backend.js
@@ -56,19 +56,23 @@ export function initializeSerialBackend() {
         const selected_port = $('#port').val();
 
         if (selected_port === 'manual') {
+        // const portSelect = document.querySelector('#port');
+
+        // console.log(`Port select value: ${portSelect.value}`);
+        // if (portSelect.value.startsWith("manual")) {
             $('#port-override-option').show();
-        }
-        else {
+        } else {
             $('#port-override-option').hide();
         }
         if (selected_port === 'virtual') {
+        // if (portSelect.value.startsWith("virtual")) {
             $('#firmware-virtual-option').show();
-        }
-        else {
+        } else {
             $('#firmware-virtual-option').hide();
         }
 
         $('#auto-connect-and-baud').toggle(selected_port !== 'DFU');
+        // $('#auto-connect-and-baud').toggle(!portSelect.value.startsWith("DFU"));
     };
 
     GUI.updateManualPortVisibility();
@@ -92,6 +96,16 @@ 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());
@@ -106,15 +120,18 @@ export function initializeSerialBackend() {
             const selectedPort = $('#port').val();
 
             if (selectedPort === 'DFU') {
+
+            // const portSelect = document.querySelector('#port');
+
+            // if (portSelect.value.startsWith('DFU')) {
                 $('select#baud').hide();
-            } else if (portName !== '0') {
-                if (!isConnected) {
-                    console.log(`Connecting to: ${portName}`);
-                    GUI.connecting_to = portName;
+                e.preventDefault();
+                return;
+            }
 
-                    // 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'));
+            if (!isConnected) {
+                console.log(`Connecting to: ${portName}`);
+                GUI.connecting_to = portName;
 
                     const baudRate = parseInt($('#baud').val());
                     if (selectedPort === 'virtual') {
@@ -130,20 +147,25 @@ export function initializeSerialBackend() {
                         // 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 {
-                        serial.connect(
-                            portName,
-                            { bitrate: selected_baud },
-                            onOpen,
-                        );
-                        toggleStatus();
-                    }
-
+                // // 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);
+
+                    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');
@@ -158,7 +180,28 @@ export function initializeSerialBackend() {
                     }
 
                     mspHelper?.setArmingEnabled(true, false, onFinishCallback);
+                    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);
+
+            //     function onFinishCallback() {
+            //         finishClose(toggleStatus);
+            //     }
+
+            //     mspHelper.setArmingEnabled(true, false, onFinishCallback);
             }
         }
     });
diff --git a/src/js/tabs/firmware_flasher.js b/src/js/tabs/firmware_flasher.js
index f9615f0823..33006f2868 100644
--- a/src/js/tabs/firmware_flasher.js
+++ b/src/js/tabs/firmware_flasher.js
@@ -585,9 +585,10 @@ firmware_flasher.initialize = function (callback) {
                 eraseAll = true;
             }
 
-            if (!$('option:selected', portPickerElement).data().isDFU) {
-                if (String(portPickerElement.val()) !== '0') {
-                    const port = String(portPickerElement.val());
+            const portSelect = document.querySelector('#port');
+            if (!portSelect.value.startsWith('DFU')) {
+                if (portSelect.value !== '0') {
+                    const port = portSelect.value;
 
                     if ($('input.updating').is(':checked')) {
                         options.no_reboot = true;
@@ -967,10 +968,12 @@ 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 ($('option:selected', this).data().isDFU) {
+                    if (portSelect.value.startsWith('DFU')) {
                         self.enableDfuExitButton(true);
                     } else {
                         if (!self.isFlashing) {
@@ -1227,6 +1230,16 @@ 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;
 };
 
diff --git a/src/js/tabs/options.js b/src/js/tabs/options.js
index 0544cbae92..99ba828e2f 100644
--- a/src/js/tabs/options.js
+++ b/src/js/tabs/options.js
@@ -25,6 +25,7 @@ options.initialize = function (callback) {
         TABS.options.initShowAllSerialDevices();
         TABS.options.initUseMdnsBrowser();
         TABS.options.initShowVirtualMode();
+        TABS.options.initUseManualConnection();
         TABS.options.initCordovaForceComputerUI();
         TABS.options.initDarkTheme();
         TABS.options.initShowDevToolsOnStartup();
@@ -145,6 +146,17 @@ options.initShowVirtualMode = function() {
         });
 };
 
+options.initUseManualConnection = function() {
+    const showManualModeElement = $('div.showManualMode input');
+    const result = getConfig('showManualMode');
+    showManualModeElement
+        .prop('checked', !!result.showManualMode)
+        .on('change', () => {
+            setConfig({ showManualMode: showManualModeElement.is(':checked') });
+            PortHandler.reinitialize();
+        });
+};
+
 options.initUseMdnsBrowser = function() {
     const useMdnsBrowserElement = $('div.useMdnsBrowser input');
     const result = getConfig('useMdnsBrowser');
diff --git a/src/tabs/options.html b/src/tabs/options.html
index 6acbc695e7..c37f81fd99 100644
--- a/src/tabs/options.html
+++ b/src/tabs/options.html
@@ -41,6 +41,12 @@
                     </div>
                     <span class="freelabel" i18n="useMdnsBrowser"></span>
                 </div>
+                <div class="showManualMode margin-bottom">
+                    <div>
+                        <input type="checkbox" class="toggle" />
+                    </div>
+                    <span class="freelabel" i18n="showManualMode"></span>
+                </div>
                 <div class="showVirtualMode margin-bottom">
                     <div>
                         <input type="checkbox" class="toggle" />