From 19dd918ce262f908d33b05ce6f1aa366c781e5a9 Mon Sep 17 00:00:00 2001 From: Brendan Maginnis Date: Thu, 14 Sep 2023 12:00:05 +0100 Subject: [PATCH 1/4] refactor: Use new ide-styles.css variable names --- media/ide-styles.css | 184 ++++--------------------------------------- 1 file changed, 14 insertions(+), 170 deletions(-) diff --git a/media/ide-styles.css b/media/ide-styles.css index a10c4a13..4c116480 100644 --- a/media/ide-styles.css +++ b/media/ide-styles.css @@ -1,176 +1,20 @@ :root { - --background: var(--vscode-sideBar-background); /* main background */ - --foreground: var(--vscode-foreground); /* foreground text */ - --editor: var(--vscode-editor-background); /* editor background */ - --chat: var( - --vscode-settings-textInputBackground - ); /* chat bubble background */ - --warning: var( - --vscode-statusBarItem-warningBackground - ); /* warning background */ - --error: var(--vscode-statusBarItem-errorBackground); /* error background */ - --disabled: var(--vscode-disabledForeground); /* disabled foreground */ - --border: var(--vscode-panel-border); /* border */ - --primary: var(--vscode-button-background); - --highlight: orange; + --ide-text: var(--vscode-sideBar-foreground); + --ide-disabled-text: var(--vscode-disabledForeground); + --ide-window-bg: var(--vscode-sideBar-background); + --ide-editor-bg: var(--vscode-editor-background); + --ide-chat-input-text: var(--vscode-settings-textInputForeground); + --ide-chat-input-bg: var(--vscode-settings-textInputBackground); + --ide-warning-text: var(--vscode-statusBarItem-warningForeground); + --ide-warning-bg: var(--vscode-statusBarItem-warningBackground); + --ide-error-text: var(--vscode-inputValidation-errorForeground); + --ide-error-bg: var(--vscode-inputValidation-errorBackground); + --ide-border: var(--vscode-panel-border); + --ide-primary-btn-text: var(--vscode-button-foreground); + --ide-primary-btn-bg: var(--vscode-button-background); + --ide-highlight: orange; } html { font-size: var(--vscode-font-size); } - -body.vscode-light .hljs { - color: #24292e; - background: #fff; -} -body.vscode-light .hljs-doctag, -body.vscode-light .hljs-keyword, -body.vscode-light .hljs-meta body.vscode-light .hljs-keyword, -body.vscode-light .hljs-template-tag, -body.vscode-light .hljs-template-variable, -body.vscode-light .hljs-type, -body.vscode-light .hljs-variable.language_ { - color: #d73a49; -} -body.vscode-light .hljs-title, -body.vscode-light .hljs-title.class_, -body.vscode-light .hljs-title.class_.inherited__, -body.vscode-light .hljs-title.function_ { - color: #6f42c1; -} -body.vscode-light .hljs-attr, -body.vscode-light .hljs-attribute, -body.vscode-light .hljs-literal, -body.vscode-light .hljs-meta, -body.vscode-light .hljs-number, -body.vscode-light .hljs-operator, -body.vscode-light .hljs-selector-attr, -body.vscode-light .hljs-selector-class, -body.vscode-light .hljs-selector-id, -body.vscode-light .hljs-variable { - color: #005cc5; -} -body.vscode-light .hljs-meta body.vscode-light .hljs-string, -body.vscode-light .hljs-regexp, -body.vscode-light .hljs-string { - color: #032f62; -} -body.vscode-light .hljs-built_in, -body.vscode-light .hljs-symbol { - color: #e36209; -} -body.vscode-light .hljs-code, -body.vscode-light .hljs-comment, -body.vscode-light .hljs-formula { - color: #6a737d; -} -body.vscode-light .hljs-name, -body.vscode-light .hljs-quote, -body.vscode-light .hljs-selector-pseudo, -body.vscode-light .hljs-selector-tag { - color: #22863a; -} -body.vscode-light .hljs-subst { - color: #24292e; -} -body.vscode-light .hljs-section { - color: #005cc5; - font-weight: 700; -} -body.vscode-light .hljs-bullet { - color: #735c0f; -} -body.vscode-light .hljs-emphasis { - color: #24292e; - font-style: italic; -} -body.vscode-light .hljs-strong { - color: #24292e; - font-weight: 700; -} -body.vscode-light .hljs-addition { - color: #22863a; - background-color: #f0fff4; -} -body.vscode-light .hljs-deletion { - color: #b31d28; - background-color: #ffeef0; -} - -body.vscode-dark .hljs { - color: #c9d1d9; - background: #0d1117; -} -body.vscode-dark .hljs-doctag, -body.vscode-dark .hljs-keyword, -body.vscode-dark .hljs-meta body.vscode-dark .hljs-keyword, -body.vscode-dark .hljs-template-tag, -body.vscode-dark .hljs-template-variable, -body.vscode-dark .hljs-type, -body.vscode-dark .hljs-variable.language_ { - color: #ff7b72; -} -body.vscode-dark .hljs-title, -body.vscode-dark .hljs-title.class_, -body.vscode-dark .hljs-title.class_.inherited__, -body.vscode-dark .hljs-title.function_ { - color: #d2a8ff; -} -body.vscode-dark .hljs-attr, -body.vscode-dark .hljs-attribute, -body.vscode-dark .hljs-literal, -body.vscode-dark .hljs-meta, -body.vscode-dark .hljs-number, -body.vscode-dark .hljs-operator, -body.vscode-dark .hljs-selector-attr, -body.vscode-dark .hljs-selector-class, -body.vscode-dark .hljs-selector-id, -body.vscode-dark .hljs-variable { - color: #79c0ff; -} -body.vscode-dark .hljs-meta body.vscode-dark .hljs-string, -body.vscode-dark .hljs-regexp, -body.vscode-dark .hljs-string { - color: #a5d6ff; -} -body.vscode-dark .hljs-built_in, -body.vscode-dark .hljs-symbol { - color: #ffa657; -} -body.vscode-dark .hljs-code, -body.vscode-dark .hljs-comment, -body.vscode-dark .hljs-formula { - color: #8b949e; -} -body.vscode-dark .hljs-name, -body.vscode-dark .hljs-quote, -body.vscode-dark .hljs-selector-pseudo, -body.vscode-dark .hljs-selector-tag { - color: #7ee787; -} -body.vscode-dark .hljs-subst { - color: #c9d1d9; -} -body.vscode-dark .hljs-section { - color: #1f6feb; - font-weight: 700; -} -body.vscode-dark .hljs-bullet { - color: #f2cc60; -} -body.vscode-dark .hljs-emphasis { - color: #c9d1d9; - font-style: italic; -} -body.vscode-dark .hljs-strong { - color: #c9d1d9; - font-weight: 700; -} -body.vscode-dark .hljs-addition { - color: #aff5b4; - background-color: #033a16; -} -body.vscode-dark .hljs-deletion { - color: #ffdcd7; - background-color: #67060c; -} From 8f8038d09c8c883b0627714f51c75a0ad4821d51 Mon Sep 17 00:00:00 2001 From: Brendan Maginnis Date: Thu, 14 Sep 2023 13:33:46 +0100 Subject: [PATCH 2/4] Handle dark mode updates --- src/chat.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/chat.ts b/src/chat.ts index 5222050e..5777172f 100644 --- a/src/chat.ts +++ b/src/chat.ts @@ -211,6 +211,14 @@ export class ChatProvider implements vscode.WebviewViewProvider { window.sourceryLS = { postMessage: vscode.postMessage, }; + + const updateTheme = () => { + const theme = document.body.classList.contains("vscode-light") ? "light" : "dark"; + document.documentElement.classList.remove("light", "dark"); + document.documentElement.classList.add(theme); + }; + updateTheme(); + new MutationObserver(updateTheme).observe(document.body, {attributes: true}); }()) From 2a857e1b98d2f5003f0df351e927d4f79c21a9e8 Mon Sep 17 00:00:00 2001 From: Brendan Maginnis Date: Mon, 18 Sep 2023 13:23:08 +0100 Subject: [PATCH 3/4] Address review comments --- src/chat.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/chat.ts b/src/chat.ts index 5777172f..e09b39ed 100644 --- a/src/chat.ts +++ b/src/chat.ts @@ -213,7 +213,11 @@ export class ChatProvider implements vscode.WebviewViewProvider { }; const updateTheme = () => { + // The theme class can be vscode-light, vscode-dark, vscode-high-contrast and only + // vscode-light is a light theme. The others are dark themes const theme = document.body.classList.contains("vscode-light") ? "light" : "dark"; + + // Set the theme class on the document element so that the webview can style itself document.documentElement.classList.remove("light", "dark"); document.documentElement.classList.add(theme); }; From ab1ff613655191a30a9a8fcfc2fcb3efb3dabf28 Mon Sep 17 00:00:00 2001 From: Brendan Maginnis Date: Mon, 18 Sep 2023 13:31:12 +0100 Subject: [PATCH 4/4] Address review comments --- src/chat.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/chat.ts b/src/chat.ts index e09b39ed..18b8e082 100644 --- a/src/chat.ts +++ b/src/chat.ts @@ -15,6 +15,11 @@ export type ExtensionMessage = linkType: "url" | "file" | "directory"; link: string; } + | { + target: "extension"; + request: "copyToClipboard"; + content: string; + } | { target: "extension"; request: "insertAtCursor"; @@ -77,6 +82,10 @@ export class ChatProvider implements vscode.WebviewViewProvider { case "openLink": this.handleOpenLinkRequest(message); break; + case "copyToClipboard": { + this.handleCopyToClipboardRequest(message); + break; + } case "insertAtCursor": { this.handleInsertAtCursorRequest(message); break; @@ -133,6 +142,16 @@ export class ChatProvider implements vscode.WebviewViewProvider { } } + private handleCopyToClipboardRequest({ + content, + }: { + target: "extension"; + request: "copyToClipboard"; + content: string; + }) { + vscode.env.clipboard.writeText(content); + } + private handleInsertAtCursorRequest({ content, }: {