Add check for secure context + fix doc typos (#11)

README.md

@@ -84,6 +84,7 @@ The following slots are available:
 | -- | -- |
 | `activate` | Button to start the flash progress
 | `unsupported` | Message to show when the browser is not supported
+| `not-allowed` | Message to show when not a secure context
 
 ## Events
 
@@ -96,6 +97,7 @@ Field | Description
 state | The current [state](https://github.com/esphome/esp-web-tools/blob/main/src/const.ts)
 message | A description of the current state
 manifest | The loaded manifest
+build | The manifest's build that was selected 
 chipFamily | The chip that was detected; "ESP32" \| "ESP8266" \| "ESP32-S2" \| "Unknown Chip"
 details | An optional extra field that is different [per state](https://github.com/esphome/esp-web-tools/blob/main/src/const.ts)
 

index.html

@@ -285,9 +285,9 @@
       <h4>Replace the button and message with a custom one</h4>
       <p>
         You can replace both the activation button and the message that is shown
-        when the user uses an unsupported browser with your own elements. This
-        can be done using the <code>activate</code> and
-        <code>unsupported</code> slots:
+        when the user uses an unsupported browser or non secure context with
+        your own elements. This can be done using the <code>activate</code>,
+        <code>unsupported</code> and <code>not-allowed</code> slots:
       </p>
       <pre>
 &lt;esp-web-install-button
@@ -297,17 +297,19 @@
 >
   &lt;button slot="activate">Custom install button&lt;/button>
   &lt;span slot="unsupported">Ah snap, your browser doesn't work!&lt;/span>
+  &lt;span slot="not-allowed">Ah snap, you are not allowed to use this on HTTP!&lt;/span>
 &lt;/esp-web-install-button>
     </pre
       >
       <h4>Show or hide the progress bar and log</h4>
       <p>
         By default there is a progress bar showing the state and progress of the
-        flashing progress, you can chnage this progress bar to a log view with
+        flashing progress, you can change this progress bar to a log view with
         the <code>show-log</code> attribute.
       </p>
       <p>
-        You can also hide all progress indicators by adding the `hide-progress`
+        You can also hide all progress indicators by adding the
+        <code>hide-progress</code>
         attribute. This will hide both the progress bar and the log view. You
         can then implement your own progress elements using the
         <a href="#state-events">state events</a>.

src/flash-progress.ts

@@ -69,6 +69,9 @@ export class FlashProgress extends LitElement {
       color: var(--esp-tools-success-color, #28a745);
       --mdc-theme-primary: var(--esp-tools-success-color, #28a745);
     }
+    mwc-linear-progress {
+      text-align: left;
+    }
     h2 {
       margin: 16px 0 0;
     }

src/install-button.ts

@@ -3,6 +3,8 @@ import { FlashState } from "./const";
 export class InstallButton extends HTMLElement {
   public static isSupported = "serial" in navigator;
 
+  public static isAllowed = window.isSecureContext;
+
   private static style = `
   button {
     position: relative;
@@ -80,13 +82,11 @@ export class InstallButton extends HTMLElement {
 
     this.renderRoot = this.attachShadow({ mode: "open" });
 
-    if (!InstallButton.isSupported) {
+    if (!InstallButton.isSupported || !InstallButton.isAllowed) {
       this.toggleAttribute("install-unsupported", true);
-      const slot = document.createElement("slot");
-      slot.name = "unsupported";
-      slot.innerText =
-        "Your browser does not support installing things on ESP devices. Use Google Chrome or Microsoft Edge.";
-      this.renderRoot.append(slot);
+      this.renderRoot.innerHTML = !InstallButton.isSupported
+        ? "<slot name='unsupported'>Your browser does not support installing things on ESP devices. Use Google Chrome or Microsoft Edge.</slot>"
+        : "<slot name='not-allowed'>You can only install ESP devices on HTTPS websites or on the localhost.</slot>";
       return;
     }