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

feat(trace): add drop trace here label (#9698)

Browse Source
This commit is contained in:
Pavel Feldman 2021-10-22 07:00:34 -08:00 committed by GitHub
parent 60939a91b2
commit d1ae6fdfdd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,17 @@
limitations under the License. limitations under the License.
*/ */
.drop-target {
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--box-shadow);
flex: auto;
font-size: 24px;
color: #666;
font-weight: bold;
}
.workbench { .workbench {
contain: size; contain: size;
user-select: none; user-select: none;

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

@ -37,6 +37,18 @@ export const Workbench: React.FunctionComponent<{
const [highlightedAction, setHighlightedAction] = React.useState<ActionTraceEvent | undefined>(); const [highlightedAction, setHighlightedAction] = React.useState<ActionTraceEvent | undefined>();
const [selectedTab, setSelectedTab] = React.useState<string>('logs'); const [selectedTab, setSelectedTab] = React.useState<string>('logs');
const handleDropEvent = (event: any) => {
event.preventDefault();
const blobTraceURL = URL.createObjectURL(event.dataTransfer.files[0]);
const url = new URL(window.location.href);
url.searchParams.set('trace', blobTraceURL);
const href = url.toString();
// Snapshot loaders will inherit the trace url from the query parameters,
// so set it here.
window.history.pushState({}, '', href);
setTraceURL(blobTraceURL);
};
React.useEffect(() => { React.useEffect(() => {
(async () => { (async () => {
if (traceURL) { if (traceURL) {
@ -52,6 +64,21 @@ export const Workbench: React.FunctionComponent<{
const defaultSnapshotSize = contextEntry.options.viewport || { width: 1280, height: 720 }; const defaultSnapshotSize = contextEntry.options.viewport || { width: 1280, height: 720 };
const boundaries = { minimum: contextEntry.startTime, maximum: contextEntry.endTime }; const boundaries = { minimum: contextEntry.startTime, maximum: contextEntry.endTime };
if (!traceURL) {
return <div className='vbox workbench'>
<div className='hbox header'>
<div className='logo'>🎭</div>
<div className='product'>Playwright</div>
<div className='spacer'></div>
</div>
<div className='drop-target'
onDragOver={event => { event.preventDefault(); }}
onDrop={event => handleDropEvent(event)}>
Drop Playwright Trace here
</div>
</div>;
}
// Leave some nice free space on the right hand side. // Leave some nice free space on the right hand side.
boundaries.maximum += (boundaries.maximum - boundaries.minimum) / 20; boundaries.maximum += (boundaries.maximum - boundaries.minimum) / 20;
const { errors, warnings } = selectedAction ? modelUtil.stats(selectedAction) : { errors: 0, warnings: 0 }; const { errors, warnings } = selectedAction ? modelUtil.stats(selectedAction) : { errors: 0, warnings: 0 };
@ -60,17 +87,7 @@ export const Workbench: React.FunctionComponent<{
return <div className='vbox workbench' return <div className='vbox workbench'
onDragOver={event => { event.preventDefault(); }} onDragOver={event => { event.preventDefault(); }}
onDrop={event => { onDrop={event => handleDropEvent(event)}>
event.preventDefault();
const blobTraceURL = URL.createObjectURL(event.dataTransfer.files[0]);
const url = new URL(window.location.href);
url.searchParams.set('trace', blobTraceURL);
const href = url.toString();
// Snapshot loaders will inherit the trace url from the query parameters,
// so set it here.
window.history.pushState({}, '', href);
setTraceURL(blobTraceURL);
}}>
<div className='hbox header'> <div className='hbox header'>
<div className='logo'>🎭</div> <div className='logo'>🎭</div>
<div className='product'>Playwright</div> <div className='product'>Playwright</div>