chore(trace-viewer) move copy filename to clipboard directly inline with the source tab file name

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

@@ -31,3 +31,13 @@
   box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px;
   z-index: 10;
 }
+
+.copy-icon.codicon {
+  display: block;
+  cursor: pointer;
+}
+
+.source-copy-to-clipboard {
+  display: block;
+  padding-left: 4px;
+}

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

@@ -23,6 +23,7 @@ import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
 import type { SourceHighlight } from '@web/components/codeMirrorWrapper';
 import type { SourceLocation, SourceModel } from './modelUtil';
 import type { StackFrame } from '@protocol/channels';
+import { CopyToClipboard } from './copyToClipboard';
 
 export const SourceTab: React.FunctionComponent<{
   stack: StackFrame[] | undefined,
@@ -80,9 +81,24 @@ export const SourceTab: React.FunctionComponent<{
 
   const showStackFrames = (stack?.length ?? 0) > 1;
 
+  const getFileName = (fullPath?: string, lineNum?: number) => {
+    if (!fullPath)
+      return '';
+    const pathSep = fullPath?.includes('/') ? '/' : '\\';
+    const fileName = fullPath?.split(pathSep).pop() ?? '';
+    return lineNum ? `${fileName}:${lineNum}` : fileName;
+  };
+
   return <SplitView sidebarSize={200} orientation={stackFrameLocation === 'bottom' ? 'vertical' : 'horizontal'} sidebarHidden={!showStackFrames}>
     <div className='vbox' data-testid='source-code'>
-      {fileName && <div className='source-tab-file-name'>{fileName}</div>}
+      {fileName && (
+        <div className='source-tab-file-name'>
+          {fileName}
+          <span className='source-copy-to-clipboard'>
+            <CopyToClipboard description='Copy filename' value={getFileName(fileName, targetLine)}/>
+          </span>
+        </div>
+      )}
       <CodeMirrorWrapper text={source.content || ''} language='javascript' highlight={highlight} revealLine={targetLine} readOnly={true} lineNumbers={true} />
     </div>
     <StackTraceView stack={stack} selectedFrame={selectedFrame} setSelectedFrame={setSelectedFrame} />

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

@@ -29,21 +29,4 @@
 
 .stack-trace-frame-line {
   flex: none;
-}
-
-.stack-trace-copy-to-clipboard {
-  display: block;
-  width: 20px;
-  margin-right: 4px;
-  padding: 0 2px;
-}
-
-.copy-icon {
-  display: none;
-  margin-right: 2px;
-}
-
-.list-view-entry:hover .copy-icon {
-  display: block;
-  cursor: pointer;
 }

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

@@ -18,7 +18,6 @@ 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>;
 
@@ -28,30 +27,22 @@ 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'>
-          {getFileName(frame)}
+          {frame.file.split(pathSep).pop()}
         </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))} />;