microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-01-06 03:16:17 +03:00
Code Issues Projects Releases Wiki Activity

fix(trace-viewer): center snapshot iframe (#20512)

Browse Source
This commit is contained in:
Dmitry Gozman 2023-01-30 14:32:45 -08:00 committed by GitHub
parent c27ad35299
commit 99353038f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/trace-viewer/src/ui/snapshotTab.tsx
View File

@ -79,11 +79,14 @@ export const SnapshotTab: React.FunctionComponent<{
}, [iframeRef, snapshotUrl, snapshotInfoUrl, pointX, pointY]); }, [iframeRef, snapshotUrl, snapshotInfoUrl, pointX, pointY]);
const windowHeaderHeight = 40; const windowHeaderHeight = 40;
const snapshotSize = snapshotInfo.viewport; const snapshotContainerSize = {
const scale = Math.min(measure.width / snapshotSize.width, measure.height / (snapshotSize.height + windowHeaderHeight), 1); width: snapshotInfo.viewport.width,
const scaledSize = { height: snapshotInfo.viewport.height + windowHeaderHeight,
width: snapshotSize.width * scale, };
height: (snapshotSize.height + windowHeaderHeight) * scale, const scale = Math.min(measure.width / snapshotContainerSize.width, measure.height / snapshotContainerSize.height, 1);
const translate = {
x: (measure.width - snapshotContainerSize.width) / 2,
y: (measure.height - snapshotContainerSize.height) / 2,
}; };
return <div return <div
className='snapshot-tab' className='snapshot-tab'
@ -105,9 +108,9 @@ export const SnapshotTab: React.FunctionComponent<{
</div> </div>
<div ref={ref} className='snapshot-wrapper'> <div ref={ref} className='snapshot-wrapper'>
{ snapshots.length ? <div className='snapshot-container' style={{ { snapshots.length ? <div className='snapshot-container' style={{
width: snapshotSize.width + 'px', width: snapshotContainerSize.width + 'px',
height: (snapshotSize.height + windowHeaderHeight) + 'px', height: snapshotContainerSize.height + 'px',
transform: `translate(${-snapshotSize.width * (1 - scale) / 2 + (measure.width - scaledSize.width) / 2}px, ${-snapshotSize.height * (1 - scale) / 2 + (measure.height - scaledSize.height) / 2}px) scale(${scale})`, transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})`,
}}> }}>
<div className='window-header'> <div className='window-header'>
<div style={{ whiteSpace: 'nowrap' }}> <div style={{ whiteSpace: 'nowrap' }}>