fix(trace-viewer): keep selected action in view after "Show all"

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

@@ -102,8 +102,14 @@ export const ActionList: React.FC<ActionListProps> = ({
     onHighlighted?.(item?.action);
   }, [onHighlighted]);
 
+  const [showAllCounter, setShowAllCounter] = React.useState<number>();
+  const onShowAll = React.useCallback(() => {
+    setSelectedTime(undefined);
+    setShowAllCounter(n => (n ?? 0) + 1);
+  }, [setSelectedTime]);
+
   return <div className='vbox action-list-container'>
-    {selectedTime && <div className='action-list-show-all' onClick={() => setSelectedTime(undefined)}><span className='codicon codicon-triangle-left'></span>Show all</div>}
+    {selectedTime && <div className='action-list-show-all' onClick={onShowAll}><span className='codicon codicon-triangle-left'></span>Show all</div>}
     <ActionTreeView
       name='actions'
       rootItem={rootItem}
@@ -117,6 +123,7 @@ export const ActionList: React.FC<ActionListProps> = ({
       isVisible={isVisible}
       render={render}
       autoExpandDepth={actionFilterText?.trim() ? 5 : 0}
+      revealSelectedKey={showAllCounter}
     />
   </div>;
 };

packages/web/src/components/treeView.tsx

@@ -45,6 +45,7 @@ export type TreeViewProps<T> = {
   treeState: TreeState,
   setTreeState: (treeState: TreeState) => void,
   autoExpandDepth?: number,
+  revealSelectedKey?: number,
 };
 
 const scrollPositions = new Map<string, number>();
@@ -66,6 +67,7 @@ export function TreeView<T extends TreeItem>({
   noItemsMessage,
   dataTestId,
   autoExpandDepth,
+  revealSelectedKey,
 }: TreeViewProps<T>) {
   const treeItems = React.useMemo(() => {
     return indexTree<T>(rootItem, selectedItem, treeState.expandedItems, autoExpandDepth || 0, isVisible);
@@ -94,6 +96,14 @@ export function TreeView<T extends TreeItem>({
       itemListRef.current.scrollTop = scrollPositions.get(name) || 0;
   }, [name]);
 
+  React.useEffect(() => {
+    if (revealSelectedKey === undefined)
+      return;
+    const selectedEl = itemListRef.current?.querySelector('[aria-selected="true"]');
+    if (selectedEl)
+      scrollIntoViewIfNeeded(selectedEl);
+  }, [revealSelectedKey]);
+
   const toggleExpanded = React.useCallback((item: T) => {
     const { expanded } = treeItems.get(item)!;
     if (expanded) {

tests/library/trace-viewer.spec.ts

@@ -206,6 +206,29 @@ test('should filter actions by text', async ({ showTraceViewer }) => {
   await expect(traceViewer.actionTitles).toHaveCount(fullCount);
 });
 
+test('should keep selected action in view after Show all', async ({ runAndTrace, page }) => {
+  test.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/40808' });
+  const traceViewer = await runAndTrace(async () => {
+    await page.setContent('<div>hello</div>');
+    for (let i = 0; i < 50; i++)
+      await page.evaluate(x => x, i);
+  });
+
+  const treeItems = traceViewer.actionsTree.getByRole('treeitem');
+  const deepAction = treeItems.filter({ hasText: 'Evaluate' }).nth(40);
+  await deepAction.scrollIntoViewIfNeeded();
+  await deepAction.dblclick();
+
+  const showAll = traceViewer.page.locator('.action-list-show-all');
+  await expect(showAll).toBeVisible();
+  await showAll.click();
+  await expect(showAll).toBeHidden();
+
+  const selected = traceViewer.actionsTree.locator('[role="treeitem"][aria-selected="true"]');
+  await expect(selected).toHaveCount(1);
+  await expect(selected).toBeInViewport();
+});
+
 test('should open uncompressed trace directory', async ({ showTraceViewer }) => {
   const traceDir = test.info().outputPath('unzipped-trace');
   await extractZip(traceFile, { dir: traceDir });