Add log element as sibling next to button

index.html

@@ -14,9 +14,8 @@
         margin: 0 auto;
         padding: 12px;
       }
-      esp-web-flash-button {
-        display: inline-block;
-        margin-bottom: 8px;
+      esp-web-flash-log {
+        margin-top: 8px;
       }
       a {
         color: #03a9f4;
@@ -39,7 +38,7 @@
         browser.
       </p>
       <p>
-        To flash the ESPHome firmware, connect an ESP to your computer and hit
+        To install the ESPHome firmware, connect an ESP to your computer and hit
         the button:
       </p>
       <esp-web-install-button

src/install-button.ts

@@ -31,14 +31,10 @@ class InstallButton extends HTMLElement {
       }
 
       const mod = await import("./start-flash");
-
-      const progress = document.createElement("div");
-      document.body.append(progress);
-
       await mod.startFlash(
         console,
         manifest,
-        progress,
+        (logEl) => this.parentElement!.insertBefore(logEl, this.nextSibling),
         this.eraseFirst !== undefined
           ? this.eraseFirst
           : this.hasAttribute("erase-first")

src/start-flash.ts

@@ -7,7 +7,7 @@ import { getChipFamilyName, sleep } from "./util";
 export const startFlash = async (
   logger: Logger,
   manifestPath: string,
-  logParent: HTMLElement,
+  addLogElement: (el: HTMLElement) => void,
   eraseFirst: boolean
 ) => {
   const manifestURL = new URL(manifestPath, location.toString()).toString();
@@ -30,7 +30,7 @@ export const startFlash = async (
   const logEl = document.createElement("esp-web-flash-log");
   // logEl.esploader = esploader;
   logEl.addRow({ id: "initializing", content: "Initializing..." });
-  logParent.append(logEl);
+  addLogElement(logEl);
 
   try {
     await esploader.initialize();