chore: minor trace viewer ui tweaks (#19979)

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

@@ -57,13 +57,14 @@
   white-space: nowrap;
 }
 
-.call-line__copy-icon {
+.copy-icon {
-  visibility: hidden;
+  display: none;
   margin-right: 4px;
 }
 
-.call-line:hover .call-line__copy-icon {
+.call-line:hover .copy-icon {
-  visibility: visible;
+  display: block;
+  cursor: pointer;
 }
 
 .call-value {

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

@@ -84,9 +84,7 @@ function renderProperty(property: Property, key: string) {
     <div key={key} className='call-line'>
       {property.name}: <span className={`call-value ${property.type}`} title={property.text}>{text}</span>
       { ['string', 'number', 'object', 'locator'].includes(property.type) &&
-        <span className='call-line__copy-icon'>
+        <CopyToClipboard value={property.text} />
-          <CopyToClipboard value={property.text} />
-        </span>
       }
     </div>
   );

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

@@ -1,3 +1,19 @@
+/*
+  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.
+*/
+
 .codicon-check {
   color: var(--green);
 }

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

@@ -17,27 +17,21 @@
 import * as React from 'react';
 import './copyToClipboard.css';
 
-const TIMEOUT = 3000;
-const DEFAULT_ICON = 'codicon-clippy';
-const COPIED_ICON = 'codicon-check';
-const FAILED_ICON = 'codicon-close';
-
 export const CopyToClipboard: React.FunctionComponent<{
   value: string,
 }> = ({ value }) => {
-  const [iconClassName, setIconClassName] = React.useState(DEFAULT_ICON);
+  const [iconClassName, setIconClassName] = React.useState('codicon-clippy');
 
   const handleCopy = React.useCallback(() => {
     navigator.clipboard.writeText(value).then(() => {
-      setIconClassName(COPIED_ICON);
+      setIconClassName('codicon-check');
       setTimeout(() => {
-        setIconClassName(DEFAULT_ICON);
+        setIconClassName('codicon-clippy');
-      }, TIMEOUT);
+      }, 3000);
     }, () => {
-      setIconClassName(FAILED_ICON);
+      setIconClassName('codicon-close');
     });
 
   }, [value]);
-
+  return <span className={`copy-icon codicon ${iconClassName}`} onClick={handleCopy}/>;
-  return <span className={`codicon ${iconClassName}`} onClick={handleCopy}/>;
 };