Add Save and Erase button for onboard logging (#4673)

* Add Save and Erase button for onboard logging

* Add missing handler

* Update disabled state toggle

* Nitpicks

* Nitpicks 2

* Remove unsupported

* Repeat check for not cancelled for consistency

* Only close dialog when open

Author: haslinghuis

locales/en/messages.json

@@ -3549,15 +3549,16 @@
     "dataflashButtonSaveFile": {
         "message": "Save flash to file..."
     },
-    "dataflashButtonSaveFileDeprecated": {
-        "message": "Save flash to file... (unsupported)"
-    },
     "dataflashSavetoFileNote": {
         "message": "Directly saving flash to file is slow and inherently prone to error / file corruption.<br>In some cases it will work for small files, but this is not supported and support requests for it will be closed without comment - use Mass Storage mode instead."
     },
     "dataflashSaveFileDepreciationHint": {
         "message": "This method is slow and inherently prone to error / file corruption, because the MSP connection itself has intrinsic, fundamental limitations that make it unsuitable for file transfers. It may work for small log files only. Do not create support requests if file transfers fail when saved using this method. The recommended method is to use '<b>$t(onboardLoggingRebootMscText.message)</b>' (below) to activate the Mass Storage Mode, and access your flight controller as a storage device to download the log files."
     },
+    "dataflashButtonSaveAndErase": {
+        "message": "Save & Erase",
+        "description": "Button text to save blackbox logs to file and then erase the flash"
+    },
     "dataflashButtonErase": {
         "message": "Erase flash"
     },

src/js/tabs/onboard_logging.js

@@ -102,7 +102,16 @@ onboard_logging.initialize = function (callback) {
                 $(".tab-onboard_logging a.erase-flash-confirm").click(flash_erase);
                 $(".tab-onboard_logging a.erase-flash-cancel").click(flash_erase_cancel);
 
-                $(".tab-onboard_logging a.save-flash").click(flash_save_begin);
+                $(".tab-onboard_logging a.save-flash").on("click", (e) => {
+                    e.preventDefault();
+                    flash_save_begin(false);
+                });
+
+                $(".tab-onboard_logging a.save-flash-erase").on("click", (e) => {
+                    e.preventDefault();
+                    flash_save_begin(true);
+                });
+
                 $(".tab-onboard_logging a.save-flash-cancel").click(flash_save_cancel);
                 $(".tab-onboard_logging a.save-flash-dismiss").click(dismiss_saving_dialog);
             }
@@ -355,10 +364,9 @@ onboard_logging.initialize = function (callback) {
             true,
         );
 
-        $("a.regular-button erase-flash, a.regular-button.require-msc-supported.save-flash").toggleClass(
-            "disabled",
-            FC.DATAFLASH.usedSize === 0,
-        );
+        $(
+            "a.regular-button.erase-flash, a.regular-button.save-flash-erase, a.regular-button.require-msc-supported.save-flash",
+        ).toggleClass("disabled", FC.DATAFLASH.usedSize === 0);
 
         $(".tab-onboard_logging")
             .toggleClass("sdcard-error", FC.SDCARD.state === MSP.SDCARD_STATE_FATAL)
@@ -478,7 +486,20 @@ onboard_logging.initialize = function (callback) {
         });
     }
 
-    function flash_save_begin() {
+    function conditionallyEraseFlash(maxBytes, nextAddress) {
+        if (Number.isFinite(maxBytes) && nextAddress >= maxBytes) {
+            eraseCancelled = false;
+            $(".dataflash-confirm-erase").addClass("erasing");
+            MSP.send_message(MSPCodes.MSP_DATAFLASH_ERASE, false, false, poll_for_erase_completion);
+        } else {
+            gui_log(
+                i18n.getMessage("dataflashSaveIncompleteWarning") ||
+                    "Downloaded size did not match expected size - not erasing flash.",
+            );
+        }
+    }
+
+    function flash_save_begin(alsoErase = false) {
         if (GUI.connected_to) {
             self.blockSize = self.BLOCK_SIZE;
 
@@ -498,7 +519,7 @@ onboard_logging.initialize = function (callback) {
                             // Did we receive any data?
                             if (chunkDataView.byteLength > 0) {
                                 nextAddress += chunkDataView.byteLength;
-                                if (isNaN(bytesCompressed) || isNaN(totalBytesCompressed)) {
+                                if (Number.isNaN(bytesCompressed) || Number.isNaN(totalBytesCompressed)) {
                                     totalBytesCompressed = null;
                                 } else {
                                     totalBytesCompressed += bytesCompressed;
@@ -515,6 +536,10 @@ onboard_logging.initialize = function (callback) {
                                             mark_saving_dialog_done(startTime, nextAddress, totalBytesCompressed);
                                         }
                                         FileSystem.closeFile(openedFile);
+                                        // Optionally erase after successful full download
+                                        if (!saveCancelled && alsoErase) {
+                                            conditionallyEraseFlash(maxBytes, nextAddress);
+                                        }
                                     } else {
                                         if (!self.writeError) {
                                             mspHelper.dataflashRead(nextAddress, self.blockSize, onChunkRead);
@@ -528,6 +553,9 @@ onboard_logging.initialize = function (callback) {
                                 // A zero-byte block indicates end-of-file, so we're done
                                 mark_saving_dialog_done(startTime, nextAddress, totalBytesCompressed);
                                 FileSystem.closeFile(openedFile);
+                                if (!saveCancelled && alsoErase) {
+                                    conditionallyEraseFlash(maxBytes, nextAddress);
+                                }
                             }
                         } else {
                             // There was an error with the received block (address didn't match the one we asked for), retry
@@ -582,7 +610,10 @@ onboard_logging.initialize = function (callback) {
         flash_update_summary(function () {
             if (CONFIGURATOR.connectionValid && !eraseCancelled) {
                 if (FC.DATAFLASH.ready) {
-                    $(".dataflash-confirm-erase")[0].close();
+                    const dialog = $(".dataflash-confirm-erase")[0];
+                    if (dialog?.open) {
+                        dialog.close();
+                    }
                     if (getConfig("showNotifications").showNotifications) {
                         NotificationManager.showNotification("Betaflight Configurator", {
                             body: i18n.getMessage("flashEraseDoneNotification"),

src/tabs/onboard_logging.html

@@ -110,8 +110,10 @@ <h3 i18n="dataflashSavingTitle"></h3>
 
                             <div class="dataflash-buttons">
                                 <a class="regular-button erase-flash" href="#" i18n="dataflashButtonErase"></a>
+                                <a class="regular-button require-msc-not-supported save-flash-erase" href="#" i18n="dataflashButtonSaveAndErase"></a>
                                 <a class="regular-button require-msc-not-supported save-flash" href="#" i18n="dataflashButtonSaveFile"></a>
-                                <a class="regular-button require-msc-supported save-flash" href="#"><span i18n="dataflashButtonSaveFileDeprecated"></span><span class="helpicon cf_tip" i18n_title="dataflashSaveFileDepreciationHint"></span></a>
+                                <a class="regular-button require-msc-supported save-flash-erase" href="#" i18n="dataflashButtonSaveAndErase"></a>
+                                <a class="regular-button require-msc-supported save-flash" href="#"><span i18n="dataflashButtonSaveFile"></span><span class="helpicon cf_tip" i18n_title="dataflashSaveFileDepreciationHint"></span></a>
                                 <p i18n="dataflashSavetoFileNote"></p>
                             </div>
                         </div>