From 494083917cad194bc059b7f34b4810090bbd2636 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          | 189 ++++++++++++++++++++------------
 src/js/serial_backend.js        | 123 +++++++++++----------
 src/js/tabs/firmware_flasher.js |  29 +++--
 src/js/tabs/options.js          |  12 ++
 src/tabs/options.html           |   6 +
 6 files changed, 225 insertions(+), 138 deletions(-)

diff --git a/locales/en/messages.json b/locales/en/messages.json
index 77d9fe3cd6d..e3a9d1d2a2e 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 8ed57b7a8c2..c54d8c0e8c7 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,64 +103,61 @@ 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();
+
+                const usbText = (result[0].productName) ? (`DFU - ${result[0].productName}`) : "DFU";
+                const dfuOption = document.createElement('option');
 
-                self.portPickerElement.append($('<option/>', {
-                    value: "DFU",
-                    text: usbText,
-                    data: {isDFU: true},
-                }));
+                dfuOption.value = 'DFU';
+                dfuOption.text = usbText;
 
-                self.portPickerElement.append($('<option/>', {
-                    value: 'manual',
-                    text: i18n.getMessage('portsSelectManual'),
-                    data: {isManual: true},
-                }));
+                portSelect.add(dfuOption);
+                // portSelect.value = 'DFU';
 
-                self.portPickerElement.val('DFU').trigger('change');
                 self.setPortsInputWidth();
             }
             self.dfu_available = true;
         } else {
-            if (dfuElement.length) {
-               dfuElement.remove();
-               self.setPortsInputWidth();
+            // 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 (callback) {
-            callback(self.dfu_available);
-        }
-        if (!$('option:selected', self.portPickerElement).data().isDFU) {
+
+        if (!dfuActive) {
             if (!(GUI.connected_to || GUI.connect_lock)) {
                 FC.resetState();
             }
@@ -166,12 +165,69 @@ PortHandler.check_usb_devices = function (callback) {
                 self.portPickerElement.trigger('change');
             }
         }
+
+        if (callback) {
+            callback(self.dfu_available);
+        }
     });
 };
 
-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;
-    const removePorts = self.array_difference(self.initialPorts, currentPorts);
+
+    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);
 
     if (removePorts.length) {
         console.log(`PortHandler - Removed: ${JSON.stringify(removePorts)}`);
@@ -180,8 +236,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();
                 }
             }
         }
@@ -209,18 +268,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;
@@ -235,7 +294,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
@@ -254,7 +314,7 @@ PortHandler.detectPort = function(currentPorts) {
                 self.port_detected_callbacks.splice(index, 1);
             }
         }
-        self.initialPorts = currentPorts;
+        self.initialPorts = self.currentPorts;
     }
 };
 
@@ -268,37 +328,26 @@ PortHandler.sortPorts = function(ports) {
 };
 
 PortHandler.updatePortSelect = function (ports) {
+    const portSelect = document.querySelector('#port');
+
     ports = this.sortPorts(ports);
-    this.portPickerElement.empty();
+
+    this.clearOptions();
 
     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;
-        }
+        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,
-            data: {isManual: false},
-        }));
-    }
+        portOption.value = ports[i].path;
+        portOption.text = portText;
 
-    if (this.showVirtualMode) {
-        this.portPickerElement.append($("<option/>", {
-            value: 'virtual',
-            text: i18n.getMessage('portsSelectVirtual'),
-            data: {isVirtual: true},
-        }));
+        portSelect.add(portOption);
     }
 
-    this.portPickerElement.append($("<option/>", {
-        value: 'manual',
-        text: i18n.getMessage('portsSelectManual'),
-        data: {isManual: true},
-    }));
+    this.addVirtualOption();
+    this.addManualOption();
+
+    if (!ports.length) { this.addNoPortsOption(); }
 
     this.setPortsInputWidth();
     return ports;
diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js
index 2c71a62b5f0..8b50cca28ed 100644
--- a/src/js/serial_backend.js
+++ b/src/js/serial_backend.js
@@ -51,21 +51,22 @@ function disconnectHandler(event) {
 
 export function initializeSerialBackend() {
     GUI.updateManualPortVisibility = function() {
-        const selected_port = $('div#port-picker #port option:selected');
-        if (selected_port.data().isManual) {
+        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.data().isVirtual) {
+
+        if (portSelect.value.startsWith("virtual")) {
             $('#firmware-virtual-option').show();
-        }
-        else {
+        } else {
             $('#firmware-virtual-option').hide();
         }
 
-        $('#auto-connect-and-baud').toggle(!selected_port.data().isDFU);
+        $('#auto-connect-and-baud').toggle(!portSelect.value.startsWith("DFU"));
     };
 
     GUI.updateManualPortVisibility();
@@ -84,11 +85,16 @@ export function initializeSerialBackend() {
     });
 
 
-    $("div.connect_controls a.connect").on('click', function () {
-
-        const selectedPort = $('div#port-picker #port option:selected');
+    $("div.connect_controls a.connect").on('click', function (e) {
+        const portSelect = document.querySelector('#port');
         let portName;
-        if (selectedPort.data().isManual) {
+
+        if (portSelect.value.includes('none')) {
+            e.preventDefault();
+            return;
+        }
+
+        if (portSelect.value.includes("manual")) {
             portName = $('#port-override').val();
         } else {
             portName = String($('div#port-picker #port').val());
@@ -100,58 +106,61 @@ export function initializeSerialBackend() {
             GUI.configuration_loaded = false;
 
             const selected_baud = parseInt($('div#port-picker #baud').val());
-            const selectedPort = $('div#port-picker #port option:selected');
 
-            if (selectedPort.data().isDFU) {
+            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;
-
-                    // 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($('div#port-picker #baud').val());
-                    if (selectedPort.data().isVirtual) {
-                        CONFIGURATOR.virtualMode = true;
-                        CONFIGURATOR.virtualApiVersion = $('#firmware-version-dropdown :selected').val();
-
-                        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 {
-                        serial.connect(
-                            portName,
-                            { bitrate: selected_baud },
-                            onOpen,
-                        );
-                        toggleStatus();
-                    }
+                e.preventDefault();
+                return;
+            }
 
+            if (!isConnected) {
+                console.log(`Connecting to: ${portName}`);
+                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.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');
-                        $('div#flashbutton a.flash').removeClass('active');
-                    }
-                    GUI.timeout_kill_all();
-                    GUI.interval_kill_all();
-                    GUI.tab_switch_cleanup(() => GUI.tab_switch_in_progress = false);
+                    serial.connect(
+                        portName,
+                        { bitrate: selected_baud },
+                        onOpen,
+                    );
+                    toggleStatus();
+                }
 
-                    function onFinishCallback() {
-                        finishClose(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);
 
-                    mspHelper.setArmingEnabled(true, false, onFinishCallback);
+                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 3c8ec715256..dc4acca7448 100644
--- a/src/js/tabs/firmware_flasher.js
+++ b/src/js/tabs/firmware_flasher.js
@@ -576,9 +576,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;
@@ -911,10 +912,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) {
@@ -1169,13 +1172,17 @@ 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 isManual = selected_port.data().isManual || false;
-    const isVirtual = selected_port.data().isVirtual || false;
-
-    return !isDfu && !isManual && !isVirtual && !isBusy;
+    // 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;
 };
 
 firmware_flasher.updateDetectBoardButton = function() {
diff --git a/src/js/tabs/options.js b/src/js/tabs/options.js
index 0544cbae921..99ba828e2f7 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 6acbc695e79..c37f81fd995 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" />