feat: use modules instead of global bindings (#3245)

.eslintrc.js

@@ -20,5 +20,25 @@ module.exports = {
         "no-var": "error",
         "prefer-template": "error",
         "template-curly-spacing": "error",
+        "no-undef": "error",
+        'no-duplicate-imports': 'error',
+    },
+    globals: {
+        d3: true,
+        THREE: true,
+        cordova: true,
+        cordovaUI: true,
+        ol: true,
+        wNumb: true,
+        ConfigStorage: true,
+        objectHash: true,
+        // start cordova bindings, remove after cordova is removed/replace/modularized
+        cordova_serial: true,
+        fileChooser: true,
+        i18n: true,
+        appReady: true,
+        cordovaChromeapi: true,
+        appAvailability: true,
+        // end cordova bindings
     },
 };

src/components/EscDshotDirection/EscDshotDirectionComponent.js

@@ -5,6 +5,7 @@ import EscDshotDirectionMotorDriver from "./EscDshotDirectionMotorDriver.js";
 import DshotCommand from "../../js/utils/DshotCommand.js";
 import FC from "../../js/fc.js";
 import { API_VERSION_1_44 } from '../../js/data_storage.js';
+import { getMixerImageSrc } from "../../js/utils/common.js";
 
 class EscDshotDirectionComponent
 {

src/components/MotorOutputReordering/MotorOutputReorderingComponent.js

@@ -6,6 +6,8 @@ import MSP from "../../js/msp";
 import MSPCodes from "../../js/msp/MSPCodes";
 import FC from "../../js/fc";
 import { gui_log } from "../../js/gui_log";
+import { i18n } from "../../js/localization";
+import GUI, { TABS } from "../../js/gui";
 
 export default class MotorOutputReorderComponent
 {

src/js/Analytics.js

@@ -1,3 +1,8 @@
+import ShortUniqueId from 'short-unique-id';
+import googleAnalytics from 'universal-ga';
+import { set as setConfig, get as getConfig } from './ConfigStorage';
+import GUI from './gui';
+import CONFIGURATOR from './data_storage';
 
 let tracking = null;
 export { tracking };
@@ -6,6 +11,66 @@ export function createAnalytics(ga, settings) {
     tracking = new Analytics(ga, settings);
 }
 
+function getBuildType() {
+    return GUI.Mode;
+}
+
+function setupAnalytics(result) {
+    let userId;
+    if (result.userId) {
+        userId = result.userId;
+    } else {
+        const uid = new ShortUniqueId();
+        userId = uid.randomUUID(13);
+
+        setConfig({ 'userId': userId });
+    }
+
+    const optOut = !!result.analyticsOptOut;
+    const checkForDebugVersions = !!result.checkForConfiguratorUnstableVersions;
+
+    const debugMode = typeof process === "object" && process.versions['nw-flavor'] === 'sdk';
+
+    const settings = {
+        trackingId: 'UA-123002063-1',
+        userId: userId,
+        appName:  CONFIGURATOR.productName,
+        appVersion: CONFIGURATOR.version,
+        gitRevision: CONFIGURATOR.gitRevision,
+        os: GUI.operating_system,
+        checkForDebugVersions: checkForDebugVersions,
+        optOut: optOut,
+        debugMode: debugMode,
+        buildType: getBuildType(),
+    };
+    createAnalytics(googleAnalytics, settings);
+    window.tracking = tracking;
+
+    function logException(exception) {
+        tracking.sendException(exception.stack);
+    }
+
+    if (typeof process === "object") {
+        process.on('uncaughtException', logException);
+    }
+
+    tracking.sendEvent(tracking.EVENT_CATEGORIES.APPLICATION, 'AppStart', { sessionControl: 'start' });
+
+    $('.connect_b a.connect').removeClass('disabled');
+    $('.firmware_b a.flash').removeClass('disabled');
+}
+
+export function checkSetupAnalytics(callback) {
+    if (!tracking) {
+        const result = getConfig(['userId', 'analyticsOptOut', 'checkForConfiguratorUnstableVersions' ]);
+        setupAnalytics(result);
+    }
+
+    if (callback) {
+        callback(tracking);
+    }
+}
+
 class Analytics {
 
     constructor (ga, settings) {

src/js/CliAutoComplete.js

@@ -1,6 +1,8 @@
 import GUI from './gui';
 import CONFIGURATOR from './data_storage';
 import FC from './fc';
+import semver from 'semver';
+import { tracking } from './Analytics';
 
 /**
  * Encapsulates the AutoComplete logic

src/js/DarkTheme.js

@@ -1,5 +1,6 @@
 import GUI from "./gui";
 import windowWatcherUtil from "./utils/window_watchers";
+import { checkSetupAnalytics } from "./Analytics";
 
 const css_dark = [
     './css/dark-theme.css',
@@ -65,4 +66,13 @@ DarkTheme.applyNormal = function () {
     css_dark.forEach((el) => $(`link[href="${el}"]`).prop('disabled', true));
 };
 
+
+export function setDarkTheme(enabled) {
+    DarkTheme.setConfig(enabled);
+
+    checkSetupAnalytics(function (analyticsService) {
+        analyticsService.sendEvent(analyticsService.EVENT_CATEGORIES.APPLICATION, 'DarkTheme', enabled);
+    });
+}
+
 export default DarkTheme;

src/js/Features.js

@@ -1,5 +1,7 @@
 import { bit_check, bit_set, bit_clear } from "./bit";
 import { API_VERSION_1_44 } from './data_storage';
+import semver from "semver";
+import { tracking } from "./Analytics";
 
 const Features = function (config) {
     const self = this;

src/js/LogoManager.js

@@ -1,5 +1,6 @@
 import { gui_log } from "./gui_log";
 import { i18n } from "./localization";
+import { checkChromeRuntimeError } from "./utils/common";
 
 /**
  * Takes an ImageData object and returns an MCM symbol as an array of strings.

src/js/RateCurve.js

@@ -1,5 +1,6 @@
 import FC from "./fc";
 import { API_VERSION_1_43 } from "./data_storage";
+import semver from "semver";
 
 const minRc = 1000;
 const midRc = 1500;

src/js/TuningSliders.js

@@ -2,6 +2,10 @@ import MSP from "./msp";
 import FC from "./fc";
 import MSPCodes from "./msp/MSPCodes";
 import { API_VERSION_1_44 } from './data_storage';
+import { isExpertModeEnabled } from "./utils/isExportModeEnabled";
+import semver from "semver";
+import { mspHelper } from "./msp/MSPHelper";
+import { TABS } from "./gui";
 
 const TuningSliders = {
     // Legacy Sliders

src/js/VirtualFC.js

@@ -3,6 +3,7 @@ import { i18n } from "./localization";
 import Beepers from "./Beepers";
 import FC from "./fc";
 import CONFIGURATOR from "./data_storage";
+import { OSD } from "./tabs/osd";
 
 const VirtualFC = {
     // these values are manufactured to unlock all the functionality of the configurator, they dont represent actual hardware

src/js/backup_restore.js

@@ -11,6 +11,10 @@ import MSP from "./msp";
 import MSPCodes from "./msp/MSPCodes";
 import CONFIGURATOR, { API_VERSION_1_41, API_VERSION_1_45 } from "./data_storage";
 import { gui_log } from './gui_log';
+import { generateFilename } from "./utils/generate_filename";
+import semver from "semver";
+import { tracking } from "./Analytics";
+import { checkChromeRuntimeError } from "./utils/common";
 
 // code below is highly experimental, although it runs fine on latest firmware
 // the data inside nested objects needs to be verified if deep copy works properly
@@ -509,7 +513,7 @@ export function configuration_restore(callback) {
                 }
 
                 for (let i = 0; i < configuration.profiles[profileIndex].ServoConfig.length; i++) {
-                    const servoConfig = profiles[profileIndex].ServoConfig;
+                    const servoConfig = configuration.profiles[profileIndex].ServoConfig;
 
                     servoConfig[i].angleAtMin = 45;
                     servoConfig[i].angleAtMax = 45;

src/js/fc.js

@@ -1,5 +1,6 @@
 import { bit_check } from "./bit";
 import { API_VERSION_1_42, API_VERSION_1_43, API_VERSION_1_44, API_VERSION_1_45 } from './data_storage';
+import semver from "semver";
 
 const INITIAL_CONFIG = {
     apiVersion:                       "0.0.0",

src/js/gui.js

@@ -1,10 +1,11 @@
 import { get as getConfig } from './ConfigStorage';
 import MSP from './msp';
+import Switchery from 'switchery-latest';
+import jBox from 'jbox';
+import { checkChromeRuntimeError } from './utils/common';
 
 const TABS = {};
 
-window.TABS = TABS; // filled by individual tab js file
-
 const GUI_MODES = {
     NWJS: "NW.js",
     Cordova: "Cordova",
@@ -483,7 +484,7 @@ class GuiControl {
     readTextFileDialog(extension) {
         const accepts = [{ description: `${extension.toUpperCase()} files`, extensions: [extension] }];
 
-        return new Promise(resolve => {
+        return new Promise((resolve, reject) => {
             chrome.fileSystem.chooseEntry({ type: 'openFile', accepts: accepts }, function (entry) {
                 checkChromeRuntimeError();
 
@@ -527,6 +528,4 @@ function GUI_checkOperatingSystem() {
 const GUI = new GuiControl();
 
 export { TABS };
-// initialize object into GUI variable
-window.GUI = GUI;
 export default GUI;

src/js/main.js

@@ -1,19 +1,22 @@
+import 'jbox';
 import '../components/init.js';
 import { gui_log } from './gui_log.js';
 // same, msp seems to be everywhere used from global scope
 import './msp/MSPHelper.js';
 import { i18n } from './localization.js';
-import GUI from './gui.js';
+import GUI, { TABS } from './gui.js';
 import { get as getConfig, set as setConfig } from './ConfigStorage.js';
-import ReleaseChecker from './release_checker.js';
+import { tracking, checkSetupAnalytics } from './Analytics.js';
-import { tracking, createAnalytics } from './Analytics.js';
 import { initializeSerialBackend } from './serial_backend.js';
 import FC from './fc.js';
-import CONFIGURATOR, { API_VERSION_1_42, API_VERSION_1_45 } from './data_storage.js';
+import CONFIGURATOR from './data_storage.js';
 import serial from './serial.js';
 import CliAutoComplete from './CliAutoComplete.js';
-import DarkTheme from './DarkTheme.js';
+import DarkTheme, { setDarkTheme } from './DarkTheme.js';
 import UI_PHONES from './phones_ui.js';
+import { isExpertModeEnabled } from './utils/isExportModeEnabled.js';
+import { updateTabList } from './utils/updateTabList.js';
+import { checkForConfiguratorUpdates } from './utils/checkForConfiguratorUpdates.js';
 
 $(document).ready(function () {
 
@@ -86,66 +89,6 @@ function appReady() {
     });
 }
 
-function checkSetupAnalytics(callback) {
-    if (!tracking) {
-        const result = getConfig(['userId', 'analyticsOptOut', 'checkForConfiguratorUnstableVersions' ]);
-        setupAnalytics(result);
-    }
-
-    if (callback) {
-        callback(tracking);
-    }
-}
-
-function getBuildType() {
-    return GUI.Mode;
-}
-
-function setupAnalytics(result) {
-    let userId;
-    if (result.userId) {
-        userId = result.userId;
-    } else {
-        const uid = new ShortUniqueId();
-        userId = uid.randomUUID(13);
-
-        setConfig({ 'userId': userId });
-    }
-
-    const optOut = !!result.analyticsOptOut;
-    const checkForDebugVersions = !!result.checkForConfiguratorUnstableVersions;
-
-    const debugMode = typeof process === "object" && process.versions['nw-flavor'] === 'sdk';
-
-    const settings = {
-        trackingId: 'UA-123002063-1',
-        userId: userId,
-        appName:  CONFIGURATOR.productName,
-        appVersion: CONFIGURATOR.version,
-        gitRevision: CONFIGURATOR.gitRevision,
-        os: GUI.operating_system,
-        checkForDebugVersions: checkForDebugVersions,
-        optOut: optOut,
-        debugMode: debugMode,
-        buildType: getBuildType(),
-    };
-    createAnalytics(googleAnalytics, settings);
-    window.tracking = tracking;
-
-    function logException(exception) {
-        tracking.sendException(exception.stack);
-    }
-
-    if (typeof process === "object") {
-        process.on('uncaughtException', logException);
-    }
-
-    tracking.sendEvent(tracking.EVENT_CATEGORIES.APPLICATION, 'AppStart', { sessionControl: 'start' });
-
-    $('.connect_b a.connect').removeClass('disabled');
-    $('.firmware_b a.flash').removeClass('disabled');
-}
-
 function closeSerial() {
     // automatically close the port when application closes
     const connectionId = serial.connectionId;
@@ -646,184 +589,5 @@ function startProcess() {
     }
 }
 
-function setDarkTheme(enabled) {
-    DarkTheme.setConfig(enabled);
-
-    checkSetupAnalytics(function (analyticsService) {
-        analyticsService.sendEvent(analyticsService.EVENT_CATEGORIES.APPLICATION, 'DarkTheme', enabled);
-    });
-}
-
-
-function checkForConfiguratorUpdates() {
-    const releaseChecker = new ReleaseChecker('configurator', 'https://api.github.com/repos/betaflight/betaflight-configurator/releases');
-
-    releaseChecker.loadReleaseData(notifyOutdatedVersion);
-}
-
-function notifyOutdatedVersion(releaseData) {
-    const result = getConfig('checkForConfiguratorUnstableVersions');
-    let showUnstableReleases = false;
-    if (result.checkForConfiguratorUnstableVersions) {
-        showUnstableReleases = true;
-    }
-
-    if (releaseData === undefined) {
-        console.log('No releaseData');
-        return false;
-    }
-
-    const versions = releaseData.filter(function (version) {
-        const semVerVersion = semver.parse(version.tag_name);
-        if (semVerVersion && (showUnstableReleases || semVerVersion.prerelease.length === 0)) {
-            return version;
-        } else {
-            return null;
-        }
-        }).sort(function (v1, v2) {
-        try {
-            return semver.compare(v2.tag_name, v1.tag_name);
-        } catch (e) {
-            return false;
-        }
-    });
-
-    if (versions.length > 0) {
-        CONFIGURATOR.latestVersion = versions[0].tag_name;
-        CONFIGURATOR.latestVersionReleaseUrl = versions[0].html_url;
-    }
-
-    if (semver.lt(CONFIGURATOR.version, CONFIGURATOR.latestVersion)) {
-        const message = i18n.getMessage('configuratorUpdateNotice', [CONFIGURATOR.latestVersion, CONFIGURATOR.latestVersionReleaseUrl]);
-        gui_log(message);
-
-        const dialog = $('.dialogConfiguratorUpdate')[0];
-
-        $('.dialogConfiguratorUpdate-content').html(message);
-
-        $('.dialogConfiguratorUpdate-closebtn').click(function() {
-            dialog.close();
-        });
-
-        $('.dialogConfiguratorUpdate-websitebtn').click(function() {
-            dialog.close();
-
-            window.open(CONFIGURATOR.latestVersionReleaseUrl, '_blank');
-        });
-
-        dialog.showModal();
-    }
-}
-
-function isExpertModeEnabled() {
-    return $('input[name="expertModeCheckbox"]').is(':checked');
-}
-
-function updateTabList(features) {
-
-    if (isExpertModeEnabled()) {
-        $('#tabs ul.mode-connected li.tab_failsafe').show();
-        $('#tabs ul.mode-connected li.tab_adjustments').show();
-        $('#tabs ul.mode-connected li.tab_servos').show();
-        $('#tabs ul.mode-connected li.tab_sensors').show();
-        $('#tabs ul.mode-connected li.tab_logging').show();
-    } else {
-        $('#tabs ul.mode-connected li.tab_failsafe').hide();
-        $('#tabs ul.mode-connected li.tab_adjustments').hide();
-        $('#tabs ul.mode-connected li.tab_servos').hide();
-        $('#tabs ul.mode-connected li.tab_sensors').hide();
-        $('#tabs ul.mode-connected li.tab_logging').hide();
-    }
-
-    if (features.isEnabled('GPS') && isExpertModeEnabled()) {
-        $('#tabs ul.mode-connected li.tab_gps').show();
-    } else {
-        $('#tabs ul.mode-connected li.tab_gps').hide();
-    }
-
-    if (features.isEnabled('LED_STRIP')) {
-        $('#tabs ul.mode-connected li.tab_led_strip').show();
-    } else {
-        $('#tabs ul.mode-connected li.tab_led_strip').hide();
-    }
-
-    if (features.isEnabled('TRANSPONDER')) {
-        $('#tabs ul.mode-connected li.tab_transponder').show();
-    } else {
-        $('#tabs ul.mode-connected li.tab_transponder').hide();
-    }
-
-    if (features.isEnabled('OSD')) {
-        $('#tabs ul.mode-connected li.tab_osd').show();
-    } else {
-        $('#tabs ul.mode-connected li.tab_osd').hide();
-    }
-
-    $('#tabs ul.mode-connected li.tab_power').show();
-
-    if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_42)) {
-        $('#tabs ul.mode-connected li.tab_vtx').show();
-    } else {
-        $('#tabs ul.mode-connected li.tab_vtx').hide();
-    }
-
-}
-
-function zeroPad(value, width) {
-
-    let valuePadded = String(value);
-
-    while (valuePadded.length < width) {
-        valuePadded = `0${value}`;
-    }
-
-    return valuePadded;
-}
-
-function generateFilename(prefix, suffix) {
-    const date = new Date();
-    let filename = prefix;
-
-    if (FC.CONFIG) {
-        if (FC.CONFIG.flightControllerIdentifier) {
-            filename = `${FC.CONFIG.flightControllerIdentifier}_${filename}`;
-        }
-        const craftName = semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_45)
-            ? FC.CONFIG.craftName
-            : FC.CONFIG.name;
-        if (craftName.trim() !== '') {
-            filename = `${filename}_${craftName.trim().replace(' ', '_')}`;
-        }
-    }
-
-    const yyyymmdd = `${date.getFullYear()}${zeroPad(date.getMonth() + 1, 2)}${zeroPad(date.getDate(), 2)}`;
-    const hhmmss = `${zeroPad(date.getHours(), 2)}${zeroPad(date.getMinutes(), 2)}${zeroPad(date.getSeconds(), 2)}`;
-    filename = `${filename}_${yyyymmdd}_${hhmmss}`;
-
-    return `${filename}.${suffix}`;
-}
-
-function showErrorDialog(message) {
-   const dialog = $('.dialogError')[0];
-
-    $('.dialogError-content').html(message);
-
-    $('.dialogError-closebtn').click(function() {
-        dialog.close();
-    });
-
-    dialog.showModal();
-}
-
-// TODO: all of these are used as globals in other parts.
-// once moved to modules extract to own module.
-window.googleAnalytics = analytics;
-window.tracking = null;
-window.showErrorDialog = showErrorDialog;
-window.generateFilename = generateFilename;
-window.updateTabList = updateTabList;
 window.isExpertModeEnabled = isExpertModeEnabled;
-window.checkForConfiguratorUpdates = checkForConfiguratorUpdates;
-window.setDarkTheme = setDarkTheme;
 window.appReady = appReady;
-window.checkSetupAnalytics = checkSetupAnalytics;

src/js/msp/MSPHelper.js

@@ -12,6 +12,10 @@ import { API_VERSION_1_42, API_VERSION_1_43, API_VERSION_1_44, API_VERSION_1_45
 import EscProtocols from "../utils/EscProtocols";
 import huffmanDecodeBuf from "../huffman";
 import { defaultHuffmanTree, defaultHuffmanLenIndex } from "../default_huffman_tree";
+import { updateTabList } from "../utils/updateTabList";
+import { showErrorDialog } from "../utils/showErrorDialog";
+import { TABS } from "../gui";
+import { OSD } from "../tabs/osd";
 
 // Used for LED_STRIP
 const ledDirectionLetters    = ['n', 'e', 's', 'w', 'u', 'd'];      // in LSB bit order

src/js/port_handler.js

@@ -1,7 +1,7 @@
-import GUI from "./gui";
+import GUI, { TABS } from "./gui";
 import FC from "./fc";
 import { i18n } from "./localization";
-import { generateVirtualApiVersions } from './utils/common';
+import { generateVirtualApiVersions, getTextWidth } from './utils/common';
 import { get as getConfig } from "./ConfigStorage";
 import serial from "./serial";
 import MdnsDiscovery from "./mdns_discovery";

src/js/protocols/stm32.js

@@ -6,7 +6,7 @@
     popular choices - 921600, 460800, 256000, 230400, 153600, 128000, 115200, 57600, 38400, 28800, 19200
 */
 import MSPConnectorImpl from "../msp/MSPConnector";
-import GUI from "../gui";
+import GUI, { TABS } from "../gui";
 import { i18n } from "../localization";
 import MSP from "../msp";
 import FC from "../fc";
@@ -18,6 +18,7 @@ import PortHandler, { usbDevices } from "../port_handler";
 import { API_VERSION_1_42 } from "../data_storage";
 import serial from "../serial";
 import STM32DFU from "./stm32usbdfu";
+import semver from "semver";
 
 const STM32_protocol = function () {
     this.baud = null;

src/js/protocols/stm32usbdfu.js

@@ -10,9 +10,10 @@
     that being said, it seems that certain level of CLRSTATUS is required before running another type of operation for
     example switching from DNLOAD to UPLOAD, etc, clearning the state so device is in dfuIDLE is highly recommended.
 */
-import GUI from "../gui";
+import GUI, { TABS } from "../gui";
 import { i18n } from "../localization";
 import { gui_log } from "../gui_log";
+import { checkChromeRuntimeError } from "../utils/common";
 
 // Task for the brave ones. There are quite a few shadow variables which clash when
 // const or let are used. So need to run thorough tests when chaning `var`
@@ -730,6 +731,8 @@ STM32DFU_protocol.prototype.upload_procedure = function (step) {
                 // the following should fail if read protection is active
                 self.controlTransfer('in', self.request.UPLOAD, 2, 0, self.chipInfo.option_bytes.total_size, 0, function (ob_data, errcode) {
                 if (errcode) {
+                    // TODO: this was undefined, guessing with how it usually works it should be 1
+                    const errcode1 = 1;
                     console.log(`USB transfer error while reading option bytes: ${errcode1}`);
                     self.cleanup();
                     return;

src/js/serial.js

@@ -3,6 +3,9 @@ import { i18n } from "./localization";
 import FC from "./fc";
 import CONFIGURATOR from "./data_storage";
 import { gui_log } from "./gui_log";
+import inflection from "inflection";
+import PortHandler from "./port_handler";
+import { checkChromeRuntimeError } from "./utils/common";
 
 const serial = {
     connected:      false,

src/js/serial_backend.js

@@ -1,4 +1,4 @@
-import GUI from "./gui";
+import GUI, { TABS } from "./gui";
 import { i18n } from "./localization";
 // NOTE: this is a circular dependency, needs investigating
 import MspHelper from "./msp/MSPHelper";
@@ -18,6 +18,10 @@ import { bit_check } from './bit.js';
 import { sensor_status, have_sensor } from "./sensor_helpers";
 import { update_dataflash_global } from "./update_dataflash_global";
 import { gui_log } from "./gui_log";
+import { updateTabList } from "./utils/updateTabList";
+import { get as getConfig, set as setConfig } from "./ConfigStorage";
+import { tracking } from "./Analytics";
+import semver from 'semver';
 
 let mspHelper;
 let connectionTimestamp;
@@ -45,10 +49,10 @@ export function initializeSerialBackend() {
     GUI.updateManualPortVisibility();
 
     $('#port-override').change(function () {
-        ConfigStorage.set({'portOverride': $('#port-override').val()});
+        setConfig({'portOverride': $('#port-override').val()});
     });
 
-    const data = ConfigStorage.get('portOverride');
+    const data = getConfig('portOverride');
     if (data.portOverride) {
         $('#port-override').val(data.portOverride);
     }
@@ -129,7 +133,7 @@ export function initializeSerialBackend() {
     });
 
     // auto-connect
-    const result = ConfigStorage.get('auto_connect');
+    const result = getConfig('auto_connect');
     if (result.auto_connect === undefined || result.auto_connect) {
         // default or enabled by user
         GUI.auto_connect = true;
@@ -161,7 +165,7 @@ export function initializeSerialBackend() {
             if (!GUI.connected_to && !GUI.connecting_to) $('select#baud').prop('disabled', false);
         }
 
-        ConfigStorage.set({'auto_connect': GUI.auto_connect});
+        setConfig({'auto_connect': GUI.auto_connect});
     });
 
     MdnsDiscovery.initialize();
@@ -242,19 +246,19 @@ function onOpen(openInfo) {
         gui_log(i18n.getMessage('serialPortOpened', serial.connectionType === 'serial' ? [serial.connectionId] : [openInfo.socketId]));
 
         // save selected port with chrome.storage if the port differs
-        let result = ConfigStorage.get('last_used_port');
+        let result = getConfig('last_used_port');
         if (result.last_used_port) {
             if (result.last_used_port !== GUI.connected_to) {
                 // last used port doesn't match the one found in local db, we will store the new one
-                ConfigStorage.set({'last_used_port': GUI.connected_to});
+                setConfig({'last_used_port': GUI.connected_to});
             }
         } else {
             // variable isn't stored yet, saving
-            ConfigStorage.set({'last_used_port': GUI.connected_to});
+            setConfig({'last_used_port': GUI.connected_to});
         }
 
         // reset expert mode
-        result = ConfigStorage.get('permanentExpertMode');
+        result = getConfig('permanentExpertMode');
         if (result.permanentExpertMode) {
             $('input[name="expertModeCheckbox"]').prop('checked', result.permanentExpertMode).trigger('change');
         }

src/js/tabs/adjustments.js

@@ -1,11 +1,12 @@
 import { i18n } from '../localization';
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { mspHelper } from '../msp/MSPHelper';
 import MSP from '../msp';
 import FC from '../fc';
 import MSPCodes from '../msp/MSPCodes';
 import { API_VERSION_1_42 } from '../data_storage';
 import { gui_log } from '../gui_log';
+import semver from 'semver';
 
 const adjustments = {};
 
@@ -305,7 +306,7 @@ adjustments.adjust_template = function () {
     selectFunction.sortSelect(i18n.getMessage("adjustmentsFunction0"));
 };
 
-window.TABS.adjustments = adjustments;
+TABS.adjustments = adjustments;
 export {
     adjustments,
 };

src/js/tabs/auxiliary.js

@@ -8,6 +8,7 @@ import MSP from '../msp';
 import MSPCodes from '../msp/MSPCodes';
 import adjustBoxNameIfPeripheralWithModeID from '../peripherals';
 import { gui_log } from '../gui_log';
+import { getTextWidth } from '../utils/common';
 
 const auxiliary = {};
 

src/js/tabs/cli.js

@@ -1,6 +1,7 @@
 import { i18n } from "../localization";
 import Clipboard from "../Clipboard";
-import GUI from '../gui';
+import { generateFilename } from "../utils/generate_filename";
+import GUI, { TABS } from '../gui';
 import BuildApi from '../BuildApi';
 import { tracking } from '../Analytics';
 import { reinitializeConnection } from "../serial_backend";
@@ -9,6 +10,8 @@ import serial from "../serial";
 import CliAutoComplete from "../CliAutoComplete";
 import UI_PHONES from "../phones_ui";
 import { gui_log } from "../gui_log";
+import jBox from "jbox";
+import { checkChromeRuntimeError } from "../utils/common";
 
 const cli = {
     lineDelayMs: 15,
@@ -584,7 +587,7 @@ cli.cleanup = function (callback) {
     $(CliAutoComplete).off();
 };
 
-window.TABS.cli = cli;
+TABS.cli = cli;
 export {
     cli,
 };

src/js/tabs/configuration.js

@@ -1,6 +1,6 @@
 import semver from 'semver';
 import { i18n } from '../localization';
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { tracking } from "../Analytics";
 import { reinitializeConnection } from '../serial_backend';
 import { mspHelper } from '../msp/MSPHelper';
@@ -9,6 +9,7 @@ import MSP from '../msp';
 import MSPCodes from '../msp/MSPCodes';
 import { API_VERSION_1_42, API_VERSION_1_43, API_VERSION_1_45 } from '../data_storage';
 import { gui_log } from '../gui_log';
+import { updateTabList } from '../utils/updateTabList';
 
 const configuration = {
     analyticsChanges: {},
@@ -576,5 +577,5 @@ configuration.cleanup = function (callback) {
     if (callback) callback();
 };
 
-window.TABS.configuration = configuration;
+TABS.configuration = configuration;
 export { configuration };

src/js/tabs/failsafe.js

@@ -1,5 +1,5 @@
 import { i18n } from "../localization";
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { reinitializeConnection } from "../serial_backend";
 import { mspHelper } from "../msp/MSPHelper";
 import MSP from "../msp";
@@ -8,6 +8,7 @@ import MSPCodes from "../msp/MSPCodes";
 import adjustBoxNameIfPeripheralWithModeID from "../peripherals";
 import { API_VERSION_1_43, API_VERSION_1_44, API_VERSION_1_45 } from "../data_storage";
 import { gui_log } from "../gui_log";
+import semver from 'semver';
 
 const failsafe = {};
 
@@ -397,7 +398,7 @@ failsafe.cleanup = function (callback) {
     if (callback) callback();
 };
 
-window.TABS.failsafe = failsafe;
+TABS.failsafe = failsafe;
 export {
     failsafe,
 };

src/js/tabs/firmware_flasher.js

@@ -1,5 +1,5 @@
 import { i18n } from '../localization';
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { get as getConfig, set as setConfig } from '../ConfigStorage';
 import { get as getStorage, set as setStorage } from '../SessionStorage';
 import BuildApi from '../BuildApi';
@@ -15,6 +15,8 @@ import CONFIGURATOR, { API_VERSION_1_39 } from '../data_storage';
 import serial from '../serial';
 import STM32DFU from '../protocols/stm32usbdfu';
 import { gui_log } from '../gui_log';
+import semver from 'semver';
+import { checkChromeRuntimeError } from '../utils/common';
 
 const firmware_flasher = {
     targets: null,

src/js/tabs/gps.js

@@ -1,5 +1,5 @@
 import { i18n } from "../localization";
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { have_sensor } from "../sensor_helpers";
 import FC from '../fc';
 import MSP from "../msp";
@@ -225,7 +225,7 @@ gps.cleanup = function (callback) {
     if (callback) callback();
 };
 
-window.TABS.gps = gps;
+TABS.gps = gps;
 export {
     gps,
 };

src/js/tabs/help.js

@@ -1,4 +1,4 @@
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { i18n } from '../localization';
 
 const help = {};
@@ -19,7 +19,6 @@ help.cleanup = function (callback) {
     if (callback) callback();
 };
 
-// TODO: remove when modules are in place
+TABS.help = help;
-window.TABS.help = help;
 
 export { help };

src/js/tabs/landing.js

@@ -1,4 +1,4 @@
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { i18n } from '../localization';
 
 const landing = {};
@@ -55,7 +55,7 @@ landing.cleanup = function (callback) {
 };
 
 // TODO: remove after all is using modules
-window.TABS.landing = landing;
+TABS.landing = landing;
 export {
     landing,
 };

src/js/tabs/led_strip.js

@@ -1,5 +1,5 @@
 import { i18n } from "../localization";
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { mspHelper } from "../msp/MSPHelper";
 import FC from "../fc";
 import MSP from "../msp";
@@ -1055,7 +1055,7 @@ led_strip.cleanup = function (callback) {
     if (callback) callback();
 };
 
-window.TABS.led_strip = led_strip;
+TABS.led_strip = led_strip;
 export {
     led_strip,
 };

src/js/tabs/logging.js

@@ -1,5 +1,6 @@
-import { millitime } from '../utils/common.js';
+import { millitime, bytesToSize, checkChromeRuntimeError } from '../utils/common.js';
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
+import { generateFilename } from '../utils/generate_filename.js';
 import { i18n } from '../localization';
 import { get as getConfig, set as setConfig } from '../ConfigStorage';
 import FC from '../fc.js';
@@ -331,7 +332,7 @@ logging.cleanup = function (callback) {
 };
 
 // TODO: only for transition to modules, drop this eventually
-window.TABS.logging = logging;
+TABS.logging = logging;
 
 export {
     logging,

src/js/tabs/motors.js

@@ -1,5 +1,5 @@
 import { i18n } from "../localization";
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { get as getConfig, set as setConfig } from '../ConfigStorage';
 import MotorOutputReorderConfig from "../../components/MotorOutputReordering/MotorOutputReorderingConfig";
 import MotorOutputReorderComponent from "../../components/MotorOutputReordering/MotorOutputReorderingComponent";
@@ -16,6 +16,9 @@ import MSPCodes from "../msp/MSPCodes";
 import { API_VERSION_1_42, API_VERSION_1_44 } from "../data_storage";
 import EscProtocols from "../utils/EscProtocols";
 import { gui_log } from "../gui_log";
+import { updateTabList } from "../utils/updateTabList";
+import { isInt, getMixerImageSrc } from "../utils/common";
+import semver from 'semver';
 
 const motors = {
     previousDshotBidir: null,
@@ -1303,7 +1306,7 @@ motors.cleanup = function (callback) {
     if (callback) callback();
 };
 
-window.TABS.motors = motors;
+TABS.motors = motors;
 export {
     motors,
 };

src/js/tabs/onboard_logging.js

@@ -1,5 +1,5 @@
 import { i18n } from "../localization";
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { tracking } from "../Analytics";
 import { reinitializeConnection } from "../serial_backend";
 import { mspHelper } from "../msp/MSPHelper";
@@ -8,6 +8,10 @@ import MSP from "../msp";
 import MSPCodes from "../msp/MSPCodes";
 import CONFIGURATOR, { API_VERSION_1_42, API_VERSION_1_43, API_VERSION_1_44, API_VERSION_1_45 } from "../data_storage";
 import { gui_log } from "../gui_log";
+import { generateFilename } from "../utils/generate_filename";
+import semver from 'semver';
+import { showErrorDialog } from "../utils/showErrorDialog";
+import { checkChromeRuntimeError } from "../utils/common";
 
 let sdcardTimer;
 
@@ -659,7 +663,7 @@ onboard_logging.mscRebootFailedCallback = function () {
     showErrorDialog(i18n.getMessage('operationNotSupported'));
 };
 
-window.TABS.onboard_logging = onboard_logging;
+TABS.onboard_logging = onboard_logging;
 export {
     onboard_logging,
 };

src/js/tabs/options.js

@@ -1,9 +1,11 @@
 import { i18n } from '../localization';
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { get as getConfig, set as setConfig } from '../ConfigStorage';
 import PortHandler from '../port_handler';
 import CliAutoComplete from '../CliAutoComplete';
-import DarkTheme from '../DarkTheme';
+import DarkTheme, { setDarkTheme } from '../DarkTheme';
+import { checkForConfiguratorUpdates } from '../utils/checkForConfiguratorUpdates';
+import { checkSetupAnalytics } from '../Analytics';
 
 const options = {};
 options.initialize = function (callback) {
@@ -87,7 +89,7 @@ options.initCheckForConfiguratorUnstableVersions = function () {
 };
 
 options.initAnalyticsOptOut = function () {
-    const result = ConfigStorage.get('analyticsOptOut');
+    const result = getConfig('analyticsOptOut');
     if (result.analyticsOptOut) {
         $('div.analyticsOptOut input').prop('checked', true);
     }
@@ -95,7 +97,7 @@ options.initAnalyticsOptOut = function () {
     $('div.analyticsOptOut input').change(function () {
         const checked = $(this).is(':checked');
 
-        ConfigStorage.set({'analyticsOptOut': checked});
+        setConfig({'analyticsOptOut': checked});
 
         checkSetupAnalytics(function (analyticsService) {
             if (checked) {
@@ -188,5 +190,5 @@ options.initDarkTheme = function () {
 };
 
 // TODO: remove when modules are in place
-window.TABS.options = options;
+TABS.options = options;
 export { options };

src/js/tabs/osd.js

@@ -1,5 +1,5 @@
 import { i18n } from "../localization";
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { tracking } from "../Analytics";
 import { bit_check } from "../bit";
 import VirtualFC from "../VirtualFC";
@@ -10,6 +10,10 @@ import PortHandler from "../port_handler";
 import CONFIGURATOR, { API_VERSION_1_42, API_VERSION_1_43, API_VERSION_1_44, API_VERSION_1_45 } from "../data_storage";
 import LogoManager from "../LogoManager";
 import { gui_log } from "../gui_log";
+import semver from "semver";
+import jBox from "jbox";
+import inflection from "inflection";
+import { checkChromeRuntimeError } from "../utils/common";
 
 const FONT = {};
 const SYM = {};
@@ -3346,6 +3350,8 @@ osd.initialize = function(callback) {
                     // check if file is writable
                     chrome.fileSystem.isWritableEntry(fileEntry, function(isWritable) {
                         if (isWritable) {
+                            // TODO: is this coming from firmware_flasher? seems a bit random
+                            // eslint-disable-next-line no-undef
                             const blob = new Blob([intel_hex], { type: 'text/plain' });
 
                             fileEntry.createWriter(function(writer) {
@@ -3410,8 +3416,8 @@ osd.cleanup = function(callback) {
     }
 };
 
-window.TABS.osd = osd;
+TABS.osd = osd;
-window.OSD = OSD;
 export {
     osd,
+    OSD,
 };

src/js/tabs/pid_tuning.js

@@ -1,6 +1,6 @@
 import { i18n } from "../localization";
 import { colorTables, getColorForPercentage } from '../utils/css.js';
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { tracking } from "../Analytics";
 import { have_sensor } from "../sensor_helpers";
 import { mspHelper } from "../msp/MSPHelper";
@@ -12,6 +12,8 @@ import RateCurve from "../RateCurve";
 import MSPCodes from "../msp/MSPCodes";
 import { API_VERSION_1_42, API_VERSION_1_43, API_VERSION_1_44, API_VERSION_1_45 } from "../data_storage";
 import { gui_log } from "../gui_log";
+import { degToRad, isInt } from "../utils/common";
+import semver from "semver";
 
 const pid_tuning = {
     RATE_PROFILE_MASK: 128,
@@ -2983,7 +2985,7 @@ pid_tuning.expertModeChanged = function(expertModeEnabled) {
     TuningSliders.setExpertMode(expertModeEnabled);
 };
 
-window.TABS.pid_tuning = pid_tuning;
+TABS.pid_tuning = pid_tuning;
 export {
     pid_tuning,
 };

src/js/tabs/ports.js

@@ -1,6 +1,6 @@
 import semver from 'semver';
 import { i18n } from "../localization";
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { tracking } from "../Analytics";
 import { reinitializeConnection } from '../serial_backend';
 import { mspHelper } from '../msp/MSPHelper';
@@ -505,5 +505,5 @@ ports.cleanup = function (callback) {
     if (callback) callback();
 };
 
-window.TABS.ports = ports;
+TABS.ports = ports;
 export { ports };

src/js/tabs/power.js

@@ -1,11 +1,12 @@
 import { i18n } from '../localization';
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { tracking } from "../Analytics";
 import { mspHelper } from '../msp/MSPHelper';
 import FC from '../fc';
 import MSP from '../msp';
 import MSPCodes from '../msp/MSPCodes';
 import { gui_log } from '../gui_log';
+import jBox from 'jbox';
 
 const power = {
     supported: false,
@@ -533,5 +534,5 @@ power.cleanup = function (callback) {
     }
 };
 
-window.TABS.power = power;
+TABS.power = power;
 export { power };

src/js/tabs/receiver.js

@@ -1,5 +1,5 @@
 import { i18n } from "../localization";
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { get as getConfig, set as setConfig } from '../ConfigStorage';
 import { tracking } from "../Analytics";
 import { reinitializeConnection } from "../serial_backend";
@@ -14,6 +14,9 @@ import windowWatcherUtil from "../utils/window_watchers";
 import CONFIGURATOR, { API_VERSION_1_42, API_VERSION_1_43, API_VERSION_1_44, API_VERSION_1_45 } from "../data_storage";
 import DarkTheme from "../DarkTheme";
 import { gui_log } from "../gui_log";
+import { degToRad } from "../utils/common";
+import semver from 'semver';
+import { updateTabList } from "../utils/updateTabList";
 
 import CryptoES from 'crypto-es';
 
@@ -938,7 +941,7 @@ function updateInterpolationView() {
     }
 }
 
-window.TABS.receiver = receiver;
+TABS.receiver = receiver;
 export {
     receiver,
 };

src/js/tabs/sensors.js

@@ -1,5 +1,5 @@
 import { i18n } from "../localization";
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { get as getConfig, set as setConfig } from '../ConfigStorage';
 import { have_sensor } from "../sensor_helpers";
 import FC from "../fc";
@@ -479,7 +479,7 @@ sensors.cleanup = function (callback) {
     if (callback) callback();
 };
 
-window.TABS.sensors = sensors;
+TABS.sensors = sensors;
 export {
     sensors,
 };

src/js/tabs/servos.js

@@ -1,5 +1,5 @@
 import { i18n } from "../localization";
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { mspHelper } from "../msp/MSPHelper";
 import FC from "../fc";
 import MSP from "../msp";
@@ -245,7 +245,7 @@ servos.cleanup = function (callback) {
     }
 };
 
-window.TABS.servos = servos;
+TABS.servos = servos;
 export {
     servos,
 };

src/js/tabs/setup.js

@@ -1,5 +1,7 @@
 import { i18n } from '../localization';
-import GUI from '../gui';
+import semver from 'semver';
+import { isExpertModeEnabled } from '../utils/isExportModeEnabled';
+import GUI, { TABS } from '../gui';
 import { configuration_backup, configuration_restore } from '../backup_restore';
 import { have_sensor } from '../sensor_helpers';
 import { mspHelper } from '../msp/MSPHelper';
@@ -347,6 +349,6 @@ setup.cleanup = function (callback) {
     if (callback) callback();
 };
 
-window.TABS.setup = setup;
+TABS.setup = setup;
 
 export { setup };

src/js/tabs/setup_osd.js

@@ -1,5 +1,5 @@
 import { i18n } from "../localization";
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import MSP from "../msp";
 import MSPCodes from "../msp/MSPCodes";
 import { gui_log } from "../gui_log";
@@ -69,7 +69,7 @@ setup_osd.cleanup = function (callback) {
     if (callback) callback();
 };
 
-window.TABS.setup_osd = setup_osd;
+TABS.setup_osd = setup_osd;
 export {
     setup_osd,
 };

src/js/tabs/static_tab.js

@@ -1,5 +1,5 @@
 import { i18n } from '../localization';
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 
 const staticTab = {};
 staticTab.initialize = function (staticTabName, callback) {
@@ -21,5 +21,5 @@ staticTab.initialize = function (staticTabName, callback) {
 // Just noting that other tabs have cleanup functions.
 
 // TODO: remove when modules are in place
-window.TABS.staticTab = staticTab;
+TABS.staticTab = staticTab;
 export { staticTab };

src/js/tabs/transponder.js

@@ -1,5 +1,5 @@
 import { i18n } from "../localization";
-import GUI from '../gui';
+import GUI, { TABS } from '../gui';
 import { reinitializeConnection } from "../serial_backend";
 import { mspHelper } from '../msp/MSPHelper';
 import FC from "../fc";
@@ -330,7 +330,7 @@ transponder.cleanup = function(callback) {
     if ( callback ) callback();
 };
 
-window.TABS.transponder = transponder;
+TABS.transponder = transponder;
 export {
     transponder,
 };

src/js/tabs/vtx.js

@@ -1,6 +1,9 @@
 import { i18n } from "../localization";
+import djv from "djv";
+import { generateFilename } from "../utils/generate_filename";
 import Clipboard from "../Clipboard";
-import GUI from '../gui';
+import semver from "semver";
+import GUI, { TABS } from '../gui';
 import { tracking } from "../Analytics";
 import { mspHelper } from "../msp/MSPHelper";
 import FC from '../fc';
@@ -10,6 +13,7 @@ import MSPCodes from "../msp/MSPCodes";
 import { API_VERSION_1_42, API_VERSION_1_44 } from '../data_storage';
 import UI_PHONES from "../phones_ui";
 import { gui_log } from "../gui_log";
+import { checkChromeRuntimeError } from "../utils/common";
 
 const vtx = {
     supported: false,
@@ -928,7 +932,7 @@ vtx.initialize = function (callback) {
             FC.VTX_CONFIG.vtx_frequency = 0;
             if (semver.lt(FC.CONFIG.apiVersion, API_VERSION_1_42)) {
                 if (FC.VTX_CONFIG.vtx_band > 0 || FC.VTX_CONFIG.vtx_channel > 0) {
-                    FC.VTX_CONFIG.vtx_frequency = (band - 1) * 8 + (channel - 1);
+                    FC.VTX_CONFIG.vtx_frequency = (FC.VTX_CONFIG.vtx_band- 1) * 8 + (FC.VTX_CONFIG.vtx_channel- 1);
                 }
             }
         }
@@ -1041,7 +1045,7 @@ vtx.cleanup = function (callback) {
     }
 };
 
-window.TABS.vtx = vtx;
+TABS.vtx = vtx;
 export {
     vtx,
 };

src/js/utils/EscProtocols.js

@@ -1,3 +1,4 @@
+import semver from 'semver';
 import { API_VERSION_1_42, API_VERSION_1_43 } from '../data_storage';
 
 class EscProtocols

src/js/utils/VtxDeviceStatus/VtxMspDeviceStatus.js

@@ -1,3 +1,4 @@
+import vtxDeviceStatusFactory from './VtxDeviceStatusFactory';
 import VtxDeviceStatus, { VtxDeviceTypes } from './VtxDeviceStatus';
 
 class VtxDeviceStatusMsp extends VtxDeviceStatus {

src/js/utils/checkForConfiguratorUpdates.js

@@ -0,0 +1,66 @@
+import semver from "semver";
+import ReleaseChecker from "../release_checker";
+import { get as getConfig } from "../ConfigStorage";
+import CONFIGURATOR from "../data_storage";
+import { i18n } from "../localization";
+import { gui_log } from "../gui_log";
+
+function notifyOutdatedVersion(releaseData) {
+    const result = getConfig('checkForConfiguratorUnstableVersions');
+    let showUnstableReleases = false;
+    if (result.checkForConfiguratorUnstableVersions) {
+        showUnstableReleases = true;
+    }
+
+    if (releaseData === undefined) {
+        console.log('No releaseData');
+        return false;
+    }
+
+    const versions = releaseData.filter(function (version) {
+        const semVerVersion = semver.parse(version.tag_name);
+        if (semVerVersion && (showUnstableReleases || semVerVersion.prerelease.length === 0)) {
+            return version;
+        } else {
+            return null;
+        }
+        }).sort(function (v1, v2) {
+        try {
+            return semver.compare(v2.tag_name, v1.tag_name);
+        } catch (e) {
+            return false;
+        }
+    });
+
+    if (versions.length > 0) {
+        CONFIGURATOR.latestVersion = versions[0].tag_name;
+        CONFIGURATOR.latestVersionReleaseUrl = versions[0].html_url;
+    }
+
+    if (semver.lt(CONFIGURATOR.version, CONFIGURATOR.latestVersion)) {
+        const message = i18n.getMessage('configuratorUpdateNotice', [CONFIGURATOR.latestVersion, CONFIGURATOR.latestVersionReleaseUrl]);
+        gui_log(message);
+
+        const dialog = $('.dialogConfiguratorUpdate')[0];
+
+        $('.dialogConfiguratorUpdate-content').html(message);
+
+        $('.dialogConfiguratorUpdate-closebtn').click(function() {
+            dialog.close();
+        });
+
+        $('.dialogConfiguratorUpdate-websitebtn').click(function() {
+            dialog.close();
+
+            window.open(CONFIGURATOR.latestVersionReleaseUrl, '_blank');
+        });
+
+        dialog.showModal();
+    }
+}
+
+export function checkForConfiguratorUpdates() {
+    const releaseChecker = new ReleaseChecker('configurator', 'https://api.github.com/repos/betaflight/betaflight-configurator/releases');
+
+    releaseChecker.loadReleaseData(notifyOutdatedVersion);
+}

src/js/utils/common.js

@@ -111,12 +111,3 @@ $.fn.sortSelect = function(text = "") {
 
     return this.empty().append(op);
 };
-
-// TODO: these are temp binding while transition to module happens
-window.degToRad = degToRad;
-window.bytesToSize = bytesToSize;
-window.isInt = isInt;
-window.checkChromeRuntimeError = checkChromeRuntimeError;
-window.generateVirtualApiVersions = generateVirtualApiVersions;
-window.getMixerImageSrc = getMixerImageSrc;
-window.getTextWidth = getTextWidth;

src/js/utils/generate_filename.js

@@ -0,0 +1,42 @@
+import semver from "semver";
+import FC from "../fc";
+import { API_VERSION_1_45 } from "../data_storage";
+
+function zeroPad(value, width) {
+    let valuePadded = String(value);
+
+    while (valuePadded.length < width) {
+        valuePadded = `0${value}`;
+    }
+
+    return valuePadded;
+}
+
+export function generateFilename(prefix, suffix) {
+    const date = new Date();
+    let filename = prefix;
+
+    if (FC.CONFIG) {
+        if (FC.CONFIG.flightControllerIdentifier) {
+            filename = `${FC.CONFIG.flightControllerIdentifier}_${filename}`;
+        }
+        const craftName = semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_45)
+            ? FC.CONFIG.craftName
+            : FC.CONFIG.name;
+        if (craftName.trim() !== "") {
+            filename = `${filename}_${craftName.trim().replace(" ", "_")}`;
+        }
+    }
+
+    const yyyymmdd = `${date.getFullYear()}${zeroPad(
+        date.getMonth() + 1,
+        2,
+    )}${zeroPad(date.getDate(), 2)}`;
+    const hhmmss = `${zeroPad(date.getHours(), 2)}${zeroPad(
+        date.getMinutes(),
+        2,
+    )}${zeroPad(date.getSeconds(), 2)}`;
+    filename = `${filename}_${yyyymmdd}_${hhmmss}`;
+
+    return `${filename}.${suffix}`;
+}

src/js/utils/isExportModeEnabled.js

@@ -0,0 +1,3 @@
+export function isExpertModeEnabled() {
+    return $('input[name="expertModeCheckbox"]').is(':checked');
+}

src/js/utils/showErrorDialog.js

@@ -0,0 +1,12 @@
+
+export function showErrorDialog(message) {
+   const dialog = $('.dialogError')[0];
+
+    $('.dialogError-content').html(message);
+
+    $('.dialogError-closebtn').click(function() {
+        dialog.close();
+    });
+
+    dialog.showModal();
+}

src/js/utils/updateTabList.js

@@ -0,0 +1,53 @@
+import semver from "semver";
+import { API_VERSION_1_42 } from "../data_storage";
+import FC from "../fc";
+import { isExpertModeEnabled } from "./isExportModeEnabled";
+
+export function updateTabList(features) {
+
+    if (isExpertModeEnabled()) {
+        $('#tabs ul.mode-connected li.tab_failsafe').show();
+        $('#tabs ul.mode-connected li.tab_adjustments').show();
+        $('#tabs ul.mode-connected li.tab_servos').show();
+        $('#tabs ul.mode-connected li.tab_sensors').show();
+        $('#tabs ul.mode-connected li.tab_logging').show();
+    } else {
+        $('#tabs ul.mode-connected li.tab_failsafe').hide();
+        $('#tabs ul.mode-connected li.tab_adjustments').hide();
+        $('#tabs ul.mode-connected li.tab_servos').hide();
+        $('#tabs ul.mode-connected li.tab_sensors').hide();
+        $('#tabs ul.mode-connected li.tab_logging').hide();
+    }
+
+    if (features.isEnabled('GPS') && isExpertModeEnabled()) {
+        $('#tabs ul.mode-connected li.tab_gps').show();
+    } else {
+        $('#tabs ul.mode-connected li.tab_gps').hide();
+    }
+
+    if (features.isEnabled('LED_STRIP')) {
+        $('#tabs ul.mode-connected li.tab_led_strip').show();
+    } else {
+        $('#tabs ul.mode-connected li.tab_led_strip').hide();
+    }
+
+    if (features.isEnabled('TRANSPONDER')) {
+        $('#tabs ul.mode-connected li.tab_transponder').show();
+    } else {
+        $('#tabs ul.mode-connected li.tab_transponder').hide();
+    }
+
+    if (features.isEnabled('OSD')) {
+        $('#tabs ul.mode-connected li.tab_osd').show();
+    } else {
+        $('#tabs ul.mode-connected li.tab_osd').hide();
+    }
+
+    $('#tabs ul.mode-connected li.tab_power').show();
+
+    if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_42)) {
+        $('#tabs ul.mode-connected li.tab_vtx').show();
+    } else {
+        $('#tabs ul.mode-connected li.tab_vtx').hide();
+    }
+}

src/main.html

@@ -58,30 +58,21 @@
     <!-- CORDOVA_INCLUDE js/cordova_chromeapi.js -->
     <!-- CORDOVA_INCLUDE js/cordova_startup.js -->
     <script type="text/javascript" src="./node_modules/lru_map/lru.js"></script>
-    <script type="text/javascript" src="./node_modules/marked/marked.min.js"></script>
-    <script type="text/javascript" src="./node_modules/dompurify/dist/purify.min.js"></script>
-    <script type="text/javascript" src="./node_modules/universal-ga/lib/analytics.min.js"></script>
-    <script type="text/javascript" src="./node_modules/short-unique-id/dist/short-unique-id.min.js"></script>
-    <script type="text/javascript" src="./node_modules/object-hash/dist/object_hash.js"></script>
     <script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
-    <script type="text/javascript" src="./node_modules/jbox/dist/jBox.min.js"></script>
     <script type="text/javascript" src="./node_modules/jquery-ui-npm/jquery-ui.min.js"></script>
-    <script type="text/javascript" src="./node_modules/djv/djv.js"></script>
     <script type="text/javascript" src="./js/libraries/d3.min.js"></script>
     <script type="text/javascript" src="./js/libraries/jquery.nouislider.all.min.js"></script>
     <script type="text/javascript" src="./node_modules/three/build/three.min.js"></script>
     <script type="text/javascript" src="./node_modules/three/examples/js/renderers/CanvasRenderer.js"></script>
     <script type="text/javascript" src="./node_modules/three/examples/js/renderers/Projector.js"></script>
     <script type="text/javascript" src="./js/libraries/jquery.flightindicators.js"></script>
-    <script type="text/javascript" src="./node_modules/semver-min/umd/index.js"></script>
-    <script type="text/javascript" src="./node_modules/switchery-latest/dist/switchery.min.js"></script>
     <script type="text/javascript" src="./node_modules/bluebird/js/browser/bluebird.min.js"></script>
     <script type="text/javascript" src="./js/libraries/jquery.ba-throttle-debounce.min.js"></script>
-    <script type="text/javascript" src="./node_modules/inflection/lib/inflection.js"></script>
     <script type="text/javascript" src="./node_modules/jquery-textcomplete/dist/jquery.textcomplete.min.js"></script>
     <script type="text/javascript" src="./node_modules/jquery-touchswipe/jquery.touchSwipe.min.js"></script>
     <script type="text/javascript" src="./node_modules/select2/dist/js/select2.min.js"></script>
     <script type="text/javascript" src="./node_modules/multiple-select/dist/multiple-select.min.js"></script>
+    <script type="text/javascript" src="./node_modules/object-hash/dist/object_hash.js"></script>
     <script type="module" src="./js/main.js"></script>
 
     <title></title>

src/tabs/presets/CliEngine.js

@@ -2,6 +2,7 @@ import GUI from "../../js/gui";
 import { i18n } from "../../js/localization";
 import CONFIGURATOR from "../../js/data_storage";
 import serial from "../../js/serial";
+import { reinitializeConnection } from "../../js/serial_backend";
 import { gui_log } from "../../js/gui_log";
 
 export default class CliEngine

src/tabs/presets/DetailedDialog/PresetsDetailedDialog.js

@@ -3,6 +3,8 @@ import { i18n } from "../../../js/localization";
 import PickedPreset from "../PickedPreset";
 import PresetTitlePanel from "../TitlePanel/PresetTitlePanel";
 import FC from "../../../js/fc";
+import { marked } from "marked";
+import DOMPurify from "dompurify";
 
 export default class PresetsDetailedDialog {
     constructor(domDialog, pickedPresetList, onPresetPickedCallback, favoritePresets) {

src/tabs/presets/PresetsRepoIndexed/PresetParser.js

@@ -116,7 +116,7 @@ export default class PresetParser {
                 this._processParserProperty(preset, line, propertyName);
                 break;
             default:
-                this.console.err(`Parcing preset: unknown property type '${this._settings.presetsFileMetadata[property].type}' for the property '${propertyName}'`);
+                this.console.err(`Parcing preset: unknown property type '${this._settings.presetsFileMetadata[propertyName].type}' for the property '${propertyName}'`);
         }
     }
 

src/tabs/presets/presets.js

@@ -1,5 +1,6 @@
-import GUI from '../../js/gui';
+import GUI, { TABS } from '../../js/gui';
 import { get as getConfig, set as setConfig } from '../../js/ConfigStorage';
+import { generateFilename } from '../../js/utils/generate_filename';
 import { i18n } from '../../js/localization';
 import FC from '../../js/fc';
 import CONFIGURATOR from '../../js/data_storage';
@@ -657,7 +658,7 @@ presets.resetInitialValues = function() {
     this._domProgressDialog.close();
 };
 
-window.TABS.presets = presets;
+TABS.presets = presets;
 export {
     presets,
 };