/** * Copyright (c) Microsoft Corporation. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import { Size } from '../geometry'; import './snapshotTab.css'; import './tabbedPane.css'; import * as React from 'react'; import { useMeasure } from './helpers'; import { ActionTraceEvent } from '../../../server/trace/common/traceEvents'; export const SnapshotTab: React.FunctionComponent<{ action: ActionTraceEvent | undefined, defaultSnapshotSize: Size, }> = ({ action, defaultSnapshotSize }) => { const [measure, ref] = useMeasure(); const [snapshotIndex, setSnapshotIndex] = React.useState(0); const snapshotMap = new Map(); for (const snapshot of action?.metadata.snapshots || []) snapshotMap.set(snapshot.title, snapshot); const actionSnapshot = snapshotMap.get('action') || snapshotMap.get('after'); const snapshots = [actionSnapshot ? { ...actionSnapshot, title: 'action' } : undefined, snapshotMap.get('before'), snapshotMap.get('after')].filter(Boolean) as { title: string, snapshotName: string }[]; let snapshotUrl = 'data:text/html,'; let snapshotSizeUrl: string | undefined; let pointX: number | undefined; let pointY: number | undefined; if (action) { const snapshot = snapshots[snapshotIndex]; if (snapshot && snapshot.snapshotName) { snapshotUrl = `${window.location.origin}/snapshot/${action.metadata.pageId}?name=${snapshot.snapshotName}`; snapshotSizeUrl = `${window.location.origin}/snapshotSize/${action.metadata.pageId}?name=${snapshot.snapshotName}`; if (snapshot.snapshotName.includes('action')) { pointX = action.metadata.point?.x; pointY = action.metadata.point?.y; } } } React.useEffect(() => { if (snapshots.length >= 1 && snapshotIndex >= snapshots.length) setSnapshotIndex(snapshots.length - 1); }, [snapshotIndex, snapshots]); const iframeRef = React.useRef(null); const [snapshotSize, setSnapshotSize] = React.useState(defaultSnapshotSize); React.useEffect(() => { (async () => { if (snapshotSizeUrl) { const response = await fetch(snapshotSizeUrl); setSnapshotSize(await response.json()); } if (!iframeRef.current) return; try { const point = pointX === undefined ? undefined : { x: pointX, y: pointY }; (iframeRef.current.contentWindow as any).showSnapshot(snapshotUrl, { point }); } catch (e) { } })(); }, [iframeRef, snapshotUrl, snapshotSizeUrl, pointX, pointY]); const scale = Math.min(measure.width / snapshotSize.width, measure.height / snapshotSize.height); const scaledSize = { width: snapshotSize.width * scale, height: snapshotSize.height * scale, }; return

{ if (event.key === 'ArrowRight') setSnapshotIndex(Math.min(snapshotIndex + 1, snapshots.length - 1)); if (event.key === 'ArrowLeft') setSnapshotIndex(Math.max(snapshotIndex - 1, 0)); }} >

{snapshots.map((snapshot, index) => { return

setSnapshotIndex(index)} key={snapshot.title}>

{renderTitle(snapshot.title)}

; })}

; }; function renderTitle(snapshotTitle: string): string { if (snapshotTitle === 'before') return 'Before'; if (snapshotTitle === 'after') return 'After'; if (snapshotTitle === 'action') return 'Action'; return snapshotTitle; }