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

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

@@ -125,14 +125,7 @@ export async function installRootRedirect(server: HttpServer, traceUrls: string[
   for (const reporter of options.reporter || [])
     params.append('reporter', reporter);
 
-  let baseUrl = '';
+  const urlPath  = `./trace/${options.webApp || 'index.html'}?${params.toString()}`;
-  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,5 +22,3 @@ 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' + window.location.search);
+    navigator.serviceWorker.register('sw.bundle.js');
     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' + window.location.search);
+    navigator.serviceWorker.register('sw.bundle.js');
     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' + window.location.search);
+    navigator.serviceWorker.register('sw.bundle.js');
     if (!navigator.serviceWorker.controller) {
       await new Promise<void>(f => {
         navigator.serviceWorker.oncontrollerchange = () => f();

packages/trace-viewer/src/sw/traceModelBackends.ts

@@ -30,8 +30,9 @@ export class ZipTraceModelBackend implements TraceModelBackend {
 
   constructor(traceURL: string, progress: Progress) {
     this._traceURL = traceURL;
+    zipjs.configure({ baseURL: self.location.href } as any);
     this._zipReader = new zipjs.ZipReader(
-        new zipjs.HttpReader(formatTraceFileUrl(traceURL), { mode: 'cors', preventHeadRequest: true } as any),
+        new zipjs.HttpReader(formatUrl(traceURL), { mode: 'cors', preventHeadRequest: true } as any),
         { useWebWorkers: false });
     this._entriesPromise = this._zipReader.getEntries({ onprogress: progress }).then(entries => {
       const map = new Map<string, zip.Entry>();
@@ -86,7 +87,7 @@ export class FetchTraceModelBackend implements TraceModelBackend {
 
   constructor(traceURL: string) {
     this._traceURL = traceURL;
-    this._entriesPromise = fetch(formatTraceFileUrl(traceURL)).then(async response => {
+    this._entriesPromise = fetch('/trace/file?path=' + encodeURIComponent(traceURL)).then(async response => {
       const json = JSON.parse(await response.text());
       const entries = new Map<string, string>();
       for (const entry of json.entries)
@@ -128,22 +129,14 @@ export class FetchTraceModelBackend implements TraceModelBackend {
     const fileName = entries.get(entryName);
     if (!fileName)
       return;
-
+    return fetch('/trace/file?path=' + encodeURIComponent(fileName));
-    return fetch(formatTraceFileUrl(fileName));
   }
 }
 
-const baseURL = new URL(self.location.href);
+function formatUrl(trace: string) {
-baseURL.port = baseURL.searchParams.get('testServerPort') ?? baseURL.port;
+  let url = trace.startsWith('http') || trace.startsWith('blob') ? trace : `file?path=${encodeURIComponent(trace)}`;
-
+  // Dropbox does not support cors.
-function formatTraceFileUrl(trace: string) {
+  if (url.startsWith('https://www.dropbox.com/'))
-  if (trace.startsWith('https://www.dropbox.com/'))
+    url = 'https://dl.dropboxusercontent.com/' + url.substring('https://www.dropbox.com/'.length);
-    return 'https://dl.dropboxusercontent.com/' + trace.substring('https://www.dropbox.com/'.length);
+  return url;
-
-  if (trace.startsWith('http') || trace.startsWith('blob'))
-    return trace;
-
-  const url = new URL('/trace/file', baseURL);
-  url.searchParams.set('path', trace);
-  return url.toString();
 }

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

@@ -50,7 +50,6 @@ 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,
@@ -69,7 +68,6 @@ 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);
@@ -442,7 +440,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'>{isJokesDay ? 'Claywright' : 'Playwright'}</div>
+          <div className='section-title'>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); }} />
@@ -518,11 +516,10 @@ export const UIModeView: React.FC<{}> = ({
             style={{ marginLeft: 5 }}
             title={settingsVisible ? 'Hide Settings' : 'Show Settings'}
           />
-          <div className='section-title' data-testid='settings-title'>{isJokesDay ? 'Schmettings' : 'Settings'}</div>
+          <div className='section-title'>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' + window.location.search);
+    navigator.serviceWorker.register('sw.bundle.js');
     if (!navigator.serviceWorker.controller) {
       await new Promise<void>(f => {
         navigator.serviceWorker.oncontrollerchange = () => f();

packages/trace-viewer/vite.config.ts

@@ -26,9 +26,6 @@ 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, 'public'),
+    outDir: path.resolve(__dirname, '../playwright-core/lib/vite/traceViewer'),
     // 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

@@ -778,14 +778,3 @@ 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,21 +275,6 @@ 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({
@@ -305,7 +290,6 @@ for (const webPackage of ['html-reporter', 'recorder', 'trace-viewer']) {
     concurrent: true,
   });
 }
-
 // Build/watch trace viewer service worker.
 steps.push({
   command: 'npx',
@@ -322,16 +306,6 @@ 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({