microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-12-15 06:02:57 +03:00
Code Issues Projects Releases Wiki Activity

fix(trace-viewer): provide hints on how to open trace statically (#10450)

Browse Source
This commit is contained in:
Pavel Feldman 2021-11-19 16:29:27 -08:00 committed by GitHub
parent a73e6bbd0e
commit 103b6121b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/playwright-core/src/web/traceViewer/index.tsx
View File

@ -23,13 +23,17 @@ import '../common.css';
(async () => { (async () => {
applyTheme(); applyTheme();
if (window.location.protocol !== 'file:') {
navigator.serviceWorker.register('sw.bundle.js'); navigator.serviceWorker.register('sw.bundle.js');
if (!navigator.serviceWorker.controller) { if (!navigator.serviceWorker.controller) {
await new Promise<void>(f => { await new Promise<void>(f => {
navigator.serviceWorker.oncontrollerchange = () => f(); navigator.serviceWorker.oncontrollerchange = () => f();
}); });
} }
// Keep SW running. // Keep SW running.
setInterval(function() { fetch('ping'); }, 10000); setInterval(function() { fetch('ping'); }, 10000);
}
ReactDOM.render(<Workbench/>, document.querySelector('#root')); ReactDOM.render(<Workbench/>, document.querySelector('#root'));
})(); })();

6
packages/playwright-core/src/web/traceViewer/ui/workbench.css
View File

@ -18,16 +18,16 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: var(--box-shadow);
flex: auto; flex: auto;
flex-direction: column; flex-direction: column;
background-color: #fffb; background-color: white;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 100; z-index: 100;
line-height: 24px;
} }
.drop-target .title { .drop-target .title {
@ -52,7 +52,7 @@
.drop-target button { .drop-target button {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
background-color: rgb(0, 122, 204); background-color: rgb(0, 122, 204);
padding: 6px 4px; padding: 8px 12px;
border: none; border: none;
margin: 30px 0; margin: 30px 0;
cursor: pointer; cursor: pointer;

19
packages/playwright-core/src/web/traceViewer/ui/workbench.tsx
View File

@ -41,7 +41,8 @@ export const Workbench: React.FunctionComponent<{
const [selectedPropertiesTab, setSelectedPropertiesTab] = React.useState<string>('logs'); const [selectedPropertiesTab, setSelectedPropertiesTab] = React.useState<string>('logs');
const [progress, setProgress] = React.useState<{ done: number, total: number }>({ done: 0, total: 0 }); const [progress, setProgress] = React.useState<{ done: number, total: number }>({ done: 0, total: 0 });
const [dragOver, setDragOver] = React.useState<boolean>(false); const [dragOver, setDragOver] = React.useState<boolean>(false);
const [processingErrorMessage, setProcessingErrorMessage] = React.useState<string|null>(null); const [processingErrorMessage, setProcessingErrorMessage] = React.useState<string | null>(null);
const [fileForLocalModeError, setFileForLocalModeError] = React.useState<string | null>(null);
const processTraceFile = (file: File) => { const processTraceFile = (file: File) => {
const blobTraceURL = URL.createObjectURL(file); const blobTraceURL = URL.createObjectURL(file);
@ -73,6 +74,12 @@ export const Workbench: React.FunctionComponent<{
React.useEffect(() => { React.useEffect(() => {
const newTraceURL = new URL(window.location.href).searchParams.get('trace'); const newTraceURL = new URL(window.location.href).searchParams.get('trace');
// Don't accept file:// URLs - this means we re opened locally.
if (newTraceURL?.startsWith('file:')) {
setFileForLocalModeError(newTraceURL);
return;
}
// Don't re-use blob file URLs on page load (results in Fetch error) // Don't re-use blob file URLs on page load (results in Fetch error)
if (newTraceURL && !newTraceURL.startsWith('blob:')) if (newTraceURL && !newTraceURL.startsWith('blob:'))
setTraceURL(newTraceURL); setTraceURL(newTraceURL);
@ -185,7 +192,15 @@ export const Workbench: React.FunctionComponent<{
{!!progress.total && <div className='progress'> {!!progress.total && <div className='progress'>
<div className='inner-progress' style={{ width: (100 * progress.done / progress.total) + '%' }}></div> <div className='inner-progress' style={{ width: (100 * progress.done / progress.total) + '%' }}></div>
</div>} </div>}
{!dragOver && (!traceURL || processingErrorMessage) && <div className='drop-target'> {fileForLocalModeError && <div className='drop-target'>
<div>Trace Viewer uses Service Workers to show traces. To view trace:</div>
<div style={{ paddingTop: 20 }}>
<div>1. Click <a href={fileForLocalModeError}>here</a> to put your trace into the download shelf</div>
<div>2. Go to <a href='https://trace.playwright.dev'>trace.playwright.dev</a></div>
<div>3. Drop the trace from the download shelf into the page</div>
</div>
</div>}
{!dragOver && !fileForLocalModeError && (!traceURL || processingErrorMessage) && <div className='drop-target'>
<div className='processing-error'>{processingErrorMessage}</div> <div className='processing-error'>{processingErrorMessage}</div>
<div className='title'>Drop Playwright Trace to load</div> <div className='title'>Drop Playwright Trace to load</div>
<div>or</div> <div>or</div>