diff --git a/src/components/ewt-console.ts b/src/components/ewt-console.ts index 3ccadc72..9942a082 100644 --- a/src/components/ewt-console.ts +++ b/src/components/ewt-console.ts @@ -1,4 +1,4 @@ -import { ColoredConsole } from "../util/console-color"; +import { ColoredConsole, coloredConsoleStyles } from "../util/console-color"; import { sleep } from "../util/sleep"; import { LineBreakTransformer } from "../util/line-break-transformer"; import { Logger } from "../const"; @@ -6,6 +6,7 @@ import { Logger } from "../const"; export class EwtConsole extends HTMLElement { public port!: SerialPort; public logger!: Logger; + public allowInput = true; private _console?: ColoredConsole; private _cancelConnection?: () => Promise; @@ -24,90 +25,8 @@ export class EwtConsole extends HTMLElement { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; line-height: 1.45; - } - .log { - box-sizing: border-box; - height: calc(100% - 28px); - font-size: 12px; - padding: 16px; - overflow: auto; - white-space: pre-wrap; - overflow-wrap: break-word; - } - - .log-bold { - font-weight: bold; - } - .log-italic { - font-style: italic; - } - .log-underline { - text-decoration: underline; - } - .log-strikethrough { - text-decoration: line-through; - } - .log-underline.log-strikethrough { - text-decoration: underline line-through; - } - .log-secret { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } - .log-secret-redacted { - opacity: 0; - width: 1px; - font-size: 1px; - } - .log-fg-black { - color: rgb(128, 128, 128); - } - .log-fg-red { - color: rgb(255, 0, 0); - } - .log-fg-green { - color: rgb(0, 255, 0); - } - .log-fg-yellow { - color: rgb(255, 255, 0); - } - .log-fg-blue { - color: rgb(0, 0, 255); - } - .log-fg-magenta { - color: rgb(255, 0, 255); - } - .log-fg-cyan { - color: rgb(0, 255, 255); - } - .log-fg-white { - color: rgb(187, 187, 187); - } - .log-bg-black { - background-color: rgb(0, 0, 0); - } - .log-bg-red { - background-color: rgb(255, 0, 0); - } - .log-bg-green { - background-color: rgb(0, 255, 0); - } - .log-bg-yellow { - background-color: rgb(255, 255, 0); - } - .log-bg-blue { - background-color: rgb(0, 0, 255); - } - .log-bg-magenta { - background-color: rgb(255, 0, 255); - } - .log-bg-cyan { - background-color: rgb(0, 255, 255); - } - .log-bg-white { - background-color: rgb(255, 255, 255); + display: flex; + flex-direction: column; } form { display: flex; @@ -121,31 +40,40 @@ export class EwtConsole extends HTMLElement { border: 0; outline: none; } + ${coloredConsoleStyles}
-
- > - -
+ ${ + this.allowInput + ? `
+ > + +
+ ` + : "" + } `; this._console = new ColoredConsole(this.shadowRoot!.querySelector("div")!); - const input = this.shadowRoot!.querySelector("input")!; - this.addEventListener("click", () => { - // Only focus input if user didn't select some text - if (getSelection()?.toString() === "") { - input.focus(); - } - }); + if (this.allowInput) { + const input = this.shadowRoot!.querySelector("input")!; - input.addEventListener("keydown", (ev) => { - if (ev.key === "Enter") { - ev.preventDefault(); - ev.stopPropagation(); - this._sendCommand(); - } - }); + this.addEventListener("click", () => { + // Only focus input if user didn't select some text + if (getSelection()?.toString() === "") { + input.focus(); + } + }); + + input.addEventListener("keydown", (ev) => { + if (ev.key === "Enter") { + ev.preventDefault(); + ev.stopPropagation(); + this._sendCommand(); + } + }); + } const abortController = new AbortController(); const connection = this._connect(abortController.signal); @@ -166,7 +94,7 @@ export class EwtConsole extends HTMLElement { .pipeTo( new WritableStream({ write: (chunk) => { - this._console!.addLine(chunk); + this._console!.addLine(chunk.replace("\r", "")); }, }) ); diff --git a/src/install-dialog.ts b/src/install-dialog.ts index db5e5a4a..97ebc583 100644 --- a/src/install-dialog.ts +++ b/src/install-dialog.ts @@ -891,7 +891,6 @@ class EwtInstallDialog extends LitElement { --mdc-dialog-max-width: 90vw; } ewt-console { - display: block; width: calc(80vw - 48px); height: 80vh; } diff --git a/src/util/console-color.ts b/src/util/console-color.ts index 5f024432..c266a6e4 100644 --- a/src/util/console-color.ts +++ b/src/util/console-color.ts @@ -5,7 +5,7 @@ interface ConsoleState { strikethrough: boolean; foregroundColor: string | null; backgroundColor: string | null; - // carriageReturn: boolean; + carriageReturn: boolean; secret: boolean; } @@ -17,7 +17,7 @@ export class ColoredConsole { strikethrough: false, foregroundColor: null, backgroundColor: null, - // carriageReturn: false, + carriageReturn: false, secret: false, }; @@ -27,18 +27,17 @@ export class ColoredConsole { const re = /(?:\033|\\033)(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g; let i = 0; - // This doesn't work for some reason - // if (this.state.carriageReturn) { - // if (line !== "\n") { - // // don't remove if \r\n - // this.targetElement.removeChild(this.targetElement.lastChild!); - // } - // this.state.carriageReturn = false; - // } + if (this.state.carriageReturn) { + if (line !== "\n") { + // don't remove if \r\n + this.targetElement.removeChild(this.targetElement.lastChild!); + } + this.state.carriageReturn = false; + } - // if (line.includes("\r")) { - // this.state.carriageReturn = true; - // } + if (line.includes("\r")) { + this.state.carriageReturn = true; + } const lineSpan = document.createElement("span"); lineSpan.classList.add("line"); @@ -186,3 +185,95 @@ export class ColoredConsole { } } } + +export const coloredConsoleStyles = ` + .log { + flex: 1; + background-color: #1c1c1c; + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, + monospace; + font-size: 12px; + padding: 16px; + overflow: auto; + line-height: 1.45; + border-radius: 3px; + white-space: pre-wrap; + overflow-wrap: break-word; + color: #ddd; + } + + .log-bold { + font-weight: bold; + } + .log-italic { + font-style: italic; + } + .log-underline { + text-decoration: underline; + } + .log-strikethrough { + text-decoration: line-through; + } + .log-underline.log-strikethrough { + text-decoration: underline line-through; + } + .log-secret { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + .log-secret-redacted { + opacity: 0; + width: 1px; + font-size: 1px; + } + .log-fg-black { + color: rgb(128, 128, 128); + } + .log-fg-red { + color: rgb(255, 0, 0); + } + .log-fg-green { + color: rgb(0, 255, 0); + } + .log-fg-yellow { + color: rgb(255, 255, 0); + } + .log-fg-blue { + color: rgb(0, 0, 255); + } + .log-fg-magenta { + color: rgb(255, 0, 255); + } + .log-fg-cyan { + color: rgb(0, 255, 255); + } + .log-fg-white { + color: rgb(187, 187, 187); + } + .log-bg-black { + background-color: rgb(0, 0, 0); + } + .log-bg-red { + background-color: rgb(255, 0, 0); + } + .log-bg-green { + background-color: rgb(0, 255, 0); + } + .log-bg-yellow { + background-color: rgb(255, 255, 0); + } + .log-bg-blue { + background-color: rgb(0, 0, 255); + } + .log-bg-magenta { + background-color: rgb(255, 0, 255); + } + .log-bg-cyan { + background-color: rgb(0, 255, 255); + } + .log-bg-white { + background-color: rgb(255, 255, 255); + } +`;