web-install: Implement flashing progress callbacks

2 files changed, 28 insertions, 7 deletions

diff --git a/static/install/web.html b/static/install/web.html
index dfd047b8..21c6f2b1 100644
--- a/static/install/web.html
+++ b/static/install/web.html
@@ -182,9 +182,12 @@
                 Then, proceed to <a href="#locking-the-bootloader">locking the bootloader</a>
                 before using the device as locking wipes the data again.</p>
 
-                <p>
+                <p id="flash-release-status-container" hidden="hidden">
                     <strong id="flash-release-status"></strong>
-                    <!-- This appears as part of the status -->
+                    <br/>
+
+                    <!-- These appear as part of the status, one at a time -->
+                    <progress id="flash-release-progress" hidden="hidden" max="1" value="0"></progress>
                     <button id="flash-reconnect-button" hidden="hidden"><strong>Reconnect device</strong></button>
                 </p>
             </section>
diff --git a/static/js/web-install.js b/static/js/web-install.js
index afd8982b..2db0ddef 100644
--- a/static/js/web-install.js
+++ b/static/js/web-install.js
@@ -151,13 +151,19 @@ async function downloadRelease(setProgress) {
 async function reconnectCallback() {
     let statusField = document.getElementById("flash-release-status");
     statusField.textContent =
-        "In order to continue flashing, you need to reconnect the device by tapping here:";
+        "To continue flashing, reconnect the device by tapping here:";
 
     let reconnectButton = document.getElementById("flash-reconnect-button");
+    let progressBar = document.getElementById("flash-release-progress");
+
+    // Hide progress bar while waiting for reconnection
+    progressBar.hidden = true;
     reconnectButton.hidden = false;
+
     reconnectButton.onclick = async () => {
         await device.connect();
         reconnectButton.hidden = true;
+        progressBar.hidden = false;
     };
 }
 
@@ -177,10 +183,10 @@ async function flashRelease(setProgress) {
     setProgress("Flashing release...");
     await fastboot.FactoryImages.flashZip(
         device, blob, true, reconnectCallback,
-        (action, item) => {
+        (action, item, progress) => {
             let userAction = fastboot.FactoryImages.USER_ACTION_MAP[action];
             let userItem = item === "avb_custom_key" ? "verified boot key" : item;
-            setProgress(`${userAction} ${userItem}...`);
+            setProgress(`${userAction} ${userItem}...`, progress);
         }
     );
 
@@ -209,10 +215,22 @@ async function lockBootloader(setProgress) {
 }
 
 function addButtonHook(id, callback) {
+    let statusContainer = document.getElementById(`${id}-status-container`);
     let statusField = document.getElementById(`${id}-status`);
-    let statusCallback = (status) => {
-        statusField.textContent = status;
+    let progressBar = document.getElementById(`${id}-progress`);
+
+    let statusCallback = (status, progress) => {
+        if (statusContainer !== null) {
+            statusContainer.hidden = false;
+        }
+
         statusField.className = "";
+        statusField.textContent = status;
+
+        if (progress !== undefined) {
+            progressBar.hidden = false;
+            progressBar.value = progress;
+        }
     };
 
     let button = document.getElementById(`${id}-button`);