Refactor tab loading and reboot

[Scavanger]

User description

Some refactoring for tabs and (re)enable proper reboot

• Refactor tabs as proper modules, get rid of global TAB variable. helps vite to optimize
• Remove unused ez-tune tab check
• Removed special reboot logic for old, unsupported FCs,
• Make sure modal "Device rebooting" dialog is always shown correctly, even in CLI tab
• After "save and reboot" corresponding tab is loaded after reboot
• Tab switching in CLI tab works now (with reboot in between)
• Add confirmation dialog for reboot when switching mixer profile

---

PR Type

Enhancement

---

Description

• Refactor tabs from global TABS object to individual module exports

• Replace dynamic imports with static preloading for better optimization

• Improve tab switching logic with proper cleanup and reconnection handling

• Add confirmation dialog for mixer profile changes requiring reboot

• Fix CLI tab exit behavior and reboot handling across all tabs

---

Diagram Walkthrough

flowchart LR
  A["Global TABS object"] -->|"Refactor to"| B["Individual tab modules"]
  B -->|"Export as"| C["Named exports"]
  D["Dynamic imports"] -->|"Replace with"| E["Static preloading"]
  E -->|"In"| F["configurator_main.js"]
  G["Tab switching"] -->|"Improved with"| H["Proper cleanup"]
  H -->|"And"| I["Reconnection logic"]
  J["Mixer profile change"] -->|"Add"| K["Confirmation dialog"]
  K -->|"Trigger"| I

Loading

File Walkthrough

	Relevant files
Enhancement	48 files firmware_flasher.js Convert to module with named export                                            +37/-34  mission_control.js Convert to module with named export                                            +30/-28  led_strip.js Convert to module with named export                                            +33/-32  cli.js Refactor CLI tab with exit method                                                +52/-48  advanced_tuning.js Convert to module with named export                                            +18/-16  gps.js Convert to module with named export                                            +15/-12  search.js Convert to module with named export                                            +15/-15  pid_tuning.js Convert to module with named export                                            +17/-14  calibration.js Convert to module with named export                                            +15/-12  mixer.js Convert to module with named export                                            +10/-15  onboard_logging.js Convert to module with named export                                            +9/-8      receiver.js Convert to module with named export                                            +12/-10  setup.js Convert to module with named export                                            +13/-10  outputs.js Convert to module with named export                                            +14/-11  osd.js Convert to module with named export                                            +13/-6    ports.js Convert to module with named export                                            +9/-8      magnetometer.js Convert to module with named export                                            +10/-9    configuration.js Convert to module with named export                                            +9/-8      failsafe.js Convert to module with named export                                            +9/-7      auxiliary.js Convert to module with named export                                            +10/-6    javascript_programming.js Convert to module with named export                                            +7/-5      sensors.js Convert to module with named export                                            +9/-6      programming.js Convert to module with named export                                            +9/-7      sitl.js Convert to module with named export                                            +9/-6      adjustments.js Convert to module with named export                                            +10/-6    logging.js Convert to module with named export                                            +9/-6      landing.js Convert to module with named export                                            +8/-7      configurator_main.js Preload all tabs and refactor tab switching                            +80/-61  serial_backend.js Refactor reconnect logic and tab reopening                              +50/-59  stm32usbdfu.js Update to use imported firmware flasher tab                            +17/-16  gui.js Remove global TABS object, export GUI only                              +2/-5      defaults_dialog.js Update imports and async initialization                                    +13/-14  stm32.js Update GUI import statement                                                            +1/-1      logicCondition.js Update GUI import statement                                                            +1/-1      groundstation.js Update GUI import statement                                                            +1/-1      programmingPid.js Update GUI import statement                                                            +1/-1      settings.js Update GUI import statement                                                            +1/-1      MSPHelper.js Update GUI import statement                                                            +1/-1      connectionUdp.js Update GUI import statement                                                            +1/-1      periodicStatusUpdater.js Update GUI import statement                                                            +1/-1      UBLOX.js Update GUI import statement                                                            +1/-1      appUpdater.js Update GUI import statement                                                            +1/-1      connectionTcp.js Update GUI import statement                                                            +1/-1      connectionSerial.js Update GUI import statement                                                            +1/-1      port_handler.js Update GUI import statement                                                            +1/-1      connectionBle.js Update GUI import statement                                                            +1/-1      connection.js Update GUI import statement                                                            +1/-1      sitl.js Update GUI import statement                                                            +1/-1
Documentation	1 files messages.json Add mixer profile reboot confirmation message                        +3/-0

---

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
⚪	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Action Logging: The PR adds new reboot/reconnect flows (e.g., GUI.handleReconnect with modal and reconnection logic) and mixer profile change confirmation leading to reboot without adding explicit audit logging of who initiated these critical actions or their outcomes. Referred Code } }); GUI.handleReconnect = function (reopenLastTab = true) { let modal = new jBox('Modal', { width: 400, height: 120, animation: false, closeOnClick: false, closeOnEsc: false, content: '<div id="modal-reconnect"><div data-i18n="deviceRebooting">Device - <span style="color: red">Rebooting</span></div></div>' }).open(); if (typeof reopenLastTab === 'boolean') { privateScope.reopenTab = reopenLastTab ? $('#tabs > ul li.active') : null; } else { privateScope.reopenTab = reopenLastTab; } /* ... (clipped 18 lines) Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Failure Handling: New calls to flashingMessage/flashProgress improve feedback, but several async network calls (e.g., GitHub releases fetches) and reconnect flows lack explicit retry/backoff or structured error handling beyond GUI.log, which may be acceptable elsewhere but is not visible in this diff. Referred Code if (erase_pages.length === 0) { console.log('Aborting, No flash pages to erase'); firmwareFlasherTab.flashingMessage(i18n.getMessage('stm32InvalidHex'), firmwareFlasherTab.FLASH_MESSAGE_TYPES.INVALID); self.cleanup(); break; } firmwareFlasherTab.flashingMessage(i18n.getMessage('stm32Erase'), firmwareFlasherTab.FLASH_MESSAGE_TYPES.NEUTRAL); console.log('Executing local chip erase', erase_pages); var page = 0; var total_erased = 0; // bytes var erase_page_next = function() { firmwareFlasherTab.flashProgress((page + 1) / erase_pages.length * 100); page++; if(page == erase_pages.length) { Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: External Input: The PR continues to fetch and process external GitHub release data and parse filenames without visible input validation or sanitization in the modified code, which may be handled elsewhere but is not evident in the new additions. Referred Code $.get('https://api.github.com/repos/iNavFlight/inav-nightly/releases?per_page=50', function(releasesData) { firmwareFlasherTab.devReleasesData = releasesData; }).fail(function (data){ firmwareFlasherTab.devReleasesData = {}; if (data["responseJSON"]){ GUI.log("<b>GITHUB Query Failed: <code>{0}</code></b>".format(data["responseJSON"].message)); } $('select[name="board"]').empty().append('<option value="0">Offline</option>'); $('select[name="firmware_version"]').empty().append('<option value="0">Offline</option>'); $('a.auto_select_target').addClass('disabled'); }); $.get('https://api.github.com/repos/iNavFlight/inav/releases?per_page=10', function (releasesData){ firmwareFlasherTab.releasesData = releasesData; buildBoardOptions(releasesData); // bind events Learn more about managing compliance generic rules or creating your own custom rules
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Re-evaluate the static preloading strategy The current implementation statically imports all tabs at startup, which can harm initial load performance. It is recommended to revert to dynamic imports to load tab code on-demand. Examples: js/configurator_main.js [24-51] // "Preload" tabs import landingTab from './../tabs/landing'; import firmwareFlasherTab from './../tabs/firmware_flasher'; import sitlTab from './../tabs/sitl'; import auxiliaryTab from './../tabs/auxiliary'; import adjustmentsTab from './../tabs/adjustments'; import portsTab from './../tabs/ports' import ledStripTab from './../tabs/led_strip'; import failsafeTab from './../tabs/failsafe'; import setupTab from './../tabs/setup' ... (clipped 18 lines) js/configurator_main.js [177-258] switch (tab) { case 'landing': landingTab.initialize(content_ready); break; case 'firmware_flasher': firmwareFlasherTab.initialize(content_ready); break; case 'sitl': sitlTab.initialize(content_ready); break; ... (clipped 72 lines) Solution Walkthrough: Before: // js/configurator_main.js // "Preload" all tabs at startup import landingTab from './../tabs/landing'; import firmwareFlasherTab from './../tabs/firmware_flasher'; import sitlTab from './../tabs/sitl'; // ... and so on for all other tabs // ... later in tab switching logic switch (tab) { case 'landing': landingTab.initialize(content_ready); break; case 'firmware_flasher': firmwareFlasherTab.initialize(content_ready); break; // ... } After: // js/configurator_main.js // No static preloading of all tabs // ... later in tab switching logic switch (tab) { case 'landing': import('./../tabs/landing').then(({ default: tabModule }) => tabModule.initialize(content_ready)); break; case 'firmware_flasher': import('./../tabs/firmware_flasher').then(({ default: tabModule }) => tabModule.initialize(content_ready)); break; // ... } Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a shift from lazy-loading to eager-loading for all tabs, which could regress the application's initial load time and memory usage, making it a significant architectural and performance concern.	Medium
Possible issue	Fix reboot command timing Fix a race condition by sending the MSP_SET_REBOOT command before calling GUI.handleReconnect to ensure the device reboots before the reconnection sequence starts. js/configurator_main.js [516-525] const mixerprofile = parseInt($(this).val()); MSP.send_message(MSPCodes.MSP2_INAV_SELECT_MIXER_PROFILE, [mixerprofile], false, function () { GUI.tab_switch_cleanup(function() { GUI.log(i18n.getMessage('setMixerProfile', [mixerprofile + 1])); - GUI.log(i18n.getMessage('deviceRebooting')); - GUI.handleReconnect(true); - // This order! Why? ¯\_(ツ)_/¯ - MSP.send_message(MSPCodes.MSP_SET_REBOOT, false, false); + MSP.send_message(MSPCodes.MSP_SET_REBOOT, false, false, function() { + GUI.log(i18n.getMessage('deviceRebooting')); + GUI.handleReconnect(true); + }); }); }); Apply / Chat Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a race condition where the reboot command might not be sent before disconnection, and the proposed fix ensures the correct sequence of operations.	Medium
General	Add error handling for async Add error handling for the defaultsDialog.init() promise to prevent unhandled rejections and ensure UI stability if initialization fails. js/serial_backend.js [280-289] defaultsDialog.init().then( () => { if (privateScope.reopenTab) { $('a', privateScope.reopenTab).trigger('click'); } else { $(`#tabs ul.mode-connected .tab_setup a`).trigger('click'); } update.firmwareVersion(); +}).catch((error) => { + console.error('Failed to initialize defaults dialog:', error); + if (privateScope.reopenTab) { + $('a', privateScope.reopenTab).trigger('click'); + } else { + $(`#tabs ul.mode-connected .tab_setup a`).trigger('click'); + } + update.firmwareVersion(); }); Apply / Chat Suggestion importance[1-10]: 6 __ Why: The suggestion correctly points out a missing .catch() block for a promise, which is good practice for robustness, although the likelihood and impact of this specific failure are moderate.	Low
Update