microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-12-14 21:53:35 +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.
*/
.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 {
contain: size;
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 [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(() => {
(async () => {
if (traceURL) {
@ -52,6 +64,21 @@ export const Workbench: React.FunctionComponent<{
const defaultSnapshotSize = contextEntry.options.viewport || { width: 1280, height: 720 };
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.
boundaries.maximum += (boundaries.maximum - boundaries.minimum) / 20;
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'
onDragOver={event => { event.preventDefault(); }}
onDrop={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);
}}>
onDrop={event => handleDropEvent(event)}>
<div className='hbox header'>
<div className='logo'>🎭</div>
<div className='product'>Playwright</div>