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,16 +790,11 @@ class EwtInstallDialog extends LitElement {
     await client.close();
   }
 
-  static styles = css`
+  static styles = [
+    dialogStyles,
+    css`
       :host {
         --mdc-dialog-max-width: 390px;
-      --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;
       }
       ewt-icon-button {
         position: absolute;
@@ -852,7 +848,8 @@ class EwtInstallDialog extends LitElement {
         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);
+  }
+`;