From 090eaeb36db40c41fc9944b549e6e240ecc8d74d Mon Sep 17 00:00:00 2001 From: Rui Figueira Date: Wed, 22 May 2024 22:31:26 +0100 Subject: [PATCH] chore(trace-viewer): toggle between dark and ligth mode support Listens to VS Code theme changes and adjusts accordingly --- src/traceViewer.ts | 33 ++++++++++++++++++++++++--------- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/src/traceViewer.ts b/src/traceViewer.ts index f095a9a2a..0e2af350c 100644 --- a/src/traceViewer.ts +++ b/src/traceViewer.ts @@ -19,6 +19,7 @@ import type { TestConfig } from './playwrightTestTypes'; import { SettingsModel } from './settingsModel'; import { findNode, getNonce } from './utils'; import * as vscodeTypes from './vscodeTypes'; +import { DisposableBase } from './disposableBase'; function getPath(uriOrPath: string | vscodeTypes.Uri) { return typeof uriOrPath === 'string' ? @@ -28,12 +29,17 @@ function getPath(uriOrPath: string | vscodeTypes.Uri) { uriOrPath; } -class TraceViewerView implements vscodeTypes.Disposable { +function getThemeMode(vscode: vscodeTypes.VSCode) { + const themeKind = vscode.window.activeColorTheme.kind; + return themeKind === 2 || themeKind === 3 ? 'dark-mode' : 'light-mode'; +} + +class TraceViewerView extends DisposableBase { public static readonly viewType = 'playwright.traceviewer.view'; + private readonly _vscode: vscodeTypes.VSCode; private readonly _webviewPanel: vscodeTypes.WebviewPanel; - private _disposables: vscodeTypes.Disposable[] = []; private readonly _onDidDispose: vscodeTypes.EventEmitter; public readonly onDispose: vscodeTypes.Event; @@ -42,6 +48,8 @@ class TraceViewerView implements vscodeTypes.Disposable { vscode: vscodeTypes.VSCode, url: string ) { + super(); + this._vscode = vscode; this._webviewPanel = this._register(vscode.window.createWebviewPanel(TraceViewerView.viewType, 'Trace Viewer', { viewColumn: vscode.ViewColumn.Active, preserveFocus: true, @@ -50,8 +58,9 @@ class TraceViewerView implements vscodeTypes.Disposable { enableScripts: true, enableForms: true, })); - this._register(this._webviewPanel.onDidDispose(() => { - this.dispose(); + this._register(vscode.workspace.onDidChangeConfiguration(event => { + if (event.affectsConfiguration('workbench.colorTheme')) + this._webviewPanel.webview.postMessage({ theme: getThemeMode(vscode) }); })); this._onDidDispose = this._register(new vscode.EventEmitter()); this.onDispose = this._onDidDispose.event; @@ -61,9 +70,7 @@ class TraceViewerView implements vscodeTypes.Disposable { public dispose() { this._onDidDispose.fire(); - for (const disposable of this._disposables) - disposable.dispose(); - this._disposables.length = 0; + super.dispose(); } public show(url: string) { @@ -73,6 +80,7 @@ class TraceViewerView implements vscodeTypes.Disposable { private getHtml(url: string) { const nonce = getNonce(); + const theme = getThemeMode(this._vscode); return /* html */ ` @@ -80,6 +88,7 @@ class TraceViewerView implements vscodeTypes.Disposable { @@ -91,6 +100,14 @@ class TraceViewerView implements vscodeTypes.Disposable { + `; } @@ -154,8 +171,6 @@ export class TraceViewer implements vscodeTypes.Disposable { allArgs.push('--port', '0'); } else { allArgs.push('--server-only'); - const themeKind = this._vscode.window.activeColorTheme.kind; - allArgs.push('--theme', themeKind === 2 || themeKind === 3 ? 'dark' : 'ligth'); } const traceViewerProcess = spawn(node, allArgs, { cwd: config.workspaceFolder,