diff --git a/packages/trace-viewer/src/ui/copyToClipboard.tsx b/packages/trace-viewer/src/ui/copyToClipboard.tsx index 96de5f3822..2c5d21aa0d 100644 --- a/packages/trace-viewer/src/ui/copyToClipboard.tsx +++ b/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 ; -}; + return ; +}; \ No newline at end of file diff --git a/packages/trace-viewer/src/ui/stackTrace.css b/packages/trace-viewer/src/ui/stackTrace.css index 5282c5219b..c52a9feb0b 100644 --- a/packages/trace-viewer/src/ui/stackTrace.css +++ b/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; +} \ No newline at end of file diff --git a/packages/trace-viewer/src/ui/stackTrace.tsx b/packages/trace-viewer/src/ui/stackTrace.tsx index 6a0bad1672..3b2a9122ec 100644 --- a/packages/trace-viewer/src/ui/stackTrace.tsx +++ b/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; @@ -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 { - const pathSep = frame.file[1] === ':' ? '\\' : '/'; return <> {frame.function || '(anonymous)'} - {frame.file.split(pathSep).pop()} + {getFileName(frame)} {':' + frame.line} + + + ; }} onSelected={frame => setSelectedFrame(frames.indexOf(frame))} />; -}; +}; \ No newline at end of file