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

chore: locator tab polish (#26568)

Browse source
This commit is contained in:
Pavel Feldman 2023-08-21 10:59:49 -07:00 committed by GitHub
parent f83d81956d
commit 2b16860e06
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -27,13 +27,16 @@ 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 }) => {
return <div className='vbox'> return <div className='vbox' style={{ backgroundColor: 'var(--vscode-sideBar-background)' }}>
<CodeMirrorWrapper text={highlightedLocator} language={sdkLanguage} focusOnChange={true} wrapLines={true} onChange={text => { <div style={{ margin: '10px 0px 10px 10px', color: 'var(--vscode-editorCodeLens-foreground)', flex: 'none' }}>Locator</div>
// Updating text needs to go first - react can squeeze a render between the state updates. <div style={{ margin: '0 10px 10px', flex: 'auto' }}>
setHighlightedLocator(text); <CodeMirrorWrapper text={highlightedLocator} language={sdkLanguage} focusOnChange={true} isFocused={true} wrapLines={true} onChange={text => {
setIsInspecting(false); // Updating text needs to go first - react can squeeze a render between the state updates.
}}></CodeMirrorWrapper> setHighlightedLocator(text);
<div style={{ position: 'absolute', right: '0', top: '0' }}> setIsInspecting(false);
}}></CodeMirrorWrapper>
</div>
<div style={{ position: 'absolute', right: 5, top: 5 }}>
<ToolbarButton icon='files' title='Copy locator' onClick={() => { <ToolbarButton icon='files' title='Copy locator' onClick={() => {
copy(highlightedLocator); copy(highlightedLocator);
}}></ToolbarButton> }}></ToolbarButton>

25
packages/trace-viewer/src/ui/workbench.tsx
View file

@ -68,17 +68,23 @@ export const Workbench: React.FunctionComponent<{
setSelectedAction(failedAction); setSelectedAction(failedAction);
else if (model?.actions.length) else if (model?.actions.length)
setSelectedAction(model.actions[model.actions.length - 1]); setSelectedAction(model.actions[model.actions.length - 1]);
}, [model, selectedAction, setSelectedAction, setSelectedPropertiesTab, initialSelection]); }, [model, selectedAction, setSelectedAction, initialSelection]);
const onActionSelected = React.useCallback((action: ActionTraceEventInContext) => { const onActionSelected = React.useCallback((action: ActionTraceEventInContext) => {
setSelectedAction(action); setSelectedAction(action);
onSelectionChanged?.(action); onSelectionChanged?.(action);
}, [setSelectedAction, onSelectionChanged]); }, [setSelectedAction, onSelectionChanged]);
const selectPropertiesTab = React.useCallback((tab: string) => {
setSelectedPropertiesTab(tab);
if (tab !== 'inspector')
setIsInspecting(false);
}, []);
const locatorPicked = React.useCallback((locator: string) => { const locatorPicked = React.useCallback((locator: string) => {
setHighlightedLocator(locator); setHighlightedLocator(locator);
setSelectedPropertiesTab('inspector'); selectPropertiesTab('inspector');
}, []); }, [selectPropertiesTab]);
const sdkLanguage = model?.sdkLanguage || 'javascript'; const sdkLanguage = model?.sdkLanguage || 'javascript';
@ -171,11 +177,16 @@ export const Workbench: React.FunctionComponent<{
<TabbedPane <TabbedPane
tabs={tabs} tabs={tabs}
selectedTab={selectedPropertiesTab} selectedTab={selectedPropertiesTab}
setSelectedTab={setSelectedPropertiesTab} setSelectedTab={selectPropertiesTab}
leftToolbar={[ leftToolbar={[
<ToolbarButton icon='microscope' title='Pick locator' toggled={isInspecting} onClick={() => { <ToolbarButton title='Pick locator' toggled={isInspecting} onClick={() => {
if (!isInspecting)
selectPropertiesTab('inspector');
setIsInspecting(!isInspecting); setIsInspecting(!isInspecting);
}}></ToolbarButton> }}><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M450-42v-75q-137-14-228-105T117-450H42v-60h75q14-137 105-228t228-105v-75h60v75q137 14 228 105t105 228h75v60h-75q-14 137-105 228T510-117v75h-60Zm30-134q125 0 214.5-89.5T784-480q0-125-89.5-214.5T480-784q-125 0-214.5 89.5T176-480q0 125 89.5 214.5T480-176Zm0-154q-63 0-106.5-43.5T330-480q0-63 43.5-106.5T480-630q63 0 106.5 43.5T630-480q0 63-43.5 106.5T480-330Zm0-60q38 0 64-26t26-64q0-38-26-64t-64-26q-38 0-64 26t-26 64q0 38 26 64t64 26Zm0-90Z"/>
</svg>
</ToolbarButton>
]} ]}
/> />
</SplitView> </SplitView>
@ -191,7 +202,7 @@ export const Workbench: React.FunctionComponent<{
selectedTime={selectedTime} selectedTime={selectedTime}
onSelected={onActionSelected} onSelected={onActionSelected}
onHighlighted={setHighlightedAction} onHighlighted={setHighlightedAction}
revealConsole={() => setSelectedPropertiesTab('console')} revealConsole={() => selectPropertiesTab('console')}
isLive={isLive} isLive={isLive}
/> />
}, },

6
packages/web/src/components/codeMirrorWrapper.tsx
View file

@ -36,6 +36,7 @@ export interface SourceProps {
highlight?: SourceHighlight[]; highlight?: SourceHighlight[];
revealLine?: number; revealLine?: number;
lineNumbers?: boolean; lineNumbers?: boolean;
isFocused?: boolean;
focusOnChange?: boolean; focusOnChange?: boolean;
wrapLines?: boolean; wrapLines?: boolean;
onChange?: (text: string) => void; onChange?: (text: string) => void;
@ -48,6 +49,7 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
highlight, highlight,
revealLine, revealLine,
lineNumbers, lineNumbers,
isFocused,
focusOnChange, focusOnChange,
wrapLines, wrapLines,
onChange, onChange,
@ -94,10 +96,12 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
lineWrapping: wrapLines, lineWrapping: wrapLines,
}); });
codemirrorRef.current = { cm }; codemirrorRef.current = { cm };
if (isFocused)
cm.focus();
setCodemirror(cm); setCodemirror(cm);
return cm; return cm;
})(); })();
}, [modulePromise, codemirror, codemirrorElement, language, lineNumbers, wrapLines, readOnly]); }, [modulePromise, codemirror, codemirrorElement, language, lineNumbers, wrapLines, readOnly, isFocused]);
React.useEffect(() => { React.useEffect(() => {
if (codemirrorRef.current) if (codemirrorRef.current)