Debugger: show callstack clearer with names/ids

Fixes #10139, item 8

packages/debugger/src/panels/callstack/body.tsx

@@ -63,15 +63,34 @@ const FramesComponent = ({
     };
   }, [model]);
 
+  const toShortLocation = (el: IDebugger.IStackFrame) => {
+    let path = el.source?.path || '';
+    const lastIndex = path.lastIndexOf('/');
+    const secondLastIndex = path.lastIndexOf('/', lastIndex - 1);
+    // If the we end up finding the leading '/', leave it in
+    path = path.substring(secondLastIndex > 0 ? secondLastIndex + 1 : 0);
+    return `${path}:${el.line}`;
+  };
+
   return (
     <ul>
       {frames.map(ele => (
         <li
           key={ele.id}
           onClick={(): void => onSelected(ele)}
-          className={selected?.id === ele.id ? 'selected' : ''}
+          className={
+            selected?.id === ele.id
+              ? 'selected jp-DebuggerCallstackFrame'
+              : 'jp-DebuggerCallstackFrame'
+          }
         >
-          {ele.name} at {ele.source?.name}:{ele.line}
+          <span className={'jp-DebuggerCallstackFrame-name'}>{ele.name}</span>
+          <span
+            className={'jp-DebuggerCallstackFrame-location'}
+            title={ele.source?.path}
+          >
+            {toShortLocation(ele)}
+          </span>
         </li>
       ))}
     </ul>

packages/debugger/style/breakpoints.css

@@ -39,6 +39,20 @@
   margin-left: auto;
 }
 
+.jp-DebuggerCallstackFrame {
+  display: flex;
+  align-items: center;
+}
+
+.jp-DebuggerCallstackFrame-name {
+  white-space: nowrap;
+  margin-right: 5px;
+}
+
+.jp-DebuggerCallstackFrame-location {
+  margin-left: auto;
+}
+
 [data-jp-debugger='true'] .CodeMirror-gutter-wrapper::after {
   content: '●';
   color: var(--jp-error-color1);