feat(trace-viewer) add copy to clipboard on the Source > Stacktrace tab

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

@@ -18,7 +18,8 @@ import * as React from 'react';
 
 export const CopyToClipboard: React.FunctionComponent<{
   value: string,
-}> = ({ value }) => {
+  description?: string,
+}> = ({ value, description }) => {
   const [iconClassName, setIconClassName] = React.useState('codicon-clippy');
 
   const handleCopy = React.useCallback(() => {
@@ -32,5 +33,5 @@ export const CopyToClipboard: React.FunctionComponent<{
     });
 
   }, [value]);
-  return <span className={`copy-icon codicon ${iconClassName}`} onClick={handleCopy}/>;
-};
+  return <span title={description ? description : 'Copy'} className={`copy-icon codicon ${iconClassName}`} onClick={handleCopy}/>;
+};

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

@@ -30,3 +30,17 @@
 .stack-trace-frame-line {
   flex: none;
 }
+
+.stack-trace-copy-to-clipboard {
+  padding: 0 5px;
+}
+
+.copy-icon {
+  display: none;
+  margin-right: 4px;
+}
+
+.list-view-entry:hover .copy-icon {
+  display: block;
+  cursor: pointer;
+}

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

@@ -18,6 +18,7 @@ import * as React from 'react';
 import './stackTrace.css';
 import { ListView } from '@web/components/listView';
 import type { StackFrame } from '@protocol/channels';
+import { CopyToClipboard } from './copyToClipboard';
 
 const StackFrameListView = ListView<StackFrame>;
 
@@ -27,23 +28,31 @@ export const StackTraceView: React.FunctionComponent<{
   setSelectedFrame: (index: number) => void
 }> = ({ stack, setSelectedFrame, selectedFrame }) => {
   const frames = stack || [];
+  const getFileName = (frame: StackFrame) => {
+    const pathSep = frame.file[1] === ':' ? '\\' : '/';
+    const fileName = frame.file.split(pathSep).pop();
+    return fileName;
+  };
+
   return <StackFrameListView
     name='stack-trace'
     items={frames}
     selectedItem={frames[selectedFrame]}
     render={frame => {
-      const pathSep = frame.file[1] === ':' ? '\\' : '/';
       return <>
         <span className='stack-trace-frame-function'>
           {frame.function || '(anonymous)'}
         </span>
         <span className='stack-trace-frame-location'>
-          {frame.file.split(pathSep).pop()}
+          {getFileName(frame)}
         </span>
         <span className='stack-trace-frame-line'>
           {':' + frame.line}
         </span>
+        <span className='stack-trace-copy-to-clipboard'>
+          <CopyToClipboard description='Copy filename' value={`${getFileName(frame)}:${frame.line}`}/>
+        </span>
       </>;
     }}
     onSelected={frame => setSelectedFrame(frames.indexOf(frame))} />;
-};
+};