@jupyterlab/debugger 4.5.0-beta.0 → 4.5.0-rc.0

package/src/handlers/file.ts

@@ -12,6 +12,8 @@ import { Signal } from '@lumino/signaling';
 import { EditorHandler } from '../handlers/editor';
 
 import { IDebugger } from '../tokens';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import { DebuggerPausedOverlay } from './pausedoverlay';
 
 /**
  * A handler for files.
@@ -25,6 +27,7 @@ export class FileHandler implements IDisposable {
   constructor(options: FileHandler.IOptions) {
     this._debuggerService = options.debuggerService;
     this._fileEditor = options.widget.content;
+    this.translator = options.translator || nullTranslator;
 
     this._hasLineNumber =
       (this._fileEditor.editor.getOption('lineNumbers') as
@@ -36,6 +39,34 @@ export class FileHandler implements IDisposable {
       getEditor: () => this._fileEditor.editor,
       src: this._fileEditor.model.sharedModel
     });
+
+    this._pausedOverlay = new DebuggerPausedOverlay({
+      debuggerService: this._debuggerService,
+      container: options.widget.node,
+      translator: this.translator
+    });
+
+    this._debuggerService.session?.eventMessage.connect((_, event) => {
+      const session = this._debuggerService.session;
+      const contextSession = options.widget.context.sessionContext.session;
+
+      if (!session || !contextSession) {
+        return;
+      }
+      if (session.connection?.kernel?.id !== contextSession.kernel?.id) {
+        return;
+      }
+
+      if (event.event === 'stopped') {
+        void this._pausedOverlay.show();
+      } else if (event.event === 'continued') {
+        void this._pausedOverlay.hide();
+      }
+    });
+
+    if (this._debuggerService.hasStoppedThreads()) {
+      void this._pausedOverlay.show();
+    }
   }
 
   /**
@@ -51,6 +82,9 @@ export class FileHandler implements IDisposable {
       return;
     }
     this.isDisposed = true;
+
+    this._pausedOverlay.dispose();
+
     this._editorHandler?.dispose();
     // Restore editor options
     this._editorHandler?.editor!.setOptions({
@@ -62,7 +96,9 @@ export class FileHandler implements IDisposable {
   private _fileEditor: FileEditor;
   private _debuggerService: IDebugger;
   private _editorHandler: EditorHandler;
+  private _pausedOverlay: DebuggerPausedOverlay;
   private _hasLineNumber: boolean;
+  protected translator: ITranslator;
 }
 
 /**
@@ -82,5 +118,10 @@ export namespace FileHandler {
      * The widget to handle.
      */
     widget: DocumentWidget<FileEditor>;
+
+    /**
+     * The application language translator.
+     */
+    translator?: ITranslator;
   }
 }

package/src/handlers/notebook.ts

@@ -12,6 +12,8 @@ import { IDisposable } from '@lumino/disposable';
 import { Signal } from '@lumino/signaling';
 import { IDebugger } from '../tokens';
 import { EditorHandler } from './editor';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import { DebuggerPausedOverlay } from './pausedoverlay';
 
 /**
  * A handler for notebooks.
@@ -26,10 +28,38 @@ export class NotebookHandler implements IDisposable {
     this._debuggerService = options.debuggerService;
     this._notebookPanel = options.widget;
     this._cellMap = new ObservableMap<EditorHandler>();
+    this.translator = options.translator || nullTranslator;
+    this._pausedOverlay = new DebuggerPausedOverlay({
+      debuggerService: this._debuggerService,
+      container: this._notebookPanel.node,
+      translator: this.translator
+    });
 
     const notebook = this._notebookPanel.content;
     notebook.model!.cells.changed.connect(this._onCellsChanged, this);
 
+    this._debuggerService.session?.eventMessage.connect((_, event) => {
+      const session = this._debuggerService.session;
+      const contextSession = this._notebookPanel.sessionContext.session;
+
+      if (!session || !contextSession) {
+        return;
+      }
+      if (session.connection?.kernel?.id !== contextSession.kernel?.id) {
+        return;
+      }
+
+      if (event.event === 'stopped') {
+        void this._pausedOverlay.show();
+      } else if (event.event === 'continued') {
+        void this._pausedOverlay.hide();
+      }
+    });
+
+    if (this._debuggerService.hasStoppedThreads() === true) {
+      void this._pausedOverlay.show();
+    }
+
     this._onCellsChanged();
   }
 
@@ -46,6 +76,9 @@ export class NotebookHandler implements IDisposable {
       return;
     }
     this.isDisposed = true;
+
+    this._pausedOverlay.dispose();
+
     this._cellMap.values().forEach(handler => {
       handler.dispose();
       // Ensure to restore notebook editor settings
@@ -105,6 +138,8 @@ export class NotebookHandler implements IDisposable {
   private _debuggerService: IDebugger;
   private _notebookPanel: NotebookPanel;
   private _cellMap: IObservableMap<EditorHandler>;
+  private _pausedOverlay: DebuggerPausedOverlay;
+  protected translator: ITranslator;
 }
 
 /**
@@ -124,5 +159,10 @@ export namespace NotebookHandler {
      * The widget to handle.
      */
     widget: NotebookPanel;
+
+    /**
+     * The application language translator.
+     */
+    translator?: ITranslator;
   }
 }

package/src/handlers/pausedoverlay.ts

@@ -0,0 +1,112 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { IDisposable } from '@lumino/disposable';
+import { IDebugger } from '../tokens';
+import {
+  ITranslator,
+  nullTranslator,
+  TranslationBundle
+} from '@jupyterlab/translation';
+import { runIcon, stepOverIcon } from '@jupyterlab/ui-components';
+
+/**
+ * A reusable helper to show a "Paused in Debugger" overlay and block interactions.
+ */
+export class DebuggerPausedOverlay implements IDisposable {
+  constructor(options: DebuggerPausedOverlay.IOptions) {
+    this._debuggerService = options.debuggerService;
+    this._container = options.container;
+    this._trans = (options.translator || nullTranslator).load('jupyterlab');
+
+    // Create overlay
+    const overlay = document.createElement('div');
+    overlay.className = 'jp-DebuggerPausedOverlay';
+
+    const text = document.createElement('span');
+    text.textContent = this._trans.__('Paused in Debugger');
+    overlay.appendChild(text);
+
+    const continueBtn = document.createElement('button');
+    continueBtn.className = 'jp-DebuggerPausedButton';
+    continueBtn.title = this._trans.__('Continue');
+    runIcon.element({ container: continueBtn, elementPosition: 'center' });
+    continueBtn.onclick = () => {
+      void this._debuggerService.continue();
+    };
+
+    const nextBtn = document.createElement('button');
+    nextBtn.className = 'jp-DebuggerPausedButton';
+    nextBtn.title = this._trans.__('Next');
+    stepOverIcon.element({ container: nextBtn, elementPosition: 'center' });
+    nextBtn.onclick = () => {
+      void this._debuggerService.next();
+    };
+
+    overlay.appendChild(continueBtn);
+    overlay.appendChild(nextBtn);
+
+    overlay.style.pointerEvents = 'auto';
+    this._overlay = overlay;
+  }
+
+  /**
+   * Show the overlay, if enabled by user settings.
+   */
+  show(): void {
+    if (this._isDisposed) {
+      return;
+    }
+
+    const showOverlay = document.body.dataset.showPausedOverlay !== 'false';
+    if (!showOverlay || !this._overlay || this._overlay.isConnected) {
+      return;
+    }
+
+    this._container.appendChild(this._overlay);
+  }
+
+  /**
+   * Hide and unmount the overlay.
+   */
+  hide(): void {
+    if (this._isDisposed || !this._overlay || !this._overlay.isConnected) {
+      return;
+    }
+    this._container.style.pointerEvents = '';
+    this._overlay.remove();
+  }
+
+  /**
+   * Dispose of the overlay completely.
+   */
+  dispose(): void {
+    if (this._isDisposed) {
+      return;
+    }
+    this._isDisposed = true;
+    this.hide();
+    this._overlay = null;
+  }
+
+  /**
+   * Whether the overlay has been disposed.
+   */
+  get isDisposed(): boolean {
+    return this._isDisposed;
+  }
+
+  private _debuggerService: IDebugger;
+  private _container: HTMLElement;
+  private _trans: TranslationBundle;
+  private _overlay: HTMLDivElement | null;
+  private _isDisposed = false;
+}
+
+export namespace DebuggerPausedOverlay {
+  export interface IOptions {
+    debuggerService: IDebugger;
+    container: HTMLElement;
+    translator?: ITranslator;
+  }
+}

package/src/index.ts

@@ -7,11 +7,14 @@
 
 export { Debugger } from './debugger';
 
+export { DebuggerDisplayRegistry } from './displayregistry';
+
 export {
   IDebugger,
   IDebuggerConfig,
   IDebuggerSources,
   IDebuggerSidebar,
   IDebuggerHandler,
-  IDebuggerSourceViewer
+  IDebuggerSourceViewer,
+  IDebuggerDisplayRegistry
 } from './tokens';

package/src/model.ts

@@ -14,6 +14,8 @@ import { SourcesModel } from './panels/sources/model';
 import { KernelSourcesModel } from './panels/kernelSources/model';
 
 import { VariablesModel } from './panels/variables/model';
+import { IDebuggerDisplayRegistry } from './tokens';
+import { DebuggerDisplayRegistry } from './displayregistry';
 
 /**
  * A model for a debugger.
@@ -22,12 +24,18 @@ export class DebuggerModel implements IDebugger.Model.IService {
   /**
    * Instantiate a new DebuggerModel
    */
-  constructor() {
-    this.breakpoints = new BreakpointsModel();
-    this.callstack = new CallstackModel();
+  constructor(options: DebuggerModel.IOptions) {
+    const displayRegistry =
+      options.displayRegistry ?? new DebuggerDisplayRegistry();
+
+    this.breakpoints = new BreakpointsModel({ displayRegistry });
+    this.callstack = new CallstackModel({
+      displayRegistry
+    });
     this.variables = new VariablesModel();
     this.sources = new SourcesModel({
-      currentFrameChanged: this.callstack.currentFrameChanged
+      currentFrameChanged: this.callstack.currentFrameChanged,
+      displayRegistry
     });
     this.kernelSources = new KernelSourcesModel();
   }
@@ -164,3 +172,18 @@ export class DebuggerModel implements IDebugger.Model.IService {
   private _title = '-';
   private _titleChanged = new Signal<this, string>(this);
 }
+
+/**
+ * A namespace for DebuggerModel
+ */
+export namespace DebuggerModel {
+  /**
+   * Instantiation options for a DebuggerModel.
+   */
+  export interface IOptions {
+    /**
+     * The display registry.
+     */
+    displayRegistry?: IDebuggerDisplayRegistry | null;
+  }
+}

package/src/panels/breakpoints/body.tsx

@@ -34,9 +34,6 @@ export class BreakpointsBody extends ReactWidget {
     this.addClass('jp-DebuggerBreakpoints-body');
   }
 
-  /**
-   * Render the BreakpointsComponent.
-   */
   render(): JSX.Element {
     return (
       <BreakpointsComponent model={this._model} translator={this._translator} />
@@ -52,6 +49,7 @@ export class BreakpointsBody extends ReactWidget {
  *
  * @param {object} props The component props.
  * @param props.model The model for the breakpoints.
+ * @returns A JSX element.
  */
 const BreakpointsComponent = ({
   model,
@@ -124,6 +122,7 @@ const BreakpointsComponent = ({
  * @param {object} props The component props.
  * @param props.breakpoints The list of breakpoints.
  * @param props.model The model for the breakpoints.
+ * @returns A JSX element.
  */
 const BreakpointCellComponent = ({
   breakpoints,
@@ -164,6 +163,7 @@ const BreakpointCellComponent = ({
  * @param {object} props The component props.
  * @param props.breakpoint The breakpoint.
  * @param props.model The model for the breakpoints.
+ * @returns A JSX element.
  */
 const BreakpointComponent = ({
   breakpoint,
@@ -176,15 +176,12 @@ const BreakpointComponent = ({
   isSelected: boolean;
   trans: TranslationBundle;
 }): JSX.Element => {
-  const moveToEndFirstCharIfSlash = (breakpointSourcePath: string): string => {
-    return breakpointSourcePath[0] === '/'
-      ? breakpointSourcePath.slice(1) + '/'
-      : breakpointSourcePath;
-  };
+  const display = model.getDisplayName(breakpoint);
+
   return (
     <div
-      className={'jp-DebuggerBreakpoint'}
-      onClick={(): void => model.clicked.emit(breakpoint)}
+      className="jp-DebuggerBreakpoint"
+      onClick={() => model.clicked.emit(breakpoint)}
       title={breakpoint.source?.path}
     >
       <span className="jp-DebuggerBreakpoint-container">
@@ -199,9 +196,9 @@ const BreakpointComponent = ({
         )}
       </span>
       <span className={'jp-DebuggerBreakpoint-source jp-left-truncated'}>
-        {moveToEndFirstCharIfSlash(breakpoint.source?.path ?? '')}
+        {display}
       </span>
-      <span className={'jp-DebuggerBreakpoint-line'}>{breakpoint.line}</span>
+      <span className="jp-DebuggerBreakpoint-line">{breakpoint.line}</span>
     </div>
   );
 };

package/src/panels/breakpoints/index.ts

@@ -97,6 +97,7 @@ export namespace Breakpoints {
      */
     pauseOnExceptions: string;
   }
+
   /**
    * Instantiation options for `Breakpoints`.
    */

package/src/panels/breakpoints/model.ts

@@ -2,13 +2,18 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { ISignal, Signal } from '@lumino/signaling';
-
-import { IDebugger } from '../../tokens';
+import { IDebugger, IDebuggerDisplayRegistry } from '../../tokens';
+import { DebuggerDisplayRegistry } from '../../displayregistry';
 
 /**
  * A model for a list of breakpoints.
  */
 export class BreakpointsModel implements IDebugger.Model.IBreakpoints {
+  constructor(options: { displayRegistry?: IDebuggerDisplayRegistry }) {
+    this._displayRegistry =
+      options.displayRegistry ?? new DebuggerDisplayRegistry();
+  }
+
   /**
    * Signal emitted when the model changes.
    */
@@ -89,10 +94,36 @@ export class BreakpointsModel implements IDebugger.Model.IBreakpoints {
     this._restored.emit();
   }
 
+  /**
+   * Get a human-readable display string for a breakpoint.
+   * Shows execution count if notebook cell, [*] if running, [ ] if never executed.
+   */
+  getDisplayName(breakpoint: IDebugger.IBreakpoint): string {
+    return this._displayRegistry.getDisplayName(
+      breakpoint.source as IDebugger.Source
+    );
+  }
+
   private _breakpoints = new Map<string, IDebugger.IBreakpoint[]>();
   private _changed = new Signal<this, IDebugger.IBreakpoint[]>(this);
   private _restored = new Signal<this, void>(this);
   private _clicked = new Signal<this, IDebugger.IBreakpoint>(this);
   private _selectedBreakpoint: IDebugger.IBreakpoint;
   private _selectedChanged = new Signal<this, IDebugger.IBreakpoint>(this);
+  private _displayRegistry: IDebuggerDisplayRegistry;
+}
+
+/**
+ * Namespace for BreakpointsModel
+ */
+export namespace BreakpointsModel {
+  /**
+   * Instantiation options for a BreakpointsModel.
+   */
+  export interface IOptions {
+    /**
+     * The debugger display registry.
+     */
+    displayRegistry: IDebuggerDisplayRegistry;
+  }
 }

package/src/panels/callstack/body.tsx

@@ -1,7 +1,6 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { PathExt } from '@jupyterlab/coreutils';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import React, { useEffect, useState } from 'react';
 import { IDebugger } from '../../tokens';
@@ -36,6 +35,7 @@ export class CallstackBody extends ReactWidget {
  *
  * @param {object} props The component props.
  * @param props.model The model for the callstack.
+ * @returns A JSX element.
  */
 const FramesComponent = ({
   model
@@ -62,14 +62,6 @@ const FramesComponent = ({
     };
   }, [model]);
 
-  const toShortLocation = (el: IDebugger.IStackFrame) => {
-    const path = el.source?.path || '';
-    const base = PathExt.basename(PathExt.dirname(path));
-    const filename = PathExt.basename(path);
-    const shortname = PathExt.join(base, filename);
-    return `${shortname}:${el.line}`;
-  };
-
   return (
     <ul>
       {frames.map(ele => (
@@ -87,7 +79,7 @@ const FramesComponent = ({
             className={'jp-DebuggerCallstackFrame-location'}
             title={ele.source?.path}
           >
-            {toShortLocation(ele)}
+            {model.getDisplayName?.(ele) ?? ele.source?.path}
           </span>
         </li>
       ))}

package/src/panels/callstack/model.ts

@@ -3,15 +3,23 @@
 
 import { ISignal, Signal } from '@lumino/signaling';
 
-import { IDebugger } from '../../tokens';
-
+import { DebuggerDisplayRegistry } from '../../displayregistry';
+import { IDebugger, IDebuggerDisplayRegistry } from '../../tokens';
+import { INotebookTracker } from '@jupyterlab/notebook';
+import { IConsoleTracker } from '@jupyterlab/console';
 /**
  * A model for a callstack.
  */
 export class CallstackModel implements IDebugger.Model.ICallstack {
+  constructor(options: { displayRegistry?: IDebuggerDisplayRegistry }) {
+    this._displayRegistry =
+      options.displayRegistry ?? new DebuggerDisplayRegistry();
+  }
+
   /**
    * Get all the frames.
    */
+
   get frames(): IDebugger.IStackFrame[] {
     return this._state;
   }
@@ -63,12 +71,51 @@ export class CallstackModel implements IDebugger.Model.ICallstack {
     return this._currentFrameChanged;
   }
 
+  /**
+   * Returns a human-readable display for a frame.
+   */
+  getDisplayName(frame: IDebugger.IStackFrame): string {
+    let name = this._displayRegistry.getDisplayName(
+      frame.source as IDebugger.Source
+    );
+    if (frame.line !== undefined) {
+      name += `:${frame.line}`;
+    }
+    return name;
+  }
+
   private _state: IDebugger.IStackFrame[] = [];
   private _currentFrame: IDebugger.IStackFrame | null = null;
   private _framesChanged = new Signal<this, IDebugger.IStackFrame[]>(this);
   private _currentFrameChanged = new Signal<this, IDebugger.IStackFrame | null>(
     this
   );
+  private _displayRegistry: IDebuggerDisplayRegistry;
+}
+
+/**
+ * A namespace for CallstackModel
+ */
+export namespace CallstackModel {
+  /**
+   * Instantiation options for CallstackModel
+   */
+  export interface IOptions {
+    /**
+     * Debugger configuration.
+     */
+    config: IDebugger.IConfig;
+
+    /**
+     * The notebook tracker.
+     */
+    notebookTracker: INotebookTracker | null;
+
+    /**
+     * The console tracker.
+     */
+    consoleTracker: IConsoleTracker | null;
+  }
 }
 
 /**

package/src/panels/sources/body.ts

@@ -85,10 +85,11 @@ export class SourcesBody extends Widget {
    * @param frame The current frame.
    */
   private async _showSource(frame: IDebugger.IStackFrame): Promise<void> {
-    const path = frame.source?.path;
+    const displayPath = this._model.getDisplayName(frame);
+
     const source = await this._debuggerService.getSource({
       sourceReference: 0,
-      path
+      path: frame.source?.path
     });
 
     if (!source?.content) {
@@ -102,7 +103,8 @@ export class SourcesBody extends Widget {
 
     const { content, mimeType } = source;
     const editorMimeType =
-      mimeType || this._mimeTypeService.getMimeTypeByFilePath(path ?? '');
+      mimeType ||
+      this._mimeTypeService.getMimeTypeByFilePath(frame.source?.path ?? '');
 
     this._editor.model.sharedModel.setSource(content);
     this._editor.model.mimeType = editorMimeType;
@@ -111,14 +113,14 @@ export class SourcesBody extends Widget {
       debuggerService: this._debuggerService,
       editorReady: () => Promise.resolve(this._editor.editor),
       getEditor: () => this._editor.editor,
-      path,
+      path: frame.source?.path ?? '',
       src: this._editor.model.sharedModel
     });
 
     this._model.currentSource = {
       content,
       mimeType: editorMimeType,
-      path: path ?? ''
+      path: displayPath
     };
 
     requestAnimationFrame(() => {

package/src/panels/sources/model.ts

@@ -3,7 +3,8 @@
 
 import { ISignal, Signal } from '@lumino/signaling';
 
-import { IDebugger } from '../../tokens';
+import { DebuggerDisplayRegistry } from '../../displayregistry';
+import { IDebugger, IDebuggerDisplayRegistry } from '../../tokens';
 
 /**
  * The model to keep track of the current source being displayed.
@@ -16,6 +17,8 @@ export class SourcesModel implements IDebugger.Model.ISources {
    */
   constructor(options: SourcesModel.IOptions) {
     this.currentFrameChanged = options.currentFrameChanged;
+    this._displayRegistry =
+      options.displayRegistry ?? new DebuggerDisplayRegistry();
   }
 
   /**
@@ -64,6 +67,24 @@ export class SourcesModel implements IDebugger.Model.ISources {
     this._currentSourceOpened.emit(this._currentSource);
   }
 
+  /**
+   * Get a human-readable display for a frame.
+   *
+   * For notebook cells, shows execution count if available, [*] if running, or [ ] if never executed.
+   */
+  /**
+   * Returns a human-readable display for a frame.
+   */
+  getDisplayName(frame: IDebugger.IStackFrame): string {
+    let name = this._displayRegistry.getDisplayName(
+      frame.source as IDebugger.Source
+    );
+    if (frame.line !== undefined) {
+      name += `:${frame.line}`;
+    }
+    return name;
+  }
+
   private _currentSource: IDebugger.Source | null;
   private _currentSourceOpened = new Signal<
     SourcesModel,
@@ -73,6 +94,7 @@ export class SourcesModel implements IDebugger.Model.ISources {
     SourcesModel,
     IDebugger.Source | null
   >(this);
+  private _displayRegistry: IDebuggerDisplayRegistry;
 }
 
 /**
@@ -90,5 +112,10 @@ export namespace SourcesModel {
       IDebugger.Model.ICallstack,
       IDebugger.IStackFrame | null
     >;
+
+    /**
+     * The display registry.
+     */
+    displayRegistry?: IDebuggerDisplayRegistry;
   }
 }