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

chore(trace-viewer): grid view z-index, source column in resource details (#31094)

Browse source 
New look for multiple contexts:

<img width="585" alt="image"
src="https://github.com/microsoft/playwright/assets/9798949/02dc5f54-0946-40a9-9459-942c4362a32e">
This commit is contained in:
Yury Semikhatsky 2024-05-30 14:45:33 -07:00 committed by GitHub
parent 4c020c9861
commit 9a11be3305
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/trace-viewer/src/ui/networkTab.tsx
View file

@ -76,7 +76,7 @@ export const NetworkTab: React.FunctionComponent<{
return { renderedEntries }; return { renderedEntries };
}, [networkModel.resources, networkModel.contextIdMap, sorting, boundaries]); }, [networkModel.resources, networkModel.contextIdMap, sorting, boundaries]);
const [widths, setWidths] = React.useState<Map<ColumnName, number>>(() => { const [columnWidths, setColumnWidths] = React.useState<Map<ColumnName, number>>(() => {
return new Map(allColumns().map(column => [column, columnWidth(column)])); return new Map(allColumns().map(column => [column, columnWidth(column)]));
}); });
@ -91,8 +91,8 @@ export const NetworkTab: React.FunctionComponent<{
onHighlighted={item => onEntryHovered(item?.resource)} onHighlighted={item => onEntryHovered(item?.resource)}
columns={visibleColumns(!!selectedEntry, renderedEntries)} columns={visibleColumns(!!selectedEntry, renderedEntries)}
columnTitle={columnTitle} columnTitle={columnTitle}
columnWidths={widths} columnWidths={columnWidths}
setColumnWidths={setWidths} setColumnWidths={setColumnWidths}
isError={item => item.status.code >= 400} isError={item => item.status.code >= 400}
isInfo={item => !!item.route} isInfo={item => !!item.route}
render={(item, column) => renderCell(item, column)} render={(item, column) => renderCell(item, column)}
@ -101,7 +101,7 @@ export const NetworkTab: React.FunctionComponent<{
/>; />;
return <> return <>
{!selectedEntry && grid} {!selectedEntry && grid}
{selectedEntry && <SplitView sidebarSize={widths.get('name')!} sidebarIsFirst={true} orientation='horizontal' settingName='networkResourceDetails'> {selectedEntry && <SplitView sidebarSize={columnWidths.get('name')!} sidebarIsFirst={true} orientation='horizontal' settingName='networkResourceDetails'>
<NetworkResourceDetails resource={selectedEntry.resource} onClose={() => setSelectedEntry(undefined)} /> <NetworkResourceDetails resource={selectedEntry.resource} onClose={() => setSelectedEntry(undefined)} />
{grid} {grid}
</SplitView>} </SplitView>}
@ -145,8 +145,12 @@ const columnWidth = (column: ColumnName) => {
}; };
function visibleColumns(entrySelected: boolean, renderedEntries: RenderedEntry[]): (keyof RenderedEntry)[] { function visibleColumns(entrySelected: boolean, renderedEntries: RenderedEntry[]): (keyof RenderedEntry)[] {
if (entrySelected) if (entrySelected) {
return ['name']; const columns: (keyof RenderedEntry)[] = ['name'];
if (hasMultipleContexts(renderedEntries))
columns.unshift('contextId');
return columns;
}
let columns: (keyof RenderedEntry)[] = allColumns(); let columns: (keyof RenderedEntry)[] = allColumns();
if (!hasMultipleContexts(renderedEntries)) if (!hasMultipleContexts(renderedEntries))
columns = columns.filter(name => name !== 'contextId'); columns = columns.filter(name => name !== 'contextId');

4
packages/web/src/components/gridView.tsx
View file

@ -49,7 +49,7 @@ export function GridView<T>(model: GridViewProps<T>) {
setOffsets(offsets); setOffsets(offsets);
}, [model.columns, model.columnWidths]); }, [model.columns, model.columnWidths]);
function updateWidths(offsets: number[]) { function updateColumnWidths(offsets: number[]) {
const widths = new Map(model.columnWidths.entries()); const widths = new Map(model.columnWidths.entries());
for (let i = 0; i < offsets.length; ++i) { for (let i = 0; i < offsets.length; ++i) {
const width = offsets[i] - (offsets[i - 1] || 0); const width = offsets[i] - (offsets[i - 1] || 0);
@ -67,7 +67,7 @@ export function GridView<T>(model: GridViewProps<T>) {
<ResizeView <ResizeView
orientation={'horizontal'} orientation={'horizontal'}
offsets={offsets} offsets={offsets}
setOffsets={updateWidths} setOffsets={updateColumnWidths}
resizerColor='var(--vscode-panel-border)' resizerColor='var(--vscode-panel-border)'
resizerWidth={1} resizerWidth={1}
minColumnWidth={25}> minColumnWidth={25}>

2
packages/web/src/shared/resizeView.tsx
View file

@ -58,7 +58,7 @@ export const ResizeView: React.FC<{
right: 0, right: 0,
bottom: 0, bottom: 0,
left: -(7 - resizerWidth) / 2, left: -(7 - resizerWidth) / 2,
zIndex: 1000, zIndex: 100, // Above the content, but below the film strip hover.
pointerEvents: 'none', pointerEvents: 'none',
}} }}
ref={ref}> ref={ref}>