feature(trace-viewer): embedded mode support PoC

packages/playwright-core/src/cli/program.ts

@@ -23,7 +23,7 @@ import type { Command } from '../utilsBundle';
 import { program } from '../utilsBundle';
 export { program } from '../utilsBundle';
 import { runDriver, runServer, printApiJson, launchBrowserServer } from './driver';
-import { runTraceInBrowser, runTraceViewerApp } from '../server/trace/viewer/traceViewer';
+import { runTraceInBrowser, runTraceViewerApp, runTraceViewerServer } from '../server/trace/viewer/traceViewer';
 import type { TraceViewerServerOptions } from '../server/trace/viewer/traceViewer';
 import * as playwright from '../..';
 import type { BrowserContext } from '../client/browserContext';
@@ -296,6 +296,7 @@ program
     .option('-h, --host <host>', 'Host to serve trace on; specifying this option opens trace in a browser tab')
     .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')
     .description('show trace viewer')
     .action(function(traces, options) {
       if (options.browser === 'cr')
@@ -309,12 +310,18 @@ program
         host: options.host,
         port: +options.port,
         isServer: !!options.stdin,
+        embedded: !!options.stdin && options.serverOnly,
       };
 
-      if (options.port !== undefined || options.host !== undefined)
+      if (openOptions.embedded) {
+        runTraceViewerServer(traces, openOptions).then(server => {
+          process.stdout.write(server.urlPrefix('precise') + '\n');
+        }).catch(logErrorAndExit);
+      } else if (options.port !== undefined || options.host !== undefined) {
         runTraceInBrowser(traces, openOptions).catch(logErrorAndExit);
-      else
+      } else {
         runTraceViewerApp(traces, options.browser, openOptions, true).catch(logErrorAndExit);
+      }
     }).addHelpText('afterAll', `
 Examples:
 

packages/playwright-core/src/server/trace/viewer/traceViewer.ts

@@ -33,6 +33,7 @@ export type TraceViewerServerOptions = {
   port?: number;
   isServer?: boolean;
   transport?: Transport;
+  embedded?: boolean;
 };
 
 export type TraceViewerRedirectOptions = {
@@ -47,6 +48,7 @@ export type TraceViewerRedirectOptions = {
   webApp?: string;
   isServer?: boolean;
   outputDir?: string;
+  embedded?: boolean;
 };
 
 export type TraceViewerAppOptions = {
@@ -134,6 +136,8 @@ export async function installRootRedirect(server: HttpServer, traceUrls: string[
     params.append('outputDir', options.outputDir);
   for (const reporter of options.reporter || [])
     params.append('reporter', reporter);
+  if (options.embedded)
+    params.append('embedded', '');
 
   const urlPath  = `./trace/${options.webApp || 'index.html'}?${params.toString()}`;
   server.routePath('/', (_, response) => {
@@ -144,20 +148,23 @@ export async function installRootRedirect(server: HttpServer, traceUrls: string[
   });
 }
 
-export async function runTraceViewerApp(traceUrls: string[], browserName: string, options: TraceViewerServerOptions & { headless?: boolean }, exitOnClose?: boolean) {
+export async function runTraceViewerServer(traceUrls: string[], options: TraceViewerServerOptions & { headless?: boolean }, exitOnClose?: boolean) {
   validateTraceUrls(traceUrls);
   const server = await startTraceViewerServer(options);
   await installRootRedirect(server, traceUrls, options);
+  return server;
+}
+
+export async function runTraceViewerApp(traceUrls: string[], browserName: string, options: TraceViewerServerOptions & { headless?: boolean }, exitOnClose?: boolean) {
+  const server = await runTraceViewerServer(traceUrls, options);
   const page = await openTraceViewerApp(server.urlPrefix('precise'), browserName, options);
   if (exitOnClose)
     page.on('close', () => gracefullyProcessExitDoNotHang(0));
   return page;
 }
 
 export async function runTraceInBrowser(traceUrls: string[], options: TraceViewerServerOptions) {
-  validateTraceUrls(traceUrls);
-  const server = await startTraceViewerServer(options);
-  await installRootRedirect(server, traceUrls, options);
+  const server = await runTraceViewerServer(traceUrls, options);
   await openTraceInBrowser(server.urlPrefix('human-readable'));
 }
 

packages/trace-viewer/src/ui/workbenchLoader.tsx

@@ -33,6 +33,7 @@ export const WorkbenchLoader: React.FunctionComponent<{
   const [dragOver, setDragOver] = React.useState<boolean>(false);
   const [processingErrorMessage, setProcessingErrorMessage] = React.useState<string | null>(null);
   const [fileForLocalModeError, setFileForLocalModeError] = React.useState<string | null>(null);
+  const [embedded, setEmbedded] = React.useState<boolean>(false);
 
   const processTraceFiles = React.useCallback((files: FileList) => {
     const blobUrls = [];
@@ -74,7 +75,7 @@ export const WorkbenchLoader: React.FunctionComponent<{
     const params = new URL(window.location.href).searchParams;
     const newTraceURLs = params.getAll('trace');
     setIsServer(params.has('isServer'));
-
+    setEmbedded(params.has('embedded'));
     // Don't accept file:// URLs - this means we re opened locally.
     for (const url of newTraceURLs) {
       if (url.startsWith('file:')) {
@@ -138,15 +139,15 @@ export const WorkbenchLoader: React.FunctionComponent<{
   const showFileUploadDropArea = !!(!isServer && !dragOver && !fileForLocalModeError && (!traceURLs.length || processingErrorMessage));
 
   return <div className='vbox workbench-loader' onDragOver={event => { event.preventDefault(); setDragOver(true); }}>
-    <div className='hbox header' {...(showFileUploadDropArea ? { inert: 'true' } : {})}>
+    {!embedded && <div className='hbox header' {...(showFileUploadDropArea ? { inert: 'true' } : {})}>
       <div className='logo'>
         <img src='playwright-logo.svg' alt='Playwright logo' />
       </div>
       <div className='product'>Playwright</div>
       {model.title && <div className='title'>{model.title}</div>}
       <div className='spacer'></div>
       <ToolbarButton icon='color-mode' title='Toggle color mode' toggled={false} onClick={() => toggleTheme()}></ToolbarButton>
-    </div>
+    </div>}
     <div className='progress'>
       <div className='inner-progress' style={{ width: progress.total ? (100 * progress.done / progress.total) + '%' : 0 }}></div>
     </div>

packages/web/src/theme.ts

@@ -27,10 +27,16 @@ export function applyTheme() {
   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 currentTheme = settings.getString('theme', 'light-mode');
+  const theme = settings.getString('theme', 'light-mode');
   const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
-  if (currentTheme === 'dark-mode' || prefersDarkScheme.matches)
+  if (theme === 'dark-mode' || prefersDarkScheme.matches)
     document.body.classList.add('dark-mode');
 }