Revert "chore: revert #33228 - it needs a proper review (#33284)"

This reverts commit 9707e97867.

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

@@ -133,7 +133,14 @@ export async function installRootRedirect(server: HttpServer, traceUrls: string[
   for (const reporter of options.reporter || [])
     params.append('reporter', reporter);
 
-  const urlPath  = `./trace/${options.webApp || 'index.html'}?${params.toString()}`;
+  let baseUrl = '';
+  if (process.env.PW_HMR === '1') {
+    params.set('testServerPort', '' + server.port());
+    baseUrl = 'http://localhost:44223'; // port is hardcoded in build.js
+  }
+
+  const urlPath  = `${baseUrl}/trace/${options.webApp || 'index.html'}?${params.toString()}`;
+
   server.routePath('/', (_, response) => {
     response.statusCode = 302;
     response.setHeader('Location', urlPath);

packages/trace-viewer/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+public/sw.bundle.js*

packages/trace-viewer/src/embedded.tsx

@@ -45,7 +45,7 @@ import { EmbeddedWorkbenchLoader } from './ui/embeddedWorkbenchLoader';
   if (window.location.protocol !== 'file:') {
     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');
+    navigator.serviceWorker.register('sw.bundle.js' + window.location.search);
     if (!navigator.serviceWorker.controller) {
       await new Promise<void>(f => {
         navigator.serviceWorker.oncontrollerchange = () => f();

packages/trace-viewer/src/index.tsx

@@ -27,7 +27,7 @@ import { WorkbenchLoader } from './ui/workbenchLoader';
       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');
+    navigator.serviceWorker.register('sw.bundle.js' + window.location.search);
     if (!navigator.serviceWorker.controller) {
       await new Promise<void>(f => {
         navigator.serviceWorker.oncontrollerchange = () => f();

packages/trace-viewer/src/recorder.tsx

@@ -26,7 +26,7 @@ import { RecorderView } from './ui/recorder/recorderView';
   if (window.location.protocol !== 'file:') {
     if (!navigator.serviceWorker)
       throw new Error(`Service workers are not supported.\nMake sure to serve the Recorder (${window.location}) via HTTPS or localhost.`);
-    navigator.serviceWorker.register('sw.bundle.js');
+    navigator.serviceWorker.register('sw.bundle.js' + window.location.search);
     if (!navigator.serviceWorker.controller) {
       await new Promise<void>(f => {
         navigator.serviceWorker.oncontrollerchange = () => f();

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

@@ -50,6 +50,7 @@ const searchParams = new URLSearchParams(window.location.search);
 const guid = searchParams.get('ws');
 const wsURL = new URL(`../${guid}`, window.location.toString());
 wsURL.protocol = (window.location.protocol === 'https:' ? 'wss:' : 'ws:');
+wsURL.port = searchParams.get('testServerPort') ?? window.location.port;
 const queryParams = {
   args: searchParams.getAll('arg'),
   grep: searchParams.get('grep') || undefined,
@@ -68,6 +69,7 @@ const isMac = navigator.platform === 'MacIntel';
 
 export const UIModeView: React.FC<{}> = ({
 }) => {
+  const isJokesDay = new Date().getMonth() === 3 && new Date().getDate() === 1;
   const [filterText, setFilterText] = React.useState<string>('');
   const [isShowingOutput, setIsShowingOutput] = React.useState<boolean>(false);
   const [outputContainsError, setOutputContainsError] = React.useState(false);
@@ -440,7 +442,7 @@ export const UIModeView: React.FC<{}> = ({
       sidebar={<div className='vbox ui-mode-sidebar'>
         <Toolbar noShadow={true} noMinHeight={true}>
           <img src='playwright-logo.svg' alt='Playwright logo' />
-          <div className='section-title'>Playwright</div>
+          <div className='section-title'>{isJokesDay ? 'Claywright' : 'Playwright'}</div>
           <ToolbarButton icon='refresh' title='Reload' onClick={() => reloadTests()} disabled={isRunningTest || isLoading}></ToolbarButton>
           <div style={{ position: 'relative' }}>
             <ToolbarButton icon={'terminal'} title={'Toggle output — ' + (isMac ? '⌃`' : 'Ctrl + `')} toggled={isShowingOutput} onClick={() => { setIsShowingOutput(!isShowingOutput); }} />
@@ -516,10 +518,11 @@ export const UIModeView: React.FC<{}> = ({
             style={{ marginLeft: 5 }}
             title={settingsVisible ? 'Hide Settings' : 'Show Settings'}
           />
-          <div className='section-title'>Settings</div>
+          <div className='section-title' data-testid='settings-title'>{isJokesDay ? 'Schmettings' : 'Settings'}</div>
         </Toolbar>
         {settingsVisible && <SettingsView settings={[
           { value: darkMode, set: setDarkMode, title: 'Dark mode' },
+          ...(isJokesDay ? [{ value: darkMode, set: setDarkMode, title: 'Fart mode' }] : [])
         ]} />}
       </div>
       }

packages/trace-viewer/src/uiMode.tsx

@@ -27,7 +27,7 @@ import { UIModeView } from './ui/uiModeView';
       await new Promise(f => setTimeout(f, 1000));
     if (!navigator.serviceWorker)
       throw new Error(`Service workers are not supported.\nMake sure to serve the website (${window.location}) via HTTPS or localhost.`);
-    navigator.serviceWorker.register('sw.bundle.js');
+    navigator.serviceWorker.register('sw.bundle.js' + window.location.search);
     if (!navigator.serviceWorker.controller) {
       await new Promise<void>(f => {
         navigator.serviceWorker.oncontrollerchange = () => f();

packages/trace-viewer/vite.config.ts

@@ -26,6 +26,9 @@ export default defineConfig({
     react(),
     bundle()
   ],
+  define: {
+    'process.env': {},
+  },
   resolve: {
     alias: {
       '@injected': path.resolve(__dirname, '../playwright-core/src/server/injected'),

packages/trace-viewer/vite.sw.config.ts

@@ -36,7 +36,7 @@ export default defineConfig({
     },
   },
   build: {
-    outDir: path.resolve(__dirname, '../playwright-core/lib/vite/traceViewer'),
+    outDir: path.resolve(__dirname, 'public'),
     // Output dir is shared with vite.config.ts, clearing it here is racy.
     emptyOutDir: false,
     rollupOptions: {

tests/playwright-test/ui-mode-test-run.spec.ts

@@ -775,3 +775,14 @@ test('should respect --ignore-snapshots option', {
           - treeitem ${/\[icon-check\] snapshot/}
   `);
 });
+
+test('should show funny messages', async ({ runUITest }) => {
+  const { page } = await runUITest(basicTestTree);
+  await page.clock.setFixedTime('2025-04-01');
+
+  await expect(page.getByText('Claywright')).toBeVisible();
+  const schmettingsHeader = page.getByText('Schmettings');
+  await expect(schmettingsHeader).toBeVisible();
+  await schmettingsHeader.click();
+  await expect(page.getByRole('checkbox', { name: 'Fart mode' })).toBeVisible();
+});

utils/build/build.js

@@ -275,6 +275,21 @@ for (const bundle of bundles) {
   });
 }
 
+// initial service worker build.
+steps.push({
+  command: 'npx',
+  args: [
+    'vite',
+    '--config',
+    'vite.sw.config.ts',
+    'build',
+    ...(withSourceMaps ? ['--sourcemap=inline'] : []),
+  ],
+  shell: true,
+  cwd: path.join(__dirname, '..', '..', 'packages', 'trace-viewer'),
+  concurrent: false,
+});
+
 // Build/watch web packages.
 for (const webPackage of ['html-reporter', 'recorder', 'trace-viewer']) {
   steps.push({
@@ -290,6 +305,7 @@ for (const webPackage of ['html-reporter', 'recorder', 'trace-viewer']) {
     concurrent: true,
   });
 }
+
 // Build/watch trace viewer service worker.
 steps.push({
   command: 'npx',
@@ -306,6 +322,16 @@ steps.push({
   concurrent: true,
 });
 
+// web packages dev server
+if (watchMode) {
+  steps.push({
+    command: 'npx',
+    args: ['vite', '--port', '44223', '--base', '/trace/'],
+    shell: true,
+    cwd: path.join(__dirname, '..', '..', 'packages', 'trace-viewer'),
+    concurrent: true,
+  });
+}
 
 // Generate injected.
 onChanges.push({