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

New look for multiple contexts:

<img width="585" alt="image"
src="https://github.com/microsoft/playwright/assets/9798949/02dc5f54-0946-40a9-9459-942c4362a32e">

packages/trace-viewer/src/ui/networkTab.tsx

@@ -76,7 +76,7 @@ export const NetworkTab: React.FunctionComponent<{
     return { renderedEntries };
   }, [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)]));
   });
 
@@ -91,8 +91,8 @@ export const NetworkTab: React.FunctionComponent<{
     onHighlighted={item => onEntryHovered(item?.resource)}
     columns={visibleColumns(!!selectedEntry, renderedEntries)}
     columnTitle={columnTitle}
-    columnWidths={widths}
-    setColumnWidths={setWidths}
+    columnWidths={columnWidths}
+    setColumnWidths={setColumnWidths}
     isError={item => item.status.code >= 400}
     isInfo={item => !!item.route}
     render={(item, column) => renderCell(item, column)}
@@ -101,7 +101,7 @@ export const NetworkTab: React.FunctionComponent<{
   />;
   return <>
     {!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)} />
       {grid}
     </SplitView>}
@@ -145,8 +145,12 @@ const columnWidth = (column: ColumnName) => {
 };
 
 function visibleColumns(entrySelected: boolean, renderedEntries: RenderedEntry[]): (keyof RenderedEntry)[] {
-  if (entrySelected)
-    return ['name'];
+  if (entrySelected) {
+    const columns: (keyof RenderedEntry)[] = ['name'];
+    if (hasMultipleContexts(renderedEntries))
+      columns.unshift('contextId');
+    return columns;
+  }
   let columns: (keyof RenderedEntry)[] = allColumns();
   if (!hasMultipleContexts(renderedEntries))
     columns = columns.filter(name => name !== 'contextId');

packages/web/src/components/gridView.tsx

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

packages/web/src/shared/resizeView.tsx

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