fix(ui): turn "copy as fetch" into text button (#32858)

Turns the "copy as fetch" text with a copy button into a text button, as
discussed in the meeting.


https://github.com/user-attachments/assets/01f72f0b-e3f2-440e-a75d-33385aabeec4

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

@@ -0,0 +1,22 @@
+/*
+  Copyright (c) Microsoft Corporation.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+.copy-to-clipboard-text-button {
+  background-color: var(--vscode-editor-inactiveSelectionBackground);
+  border: none;
+  padding: 4px 12px;
+  cursor: pointer;
+}

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

@@ -16,6 +16,7 @@
 
 import * as React from 'react';
 import { ToolbarButton } from '@web/components/toolbarButton';
+import './copyToClipboard.css';
 
 export const CopyToClipboard: React.FunctionComponent<{
   value: string | (() => Promise<string>),
@@ -34,8 +35,22 @@ export const CopyToClipboard: React.FunctionComponent<{
       }, () => {
         setIcon('close');
       });
+    }, () => {
+      setIcon('close');
     });
 
   }, [value]);
   return <ToolbarButton title={description ? description : 'Copy'} icon={icon} onClick={handleCopy}/>;
 };
+
+export const CopyToClipboardTextButton: React.FunctionComponent<{
+  value: string | (() => Promise<string>),
+  description: string,
+}> = ({ value, description }) => {
+  const handleCopy = React.useCallback(async () => {
+    const valueToCopy = typeof value === 'function' ? await value() : value;
+    await navigator.clipboard.writeText(valueToCopy);
+  }, [value]);
+
+  return <ToolbarButton title={description} onClick={handleCopy} className='copy-to-clipboard-text-button'>{description}</ToolbarButton>;
+};

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

@@ -51,11 +51,8 @@
 
 .network-request-details-copy {
   display: flex;
-  margin-left: 10px;
-}
-
-.network-request-details-copy button {
-  border-radius: 4px
+  margin: 8px 10px;
+  gap: 8px;
 }
 
 .network-font-preview {

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

@@ -21,7 +21,7 @@ import { TabbedPane } from '@web/components/tabbedPane';
 import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
 import { ToolbarButton } from '@web/components/toolbarButton';
 import { generateCurlCommand, generateFetchCall } from '../third_party/devtools';
-import { CopyToClipboard } from './copyToClipboard';
+import { CopyToClipboardTextButton } from './copyToClipboard';
 
 export const NetworkResourceDetails: React.FunctionComponent<{
   resource: ResourceSnapshot;
@@ -92,13 +92,12 @@ const RequestTab: React.FunctionComponent<{
     </> : null}
     <div className='network-request-details-header'>Request Headers</div>
     <div className='network-request-details-headers'>{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
-    <div className='network-request-details-header'>Copy Request</div>
+
     <div className='network-request-details-copy'>
-      As cURL: <CopyToClipboard description='Copy as cURL' value={() => generateCurlCommand(resource)}/>
-    </div>
-    <div className='network-request-details-copy'>
-      As Fetch: <CopyToClipboard description='Copy as Fetch' value={() => generateFetchCall(resource)}/>
+      <CopyToClipboardTextButton description='Copy as cURL' value={() => generateCurlCommand(resource)} />
+      <CopyToClipboardTextButton description='Copy as Fetch' value={() => generateFetchCall(resource)} />
     </div>
+
     {requestBody && <div className='network-request-details-header'>Request Body</div>}
     {requestBody && <CodeMirrorWrapper text={requestBody.text} mimeType={requestBody.mimeType} readOnly lineNumbers={true}/>}
   </div>;