From 3c8bc0b2f912351aea0b78bd0f6ef452a26af519 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Mon, 9 Jan 2023 19:51:33 -0800
Subject: [PATCH] chore: minor trace viewer ui tweaks (#19979)

---
 packages/trace-viewer/src/ui/callTab.css       |  9 +++++----
 packages/trace-viewer/src/ui/callTab.tsx       |  4 +---
 .../trace-viewer/src/ui/copyToClipboard.css    | 16 ++++++++++++++++
 .../trace-viewer/src/ui/copyToClipboard.tsx    | 18 ++++++------------
 4 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/packages/trace-viewer/src/ui/callTab.css b/packages/trace-viewer/src/ui/callTab.css
index 0dd31c912b..7ed79482eb 100644
--- a/packages/trace-viewer/src/ui/callTab.css
+++ b/packages/trace-viewer/src/ui/callTab.css
@@ -57,13 +57,14 @@
   white-space: nowrap;
 }
 
-.call-line__copy-icon {
-  visibility: hidden;
+.copy-icon {
+  display: none;
   margin-right: 4px;
 }
 
-.call-line:hover .call-line__copy-icon {
-  visibility: visible;
+.call-line:hover .copy-icon {
+  display: block;
+  cursor: pointer;
 }
 
 .call-value {
diff --git a/packages/trace-viewer/src/ui/callTab.tsx b/packages/trace-viewer/src/ui/callTab.tsx
index 01b2443dc5..0a6c563cdd 100644
--- a/packages/trace-viewer/src/ui/callTab.tsx
+++ b/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} />
-        </span>
+        <CopyToClipboard value={property.text} />
       }
     </div>
   );
diff --git a/packages/trace-viewer/src/ui/copyToClipboard.css b/packages/trace-viewer/src/ui/copyToClipboard.css
index 2234a4bfa6..dc08d49410 100644
--- a/packages/trace-viewer/src/ui/copyToClipboard.css
+++ b/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);
 }
diff --git a/packages/trace-viewer/src/ui/copyToClipboard.tsx b/packages/trace-viewer/src/ui/copyToClipboard.tsx
index b8dc6d59ee..d8a61470d7 100644
--- a/packages/trace-viewer/src/ui/copyToClipboard.tsx
+++ b/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);
-      }, TIMEOUT);
+        setIconClassName('codicon-clippy');
+      }, 3000);
     }, () => {
-      setIconClassName(FAILED_ICON);
+      setIconClassName('codicon-close');
     });
 
   }, [value]);
-
-  return <span className={`codicon ${iconClassName}`} onClick={handleCopy}/>;
+  return <span className={`copy-icon codicon ${iconClassName}`} onClick={handleCopy}/>;
 };