microsoft · ruifigueira · May 18, 2024 · May 24, 2024 · May 24, 2024 · May 27, 2024
diff --git a/packages/playwright-core/src/cli/program.ts b/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')
@@ -311,7 +312,9 @@ program
         isServer: !!options.stdin,
       };
 
-      if (options.port !== undefined || options.host !== undefined)
+      if (options.serverOnly)
+        runTraceViewerServer(traces, openOptions).catch(logErrorAndExit);
+      else if (options.port !== undefined || options.host !== undefined)
         runTraceInBrowser(traces, openOptions).catch(logErrorAndExit);
       else
         runTraceViewerApp(traces, options.browser, openOptions, true).catch(logErrorAndExit);

diff --git a/packages/playwright-core/src/server/trace/viewer/traceViewer.ts b/packages/playwright-core/src/server/trace/viewer/traceViewer.ts
@@ -144,6 +144,15 @@ export async function installRootRedirect(server: HttpServer, traceUrls: string[
   });
 }
 
+export async function runTraceViewerServer(traceUrls: string[], options: TraceViewerServerOptions & { headless?: boolean }, exitOnClose?: boolean) {
+  validateTraceUrls(traceUrls);
+  const server = await startTraceViewerServer(options);
+  await installRootRedirect(server, traceUrls, { ...options, webApp: 'embedded.html' });
+  const url = server.urlPrefix('human-readable').replace('0.0.0.0', 'localhost');
+  process.stdout.write(url + '\n');
+  return server;
+}
+
 export async function runTraceViewerApp(traceUrls: string[], browserName: string, options: TraceViewerServerOptions & { headless?: boolean }, exitOnClose?: boolean) {
   validateTraceUrls(traceUrls);
   const server = await startTraceViewerServer(options);

diff --git a/packages/trace-viewer/embedded.html b/packages/trace-viewer/embedded.html
@@ -0,0 +1,27 @@
+<!--
+  Copyright (c) Microsoft Corporation.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Playwright Trace Viewer for VS Code</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/embedded.tsx"></script>
+  </body>
+</html>
diff --git a/packages/trace-viewer/src/embedded.tsx b/packages/trace-viewer/src/embedded.tsx
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import '@web/common.css';
+import { applyTheme, currentTheme, toggleTheme } from '@web/theme';
+import '@web/third_party/vscode/codicon.css';
+import React from 'react';
+import * as ReactDOM from 'react-dom';
+import { WorkbenchLoader } from './ui/workbenchLoader';
+import { setPopoutFunction } from './ui/popout';
+
+(async () => {
+  applyTheme();
+
+  // must run before awaits
+  window.addEventListener('message', ({ data }) => {
+    if (!data.theme)
+      return;
+    if (currentTheme() !== data.theme)
+      toggleTheme();
+  });
+  // workaround to send keystrokes back to vscode webview to keep triggering key bindings there
+  const handleKeyEvent = (e: KeyboardEvent) => {
+    if (!e.isTrusted)
+      return;
+    window.parent?.postMessage({
+      type: e.type,
+      key: e.key,
+      keyCode: e.keyCode,
+      code: e.code,
+      shiftKey: e.shiftKey,
+      altKey: e.altKey,
+      ctrlKey: e.ctrlKey,
+      metaKey: e.metaKey,
+      repeat: e.repeat,
+    }, '*');
+  };
+  window.addEventListener('keydown', handleKeyEvent);
+  window.addEventListener('keyup', handleKeyEvent);
+
+  if (window.location.protocol !== 'file:') {
+    if (window.location.href.includes('isUnderTest=true'))
+      await new Promise(f => setTimeout(f, 1000));
+    if (!navigator.serviceWorker)
+      throw new Error(`Service workers are not supported.\nMake sure to serve the Trace Viewer (${window.location}) via HTTPS or localhost.`);
+    navigator.serviceWorker.register('sw.bundle.js');
+    if (!navigator.serviceWorker.controller) {
+      await new Promise<void>(f => {
+        navigator.serviceWorker.oncontrollerchange = () => f();
+      });
+    }
+
+    // Keep SW running.
+    setInterval(function() { fetch('ping'); }, 10000);
+  }
+
+  setPopoutFunction((url: string, target?: string) => {
+    if (!url)
+      return;
+    window.parent.postMessage({ command: 'openExternal', url, target }, '*');
+  });
+
+  ReactDOM.render(<WorkbenchLoader hideHeader />, document.querySelector('#root'));
+})();
diff --git a/packages/trace-viewer/src/ui/popout.ts b/packages/trace-viewer/src/ui/popout.ts
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+type PopoutFunction = (url: string, target?: string) => Window | any;
+
+let popoutFn: PopoutFunction = window.open;
+export function setPopoutFunction(fn: PopoutFunction) {
+  popoutFn = fn;
+}
+
+export function popout(url: string, target?: string): Window | undefined {
+  const win = popoutFn(url, target);
+  return win instanceof Window ? win : undefined;
+}
diff --git a/packages/trace-viewer/src/ui/snapshotTab.tsx b/packages/trace-viewer/src/ui/snapshotTab.tsx
@@ -29,6 +29,7 @@ import type { Language } from '@isomorphic/locatorGenerators';
 import { locatorOrSelectorAsSelector } from '@isomorphic/locatorParser';
 import { TabbedPaneTab } from '@web/components/tabbedPane';
 import { BrowserFrame } from './browserFrame';
+import { popout } from './popout';
 
 export const SnapshotTab: React.FunctionComponent<{
   action: ActionTraceEvent | undefined,
@@ -190,7 +191,7 @@ export const SnapshotTab: React.FunctionComponent<{
       })}
       <div style={{ flex: 'auto' }}></div>
       <ToolbarButton icon='link-external' title='Open snapshot in a new tab' disabled={!popoutUrl} onClick={() => {
-        const win = window.open(popoutUrl || '', '_blank');
+        const win = popout(popoutUrl || '', '_blank');
         win?.addEventListener('DOMContentLoaded', () => {
           const injectedScript = new InjectedScript(win as any, false, sdkLanguage, testIdAttributeName, 1, 'chromium', []);
           new ConsoleAPI(injectedScript);

diff --git a/packages/trace-viewer/src/ui/workbenchLoader.css b/packages/trace-viewer/src/ui/workbenchLoader.css
@@ -69,10 +69,13 @@ body.dark-mode .drop-target {
   flex: none;
   width: 100%;
   height: 3px;
-  margin-top: -3px;
   z-index: 10;
 }
 
+.header + .progress {
+  margin-top: -3px;
+}
+
 .inner-progress {
   background-color: var(--vscode-progressBar-background);
   height: 100%;

diff --git a/packages/trace-viewer/src/ui/workbenchLoader.tsx b/packages/trace-viewer/src/ui/workbenchLoader.tsx
@@ -24,7 +24,8 @@ import { Workbench } from './workbench';
 import { TestServerConnection } from '@testIsomorphic/testServerConnection';
 
 export const WorkbenchLoader: React.FunctionComponent<{
-}> = () => {
+  hideHeader?: boolean
+}> = ({ hideHeader }) => {
   const [isServer, setIsServer] = React.useState<boolean>(false);
   const [traceURLs, setTraceURLs] = React.useState<string[]>([]);
   const [uploadedTraceNames, setUploadedTraceNames] = React.useState<string[]>([]);
@@ -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' } : {})}>
+    {!hideHeader && <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>

diff --git a/packages/trace-viewer/vite.config.ts b/packages/trace-viewer/vite.config.ts
@@ -45,6 +45,7 @@ export default defineConfig({
       input: {
         index: path.resolve(__dirname, 'index.html'),
         uiMode: path.resolve(__dirname, 'uiMode.html'),
+        embedded: path.resolve(__dirname, 'embedded.html'),
         snapshot: path.resolve(__dirname, 'snapshot.html'),
       },
       output: {