@jupyterlab/debugger 4.5.0-alpha.3 → 4.5.0-beta.0

package/src/panels/breakpoints/body.tsx

@@ -4,6 +4,15 @@
 import { ReactWidget } from '@jupyterlab/ui-components';
 import React, { useEffect, useState } from 'react';
 import { IDebugger } from '../../tokens';
+import {
+  ITranslator,
+  nullTranslator,
+  TranslationBundle
+} from '@jupyterlab/translation';
+import {
+  breakpointIcon,
+  selectedBreakpointIcon
+} from '@jupyterlab/ui-components';
 
 /**
  * The body for a Breakpoints Panel.
@@ -14,9 +23,14 @@ export class BreakpointsBody extends ReactWidget {
    *
    * @param model The model for the breakpoints.
    */
-  constructor(model: IDebugger.Model.IBreakpoints) {
+  constructor(
+    model: IDebugger.Model.IBreakpoints,
+    translator: ITranslator = nullTranslator
+  ) {
     super();
     this._model = model;
+    this._translator = translator;
+
     this.addClass('jp-DebuggerBreakpoints-body');
   }
 
@@ -24,10 +38,13 @@ export class BreakpointsBody extends ReactWidget {
    * Render the BreakpointsComponent.
    */
   render(): JSX.Element {
-    return <BreakpointsComponent model={this._model} />;
+    return (
+      <BreakpointsComponent model={this._model} translator={this._translator} />
+    );
   }
 
   private _model: IDebugger.Model.IBreakpoints;
+  private _translator: ITranslator;
 }
 
 /**
@@ -37,13 +54,18 @@ export class BreakpointsBody extends ReactWidget {
  * @param props.model The model for the breakpoints.
  */
 const BreakpointsComponent = ({
-  model
+  model,
+  translator
 }: {
   model: IDebugger.Model.IBreakpoints;
+  translator: ITranslator;
 }): JSX.Element => {
+  const trans = translator.load('jupyterlab');
   const [breakpoints, setBreakpoints] = useState(
     Array.from(model.breakpoints.entries())
   );
+  const [selectedBreakpoint, setSelectedBreakpoint] =
+    useState<IDebugger.IBreakpoint | null>(null);
 
   useEffect(() => {
     const updateBreakpoints = (
@@ -57,12 +79,27 @@ const BreakpointsComponent = ({
       setBreakpoints(Array.from(model.breakpoints.entries()));
     };
 
+    const handleClick = (
+      _: IDebugger.Model.IBreakpoints,
+      breakpoint: IDebugger.IBreakpoint
+    ): void => {
+      model.selectedBreakpoint = breakpoint;
+    };
+
+    const handleSelectedChanged = (_: IDebugger.Model.IBreakpoints): void => {
+      setSelectedBreakpoint(model.selectedBreakpoint);
+    };
+
     model.changed.connect(updateBreakpoints);
     model.restored.connect(restoreBreakpoints);
+    model.clicked.connect(handleClick);
+    model.selectedChanged.connect(handleSelectedChanged);
 
     return (): void => {
       model.changed.disconnect(updateBreakpoints);
       model.restored.disconnect(restoreBreakpoints);
+      model.clicked.disconnect(handleClick);
+      model.selectedChanged.disconnect(() => handleSelectedChanged);
     };
   });
 
@@ -73,6 +110,8 @@ const BreakpointsComponent = ({
           key={entry[0]}
           breakpoints={entry[1]}
           model={model}
+          selectedBreakpoint={selectedBreakpoint}
+          trans={trans}
         />
       ))}
     </>
@@ -88,10 +127,14 @@ const BreakpointsComponent = ({
  */
 const BreakpointCellComponent = ({
   breakpoints,
-  model
+  model,
+  selectedBreakpoint,
+  trans
 }: {
   breakpoints: IDebugger.IBreakpoint[];
   model: IDebugger.Model.IBreakpoints;
+  selectedBreakpoint: IDebugger.IBreakpoint | null;
+  trans: TranslationBundle;
 }): JSX.Element => {
   return (
     <>
@@ -104,6 +147,11 @@ const BreakpointCellComponent = ({
             key={(breakpoint.source?.path ?? '') + index}
             breakpoint={breakpoint}
             model={model}
+            isSelected={
+              selectedBreakpoint?.line === breakpoint.line &&
+              selectedBreakpoint?.source?.path === breakpoint.source?.path
+            }
+            trans={trans}
           />
         ))}
     </>
@@ -119,10 +167,14 @@ const BreakpointCellComponent = ({
  */
 const BreakpointComponent = ({
   breakpoint,
-  model
+  model,
+  isSelected,
+  trans
 }: {
   breakpoint: IDebugger.IBreakpoint;
   model: IDebugger.Model.IBreakpoints;
+  isSelected: boolean;
+  trans: TranslationBundle;
 }): JSX.Element => {
   const moveToEndFirstCharIfSlash = (breakpointSourcePath: string): string => {
     return breakpointSourcePath[0] === '/'
@@ -135,7 +187,17 @@ const BreakpointComponent = ({
       onClick={(): void => model.clicked.emit(breakpoint)}
       title={breakpoint.source?.path}
     >
-      <span className={'jp-DebuggerBreakpoint-marker'}>●</span>
+      <span className="jp-DebuggerBreakpoint-container">
+        {!isSelected ? (
+          <breakpointIcon.react
+            aria-label={trans.__('Breakpoint')}
+          ></breakpointIcon.react>
+        ) : (
+          <selectedBreakpointIcon.react
+            aria-label={trans.__('Selected breakpoint')}
+          ></selectedBreakpointIcon.react>
+        )}
+      </span>
       <span className={'jp-DebuggerBreakpoint-source jp-left-truncated'}>
         {moveToEndFirstCharIfSlash(breakpoint.source?.path ?? '')}
       </span>

package/src/panels/breakpoints/model.ts

@@ -30,6 +30,28 @@ export class BreakpointsModel implements IDebugger.Model.IBreakpoints {
     return this._clicked;
   }
 
+  /**
+   * Signal emitted when the selected breakpoint changes.
+   */
+  get selectedChanged(): Signal<this, IDebugger.IBreakpoint> {
+    return this._selectedChanged;
+  }
+
+  /**
+   * Get selected breakpoint
+   */
+  get selectedBreakpoint(): IDebugger.IBreakpoint {
+    return this._selectedBreakpoint;
+  }
+
+  /**
+   * Set selected breakpoint
+   */
+  set selectedBreakpoint(selected: IDebugger.IBreakpoint) {
+    this._selectedBreakpoint = selected;
+    this._selectedChanged.emit(selected);
+  }
+
   /**
    * Get all the breakpoints.
    */
@@ -71,4 +93,6 @@ export class BreakpointsModel implements IDebugger.Model.IBreakpoints {
   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);
 }

package/src/panels/sources/body.ts

@@ -122,7 +122,7 @@ export class SourcesBody extends Widget {
     };
 
     requestAnimationFrame(() => {
-      EditorHandler.showCurrentLine(this._editor.editor, frame.line);
+      EditorHandler.showCurrentLine(this._editor.editor, frame.line, 'start');
     });
 
     this._editor.show();

package/src/service.ts

@@ -256,11 +256,15 @@ export class DebuggerService implements IDebugger, IDisposable {
       expression,
       frameId
     });
+
     if (!reply.success) {
       return null;
     }
+
+    // TODO - Should this be here?
+    this._model.variables.scopes = [];
+
     // get the frames to retrieve the latest state of the variables
-    this._clearModel();
     await this._getAllFrames();
 
     return reply.body;
@@ -460,7 +464,7 @@ export class DebuggerService implements IDebugger, IDisposable {
     if (stoppedThreads.size !== 0) {
       await this._getAllFrames();
     } else if (this.isStarted) {
-      this._clearModel();
+      this._model.callstack.frames = [];
       this._clearSignals();
     }
 
@@ -593,7 +597,6 @@ export class DebuggerService implements IDebugger, IDisposable {
 
     // Update the local model and finish kernel configuration.
     this._model.breakpoints.setBreakpoints(path, updatedBreakpoints);
-    await this.session.sendRequest('configurationDone', {});
   }
 
   /**

package/src/tokens.ts

@@ -855,6 +855,16 @@ export namespace IDebugger {
        */
       readonly restored: ISignal<this, void>;
 
+      /**
+       * Signal emitted when the breakpoints are restored.
+       */
+      readonly selectedChanged: Signal<this, IDebugger.IBreakpoint>;
+
+      /**
+       * Selected breakpoint
+       */
+      selectedBreakpoint: IDebugger.IBreakpoint | null;
+
       /**
        * Get the breakpoints for a given id (path).
        *

package/style/breakpoints.css

@@ -18,6 +18,7 @@
 .jp-DebuggerBreakpoint {
   display: flex;
   align-items: center;
+  height: 24px;
 }
 
 .jp-DebuggerBreakpoint:hover {
@@ -25,11 +26,12 @@
   cursor: pointer;
 }
 
-.jp-DebuggerBreakpoint-marker {
-  font-size: 20px;
-  padding-right: 5px;
-  content: '●';
-  color: var(--jp-error-color1);
+.jp-DebuggerBreakpoint-container {
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
 }
 
 .jp-DebuggerBreakpoint-source {
@@ -56,7 +58,6 @@
 }
 
 [data-jp-debugger='true'] .cm-breakpoint-gutter .cm-gutterElement:empty::after {
-  content: '●';
   color: var(--jp-error-color1);
   opacity: 0;
 }
@@ -66,11 +67,8 @@
 }
 
 .cm-breakpoint-gutter .cm-gutterElement {
-  color: var(--jp-error-color1);
-  padding-left: 5px;
-  font-size: 20px;
-  position: relative;
-  top: -5px;
+  padding-top: 1.1px;
+  height: 18.2px;
 }
 
 [data-jp-debugger='true'].jp-Editor

package/style/sources.css

@@ -6,6 +6,7 @@
 .jp-DebuggerSources {
   min-height: 50px;
   margin-top: 3px;
+  overflow-y: scroll;
 }
 
 [data-jp-debugger='true'].jp-Editor .jp-mod-readOnly {