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

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

@@ -0,0 +1,25 @@
+/*
+  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;
+  margin: 8px 8px 8px 0px;
+  width: 120px;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+}

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,40 @@ 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 [copied, setCopied] = React.useState<boolean>();
+
+  const handleCopy = React.useCallback(() => {
+    const valuePromise = typeof value === 'function' ? value() : Promise.resolve(value);
+    valuePromise.then(value => {
+      navigator.clipboard.writeText(value).then(() => {
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(undefined);
+        }, 3000);
+      }, () => {
+        setCopied(false);
+      });
+    }, () => {
+      setCopied(false);
+    });
+
+  }, [value]);
+
+  return <ToolbarButton title={description ? description : 'Copy'} onClick={handleCopy} className='copy-to-clipboard-text-button'>
+    {copied === true && 'Copied!'}
+    {copied === false && 'Copy failed.'}
+    {copied === undefined && description}
+  </ToolbarButton>;
+};

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

@@ -54,10 +54,6 @@
   margin-left: 10px;
 }
 
-.network-request-details-copy button {
-  border-radius: 4px
-}
-
 .network-font-preview {
   font-family: font-preview;
   font-size: 30px;

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>;