WebUSB: Add message to modal during full flashing.

Author: microbit-carlos

editor.html

@@ -401,6 +401,7 @@ <h2><i class="fa fa-unlock-alt"></i> <strong>{{ title }}</strong></h2>
           <div id="flashing-overlay" class="modal-overlay modal-div" tabindex="-1" role="dialog" aria-labelledby="flashing-overlay" aria-modal="true">
             <div id="flashing-info">
               <h2 id="flashing-text">Flashing micro:bit</h2>
+              <div id="flashing-extra-msg"></div>
               <div id="webusb-flashing-loader"></div>
               <progress id="webusb-flashing-progress" max="1">
               </progress>

js/partial-flashing.js

@@ -648,7 +648,9 @@ let PartialFlashing = {
     fullFlashAsync: function(dapwrapper, image, updateProgress) {
         PartialFlashingUtils.log("Full flash");
         // Event to monitor flashing progress
-        dapwrapper.daplink.on(DAPjs.DAPLink.EVENT_PROGRESS, updateProgress);
+        dapwrapper.daplink.on(DAPjs.DAPLink.EVENT_PROGRESS, (progress) => {
+            updateProgress(progress, true);
+        });
         return dapwrapper.transport.open()
             .then(() => dapwrapper.daplink.flash(image))
             .then(() => {

python-main.js

@@ -1451,8 +1451,11 @@ function web_editor(config) {
         $('#flashing-overlay-error').html("");
         $("#flashing-info").removeClass('hidden');
         $("#flashing-overlay-container").css("display", "flex");
+        // TODO: Translate this string
+        $('#flashing-extra-msg').text('Full flash in progress, subsequent flashes will be much quicker.').hide();
 
-        var updateProgress = function(progress) {
+        var updateProgress = function(progress, longFlash) {
+            $('#flashing-extra-msg').toggle(!!longFlash);
             $('#webusb-flashing-progress').val(progress).css('display', 'inline-block');
         };