Make virtual mode an option using msp backup and restore

locales/en/messages.json

@@ -109,6 +109,10 @@
         "message": "Show all serial devices (for manufacturers or development)",
         "description": "Do not filter serial devices using VID/PID values (for manufacturers or development)"
     },
+    "showVirtualMode": {
+        "message": "Enable virtual connection mode",
+        "description": "Text for the option to enable or disable the virtual FC"
+    },
     "cordovaForceComputerUI": {
         "message": "Use computers interface instead of phones interface"
     },

src/js/port_handler.js

@@ -13,6 +13,8 @@ const PortHandler = new function () {
     this.port_removed_callbacks = [];
     this.dfu_available = false;
     this.port_available = false;
+    this.showAllSerialDevices = false;
+    this.showVirtualMode = false;
 };
 
 PortHandler.initialize = function () {
@@ -31,6 +33,9 @@ PortHandler.initialize = function () {
 PortHandler.check = function () {
     const self = this;
 
+    ConfigStorage.get('showVirtualMode', res => self.showVirtualMode = res.showVirtualMode);
+    ConfigStorage.get('showAllSerialDevices', res => self.showAllSerialDevices = res.showAllSerialDevices);
+
     self.check_usb_devices();
     self.check_serial_devices();
 
@@ -79,17 +84,20 @@ PortHandler.check_usb_devices = function (callback) {
                     data: {isDFU: true},
                 }));
 
-                self.portPickerElement.append($('<option/>', {
+                if (self.showVirtualMode) {
-                    value: 'virtual',
+                    self.portPickerElement.append($('<option/>', {
-                    text: i18n.getMessage('portsSelectVirtual'),
+                        value: 'virtual',
-                    data: {isVirtual: true},
+                        text: i18n.getMessage('portsSelectVirtual'),
-                }));
+                        data: {isVirtual: true},
+                    }));
+                }
 
                 self.portPickerElement.append($('<option/>', {
                     value: 'manual',
                     text: i18n.getMessage('portsSelectManual'),
                     data: {isManual: true},
                 }));
+
                 self.portPickerElement.val('DFU').change();
                 self.setPortsInputWidth();
             }
@@ -241,11 +249,13 @@ PortHandler.updatePortSelect = function (ports) {
         }));
     }
 
-    this.portPickerElement.append($("<option/>", {
+    if (this.showVirtualMode) {
-        value: 'virtual',
+        this.portPickerElement.append($("<option/>", {
-        text: i18n.getMessage('portsSelectVirtual'),
+            value: 'virtual',
-        data: {isVirtual: true},
+            text: i18n.getMessage('portsSelectVirtual'),
-    }));
+            data: {isVirtual: true},
+        }));
+    }
 
     this.portPickerElement.append($("<option/>", {
         value: 'manual',

src/js/serial.js

@@ -270,13 +270,11 @@ const serial = {
 
         chrome.serial.getDevices(function (devices_array) {
             const devices = [];
-            let showAllSerialDevices = false;
 
             devices_array.forEach(function (device) {
-                ConfigStorage.get('showAllSerialDevices', res => showAllSerialDevices = res.showAllSerialDevices);
                 const isKnownSerialDevice = self.serialDevices.some(el => el.vendorId === device.vendorId) && self.serialDevices.some(el => el.productId === device.productId);
 
-                if (isKnownSerialDevice || showAllSerialDevices) {
+                if (isKnownSerialDevice || PortHandler.showAllSerialDevices) {
                     devices.push({
                         path: device.path,
                         displayName: device.displayName,

src/js/tabs/options.js

@@ -16,6 +16,7 @@ options.initialize = function (callback) {
         TABS.options.initCliAutoComplete();
         TABS.options.initAutoConnectConnectionTimeout();
         TABS.options.initShowAllSerialDevices();
+        TABS.options.initShowVirtualMode();
         TABS.options.initCordovaForceComputerUI();
         TABS.options.initDarkTheme();
 
@@ -142,7 +143,19 @@ options.initShowAllSerialDevices = function() {
             .on('change', () => ConfigStorage.set({ showAllSerialDevices: showAllSerialDevicesElement.is(':checked') }))
             .trigger('change');
     });
+};
 
+options.initShowVirtualMode = function() {
+    const showVirtualModeElement = $('div.showVirtualMode input');
+    ConfigStorage.get('showVirtualMode', result => {
+        showVirtualModeElement
+            .prop('checked', !!result.showVirtualMode)
+            .on('change', () => {
+                ConfigStorage.set({ showVirtualMode: showVirtualModeElement.is(':checked') });
+                PortHandler.initialPorts = false;
+            })
+            .trigger('change');
+    });
 };
 
 options.initCordovaForceComputerUI = function () {

src/js/tabs/setup.js

@@ -29,34 +29,34 @@ TABS.setup.initialize = function (callback) {
         // translate to user-selected language
         i18n.localizePage();
 
-        if (CONFIGURATOR.virtualMode || semver.lt(FC.CONFIG.apiVersion, API_VERSION_1_44)) {
+        const backupButton = $('#content .backup');
-            const backupButton = $('#content .backup');
+        const restoreButton = $('#content .restore');
 
-            if (semver.lt(FC.CONFIG.apiVersion, CONFIGURATOR.API_VERSION_MIN_SUPPORTED_BACKUP_RESTORE)) {
+        backupButton.on('click', () => configuration_backup(() => GUI.log(i18n.getMessage('initialSetupBackupSuccess'))));
-                backupButton.addClass('disabled');
-                $('#content .restore').addClass('disabled');
 
-                GUI.log(i18n.getMessage('initialSetupBackupAndRestoreApiVersion', [FC.CONFIG.apiVersion, CONFIGURATOR.API_VERSION_MIN_SUPPORTED_BACKUP_RESTORE]));
+        restoreButton.on('click', () => configuration_restore(() => {
+            // get latest settings
+            TABS.setup.initialize();
+
+            GUI.log(i18n.getMessage('initialSetupRestoreSuccess'));
+        }));
+
+        if (semver.lt(FC.CONFIG.apiVersion, CONFIGURATOR.API_VERSION_MIN_SUPPORTED_BACKUP_RESTORE)) {
+            backupButton.addClass('disabled');
+            restoreButton.addClass('disabled');
+
+            GUI.log(i18n.getMessage('initialSetupBackupAndRestoreApiVersion', [FC.CONFIG.apiVersion, CONFIGURATOR.API_VERSION_MIN_SUPPORTED_BACKUP_RESTORE]));
+        }
+
+        if (CONFIGURATOR.virtualMode) {
+            // saving and uploading an imaginary config to hardware is a bad idea
+            backupButton.addClass('disabled');
+        } else if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_44)) {
+            restoreButton.addClass('disabled');
+
+            if (!PortHandler.showVirtualMode) {
+                $('.backupRestore').hide();
             }
-
-            if (CONFIGURATOR.virtualMode) {
-                // saving and uploading an imaginary config to hardware is a bad idea
-                backupButton.addClass('disabled');
-            }
-
-            backupButton.on('click', () => configuration_backup(() => GUI.log(i18n.getMessage('initialSetupBackupSuccess'))));
-
-            $('#content .restore').on('click', () => {
-                configuration_restore(() => {
-                    // get latest settings
-                    TABS.setup.initialize();
-
-                    GUI.log(i18n.getMessage('initialSetupRestoreSuccess'));
-                });
-            });
-
-        } else {
-            $('.backupRestore').hide();
         }
 
         // initialize 3D Model

src/tabs/options.html

@@ -52,6 +52,12 @@
                     </div>
                     <span class="freelabel" i18n="showAllSerialDevices"></span>
                 </div>
+                <div class="showVirtualMode margin-bottom">
+                    <div>
+                        <input type="checkbox" class="toggle" />
+                    </div>
+                    <span class="freelabel" i18n="showVirtualMode"></span>
+                </div>
                 <div class="cordovaForceComputerUI margin-bottom">
                     <div>
                         <input type="checkbox" class="toggle" />