diff --git a/packages/playwright-core/src/server/trace/viewer/traceViewer.ts b/packages/playwright-core/src/server/trace/viewer/traceViewer.ts index 7b010ff489..094a55e780 100644 --- a/packages/playwright-core/src/server/trace/viewer/traceViewer.ts +++ b/packages/playwright-core/src/server/trace/viewer/traceViewer.ts @@ -37,7 +37,7 @@ export async function showTraceViewer(traceUrl: string, browserName: string, hea }); server.routePrefix('/', (request, response) => { - const relativePath = new URL('http://localhost' + request.url!).pathname; + const relativePath = new URL('http://localhost' + request.url!).pathname.slice('/trace'.length); const absolutePath = path.join(__dirname, '..', '..', '..', 'webpack', 'traceViewer', ...relativePath.split('/')); return server.serveFile(response, absolutePath); }); @@ -77,6 +77,6 @@ export async function showTraceViewer(traceUrl: string, browserName: string, hea else page.on('close', () => process.exit()); - await page.mainFrame().goto(internalCallMetadata(), urlPrefix + `/index.html?trace=${traceUrl}`); + await page.mainFrame().goto(internalCallMetadata(), urlPrefix + `/trace/index.html?trace=${traceUrl}`); return context; } diff --git a/packages/playwright-core/src/web/traceViewer/index.html b/packages/playwright-core/src/web/traceViewer/index.html index 7c1a930d2c..5d78302ef9 100644 --- a/packages/playwright-core/src/web/traceViewer/index.html +++ b/packages/playwright-core/src/web/traceViewer/index.html @@ -19,6 +19,9 @@ + + + Playwright Trace Viewer diff --git a/packages/playwright-core/src/web/traceViewer/index.tsx b/packages/playwright-core/src/web/traceViewer/index.tsx index d2b3f6254e..160e732f26 100644 --- a/packages/playwright-core/src/web/traceViewer/index.tsx +++ b/packages/playwright-core/src/web/traceViewer/index.tsx @@ -23,7 +23,9 @@ import '../common.css'; (async () => { applyTheme(); - navigator.serviceWorker.register('sw.bundle.js'); + navigator.serviceWorker.register('/trace/sw.bundle.js', { + scope: '/trace/' + }); if (!navigator.serviceWorker.controller) { await new Promise(f => { navigator.serviceWorker.oncontrollerchange = () => f(); diff --git a/packages/playwright-core/src/web/traceViewer/snapshotRenderer.ts b/packages/playwright-core/src/web/traceViewer/snapshotRenderer.ts index 88fd844688..3f69842bdf 100644 --- a/packages/playwright-core/src/web/traceViewer/snapshotRenderer.ts +++ b/packages/playwright-core/src/web/traceViewer/snapshotRenderer.ts @@ -185,7 +185,8 @@ function snapshotScript() { iframe.setAttribute('src', 'data:text/html,'); } else { // Append query parameters to inherit ?name= or ?time= values from parent. - iframe.setAttribute('src', new URL(src + window.location.search, window.location.href).toString()); + const url = new URL('/trace' + src + window.location.search, window.location.href).toString(); + iframe.setAttribute('src', url); } } diff --git a/packages/playwright-core/src/web/traceViewer/static/icon-16x16.png b/packages/playwright-core/src/web/traceViewer/static/icon-16x16.png new file mode 100644 index 0000000000..1f6c4d6c1e Binary files /dev/null and b/packages/playwright-core/src/web/traceViewer/static/icon-16x16.png differ diff --git a/packages/playwright-core/src/web/traceViewer/static/icon-192x192.png b/packages/playwright-core/src/web/traceViewer/static/icon-192x192.png new file mode 100644 index 0000000000..a4f0dbfa96 Binary files /dev/null and b/packages/playwright-core/src/web/traceViewer/static/icon-192x192.png differ diff --git a/packages/playwright-core/src/web/traceViewer/static/icon-256x256.png b/packages/playwright-core/src/web/traceViewer/static/icon-256x256.png new file mode 100644 index 0000000000..0eb864f739 Binary files /dev/null and b/packages/playwright-core/src/web/traceViewer/static/icon-256x256.png differ diff --git a/packages/playwright-core/src/web/traceViewer/static/icon-32x32.png b/packages/playwright-core/src/web/traceViewer/static/icon-32x32.png new file mode 100644 index 0000000000..650be13340 Binary files /dev/null and b/packages/playwright-core/src/web/traceViewer/static/icon-32x32.png differ diff --git a/packages/playwright-core/src/web/traceViewer/static/icon-384x384.png b/packages/playwright-core/src/web/traceViewer/static/icon-384x384.png new file mode 100644 index 0000000000..cac721050e Binary files /dev/null and b/packages/playwright-core/src/web/traceViewer/static/icon-384x384.png differ diff --git a/packages/playwright-core/src/web/traceViewer/static/icon-512x512.png b/packages/playwright-core/src/web/traceViewer/static/icon-512x512.png new file mode 100644 index 0000000000..63c4468432 Binary files /dev/null and b/packages/playwright-core/src/web/traceViewer/static/icon-512x512.png differ diff --git a/packages/playwright-core/src/web/traceViewer/static/manifest.webmanifest b/packages/playwright-core/src/web/traceViewer/static/manifest.webmanifest new file mode 100644 index 0000000000..bddb8a6359 --- /dev/null +++ b/packages/playwright-core/src/web/traceViewer/static/manifest.webmanifest @@ -0,0 +1,31 @@ +{ + "theme_color": "#000", + "background_color": "#fff", + "display": "browser", + "scope": "/trace", + "start_url": "/trace/index.html", + "name": "Playwright Trace Viewer", + "short_name": "Trace Viewer", + "icons": [ + { + "src": "/trace/icon-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/trace/icon-256x256.png", + "sizes": "256x256", + "type": "image/png" + }, + { + "src": "/trace/icon-384x384.png", + "sizes": "384x384", + "type": "image/png" + }, + { + "src": "/trace/icon-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ] +} diff --git a/packages/playwright-core/src/web/traceViewer/ui/workbench.tsx b/packages/playwright-core/src/web/traceViewer/ui/workbench.tsx index df8c72fa60..a4e7acbfd5 100644 --- a/packages/playwright-core/src/web/traceViewer/ui/workbench.tsx +++ b/packages/playwright-core/src/web/traceViewer/ui/workbench.tsx @@ -40,7 +40,7 @@ export const Workbench: React.FunctionComponent<{ React.useEffect(() => { (async () => { if (traceURL) { - const contextEntry = (await fetch(`context?trace=${traceURL}`).then(response => response.json())) as ContextEntry; + const contextEntry = (await fetch(`/trace/context?trace=${traceURL}`).then(response => response.json())) as ContextEntry; modelUtil.indexModel(contextEntry); setContextEntry(contextEntry); } else { diff --git a/packages/playwright-core/src/web/traceViewer/webpack.config.js b/packages/playwright-core/src/web/traceViewer/webpack.config.js index 8415914913..cc0a82a19b 100644 --- a/packages/playwright-core/src/web/traceViewer/webpack.config.js +++ b/packages/playwright-core/src/web/traceViewer/webpack.config.js @@ -45,6 +45,13 @@ module.exports = { }, ], }), + new CopyPlugin({ + patterns: [ + { + from: path.resolve(__dirname, 'static'), + }, + ], + }), new HtmlWebPackPlugin({ title: 'Playwright Trace Viewer', template: path.join(__dirname, 'index.html'),