feat(trace): Pin copy address button to the right in the address bar (#37802)

Author: cpAdm

packages/trace-viewer/src/ui/browserFrame.css

@@ -29,20 +29,16 @@
   font: 400 16px Arial,sans-serif;
   margin: 0 16px 0 8px;
   padding: 5px 15px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   display: flex;
   align-items: center;
   height: 28px;
 }
 
-.browser-frame-address-bar > button {
-  visibility: hidden;
-}
-
-.browser-frame-address-bar:hover > button {
-  visibility: visible;
+.browser-frame-address {
+  flex: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .browser-frame-menu-bar {

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

@@ -31,7 +31,7 @@ export const BrowserFrame: React.FunctionComponent<{
       className='browser-frame-address-bar'
       title={url || 'about:blank'}
     >
-      {url || 'about:blank'}
+      <span className='browser-frame-address'>{url || 'about:blank'}</span>
       {url && (
         <CopyToClipboard value={url} />
       )}

tests/library/trace-viewer.spec.ts

@@ -506,20 +506,17 @@ test('should have network request overrides 2', async ({ page, server, runAndTra
   await expect.soft(traceViewer.networkRequests).toContainText([/script.jsGET200application\/javascript.*continued/]);
 });
 
-test('should show snapshot URL', async ({ page, runAndTrace, server }) => {
+test('should show snapshot URL and copy button', async ({ page, runAndTrace, server }) => {
   const traceViewer = await runAndTrace(async () => {
     await page.goto(server.EMPTY_PAGE);
     await page.evaluate('2+2');
   });
   await traceViewer.snapshotFrame('Evaluate');
-  const browserFrameAddressBarLocator = traceViewer.page.locator('.browser-frame-address-bar');
-  await expect(browserFrameAddressBarLocator).toHaveText(server.EMPTY_PAGE);
-  const copySelectorLocator = browserFrameAddressBarLocator.getByRole('button', { name: 'Copy' });
-  await expect(copySelectorLocator).toBeHidden();
-  await browserFrameAddressBarLocator.hover();
-  await expect(copySelectorLocator).toBeVisible();
+  const addressBar = traceViewer.page.locator('.browser-frame-address-bar');
+  await expect(addressBar).toHaveText(server.EMPTY_PAGE);
+
   await traceViewer.page.context().grantPermissions(['clipboard-read', 'clipboard-write']);
-  await copySelectorLocator.click();
+  await addressBar.getByRole('button', { name: 'Copy' }).click();
   expect(await traceViewer.page.evaluate(() => navigator.clipboard.readText())).toBe(server.EMPTY_PAGE);
 });