Feedback from review

lang/ui.en.json

@@ -1116,19 +1116,19 @@
     "description": "Part of WebUSB error message"
   },
   "webusb-error-clear-connect-description-2": {
-    "defaultMessage": "Close any other tabs that may be using WebUSB (e.g. MakeCode, Python Editor, machine learning tool), or unplug and replug the micro:bit before trying again.",
+    "defaultMessage": "Close any other pages or tabs that may be using WebUSB (e.g. MakeCode, Python Editor), or unplug and replug the micro:bit before trying again.",
     "description": "Part of WebUSB error message"
   },
   "webusb-error-clear-connect-title": {
-    "defaultMessage": "Another process is connected to this micro:bit",
+    "defaultMessage": "Another page or browser tab is connected to this micro:bit",
     "description": "Title of error for WebUsb connection"
   },
   "webusb-error-default-title": {
     "defaultMessage": "WebUSB error",
     "description": "Default title for error messages relating to WebUSB"
   },
   "webusb-error-reconnect-microbit-description": {
-    "defaultMessage": "<p>Please:</p><ul><li>check that this micro:bit does not have a battery pack connected</li><li>unplug and replug the USB cable</li></ul>",
+    "defaultMessage": "<p>Please follow these steps, then try again:</p><ul><li>unplug the USB cable</li><li>unplug the battery pack if one is attached</li><li>reconnect the USB cable</li><li>reconnect the battery pack if one was attached</li></ul>",
     "description": "Part of WebUSB error message"
   },
   "webusb-not-supported": {
@@ -1163,4 +1163,4 @@
     "defaultMessage": "Zoom out",
     "description": "Text label for zoom out button"
   }
-}
+}

src/messages/ui.en.json

@@ -2430,13 +2430,13 @@
   "webusb-error-clear-connect-description-2": [
     {
       "type": 0,
-      "value": "Close any other tabs that may be using WebUSB (e.g. MakeCode, Python Editor, machine learning tool), or unplug and replug the micro:bit before trying again."
+      "value": "Close any other pages or tabs that may be using WebUSB (e.g. MakeCode, Python Editor), or unplug and replug the micro:bit before trying again."
     }
   ],
   "webusb-error-clear-connect-title": [
     {
       "type": 0,
-      "value": "Another process is connected to this micro:bit"
+      "value": "Another page or browser tab is connected to this micro:bit"
     }
   ],
   "webusb-error-default-title": [
@@ -2450,7 +2450,7 @@
       "children": [
         {
           "type": 0,
-          "value": "Please:"
+          "value": "Please follow these steps, then try again:"
         }
       ],
       "type": 8,
@@ -2462,7 +2462,7 @@
           "children": [
             {
               "type": 0,
-              "value": "check that this micro:bit does not have a battery pack connected"
+              "value": "unplug the USB cable"
             }
           ],
           "type": 8,
@@ -2472,7 +2472,27 @@
           "children": [
             {
               "type": 0,
-              "value": "unplug and replug the USB cable"
+              "value": "unplug the battery pack if one is attached"
+            }
+          ],
+          "type": 8,
+          "value": "li"
+        },
+        {
+          "children": [
+            {
+              "type": 0,
+              "value": "reconnect the USB cable"
+            }
+          ],
+          "type": 8,
+          "value": "li"
+        },
+        {
+          "children": [
+            {
+              "type": 0,
+              "value": "reconnect the battery pack if one was attached"
             }
           ],
           "type": 8,

src/project/project-actions.tsx

@@ -519,6 +519,7 @@ export class ProjectActions {
     }
 
     try {
+      throw new WebUSBError({ code: "timeout-error" });
       const flashingCode = this.intl.formatMessage({ id: "flashing-code" });
       const firstFlashNotice = (
         <Text fontSize="lg">
@@ -885,11 +886,6 @@ export class ProjectActions {
         })}
         description={
           <VStack alignItems="stretch" mt={1}>
-            <p>
-              {this.intl.formatMessage({
-                id: "webusb-error-clear-connect-description-1",
-              })}
-            </p>
             <p>
               {this.intl.formatMessage({
                 id: "webusb-error-clear-connect-description-2",
@@ -926,10 +922,12 @@ export class ProjectActions {
                 }}
               />
             </Box>
-            <video autoPlay loop>
-              <source src={reconnectWebm} type="video/webm" />
-              <source src={reconnectMp4} type="video/mp4" />
-            </video>
+            <Box mb={-10}>
+              <video autoPlay loop>
+                <source src={reconnectWebm} type="video/webm" />
+                <source src={reconnectMp4} type="video/mp4" />
+              </video>
+            </Box>
           </>
         }
       />
@@ -944,9 +942,30 @@ export class ProjectActions {
         callback={callback}
         finalFocusRef={finalFocusRef}
         title={this.intl.formatMessage({ id: "timeout-error-title" })}
-        description={this.intl.formatMessage({
-          id: "timeout-error-description",
-        })}
+        description={
+          <>
+            <Box>
+              <FormattedMessage
+                id="webusb-error-reconnect-microbit-description"
+                values={{
+                  p: (chunks: ReactNode) => <Text>{chunks}</Text>,
+                  li: (chunks: ReactNode) => (
+                    <ListItem>
+                      <Text as="span">{chunks}</Text>
+                    </ListItem>
+                  ),
+                  ul: (chunks: ReactNode) => (
+                    <UnorderedList pl={2}>{chunks}</UnorderedList>
+                  ),
+                }}
+              />
+            </Box>
+            <video autoPlay loop>
+              <source src={reconnectWebm} type="video/webm" />
+              <source src={reconnectMp4} type="video/mp4" />
+            </video>
+          </>
+        }
       />
     ));
   }