download button

Author: bmorcelli

assets/css/main.css

@@ -318,6 +318,11 @@ header {
   flex-wrap: wrap;
 }
 
+.card__actions--center {
+  justify-content: center;
+  align-items: center;
+}
+
 .tile {
   padding: 20px;
   border-radius: var(--radius-md);

assets/js/webflasher.js

@@ -571,7 +571,6 @@ const injectDialogSurfaceStyles = (dialog) => {
       box-shadow: 0 34px 120px rgba(0, 221, 0, 0.25);
       backdrop-filter: blur(24px);
       color: var(--text);
-      // padding: 24px 28px 28px;
     }
     .container::before {
       background: rgba(12, 18, 21, 0.96);
@@ -782,11 +781,13 @@ document.addEventListener("DOMContentLoaded", () => {
     const deviceSection = document.querySelector("[data-device-section]");
     const installSection = document.querySelector("[data-install-section]");
     const installButton = document.querySelector("esp-web-install-button");
+    const downloadButton = document.querySelector("[data-download-button]");
     const manifestSummary = document.querySelector("[data-manifest-summary]");
     if (!releaseContainer ||
         !vendorContainer ||
         !deviceContainer ||
         !installButton ||
+        !downloadButton ||
         !manifestSummary) {
         return;
     }
@@ -847,10 +848,16 @@ document.addEventListener("DOMContentLoaded", () => {
         }
         manifestSummary.textContent = parts.length > 0 ? parts.join(" -> ") : summaryFallback;
     };
+    const hideDownloadButton = () => {
+        downloadButton.setAttribute("hidden", "");
+        downloadButton.removeAttribute("href");
+        downloadButton.removeAttribute("download");
+    };
     const hideInstallButton = () => {
         revokeManifestUrl();
         installButton.setAttribute("hidden", "");
         installButton.removeAttribute("manifest");
+        hideDownloadButton();
     };
     const resetDeviceDetails = (message) => {
         if (descriptionTarget) {
@@ -913,6 +920,7 @@ document.addEventListener("DOMContentLoaded", () => {
         }
         const binRelativePath = `bins${state.releaseValue}/Launcher-${device.id}.bin`;
         let binAbsolutePath = binRelativePath;
+        const downloadFileName = `Launcher-${device.id}.bin`;
         if (manifestBaseUrl) {
             try {
                 binAbsolutePath = new URL(binRelativePath, manifestBaseUrl).toString();
@@ -921,6 +929,9 @@ document.addEventListener("DOMContentLoaded", () => {
                 console.warn("Unable to resolve firmware from manifest base path.", error);
             }
         }
+        downloadButton.href = binAbsolutePath;
+        downloadButton.download = downloadFileName;
+        downloadButton.removeAttribute("hidden");
         const manifest = {
             name: device.name,
             new_install_prompt_erase: true,

src/pages/webflasher.html

@@ -93,7 +93,10 @@ <h2 class="section__heading">Flash your board</h2>
           </div>
         </div>
         <div class="card card--compact" style="align-items: center;">
-          <esp-web-install-button></esp-web-install-button>
+          <div class="card__actions card__actions--center">
+            <esp-web-install-button></esp-web-install-button>
+            <a class="button button--ghost" data-download-button hidden download>Download</a>
+          </div>
           <p class="card__description" style="text-align: center; max-width: 520px;">
             Having trouble? Make sure you are using Chrome, Edge, or another browser with WebUSB support and that this page is served over HTTPS.
           </p>

src/webflasher.ts

@@ -910,13 +910,15 @@ document.addEventListener("DOMContentLoaded", () => {
   const deviceSection = document.querySelector<HTMLElement>("[data-device-section]");
   const installSection = document.querySelector<HTMLElement>("[data-install-section]");
   const installButton = document.querySelector<WebInstallButtonElement>("esp-web-install-button");
+  const downloadButton = document.querySelector<HTMLAnchorElement>("[data-download-button]");
   const manifestSummary = document.querySelector<HTMLElement>("[data-manifest-summary]");
 
   if (
     !releaseContainer ||
     !vendorContainer ||
     !deviceContainer ||
     !installButton ||
+    !downloadButton ||
     !manifestSummary
   ) {
     return;
@@ -982,10 +984,17 @@ document.addEventListener("DOMContentLoaded", () => {
     manifestSummary.textContent = parts.length > 0 ? parts.join(" -> ") : summaryFallback;
   };
 
+  const hideDownloadButton = () => {
+    downloadButton.setAttribute("hidden", "");
+    downloadButton.removeAttribute("href");
+    downloadButton.removeAttribute("download");
+  };
+
   const hideInstallButton = () => {
     revokeManifestUrl();
     installButton.setAttribute("hidden", "");
     installButton.removeAttribute("manifest");
+    hideDownloadButton();
   };
 
   const resetDeviceDetails = (message?: string) => {
@@ -1053,6 +1062,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     const binRelativePath = `bins${state.releaseValue}/Launcher-${device.id}.bin`;
     let binAbsolutePath = binRelativePath;
+    const downloadFileName = `Launcher-${device.id}.bin`;
 
     if (manifestBaseUrl) {
       try {
@@ -1062,6 +1072,10 @@ document.addEventListener("DOMContentLoaded", () => {
       }
     }
 
+    downloadButton.href = binAbsolutePath;
+    downloadButton.download = downloadFileName;
+    downloadButton.removeAttribute("hidden");
+
     const manifest = {
       name: device.name,
       new_install_prompt_erase: true,