Distinguish full flash in progress dialog. (#255)

Behaviour should match V2.

Closes #254

Author: microbit-matt-hillsdon

lang/en.json

@@ -217,7 +217,15 @@
   },
   "flashing-code": {
     "defaultMessage": "Flashing code",
-    "description": "Progress dialog text telling user that code is being flashed"
+    "description": "Progress dialog text for partial flashes (quick)"
+  },
+  "flashing-full-flash-detail": {
+    "defaultMessage": "Initial flash might take longer, subsequent flashes will be quicker.",
+    "description": "Message shown after the title in the progress dialog for a full flash"
+  },
+  "flashing-micropython": {
+    "defaultMessage": "Flashing MicroPython",
+    "description": "Progress dialog text for full flashes (slower)"
   },
   "font-size": {
     "defaultMessage": "Font size",

src/common/ProgressDialog.tsx

@@ -11,12 +11,14 @@ import {
   ModalOverlay,
 } from "@chakra-ui/modal";
 import { Progress } from "@chakra-ui/progress";
+import { VStack } from "@chakra-ui/react";
 import { ReactNode } from "react";
 
 const doNothing = () => {};
 
 export interface ProgressDialogParameters {
   header: ReactNode;
+  body?: ReactNode;
   progress: number | undefined;
 }
 
@@ -27,14 +29,28 @@ interface ProgressDialogProps extends ProgressDialogParameters {
 /**
  * A progress dialog used for the flashing process.
  */
-const ProgressDialog = ({ header, progress }: ProgressDialogProps) => {
+const ProgressDialog = ({ header, body, progress }: ProgressDialogProps) => {
   return (
-    <Modal isOpen={progress !== undefined} onClose={doNothing} isCentered>
+    <Modal
+      isOpen={progress !== undefined}
+      onClose={doNothing}
+      isCentered
+      size={body ? "xl" : "md"}
+    >
       <ModalOverlay />
       <ModalContent>
         <ModalHeader>{header}</ModalHeader>
         <ModalBody>
-          <Progress value={progress! * 100} mb={3} />
+          <VStack
+            spacing={4}
+            mb={3}
+            width="100%"
+            justifyContent="stretch"
+            alignItems="flex-start"
+          >
+            {body}
+            <Progress value={progress! * 100} width="100%" />
+          </VStack>
         </ModalBody>
       </ModalContent>
     </Modal>

src/device/device.ts

@@ -151,8 +151,12 @@ export interface DeviceConnection extends EventEmitter {
       partial: boolean;
       /**
        * A progress callback. Called with undefined when the process is complete or has failed.
+       *
+       * Requesting a partial flash doesn't guarantee one is performed. Partial flashes are avoided
+       * if too many blocks have changed and failed partial flashes are retried as full flashes.
+       * The partial parameter reports the flash type currently in progress.
        */
-      progress: (percentage: number | undefined) => void;
+      progress: (percentage: number | undefined, partial: boolean) => void;
     }
   ): Promise<void>;
 
@@ -348,7 +352,7 @@ export class MicrobitWebUSBConnection
     dataSource: FlashDataSource,
     options: {
       partial: boolean;
-      progress: (percentage: number | undefined) => void;
+      progress: (percentage: number | undefined, partial: boolean) => void;
     }
   ): Promise<void> {
     this.log("Stopping serial before flash");
@@ -364,14 +368,15 @@ export class MicrobitWebUSBConnection
 
     const boardId = this.connection.boardSerialInfo.id;
     const flashing = new PartialFlashing(this.connection, this.logging);
+    let wasPartial: boolean = false;
     try {
       if (partial) {
-        await flashing.flashAsync(boardId, dataSource, progress);
+        wasPartial = await flashing.flashAsync(boardId, dataSource, progress);
       } else {
         await flashing.fullFlashAsync(boardId, dataSource, progress);
       }
     } finally {
-      progress(undefined);
+      progress(undefined, wasPartial);
 
       if (this.disconnectAfterFlash) {
         this.log("Disconnecting after flash due to tab visibility");

src/device/partial-flashing.ts

@@ -58,7 +58,7 @@ import {
   read32FromUInt8Array,
 } from "./partial-flashing-utils";
 
-type ProgressCallback = (n: number, fullFlash?: boolean) => void;
+type ProgressCallback = (n: number, partial: boolean) => void;
 
 // Source code for binaries in can be found at https://github.com/microsoft/pxt-microbit/blob/dec5b8ce72d5c2b4b0b20aafefce7474a6f0c7b2/external/sha/source/main.c
 // Drawn from https://github.com/microsoft/pxt-microbit/blob/dec5b8ce72d5c2b4b0b20aafefce7474a6f0c7b2/editor/extension.tsx#L243
@@ -191,10 +191,10 @@ export class PartialFlashing {
   ) {
     this.log("Partial flash");
     for (let i = 0; i < pages.length; ++i) {
-      updateProgress(i / pages.length);
+      updateProgress(i / pages.length, true);
       await this.partialFlashPageAsync(pages[i], pages[i + 1], i);
     }
-    updateProgress(1);
+    updateProgress(1, true);
   }
 
   // Flash the micro:bit's ROM with the provided image by only copying over the pages that differ.
@@ -204,7 +204,7 @@ export class PartialFlashing {
     boardId: BoardId,
     dataSource: FlashDataSource,
     updateProgress: ProgressCallback
-  ) {
+  ): Promise<boolean> {
     const flashBytes = await dataSource.partialFlashData(boardId);
     const checksums = await this.getFlashChecksumsAsync();
     await this.dapwrapper.writeBlockAsync(loadAddr, flashPageBIN);
@@ -213,21 +213,26 @@ export class PartialFlashing {
     this.log("Total pages: " + totalPages);
     aligned = onlyChanged(aligned, checksums, this.dapwrapper.pageSize);
     this.log("Changed pages: " + aligned.length);
+    let partial: boolean | undefined;
     if (aligned.length > totalPages / 2) {
       try {
         await this.fullFlashAsync(boardId, dataSource, updateProgress);
+        partial = false;
       } catch (e) {
         this.log(e);
         this.log("Full flash failed, attempting partial flash.");
         await this.partialFlashCoreAsync(aligned, updateProgress);
+        partial = true;
       }
     } else {
       try {
         await this.partialFlashCoreAsync(aligned, updateProgress);
+        partial = true;
       } catch (e) {
         this.log(e);
         this.log("Partial flash failed, attempting full flash.");
         await this.fullFlashAsync(boardId, dataSource, updateProgress);
+        partial = false;
       }
     }
 
@@ -237,6 +242,7 @@ export class PartialFlashing {
       // Allow errors on resetting, user can always manually reset if necessary.
     }
     this.log("Flashing complete");
+    return partial;
   }
 
   // Perform full flash of micro:bit's ROM using daplink.
@@ -247,10 +253,10 @@ export class PartialFlashing {
   ) {
     this.log("Full flash");
 
-    const flashProgressListener = (progress: number) => {
-      updateProgress(progress, true);
+    const fullFlashProgress = (progress: number) => {
+      updateProgress(progress, false);
     };
-    this.dapwrapper.daplink.on(DAPLink.EVENT_PROGRESS, flashProgressListener);
+    this.dapwrapper.daplink.on(DAPLink.EVENT_PROGRESS, fullFlashProgress);
     try {
       const data = await dataSource.fullFlashData(boardId);
       await this.dapwrapper.transport.open();
@@ -262,7 +268,7 @@ export class PartialFlashing {
     } finally {
       this.dapwrapper.daplink.removeListener(
         DAPLink.EVENT_PROGRESS,
-        flashProgressListener
+        fullFlashProgress
       );
     }
   }
@@ -273,7 +279,7 @@ export class PartialFlashing {
     boardId: BoardId,
     dataSource: FlashDataSource,
     updateProgress: ProgressCallback
-  ) {
+  ): Promise<boolean> {
     let resetPromise = (async () => {
       // Reset micro:bit to ensure interface responds correctly.
       this.log("Begin reset");
@@ -291,7 +297,11 @@ export class PartialFlashing {
         await withTimeout(resetPromise, 1000);
 
         this.log("Begin flashing");
-        await this.partialFlashAsync(boardId, dataSource, updateProgress);
+        return await this.partialFlashAsync(
+          boardId,
+          dataSource,
+          updateProgress
+        );
       } catch (e) {
         if (e instanceof TimeoutError) {
           this.log("Resetting micro:bit timed out");
@@ -301,6 +311,7 @@ export class PartialFlashing {
             message: "flash-failed/attempting-full-flash",
           });
           await this.fullFlashAsync(boardId, dataSource, updateProgress);
+          return false;
         } else {
           throw e;
         }

src/messages/en.json

@@ -429,6 +429,18 @@
       "value": "Flashing code"
     }
   ],
+  "flashing-full-flash-detail": [
+    {
+      "type": 0,
+      "value": "Initial flash might take longer, subsequent flashes will be quicker."
+    }
+  ],
+  "flashing-micropython": [
+    {
+      "type": 0,
+      "value": "Flashing MicroPython"
+    }
+  ],
   "font-size": [
     {
       "type": 0,

src/project/project-actions.tsx

@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: MIT
  */
 import { Link, List, ListItem } from "@chakra-ui/layout";
-import { VStack } from "@chakra-ui/react";
+import { Text, VStack } from "@chakra-ui/react";
 import { saveAs } from "file-saver";
 import { ReactNode } from "react";
-import { IntlShape } from "react-intl";
+import { FormattedMessage, IntlShape } from "react-intl";
 import { InputDialogBody } from "../common/InputDialog";
 import { ActionFeedback } from "../common/use-action-feedback";
 import { Dialogs } from "../common/use-dialogs";
@@ -285,9 +285,19 @@ export class ProjectActions {
     }
 
     try {
-      const progress = (value: number | undefined) => {
+      const flashingCode = this.intl.formatMessage({ id: "flashing-code" });
+      const flashingMicroPython = this.intl.formatMessage({
+        id: "flashing-micropython",
+      });
+      const firstFlashNotice = (
+        <Text fontSize="lg">
+          <FormattedMessage id="flashing-full-flash-detail" />
+        </Text>
+      );
+      const progress = (value: number | undefined, partial: boolean) => {
         this.dialogs.progress({
-          header: this.intl.formatMessage({ id: "flashing-code" }),
+          header: partial ? flashingCode : flashingMicroPython,
+          body: partial ? undefined : firstFlashNotice,
           progress: value,
         });
       };