kyfx
/
playwright
mirror of https://github.com/microsoft/playwright.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: fix the scrollable locator tab (#34358)

This commit is contained in:
Pavel Feldman 2025-01-16 13:20:20 -08:00 committed by GitHub
parent 84bbc5fd35
commit 3cf0461a1a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/trace-viewer/src/ui/inspectorTab.tsx
View File

@ -47,17 +47,28 @@ export const InspectorTab: React.FunctionComponent<{
setIsInspecting(false); setIsInspecting(false);
}, [highlightedElement, setHighlightedElement, setIsInspecting]); }, [highlightedElement, setHighlightedElement, setIsInspecting]);
return <div className='vbox' style={{ backgroundColor: 'var(--vscode-sideBar-background)' }}> return <div style={{ flex: 'auto', backgroundColor: 'var(--vscode-sideBar-background)', padding: '0 10px 10px 10px', overflow: 'auto' }}>
<div style={{ margin: '10px 0px 10px 10px', color: 'var(--vscode-editorCodeLens-foreground)', flex: 'none' }}>Locator</div> <div className='hbox' style={{ lineHeight: '28px', color: 'var(--vscode-editorCodeLens-foreground)' }}>
<div style={{ margin: '0 10px 10px', flex: 'auto' }}> <div style={{ flex: 'auto' }}>Locator</div>
<ToolbarButton icon='files' title='Copy locator' onClick={() => {
copy(highlightedElement.locator || '');
}}></ToolbarButton>
</div>
<div style={{ height: 50 }}>
<CodeMirrorWrapper text={highlightedElement.locator || ''} language={sdkLanguage} isFocused={true} wrapLines={true} onChange={text => { <CodeMirrorWrapper text={highlightedElement.locator || ''} language={sdkLanguage} 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.
setHighlightedElement({ ...highlightedElement, locator: text, lastEdited: 'locator' }); setHighlightedElement({ ...highlightedElement, locator: text, lastEdited: 'locator' });
setIsInspecting(false); setIsInspecting(false);
}} /> }} />
</div> </div>
<div style={{ margin: '10px 0px 10px 10px', color: 'var(--vscode-editorCodeLens-foreground)', flex: 'none' }}>Aria</div>
<div style={{ margin: '0 10px 10px', flex: 'auto' }}> <div className='hbox' style={{ lineHeight: '28px', color: 'var(--vscode-editorCodeLens-foreground)' }}>
<div style={{ flex: 'auto' }}>Aria snapshot</div>
<ToolbarButton icon='files' title='Copy snapshot' onClick={() => {
copy(highlightedElement.ariaSnapshot || '');
}}></ToolbarButton>
</div>
<div style={{ height: 150 }}>
<CodeMirrorWrapper <CodeMirrorWrapper
text={highlightedElement.ariaSnapshot || ''} text={highlightedElement.ariaSnapshot || ''}
language='yaml' language='yaml'
@ -65,10 +76,5 @@ export const InspectorTab: React.FunctionComponent<{
highlight={ariaSnapshotErrors} highlight={ariaSnapshotErrors}
onChange={onAriaEditorChange} /> onChange={onAriaEditorChange} />
</div> </div>
<div style={{ position: 'absolute', right: 5, top: 5 }}>
<ToolbarButton icon='files' title='Copy locator' onClick={() => {
copy(highlightedElement.locator || '');
}}></ToolbarButton>
</div>
</div>; </div>;
}; };