feat(trace): add web manifest (#9482)

This commit is contained in:
Pavel Feldman 2021-10-15 15:33:09 -08:00 committed by GitHub
parent 9135847950
commit 811d02dbe8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 49 additions and 5 deletions

View File

@ -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;
}

View File

@ -19,6 +19,9 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="/trace/icon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/trace/icon-16x16.png">
<link rel="manifest" href="/trace/manifest.webmanifest">
<title>Playwright Trace Viewer</title>
</head>
<body>

View File

@ -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<void>(f => {
navigator.serviceWorker.oncontrollerchange = () => f();

View File

@ -185,7 +185,8 @@ function snapshotScript() {
iframe.setAttribute('src', 'data:text/html,<body style="background: #ddd"></body>');
} 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);
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 593 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

View File

@ -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"
}
]
}

View File

@ -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 {

View File

@ -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'),