WebUSB: Add time out for connection error (#289)

Author: microbit-sam

lang/en.js

@@ -88,6 +88,7 @@ var language = {
       'reconnect-microbit': 'Please reconnect your micro:bit and try again.',
       'partial-flashing-disable': 'If the errors persist, try disabling Quick Flash in the beta options.',
       'device-disconnected': 'Device disconnected.',
+      'timeout-error': 'Unable to connect to the micro:bit',
       'unavailable': 'With WebUSB you can program your micro:bit and connect to the serial console directly from the online editor.<br/>Unfortunately, WebUSB is not supported in this browser. We recommend Chrome, or a Chrome-based browser to use WebUSB.',
       'find-more': 'Find Out More'
     },

lang/es.js

@@ -88,6 +88,7 @@ var language = {
       "reconnect-microbit": "Por favor reconecta el micro:bit e intentalo de nuevo.",
       "partial-flashing-disable": "Si el error persiste, intenta deshabilitar el flasheo rapido en las opciones beta.",
       "device-disconnected": "Dispositivo desconectado.",
+      "timeout-error":":Unable to connect to the micro:bit",
       "unavailable": "Con WebUSB puedes programar tu micro: bit y conectarte a la consola de serie directamente desde el Editor de Python.<br/>Desafortunadamente, WebUSB no es compatible con este navegador. Recomendamos Chrome o un navegador basado en Chrome para usar WebUSB.",
       "find-more": "Saber más"
     },

lang/pl.js

@@ -88,6 +88,7 @@ var language = {
       "reconnect-microbit": "Podłącz jeszcze raz swój micro:bit i spróbuj ponownie.",
       "partial-flashing-disable": "Jeśli error się powtarza, spróbuj wyłączyć Quick Flash w opcjach beta.",
       "device-disconnected": "Urządzenie odłączone.",
+      "timeout-error": "Unable to connect to the micro:bit",
       "unavailable": "Za pomocą WebUSB możesz zaprogramować swój micro:bit i połączyć się z konsolą szeregową bezpośrednio z edytora online.<br/> Niestety, WebUSB nie jest obsługiwany w tej przeglądarce. Do korzystania z WebUSB zalecamy Chrome lub inną przeglądarkę opartą na Chrome.",
       "find-more": "Dowiedz się więcej"
     },

python-main.js

@@ -1319,7 +1319,7 @@ function web_editor(config) {
                 if (!err.message && err.promise && err.reason) {
                     err = err.reason;
                 }
-                
+
                 // Determine error type
                 if (err.message === "No valid interfaces found.") {
                     errorType = "update-req";
@@ -1334,6 +1334,10 @@ function web_editor(config) {
                     errorTitle = err.message;
                     // No additional message provided here, err.message is enough
                     errorDescription = "";
+                } else if (err.name === "timeout-error") {
+                    errorType = "timeout-error";
+                    errorTitle = "Connection Timed Out";
+                    errorDescription = config["translate"]["webusb"]["err"]["reconnect-microbit"];
                 } else {
                     // Unhandled error. User will need to reconnect their micro:bit
                     errorType = "reconnect-microbit";
@@ -1509,6 +1513,15 @@ function web_editor(config) {
         $("#flashing-info").removeClass('hidden');
         $("#flashing-overlay-container").css("display", "flex");
 
+        var connectTimeout = setTimeout(function() {
+            var error = {"name": "timeout-error", "message": config["translate"]["webusb"]["err"]["timeout-error"]};
+            webusbErrorHandler(error);
+        }, 10000);
+
+        var updateProgress = function(progress) {
+            $('#webusb-flashing-progress').val(progress).css('display', 'inline-block');
+        };
+
         var p = Promise.resolve();
         if (usePartialFlashing) {
             REPL = null;
@@ -1519,9 +1532,10 @@ function web_editor(config) {
                     return PartialFlashing.connectDapAsync();
                 })
                 .then(function() {
-                    var updateProgress = function(progress) {
-                        $("#webusb-flashing-progress").val(progress).css("display", "inline-block");
-                    }
+                    // Clear connecting timeout
+                    clearTimeout(connectTimeout);
+
+                    // Begin flashing
                     $("#webusb-flashing-loader").hide();
                     $("#webusb-flashing-progress").val(0).css("display", "inline-block");
                     return PartialFlashing.flashAsync(window.dapwrapper, output, updateProgress);
@@ -1532,10 +1546,11 @@ function web_editor(config) {
             console.log("Starting Full Flash");
             p = window.daplink.connect()
                 .then(function() {
+                    // Clear connecting timeout
+                    clearTimeout(connectTimeout);
+
                     // Event to monitor flashing progress
-                    window.daplink.on(DAPjs.DAPLink.EVENT_PROGRESS, function(progress) {
-                        $("#webusb-flashing-progress").val(progress).css("display", "inline-block");
-                    });
+                    window.daplink.on(DAPjs.DAPLink.EVENT_PROGRESS, updateProgress);
 
                     // Encode firmware for flashing
                     var enc = new TextEncoder();