chore(trace-viewer): theme mode handled by window message listener

Reverted program theme cli argument
microsoft · May 22, 2024 · 159c9ab · 159c9ab
1 parent b287930
commit 159c9ab
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/packages/playwright-core/src/cli/program.ts b/packages/playwright-core/src/cli/program.ts
@@ -36,6 +36,7 @@ import { wrapInASCIIBox, isLikelyNpxGlobal, assert, gracefullyProcessExitDoNotHa
 import type { Executable } from '../server';
 import { registry, writeDockerVersion } from '../server';
 import { isTargetClosedError } from '../client/errors';
+import { Theme } from '@web/theme';
 
 const packageJSON = require('../../package.json');
 
@@ -297,7 +298,6 @@ program
     .option('-p, --port <port>', 'Port to serve trace on, 0 for any free port; specifying this option opens trace in a browser tab')
     .option('--stdin', 'Accept trace URLs over stdin to update the viewer')
     .option('--server-only', 'Run server only')
-    .option('--theme <theme>', 'light or dark theme')
     .description('show trace viewer')
     .action(function(traces, options) {
       if (options.browser === 'cr')
@@ -312,7 +312,6 @@ program
         port: +options.port,
         isServer: !!options.stdin,
         embedded: !!options.stdin && options.serverOnly,
-        theme: options.theme,
       };
 
       if (openOptions.embedded) {

diff --git a/packages/playwright-core/src/server/trace/viewer/traceViewer.ts b/packages/playwright-core/src/server/trace/viewer/traceViewer.ts
@@ -27,14 +27,14 @@ import { open } from '../../../utilsBundle';
 import type { Page } from '../../page';
 import type { BrowserType } from '../../browserType';
 import { launchApp } from '../../launchApp';
+import type { Theme } from '@web/theme';
 
 export type TraceViewerServerOptions = {
   host?: string;
   port?: number;
   isServer?: boolean;
   transport?: Transport;
   embedded?: boolean;
-  theme?: 'light' | 'dark';
 };
 
 export type TraceViewerRedirectOptions = {
@@ -49,7 +49,6 @@ export type TraceViewerRedirectOptions = {
   webApp?: string;
   isServer?: boolean;
   embedded?: boolean;
-  theme?: 'light' | 'dark';
 };
 
 export type TraceViewerAppOptions = {
@@ -135,8 +134,6 @@ export async function installRootRedirect(server: HttpServer, traceUrls: string[
     params.append('headed', '');
   for (const reporter of options.reporter || [])
     params.append('reporter', reporter);
-  if (options.theme)
-    params.append('theme', options.theme);
   if (options.embedded)
     params.append('embedded', '');
 

diff --git a/packages/web/src/theme.ts b/packages/web/src/theme.ts
@@ -29,10 +29,16 @@ export function applyTheme(theme?: Theme) {
   document!.defaultView!.addEventListener('blur', event => {
     document.body.classList.add('inactive');
   }, false);
+  window.addEventListener('message', ({ data }) => {
+    if (!data.theme)
+      return;
+    if (currentTheme() !== data.theme)
+      toggleTheme();
+  }, false);
 
   const defaultTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark-mode' : 'light-mode';
-  const currentTheme = theme ?? settings.getString('theme', defaultTheme);
-  if (currentTheme === 'dark-mode')
+  theme = theme ?? settings.getString('theme', defaultTheme) as Theme;
+  if (theme === 'dark-mode')
     document.body.classList.add('dark-mode');
 }