@jupyterlab/debugger 4.0.0-alpha.9 → 4.0.0-beta.0

package/src/panels/breakpoints/pauseonexceptions.tsx

@@ -0,0 +1,141 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import * as React from 'react';
+import {
+  MenuSvg,
+  ToolbarButton,
+  ToolbarButtonComponent
+} from '@jupyterlab/ui-components';
+import { IDebugger } from '../../tokens';
+import { Breakpoints } from './index';
+
+const PAUSE_ON_EXCEPTION_CLASS = 'jp-debugger-pauseOnExceptions';
+const PAUSE_ON_EXCEPTION_BUTTON_CLASS = 'jp-PauseOnExceptions';
+const PAUSE_ON_EXCEPTION_MENU_CLASS = 'jp-PauseOnExceptions-menu';
+
+/**
+ * A button which display a menu on click, to select the filter.
+ */
+export class PauseOnExceptionsWidget extends ToolbarButton {
+  /**
+   * Constructor of the button.
+   */
+  constructor(props: PauseOnExceptions.IProps) {
+    super();
+    this._menu = new PauseOnExceptionsMenu({
+      service: props.service,
+      commands: {
+        registry: props.commands.registry,
+        pauseOnExceptions: props.commands.pauseOnExceptions
+      }
+    });
+
+    this.node.className = PAUSE_ON_EXCEPTION_CLASS;
+
+    this._props = props;
+    this._props.className = PAUSE_ON_EXCEPTION_BUTTON_CLASS;
+    this._props.service.eventMessage.connect((_, event): void => {
+      if (event.event === 'initialized' || event.event === 'terminated') {
+        this.onChange();
+      }
+    }, this);
+    this._props.enabled = this._props.service.pauseOnExceptionsIsValid();
+    this._props.service.pauseOnExceptionChanged.connect(this.onChange, this);
+  }
+
+  /**
+   * Called when the debugger is initialized or the filter changed.
+   */
+  onChange() {
+    const session = this._props.service.session;
+    const exceptionBreakpointFilters = session?.exceptionBreakpointFilters;
+    this._props.className = PAUSE_ON_EXCEPTION_BUTTON_CLASS;
+    if (this._props.service.session?.isStarted && exceptionBreakpointFilters) {
+      if (session.isPausingOnException()) {
+        this._props.className += ' lm-mod-toggled';
+      }
+      this._props.enabled = true;
+    } else {
+      this._props.enabled = false;
+    }
+    this.update();
+  }
+
+  /**
+   * open menu on click.
+   */
+  onclick = () => {
+    this._menu.open(
+      this.node.getBoundingClientRect().left,
+      this.node.getBoundingClientRect().bottom
+    );
+  };
+
+  render(): JSX.Element {
+    return <ToolbarButtonComponent {...this._props} onClick={this.onclick} />;
+  }
+
+  private _menu: PauseOnExceptionsMenu;
+  private _props: PauseOnExceptions.IProps;
+}
+
+/**
+ * A menu with all the available filter from the debugger as entries.
+ */
+export class PauseOnExceptionsMenu extends MenuSvg {
+  /**
+   * The constructor of the menu.
+   */
+  constructor(props: PauseOnExceptions.IProps) {
+    super({ commands: props.commands.registry });
+    this._service = props.service;
+    this._command = props.commands.pauseOnExceptions;
+
+    props.service.eventMessage.connect((_, event): void => {
+      if (event.event === 'initialized') {
+        this._build();
+      }
+    }, this);
+
+    this._build();
+    this.addClass(PAUSE_ON_EXCEPTION_MENU_CLASS);
+  }
+
+  private _build(): void {
+    this.clearItems();
+    const exceptionsBreakpointFilters =
+      this._service.session?.exceptionBreakpointFilters ?? [];
+    exceptionsBreakpointFilters.map((filter, _) => {
+      this.addItem({
+        command: this._command,
+        args: {
+          filter: filter.filter,
+          description: filter.description as string
+        }
+      });
+    });
+  }
+
+  private _service: IDebugger;
+  private _command: string;
+}
+
+/**
+ * A namespace for the widget.
+ */
+export namespace PauseOnExceptions {
+  /**
+   * The properties of the widget and menu.
+   */
+  export interface IProps extends ToolbarButtonComponent.IProps {
+    /**
+     * The debugger service linked to the widget.
+     */
+    service: IDebugger;
+    /**
+     * The commands registry and the command ID associated to the menu.
+     */
+    commands: Breakpoints.ICommands;
+  }
+}

package/src/panels/callstack/body.tsx

@@ -0,0 +1,96 @@
+// 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';
+
+/**
+ * The body for a Callstack Panel.
+ */
+export class CallstackBody extends ReactWidget {
+  /**
+   * Instantiate a new Body for the Callstack Panel.
+   *
+   * @param model The model for the callstack.
+   */
+  constructor(model: IDebugger.Model.ICallstack) {
+    super();
+    this._model = model;
+    this.addClass('jp-DebuggerCallstack-body');
+  }
+
+  /**
+   * Render the FramesComponent.
+   */
+  render(): JSX.Element {
+    return <FramesComponent model={this._model} />;
+  }
+
+  private _model: IDebugger.Model.ICallstack;
+}
+
+/**
+ * A React component to display a list of frames in a callstack.
+ *
+ * @param {object} props The component props.
+ * @param props.model The model for the callstack.
+ */
+const FramesComponent = ({
+  model
+}: {
+  model: IDebugger.Model.ICallstack;
+}): JSX.Element => {
+  const [frames, setFrames] = useState(model.frames);
+  const [selected, setSelected] = useState(model.frame);
+
+  const onSelected = (frame: any): void => {
+    setSelected(frame);
+    model.frame = frame;
+  };
+
+  useEffect(() => {
+    const updateFrames = (): void => {
+      setSelected(model.frame);
+      setFrames(model.frames);
+    };
+    model.framesChanged.connect(updateFrames);
+
+    return (): void => {
+      model.framesChanged.disconnect(updateFrames);
+    };
+  }, [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 => (
+        <li
+          key={ele.id}
+          onClick={(): void => onSelected(ele)}
+          className={
+            selected?.id === ele.id
+              ? 'selected jp-DebuggerCallstackFrame'
+              : 'jp-DebuggerCallstackFrame'
+          }
+        >
+          <span className={'jp-DebuggerCallstackFrame-name'}>{ele.name}</span>
+          <span
+            className={'jp-DebuggerCallstackFrame-location'}
+            title={ele.source?.path}
+          >
+            {toShortLocation(ele)}
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+};

package/src/panels/callstack/index.ts

@@ -0,0 +1,152 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import {
+  CommandToolbarButton,
+  PanelWithToolbar
+} from '@jupyterlab/ui-components';
+import { CommandRegistry } from '@lumino/commands';
+import { Panel } from '@lumino/widgets';
+import { IDebugger } from '../../tokens';
+import { CallstackBody } from './body';
+
+/**
+ * A Panel to show a callstack.
+ */
+export class Callstack extends PanelWithToolbar {
+  /**
+   * Instantiate a new Callstack Panel.
+   *
+   * @param options The instantiation options for a Callstack Panel.
+   */
+  constructor(options: Callstack.IOptions) {
+    super(options);
+    const { commands, model } = options;
+    const trans = (options.translator ?? nullTranslator).load('jupyterlab');
+    this.title.label = trans.__('Callstack');
+    const body = new CallstackBody(model);
+
+    this.toolbar.addItem(
+      'continue',
+      new CommandToolbarButton({
+        commands: commands.registry,
+        id: commands.continue,
+        label: ''
+      })
+    );
+
+    this.toolbar.addItem(
+      'terminate',
+      new CommandToolbarButton({
+        commands: commands.registry,
+        id: commands.terminate,
+        label: ''
+      })
+    );
+
+    this.toolbar.addItem(
+      'step-over',
+      new CommandToolbarButton({
+        commands: commands.registry,
+        id: commands.next,
+        label: ''
+      })
+    );
+
+    this.toolbar.addItem(
+      'step-in',
+      new CommandToolbarButton({
+        commands: commands.registry,
+        id: commands.stepIn,
+        label: ''
+      })
+    );
+
+    this.toolbar.addItem(
+      'step-out',
+      new CommandToolbarButton({
+        commands: commands.registry,
+        id: commands.stepOut,
+        label: ''
+      })
+    );
+
+    this.toolbar.addItem(
+      'evaluate',
+      new CommandToolbarButton({
+        commands: commands.registry,
+        id: commands.evaluate,
+        label: ''
+      })
+    );
+
+    this.addWidget(body);
+    this.addClass('jp-DebuggerCallstack');
+  }
+}
+
+/**
+ * A namespace for Callstack `statics`.
+ */
+export namespace Callstack {
+  /**
+   * The toolbar commands and registry for the callstack.
+   */
+  export interface ICommands {
+    /**
+     * The command registry.
+     */
+    registry: CommandRegistry;
+
+    /**
+     * The pause/continue command ID.
+     */
+    continue: string;
+
+    /**
+     * The terminate command ID.
+     */
+    terminate: string;
+
+    /**
+     * The next / stepOver command ID.
+     */
+    next: string;
+
+    /**
+     * The stepIn command ID.
+     */
+    stepIn: string;
+
+    /**
+     * The stepOut command ID.
+     */
+    stepOut: string;
+
+    /**
+     * The evaluate command ID.
+     */
+    evaluate: string;
+  }
+
+  /**
+   * Instantiation options for `Callstack`.
+   */
+  export interface IOptions extends Panel.IOptions {
+    /**
+     * The toolbar commands interface for the callstack.
+     */
+    commands: ICommands;
+
+    /**
+     * The model for the callstack.
+     */
+    model: IDebugger.Model.ICallstack;
+
+    /**
+     * The application language translator
+     */
+    translator?: ITranslator;
+  }
+}

package/src/panels/callstack/model.ts

@@ -0,0 +1,86 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { ISignal, Signal } from '@lumino/signaling';
+
+import { IDebugger } from '../../tokens';
+
+/**
+ * A model for a callstack.
+ */
+export class CallstackModel implements IDebugger.Model.ICallstack {
+  /**
+   * Get all the frames.
+   */
+  get frames(): IDebugger.IStackFrame[] {
+    return this._state;
+  }
+
+  /**
+   * Set the frames.
+   */
+  set frames(newFrames: IDebugger.IStackFrame[]) {
+    this._state = newFrames;
+    const currentFrameId =
+      this.frame !== null ? Private.getFrameId(this.frame) : '';
+    const frame = newFrames.find(
+      frame => Private.getFrameId(frame) === currentFrameId
+    );
+    // Default to the first frame if the previous one can't be found.
+    // Otherwise keep the current frame selected.
+    if (!frame) {
+      this.frame = newFrames[0];
+    }
+    this._framesChanged.emit(newFrames);
+  }
+
+  /**
+   * Get the current frame.
+   */
+  get frame(): IDebugger.IStackFrame | null {
+    return this._currentFrame;
+  }
+
+  /**
+   * Set the current frame.
+   */
+  set frame(frame: IDebugger.IStackFrame | null) {
+    this._currentFrame = frame;
+    this._currentFrameChanged.emit(frame);
+  }
+
+  /**
+   * Signal emitted when the frames have changed.
+   */
+  get framesChanged(): ISignal<this, IDebugger.IStackFrame[]> {
+    return this._framesChanged;
+  }
+
+  /**
+   * Signal emitted when the current frame has changed.
+   */
+  get currentFrameChanged(): ISignal<this, IDebugger.IStackFrame | null> {
+    return this._currentFrameChanged;
+  }
+
+  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
+  );
+}
+
+/**
+ * A namespace for private data.
+ */
+namespace Private {
+  /**
+   * Construct an id for the given frame.
+   *
+   * @param frame The frame.
+   */
+  export function getFrameId(frame: IDebugger.IStackFrame): string {
+    return `${frame?.source?.path}-${frame?.id}`;
+  }
+}

package/src/panels/kernelSources/body.tsx

@@ -0,0 +1,139 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import React from 'react';
+
+import { openKernelSourceIcon } from '../../icons';
+
+import { ReactWidget, ToolbarButtonComponent } from '@jupyterlab/ui-components';
+
+import { showErrorMessage } from '@jupyterlab/apputils';
+
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+
+import { KernelSourcesFilter } from './filter';
+
+import { IDebugger } from '../../tokens';
+import { UseSignal } from '@jupyterlab/ui-components';
+import { IRenderMime } from '@jupyterlab/rendermime';
+
+/**
+ * The class name added to the filterbox node.
+ */
+const FILTERBOX_CLASS = 'jp-DebuggerKernelSource-filterBox';
+
+/**
+ * The class name added to hide the filterbox node.
+ */
+const FILTERBOX_HIDDEN_CLASS = 'jp-DebuggerKernelSource-filterBox-hidden';
+
+/**
+ * The body for a Sources Panel.
+ */
+export class KernelSourcesBody extends ReactWidget {
+  /**
+   * Instantiate a new Body for the KernelSourcesBody widget.
+   *
+   * @param options The instantiation options for a KernelSourcesBody.
+   */
+  constructor(options: KernelSourcesBody.IOptions) {
+    super();
+    this._model = options.model;
+    this._debuggerService = options.service;
+    this._trans = (options.translator ?? nullTranslator).load('jupyterlab');
+
+    this.addClass('jp-DebuggerKernelSources-body');
+  }
+
+  render() {
+    let filterClass = FILTERBOX_CLASS;
+    if (!this._showFilter) {
+      filterClass += ' ' + FILTERBOX_HIDDEN_CLASS;
+    }
+    return (
+      <React.Fragment>
+        <div className={filterClass} key={'filter'}>
+          <KernelSourcesFilter model={this._model} />
+        </div>
+        <UseSignal signal={this._model.changed}>
+          {(_, kernelSources) => {
+            const keymap: { [key: string]: number } = {};
+            return (kernelSources ?? []).map(module => {
+              const name = module.name;
+              const path = module.path;
+              const key =
+                name + (keymap[name] = (keymap[name] ?? 0) + 1).toString();
+              const button = (
+                <ToolbarButtonComponent
+                  key={key}
+                  icon={openKernelSourceIcon}
+                  label={name}
+                  tooltip={path}
+                  onClick={() => {
+                    this._debuggerService
+                      .getSource({
+                        sourceReference: 0,
+                        path: path
+                      })
+                      .then(source => {
+                        this._model.open(source);
+                      })
+                      .catch(reason => {
+                        void showErrorMessage(
+                          this._trans.__('Fail to get source'),
+                          this._trans.__(
+                            "Fail to get '%1' source:\n%2",
+                            path,
+                            reason
+                          )
+                        );
+                      });
+                  }}
+                />
+              );
+              return button;
+            });
+          }}
+        </UseSignal>
+      </React.Fragment>
+    );
+  }
+
+  /**
+   * Show or hide the filter box.
+   */
+  public toggleFilterbox(): void {
+    this._showFilter = !this._showFilter;
+    this.update();
+  }
+
+  private _model: IDebugger.Model.IKernelSources;
+  private _debuggerService: IDebugger;
+  private _trans: IRenderMime.TranslationBundle;
+  private _showFilter = false;
+}
+
+/**
+ * A namespace for SourcesBody `statics`.
+ */
+export namespace KernelSourcesBody {
+  /**
+   * Instantiation options for `Breakpoints`.
+   */
+  export interface IOptions {
+    /**
+     * The debug service.
+     */
+    service: IDebugger;
+
+    /**
+     * The sources model.
+     */
+    model: IDebugger.Model.IKernelSources;
+
+    /**
+     * The application language translator
+     */
+    translator?: ITranslator;
+  }
+}

package/src/panels/kernelSources/filter.tsx

@@ -0,0 +1,44 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { InputGroup, UseSignal } from '@jupyterlab/ui-components';
+
+import React from 'react';
+
+import { IDebugger } from '../../tokens';
+
+/**
+ * The class name added to the filebrowser crumbs node.
+ */
+export interface IFilterBoxProps {
+  model: IDebugger.Model.IKernelSources;
+}
+
+const FilterBox = (props: IFilterBoxProps) => {
+  const onFilterChange = (e: any) => {
+    const filter = (e.target as HTMLInputElement).value;
+    props.model.filter = filter;
+  };
+  return (
+    <InputGroup
+      type="text"
+      onChange={onFilterChange}
+      placeholder="Filter the kernel sources"
+      value={props.model.filter}
+    />
+  );
+};
+
+/**
+ * A widget which hosts a input textbox to filter on file names.
+ */
+export const KernelSourcesFilter = (props: IFilterBoxProps) => {
+  return (
+    <UseSignal
+      signal={props.model.filterChanged}
+      initialArgs={props.model.filter}
+    >
+      {model => <FilterBox model={props.model} />}
+    </UseSignal>
+  );
+};