Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat(tracing): show screenshot behind iframe, so that locators continue to work

Browse source
This commit is contained in:
Simon Knott 2024-09-09 11:49:22 +02:00
parent 718bd9b35f
commit ad23751603
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
2 changed files with 7 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/trace-viewer/src/ui/inspectorTab.tsx
View file

@ -17,7 +17,7 @@
import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper'; import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
import type { Language } from '@web/components/codeMirrorWrapper'; import type { Language } from '@web/components/codeMirrorWrapper';
import { ToolbarButton } from '@web/components/toolbarButton'; import { ToolbarButton } from '@web/components/toolbarButton';
import { copy, useSetting } from '@web/uiUtils'; import { copy } from '@web/uiUtils';
import * as React from 'react'; import * as React from 'react';
import './sourceTab.css'; import './sourceTab.css';
@ -27,12 +27,10 @@ export const InspectorTab: React.FunctionComponent<{
highlightedLocator: string, highlightedLocator: string,
setHighlightedLocator: (locator: string) => void, setHighlightedLocator: (locator: string) => void,
}> = ({ sdkLanguage, setIsInspecting, highlightedLocator, setHighlightedLocator }) => { }> = ({ sdkLanguage, setIsInspecting, highlightedLocator, setHighlightedLocator }) => {
const [showScreenshot] = useSetting('screenshot-instead-of-snapshot', false);
return <div className='vbox' style={{ backgroundColor: 'var(--vscode-sideBar-background)' }}> return <div className='vbox' style={{ backgroundColor: 'var(--vscode-sideBar-background)' }}>
<div style={{ margin: '10px 0px 10px 10px', color: 'var(--vscode-editorCodeLens-foreground)', flex: 'none' }}>Locator</div> <div style={{ margin: '10px 0px 10px 10px', color: 'var(--vscode-editorCodeLens-foreground)', flex: 'none' }}>Locator</div>
<div style={{ margin: '0 10px 10px', flex: 'auto' }}> <div style={{ margin: '0 10px 10px', flex: 'auto' }}>
<CodeMirrorWrapper text={showScreenshot ? '/* disable "show screenshot" setting to pick locator */' : highlightedLocator} language={sdkLanguage} focusOnChange={true} isFocused={true} wrapLines={true} onChange={text => { <CodeMirrorWrapper text={highlightedLocator} language={sdkLanguage} focusOnChange={true} isFocused={true} wrapLines={true} onChange={text => {
// Updating text needs to go first - react can squeeze a render between the state updates. // Updating text needs to go first - react can squeeze a render between the state updates.
setHighlightedLocator(text); setHighlightedLocator(text);
setIsInspecting(false); setIsInspecting(false);

11
packages/trace-viewer/src/ui/snapshotTab.tsx
View file

@ -202,7 +202,7 @@ export const SnapshotTab: React.FunctionComponent<{
iframe={iframeRef1.current} iframe={iframeRef1.current}
iteration={loadingRef.current.iteration} /> iteration={loadingRef.current.iteration} />
<Toolbar> <Toolbar>
<ToolbarButton className='pick-locator' title={showScreenshotInsteadOfSnapshot ? 'Disable "screenshots instead of snapshots" to pick a locator' : 'Pick locator'} icon='target' toggled={isInspecting} onClick={() => setIsInspecting(!isInspecting)} disabled={showScreenshotInsteadOfSnapshot} /> <ToolbarButton className='pick-locator' title={'Pick locator'} icon='target' toggled={isInspecting} onClick={() => setIsInspecting(!isInspecting)} />
{['action', 'before', 'after'].map(tab => { {['action', 'before', 'after'].map(tab => {
return <TabbedPaneTab return <TabbedPaneTab
key={tab} key={tab}
@ -213,7 +213,7 @@ export const SnapshotTab: React.FunctionComponent<{
></TabbedPaneTab>; ></TabbedPaneTab>;
})} })}
<div style={{ flex: 'auto' }}></div> <div style={{ flex: 'auto' }}></div>
<ToolbarButton icon='link-external' title={showScreenshotInsteadOfSnapshot ? 'Not available when showing screenshot' : 'Open snapshot in a new tab'} disabled={!popoutUrl || showScreenshotInsteadOfSnapshot} onClick={() => { <ToolbarButton icon='link-external' title={'Open snapshot in a new tab'} disabled={!popoutUrl} onClick={() => {
if (!openPage) if (!openPage)
openPage = window.open; openPage = window.open;
const win = openPage(popoutUrl || '', '_blank'); const win = openPage(popoutUrl || '', '_blank');
@ -230,10 +230,9 @@ export const SnapshotTab: React.FunctionComponent<{
transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})`, transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})`,
}}> }}>
<BrowserFrame url={snapshotInfo.url} /> <BrowserFrame url={snapshotInfo.url} />
{(showScreenshotInsteadOfSnapshot && screencastFrame) && <img alt={`Screenshot of ${action?.apiName} > ${renderTitle(snapshotTab)}`} src={`sha1/${screencastFrame.sha1}`} width={screencastFrame.width} height={screencastFrame.height} />} <div className='snapshot-switcher' style={(showScreenshotInsteadOfSnapshot && screencastFrame) ? { backgroundImage: `url(sha1/${screencastFrame.sha1})`, backgroundSize: 'cover' } : undefined}>
<div className='snapshot-switcher' style={showScreenshotInsteadOfSnapshot ? { display: 'none' } : undefined}> <iframe ref={iframeRef0} name='snapshot' title='DOM Snapshot' className={clsx(loadingRef.current.visibleIframe === 0 && 'snapshot-visible')} style={showScreenshotInsteadOfSnapshot ? { opacity: 0 } : undefined}></iframe>
<iframe ref={iframeRef0} name='snapshot' title='DOM Snapshot' className={clsx(loadingRef.current.visibleIframe === 0 && 'snapshot-visible')}></iframe> <iframe ref={iframeRef1} name='snapshot' title='DOM Snapshot' className={clsx(loadingRef.current.visibleIframe === 1 && 'snapshot-visible')} style={showScreenshotInsteadOfSnapshot ? { opacity: 0 } : undefined}></iframe>
<iframe ref={iframeRef1} name='snapshot' title='DOM Snapshot' className={clsx(loadingRef.current.visibleIframe === 1 && 'snapshot-visible')}></iframe>
</div> </div>
</div> </div>
</div> </div>