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

fix(trace-viewer): trap focus inside drop-target popup (#29845)

Browse Source 
https://github.com/microsoft/playwright/issues/29099
This commit is contained in:
Max Schmitt 2024-03-07 22:24:21 +01:00 committed by GitHub
parent 40b8bcb6ad
commit 9ca895dea0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/trace-viewer/src/ui/workbench.tsx
View File

@ -50,7 +50,8 @@ export const Workbench: React.FunctionComponent<{
onSelectionChanged?: (action: ActionTraceEventInContext) => void,
isLive?: boolean,
status?: UITestStatus,
}> = ({ model, showSourcesFirst, rootDir, fallbackLocation, initialSelection, onSelectionChanged, isLive, status }) => {
inert?: boolean,
}> = ({ model, showSourcesFirst, rootDir, fallbackLocation, initialSelection, onSelectionChanged, isLive, status, inert }) => {
const [selectedAction, setSelectedActionImpl] = React.useState<ActionTraceEventInContext | undefined>(undefined);
const [revealedStack, setRevealedStack] = React.useState<StackFrame[] | undefined>(undefined);
const [highlightedAction, setHighlightedAction] = React.useState<ActionTraceEventInContext | undefined>();
@ -213,7 +214,7 @@ export const Workbench: React.FunctionComponent<{
else if (model && model.wallTime)
time = Date.now() - model.wallTime;
return <div className='vbox workbench'>
return <div className='vbox workbench' {...(inert ? { inert: 'true' } : {})}>
<Timeline
model={model}
boundaries={boundaries}

12
packages/trace-viewer/src/ui/workbenchLoader.tsx
View File

@ -137,8 +137,10 @@ export const WorkbenchLoader: React.FunctionComponent<{
})();
}, [isServer, traceURLs, uploadedTraceNames]);
const showFileUploadDropArea = !!(!isServer && !dragOver && !fileForLocalModeError && (!traceURLs.length || processingErrorMessage));
return <div className='vbox workbench-loader' onDragOver={event => { event.preventDefault(); setDragOver(true); }}>
<div className='hbox header'>
<div className='hbox header' {...(showFileUploadDropArea ? { inert: 'true' } : {})}>
<div className='logo'>
<img src='playwright-logo.svg' alt='Playwright logo' />
</div>
@ -150,7 +152,7 @@ export const WorkbenchLoader: React.FunctionComponent<{
<div className='progress'>
<div className='inner-progress' style={{ width: progress.total ? (100 * progress.done / progress.total) + '%' : 0 }}></div>
</div>
<Workbench model={model} />
<Workbench model={model} inert={showFileUploadDropArea} />
{fileForLocalModeError && <div className='drop-target'>
<div>Trace Viewer uses Service Workers to show traces. To view trace:</div>
<div style={{ paddingTop: 20 }}>
@ -159,9 +161,9 @@ export const WorkbenchLoader: React.FunctionComponent<{
<div>3. Drop the trace from the download shelf into the page</div>
</div>
</div>}
{!isServer && !dragOver && !fileForLocalModeError && (!traceURLs.length || processingErrorMessage) && <div className='drop-target'>
{showFileUploadDropArea && <div className='drop-target'>
<div className='processing-error' aria-live='assertive'>{processingErrorMessage}</div>
<div className='title' role='heading'>Drop Playwright Trace to load</div>
<div className='title' role='heading' aria-level={1}>Drop Playwright Trace to load</div>
<div>or</div>
<button onClick={() => {
const input = document.createElement('input');
@ -169,7 +171,7 @@ export const WorkbenchLoader: React.FunctionComponent<{
input.multiple = true;
input.click();
input.addEventListener('change', e => handleFileInputChange(e));
}}>Select file(s)</button>
}} type='button'>Select file(s)</button>
<div style={{ maxWidth: 400 }}>Playwright Trace Viewer is a Progressive Web App, it does not send your trace anywhere,
it opens it locally.</div>
</div>}