Offer troubleshooting if no port selected (#190)

src/connect.ts

@@ -7,6 +7,9 @@ export const connect = async (button: InstallButton) => {
     port = await navigator.serial.requestPort();
   } catch (err: any) {
     if ((err as DOMException).name === "NotFoundError") {
+      import("./no-port-picked/index").then((mod) =>
+        mod.openNoPortPickedDialog(() => connect(button))
+      );
       return;
     }
     alert(`Error: ${err.message}`);

src/install-dialog.ts

@@ -23,6 +23,7 @@ import { textDownload } from "./util/file-download";
 import { fireEvent } from "./util/fire-event";
 import { sleep } from "./util/sleep";
 import { downloadManifest } from "./util/manifest";
+import { dialogStyles } from "./styles";
 
 const ERROR_ICON = "⚠️";
 const OK_ICON = "🎉";
@@ -789,70 +790,66 @@ class EwtInstallDialog extends LitElement {
     await client.close();
   }
 
-  static styles = css`
+  static styles = [
-    :host {
+    dialogStyles,
-      --mdc-dialog-max-width: 390px;
+    css`
-      --mdc-theme-primary: var(--improv-primary-color, #03a9f4);
+      :host {
-      --mdc-theme-on-primary: var(--improv-on-primary-color, #fff);
+        --mdc-dialog-max-width: 390px;
-      --improv-danger-color: #db4437;
+      }
-      --improv-text-color: rgba(0, 0, 0, 0.6);
+      ewt-icon-button {
-      --mdc-theme-text-primary-on-background: var(--improv-text-color);
+        position: absolute;
-      --mdc-dialog-content-ink-color: var(--improv-text-color);
+        right: 4px;
-      text-align: left;
+        top: 10px;
-    }
+      }
-    ewt-icon-button {
+      table {
-      position: absolute;
+        border-spacing: 0;
-      right: 4px;
+        color: var(--improv-text-color);
-      top: 10px;
+        margin-bottom: 16px;
-    }
+      }
-    table {
+      table svg {
-      border-spacing: 0;
+        width: 20px;
-      color: var(--improv-text-color);
+        margin-right: 8px;
-      margin-bottom: 16px;
+      }
-    }
+      ewt-textfield {
-    table svg {
+        display: block;
-      width: 20px;
+        margin-top: 16px;
-      margin-right: 8px;
+      }
-    }
+      .dashboard-buttons {
-    ewt-textfield {
+        margin: 0 0 -16px -8px;
-      display: block;
+      }
-      margin-top: 16px;
+      .dashboard-buttons div {
-    }
+        display: block;
-    .dashboard-buttons {
+        margin: 4px 0;
-      margin: 0 0 -16px -8px;
+      }
-    }
+      a.has-button {
-    .dashboard-buttons div {
+        text-decoration: none;
-      display: block;
+      }
-      margin: 4px 0;
+      .error {
-    }
+        color: var(--improv-danger-color);
-    a.has-button {
+      }
-      text-decoration: none;
+      .danger {
-    }
+        --mdc-theme-primary: var(--improv-danger-color);
-    .error {
+        --mdc-theme-secondary: var(--improv-danger-color);
-      color: var(--improv-danger-color);
+      }
-    }
+      button.link {
-    .danger {
+        background: none;
-      --mdc-theme-primary: var(--improv-danger-color);
+        color: inherit;
-      --mdc-theme-secondary: var(--improv-danger-color);
+        border: none;
-    }
+        padding: 0;
-    button.link {
+        font: inherit;
-      background: none;
+        text-align: left;
-      color: inherit;
+        text-decoration: underline;
-      border: none;
+        cursor: pointer;
-      padding: 0;
+      }
-      font: inherit;
+      :host([state="LOGS"]) ewt-dialog {
-      text-align: left;
+        --mdc-dialog-max-width: 90vw;
-      text-decoration: underline;
+      }
-      cursor: pointer;
+      ewt-console {
-    }
+        width: calc(80vw - 48px);
-    :host([state="LOGS"]) ewt-dialog {
+        height: 80vh;
-      --mdc-dialog-max-width: 90vw;
+      }
-    }
+    `,
-    ewt-console {
+  ];
-      width: calc(80vw - 48px);
-      height: 80vh;
-    }
-  `;
 }
 
 customElements.define("ewt-install-dialog", EwtInstallDialog);

src/no-port-picked/index.ts

@@ -0,0 +1,10 @@
+import "./no-port-picked-dialog";
+
+export const openNoPortPickedDialog = async (
+  doTryAgain?: () => void
+): Promise<boolean> => {
+  const dialog = document.createElement("ewt-no-port-picked-dialog");
+  dialog.doTryAgain = doTryAgain;
+  document.body.append(dialog);
+  return true;
+};

src/no-port-picked/no-port-picked-dialog.ts

@@ -0,0 +1,106 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+import "../components/ewt-dialog";
+import "../components/ewt-button";
+import { dialogStyles } from "../styles";
+
+@customElement("ewt-no-port-picked-dialog")
+class EwtNoPortPickedDialog extends LitElement {
+  public doTryAgain?: () => void;
+
+  public render() {
+    return html`
+      <ewt-dialog
+        open
+        heading="No port selected"
+        scrimClickAction
+        @closed=${this._handleClose}
+      >
+        <div>
+          If you didn't select a port because you didn't see your device listed,
+          try the following steps:
+        </div>
+        <ol>
+          <li>
+            Make sure that the device is connected to this computer (the one
+            that runs the browser that shows this website)
+          </li>
+          <li>
+            Most devices have a tiny light when it is powered on. If yours has
+            one, make sure it is on.
+          </li>
+          <li>
+            Make sure you have the right drivers installed. Below are the
+            drivers for common chips used in ESP devices:
+            <ul>
+              <li>
+                CP2102 (square chip):
+                <a
+                  href="https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers"
+                  target="_blank"
+                  rel="noopener"
+                  >driver</a
+                >
+              </li>
+              <li>
+                CH341:
+                <a
+                  href="https://github.com/nodemcu/nodemcu-devkit/tree/master/Drivers"
+                  target="_blank"
+                  rel="noopener"
+                  >driver</a
+                >
+              </li>
+            </ul>
+          </li>
+        </ol>
+        ${this.doTryAgain
+          ? html`
+              <ewt-button
+                slot="primaryAction"
+                dialogAction="close"
+                label="Try Again"
+                @click=${this.doTryAgain}
+              ></ewt-button>
+
+              <ewt-button
+                no-attention
+                slot="secondaryAction"
+                dialogAction="close"
+                label="Cancel"
+              ></ewt-button>
+            `
+          : html`
+              <ewt-button
+                slot="primaryAction"
+                dialogAction="close"
+                label="Close"
+              ></ewt-button>
+            `}
+      </ewt-dialog>
+    `;
+  }
+
+  private async _handleClose() {
+    this.parentNode!.removeChild(this);
+  }
+
+  static styles = [
+    dialogStyles,
+    css`
+      li + li,
+      li > ul {
+        margin-top: 8px;
+      }
+      ol {
+        margin-bottom: 0;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ewt-no-port-picked-dialog": EwtNoPortPickedDialog;
+  }
+}

src/styles.ts

@@ -0,0 +1,17 @@
+import { css } from "lit";
+
+export const dialogStyles = css`
+  :host {
+    --mdc-theme-primary: var(--improv-primary-color, #03a9f4);
+    --mdc-theme-on-primary: var(--improv-on-primary-color, #fff);
+    --improv-danger-color: #db4437;
+    --improv-text-color: rgba(0, 0, 0, 0.6);
+    --mdc-theme-text-primary-on-background: var(--improv-text-color);
+    --mdc-dialog-content-ink-color: var(--improv-text-color);
+    text-align: left;
+  }
+
+  a {
+    color: var(--improv-primary-color, #03a9f4);
+  }
+`;