From 0217defab461e0547b858ebc8411a89a9cfb9374 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Wed, 31 Jul 2024 16:37:16 -0700
Subject: [PATCH] chore(trace-viewer): do not shrink metadata view (#31938)

Avoids the following effect:

![image](https://github.com/user-attachments/assets/694de773-acc0-4266-87f2-eab67a3c7ce2)
---
 packages/trace-viewer/src/ui/metadataView.tsx | 3 ++-
 tests/config/traceViewerFixtures.ts           | 2 +-
 tests/library/trace-viewer.spec.ts            | 2 +-
 tests/playwright-test/reporter-html.spec.ts   | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/trace-viewer/src/ui/metadataView.tsx b/packages/trace-viewer/src/ui/metadataView.tsx
index 5b50a7f081..c1802a4b4d 100644
--- a/packages/trace-viewer/src/ui/metadataView.tsx
+++ b/packages/trace-viewer/src/ui/metadataView.tsx
@@ -24,7 +24,8 @@ export const MetadataView: React.FunctionComponent<{
 }> = ({ model }) => {
   if (!model)
     return <></>;
-  return <div className='metadata-view vbox'>
+
+  return <div data-testid='metadata-view' className='vbox' style={{ flexShrink: 0 }}>
     <div className='call-section' style={{ paddingTop: 2 }}>Time</div>
     {!!model.wallTime && <div className='call-line'>start time:<span className='call-value datetime' title={new Date(model.wallTime).toLocaleString()}>{new Date(model.wallTime).toLocaleString()}</span></div>}
     <div className='call-line'>duration:<span className='call-value number' title={msToString(model.endTime - model.startTime)}>{msToString(model.endTime - model.startTime)}</span></div>
diff --git a/tests/config/traceViewerFixtures.ts b/tests/config/traceViewerFixtures.ts
index b389f0c07c..7044e30a29 100644
--- a/tests/config/traceViewerFixtures.ts
+++ b/tests/config/traceViewerFixtures.ts
@@ -58,7 +58,7 @@ class TraceViewerPage {
     this.stackFrames = page.getByTestId('stack-trace-list').locator('.list-view-entry');
     this.networkRequests = page.getByTestId('network-list').locator('.list-view-entry');
     this.snapshotContainer = page.locator('.snapshot-container iframe.snapshot-visible[name=snapshot]');
-    this.metadataTab = page.locator('.metadata-view');
+    this.metadataTab = page.getByTestId('metadata-view');
   }
 
   async actionIconsText(action: string) {
diff --git a/tests/library/trace-viewer.spec.ts b/tests/library/trace-viewer.spec.ts
index 539c153df6..6e79ccf0e4 100644
--- a/tests/library/trace-viewer.spec.ts
+++ b/tests/library/trace-viewer.spec.ts
@@ -804,7 +804,7 @@ test('should follow redirects', async ({ page, runAndTrace, server, asset }) =>
 test('should include metainfo', async ({ showTraceViewer }) => {
   const traceViewer = await showTraceViewer([traceFile]);
   await traceViewer.page.locator('text=Metadata').click();
-  const callLine = traceViewer.page.locator('.metadata-view .call-line');
+  const callLine = traceViewer.metadataTab.locator('.call-line');
   await expect(callLine.getByText('start time')).toHaveText(/start time:[\d/,: ]+/);
   await expect(callLine.getByText('duration')).toHaveText(/duration:[\dms]+/);
   await expect(callLine.getByText('engine')).toHaveText(/engine:[\w]+/);
diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts
index e416cd05c1..768cd28fc2 100644
--- a/tests/playwright-test/reporter-html.spec.ts
+++ b/tests/playwright-test/reporter-html.spec.ts
@@ -83,7 +83,7 @@ for (const useIntermediateMergeReport of [false] as const) {
       await expect(page.getByTestId('overall-duration'), 'should contain humanized total time with at most 1 decimal place').toContainText(/^Total time: \d+(\.\d)?(ms|s|m)$/);
       await expect(page.getByTestId('project-name'), 'should contain project name').toContainText('project-name');
 
-      await expect(page.locator('.metadata-view')).not.toBeVisible();
+      await expect(page.getByTestId('metadata-view')).not.toBeVisible();
     });
 
     test('should allow navigating to testId=test.id', async ({ runInlineTest, page, showReport }) => {