From 56d8bfd350d0c4bd133009320c149ce6a46665da Mon Sep 17 00:00:00 2001 From: Graham Brown Date: Tue, 18 Jul 2023 23:31:56 +0200 Subject: [PATCH 01/12] streamer mode fix --- raw_package/index.template.html | 1 + src/components/remote-process.ts | 2 +- src/editor/esphome-editor.ts | 109 +++++++++++++++++++++++-------- src/esphome-main.ts | 10 ++- src/util/console-color.ts | 20 +++++- 5 files changed, 108 insertions(+), 34 deletions(-) diff --git a/raw_package/index.template.html b/raw_package/index.template.html index af9a6cd8..0c8d8fb4 100644 --- a/raw_package/index.template.html +++ b/raw_package/index.template.html @@ -8,6 +8,7 @@ {% end %} diff --git a/src/components/remote-process.ts b/src/components/remote-process.ts index 60f6d221..d6465dbf 100644 --- a/src/components/remote-process.ts +++ b/src/components/remote-process.ts @@ -28,7 +28,7 @@ class ESPHomeRemoteProcess extends HTMLElement { } ${coloredConsoleStyles} -
+
`; const coloredConsole = new ColoredConsole(shadowRoot.querySelector("div")!); diff --git a/src/editor/esphome-editor.ts b/src/editor/esphome-editor.ts index 97baa164..d55aee0e 100644 --- a/src/editor/esphome-editor.ts +++ b/src/editor/esphome-editor.ts @@ -1,6 +1,6 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; import { LitElement, html } from "lit"; -import { customElement, property, query } from "lit/decorators.js"; +import { customElement, property, query, state } from "lit/decorators.js"; import "@material/mwc-dialog"; import "@material/mwc-button"; import "@material/mwc-snackbar"; @@ -12,6 +12,7 @@ import type { Snackbar } from "@material/mwc-snackbar"; import { fireEvent } from "../util/fire-event"; import { debounce } from "../util/debounce"; import "./monaco-provider"; +import { mdiIncognito } from "@mdi/js"; // WebSocket URL Helper const loc = window.location; @@ -34,42 +35,91 @@ class ESPHomeEditor extends LitElement { private editorActiveSecrets = false; @property() public fileName!: string; + @property({ type: Boolean }) streamerMode = false; @query("mwc-snackbar", true) private _snackbar!: Snackbar; @query("main", true) private container!: HTMLElement; @query(".esphome-header", true) private editor_header!: HTMLElement; + @state() private _showSecrets = false; createRenderRoot() { return this; } + private _isSecrets() { + return this.fileName === "secrets.yaml" || this.fileName === "secrets.yml"; + } + + protected render() { - const isSecrets = - this.fileName === "secrets.yaml" || this.fileName === "secrets.yml"; + const commonStyle = html` + html, + body { + height: 100vh; + overflow: hidden; + } + .esphome-header { + display: flex; + justify-content: space-between; + align-items: center; + align-content: stretch; + } + .esphome-header h2 { + line-height: 100%; + /* this margin, padding stretches the container, offsetHeight does not calculate margin of .editor-header */ + padding: 0.8rem 0.5rem 1rem 0.5rem; + margin: 0px; + font-size: 1.4rem; + flex: 1 1 auto; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + ` + const isSecrets = this._isSecrets(); + if (isSecrets && this.streamerMode && !this._showSecrets) { + return html` + +
+ +

${this.fileName}

+
+
+
+ +

Show Secrets Warning

+

Streaming mode enabled, are you sure you want to disclose some secrets?

+ +
+
+ `; + } else if (isSecrets && this.streamerMode && this._showSecrets) { + // as the 1st update was skipped, fire firstUpdated again + setTimeout(() => this.firstUpdated(), 50); + } return html` -
+
`; const coloredConsole = new ColoredConsole(shadowRoot.querySelector("div")!); diff --git a/src/editor/esphome-editor.ts b/src/editor/esphome-editor.ts index d55aee0e..a5676ab0 100644 --- a/src/editor/esphome-editor.ts +++ b/src/editor/esphome-editor.ts @@ -49,37 +49,38 @@ class ESPHomeEditor extends LitElement { return this.fileName === "secrets.yaml" || this.fileName === "secrets.yml"; } - protected render() { const commonStyle = html` - html, - body { - height: 100vh; - overflow: hidden; - } - .esphome-header { - display: flex; - justify-content: space-between; - align-items: center; - align-content: stretch; - } - .esphome-header h2 { - line-height: 100%; - /* this margin, padding stretches the container, offsetHeight does not calculate margin of .editor-header */ - padding: 0.8rem 0.5rem 1rem 0.5rem; - margin: 0px; - font-size: 1.4rem; - flex: 1 1 auto; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - ` + + `; const isSecrets = this._isSecrets(); if (isSecrets && this.streamerMode && !this._showSecrets) { return html` + ${commonStyle} -
+
`; const coloredConsole = new ColoredConsole(shadowRoot.querySelector("div")!); diff --git a/src/editor/esphome-editor.ts b/src/editor/esphome-editor.ts index 1cc352f0..57274106 100644 --- a/src/editor/esphome-editor.ts +++ b/src/editor/esphome-editor.ts @@ -26,6 +26,33 @@ const darkQuery: MediaQueryList = window.matchMedia( "(prefers-color-scheme: dark)" ); +const commonStyle = html` + +`; + @customElement("esphome-editor") class ESPHomeEditor extends LitElement { private editor?: monaco.editor.IStandaloneCodeEditor; @@ -50,32 +77,6 @@ class ESPHomeEditor extends LitElement { } protected render() { - const commonStyle = html` - - `; const isSecrets = this._isSecrets(); if (isSecrets && this.streamerMode && !this._showSecrets) { return html` diff --git a/src/esphome-main.ts b/src/esphome-main.ts index b32a398d..84dbe239 100644 --- a/src/esphome-main.ts +++ b/src/esphome-main.ts @@ -3,7 +3,7 @@ import "./components/esphome-header-menu"; import "./components/esphome-fab"; import { LitElement, html, PropertyValues } from "lit"; import { customElement, property, state } from "lit/decorators.js"; -import { ColoredConsole } from "./util/console-color"; +import { ESPHomeBlurSecrets } from "./components/remote-process"; @customElement("esphome-main") class ESPHomeMainView extends LitElement { @@ -63,7 +63,7 @@ class ESPHomeMainView extends LitElement { } connectedCallback() { - ColoredConsole.blurSecrets = this.streamerMode; + ESPHomeBlurSecrets.enabled = this.streamerMode; super.connectedCallback(); } diff --git a/src/util/console-color.ts b/src/util/console-color.ts index e5c33b31..ee8cca00 100644 --- a/src/util/console-color.ts +++ b/src/util/console-color.ts @@ -10,8 +10,6 @@ interface ConsoleState { } export class ColoredConsole { - public static blurSecrets = false; - public state: ConsoleState = { bold: false, italic: false, From c908073f1b819576f83164f4e966bbe424f9bf13 Mon Sep 17 00:00:00 2001 From: Graham Brown Date: Thu, 20 Jul 2023 08:36:42 +0200 Subject: [PATCH 06/12] auto import got that wrong --- src/components/remote-process.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/remote-process.ts b/src/components/remote-process.ts index 2fbcdc01..3f7bb334 100644 --- a/src/components/remote-process.ts +++ b/src/components/remote-process.ts @@ -2,7 +2,7 @@ import { customElement } from "lit/decorators.js"; import { StreamError, streamLogs } from "../api"; import { ColoredConsole, coloredConsoleStyles } from "../util/console-color"; import { fireEvent } from "../util/fire-event"; -import { classMap } from "lit/directives/class-map"; +import { classMap } from "lit/directives/class-map.js"; export class ESPHomeBlurSecrets { public static enabled = false; From 96435f77c31a391d881594ba74edb9bef1cfb9df Mon Sep 17 00:00:00 2001 From: Graham Brown Date: Thu, 20 Jul 2023 09:09:49 +0200 Subject: [PATCH 07/12] revert classMap --- src/components/remote-process.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/remote-process.ts b/src/components/remote-process.ts index 3f7bb334..db0d4f24 100644 --- a/src/components/remote-process.ts +++ b/src/components/remote-process.ts @@ -2,7 +2,6 @@ import { customElement } from "lit/decorators.js"; import { StreamError, streamLogs } from "../api"; import { ColoredConsole, coloredConsoleStyles } from "../util/console-color"; import { fireEvent } from "../util/fire-event"; -import { classMap } from "lit/directives/class-map.js"; export class ESPHomeBlurSecrets { public static enabled = false; @@ -24,10 +23,6 @@ class ESPHomeRemoteProcess extends HTMLElement { if (this._coloredConsole) { return; } - const classes = { - log: true, - "blur-secrets": ESPHomeBlurSecrets.enabled, - }; const shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.innerHTML = ` @@ -37,7 +32,7 @@ class ESPHomeRemoteProcess extends HTMLElement { } ${coloredConsoleStyles} -
+
`; const coloredConsole = new ColoredConsole(shadowRoot.querySelector("div")!); From 67178af3561c6dfcb3a070f7a4b57be686f963a5 Mon Sep 17 00:00:00 2001 From: Graham Brown Date: Thu, 20 Jul 2023 09:21:49 +0200 Subject: [PATCH 08/12] prettier --- src/components/remote-process.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/remote-process.ts b/src/components/remote-process.ts index db0d4f24..2af496e7 100644 --- a/src/components/remote-process.ts +++ b/src/components/remote-process.ts @@ -32,7 +32,9 @@ class ESPHomeRemoteProcess extends HTMLElement { } ${coloredConsoleStyles} -
+
`; const coloredConsole = new ColoredConsole(shadowRoot.querySelector("div")!); From fa5632a5a20e79257c210e19191ef2d85b19c125 Mon Sep 17 00:00:00 2001 From: Graham Brown Date: Thu, 20 Jul 2023 17:31:42 +0200 Subject: [PATCH 09/12] remove not screen classes --- src/util/console-color.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/util/console-color.ts b/src/util/console-color.ts index ee8cca00..a7d84aa5 100644 --- a/src/util/console-color.ts +++ b/src/util/console-color.ts @@ -285,13 +285,4 @@ export const coloredConsoleStyles = ` .log-bg-white { background-color: rgb(255, 255, 255); } - @media not screen { - .log-secret { - display: none; - } - .log-secret-redacted { - opacity: 0; - font-size: 12px; - } - } `; From 4ba8f061ed0875ccb6f18b7b1959177c32d011ea Mon Sep 17 00:00:00 2001 From: Graham Brown Date: Sun, 23 Jul 2023 15:49:29 +0200 Subject: [PATCH 10/12] show streamer warning in a dialog --- src/editor/esphome-editor.ts | 58 ++++++++-------------------------- src/editor/streamer-warning.ts | 55 ++++++++++++++++++++++++++++++++ 2 files changed, 68 insertions(+), 45 deletions(-) create mode 100644 src/editor/streamer-warning.ts diff --git a/src/editor/esphome-editor.ts b/src/editor/esphome-editor.ts index 57274106..06627a9e 100644 --- a/src/editor/esphome-editor.ts +++ b/src/editor/esphome-editor.ts @@ -12,7 +12,7 @@ import type { Snackbar } from "@material/mwc-snackbar"; import { fireEvent } from "../util/fire-event"; import { debounce } from "../util/debounce"; import "./monaco-provider"; -import { mdiIncognito } from "@mdi/js"; +import "./streamer-warning"; // WebSocket URL Helper const loc = window.location; @@ -78,50 +78,7 @@ class ESPHomeEditor extends LitElement { protected render() { const isSecrets = this._isSecrets(); - if (isSecrets && this.streamerMode && !this._showSecrets) { - return html` - ${commonStyle} - -
- -

${this.fileName}

-
-
-
- -

Show Secrets Warning

-

- Streamer mode enabled, are you sure you want to disclose your - secrets? -

- -
-
- `; - } else if (isSecrets && this.streamerMode && this._showSecrets) { + if (isSecrets && this.streamerMode && this._showSecrets) { // as the 1st update was skipped, fire firstUpdated again setTimeout(() => this.firstUpdated(), 50); } @@ -160,9 +117,20 @@ class ESPHomeEditor extends LitElement { >`}
+ ${(isSecrets && this.streamerMode && !this._showSecrets) + ? html`` + : ""} `; } + private __handleSecretsWarning(e: CustomEvent) { + if (e.detail.action === "close") { + this._handleClose(); + } else if (e.detail.action === "accept") { + this._showSecrets = true; + } + } + public getValue() { return this.editor!.getModel()?.getValue(); } diff --git a/src/editor/streamer-warning.ts b/src/editor/streamer-warning.ts new file mode 100644 index 00000000..32e74e4b --- /dev/null +++ b/src/editor/streamer-warning.ts @@ -0,0 +1,55 @@ +import { LitElement, css, html } from "lit"; +import { customElement } from "lit/decorators.js"; +import { fireEvent } from "../util/fire-event"; +import { mdiIncognito } from "@mdi/js"; + +@customElement("streamer-warning") +export class ESPHomeStreamerWarning extends LitElement { + + protected render() { + return html` + fireEvent(this, "closed", {action: "close"})} + @closed=${(e: any) => fireEvent(this, "closed", {action: e.detail.action})} + > +
+ +

Streamer mode enabled

+

Are you sure you want to disclose your secrets?

+
+ + + + `; + } + + static styles = css` + .dialog-content { + text-align: center; + --mdc-theme-primary: var(--primary-text-color); + } + esphome-svg-icon { + --mdc-icon-size: 56px; + } + mwc-button { + --mdc-theme-primary: var(--primary-text-color); + } + `; + +} + +declare global { + interface HTMLElementTagNameMap { + "streamer-warning": ESPHomeStreamerWarning; + } +} From 09dcde8d3bab6153782301d3458ee3b1039420ca Mon Sep 17 00:00:00 2001 From: Graham Brown Date: Sun, 23 Jul 2023 15:50:05 +0200 Subject: [PATCH 11/12] prettier --- src/editor/esphome-editor.ts | 6 ++++-- src/editor/streamer-warning.ts | 17 ++++++++--------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/editor/esphome-editor.ts b/src/editor/esphome-editor.ts index 06627a9e..062bb39e 100644 --- a/src/editor/esphome-editor.ts +++ b/src/editor/esphome-editor.ts @@ -117,8 +117,10 @@ class ESPHomeEditor extends LitElement { >`}
- ${(isSecrets && this.streamerMode && !this._showSecrets) - ? html`` + ${isSecrets && this.streamerMode && !this._showSecrets + ? html`` : ""} `; } diff --git a/src/editor/streamer-warning.ts b/src/editor/streamer-warning.ts index 32e74e4b..d87d35a1 100644 --- a/src/editor/streamer-warning.ts +++ b/src/editor/streamer-warning.ts @@ -5,14 +5,14 @@ import { mdiIncognito } from "@mdi/js"; @customElement("streamer-warning") export class ESPHomeStreamerWarning extends LitElement { - protected render() { return html` fireEvent(this, "closed", {action: "close"})} - @closed=${(e: any) => fireEvent(this, "closed", {action: e.detail.action})} + @escapeKeyAction=${() => fireEvent(this, "closed", { action: "close" })} + @closed=${(e: any) => + fireEvent(this, "closed", { action: e.detail.action })} >
@@ -35,18 +35,17 @@ export class ESPHomeStreamerWarning extends LitElement { static styles = css` .dialog-content { - text-align: center; - --mdc-theme-primary: var(--primary-text-color); + text-align: center; + --mdc-theme-primary: var(--primary-text-color); } esphome-svg-icon { - --mdc-icon-size: 56px; + --mdc-icon-size: 56px; } mwc-button { - --mdc-theme-primary: var(--primary-text-color); + --mdc-theme-primary: var(--primary-text-color); } `; - -} +} declare global { interface HTMLElementTagNameMap { From 8b4fe4c29f6b6594bb5a24a38278baa572fdcd7d Mon Sep 17 00:00:00 2001 From: Graham Brown Date: Sun, 23 Jul 2023 15:54:36 +0200 Subject: [PATCH 12/12] move refire of firstUpdated --- src/editor/esphome-editor.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/editor/esphome-editor.ts b/src/editor/esphome-editor.ts index 062bb39e..aac8dc0b 100644 --- a/src/editor/esphome-editor.ts +++ b/src/editor/esphome-editor.ts @@ -78,11 +78,6 @@ class ESPHomeEditor extends LitElement { protected render() { const isSecrets = this._isSecrets(); - if (isSecrets && this.streamerMode && this._showSecrets) { - // as the 1st update was skipped, fire firstUpdated again - setTimeout(() => this.firstUpdated(), 50); - } - return html` ${commonStyle}