Use CommandToolbarButton for callstack buttons

src/callstack/index.ts

@@ -1,19 +1,19 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { Toolbar, ToolbarButton } from '@jupyterlab/apputils';
+import { CommandToolbarButton, Toolbar } from '@jupyterlab/apputils';
 
+import { CommandRegistry } from '@phosphor/commands';
 import { ISignal, Signal } from '@phosphor/signaling';
 import { Panel, PanelLayout, Widget } from '@phosphor/widgets';
 import { DebugProtocol } from 'vscode-debugprotocol';
-import { IDebugger } from '../tokens';
 import { Body } from './body';
 
 export class Callstack extends Panel {
   constructor(options: Callstack.IOptions) {
     super();
 
-    const { service, model } = options;
+    const { commands, model } = options;
 
     this.model = model;
     this.addClass('jp-DebuggerCallstack');
@@ -27,64 +27,41 @@ export class Callstack extends Panel {
 
     header.toolbar.addItem(
       'continue',
-      new ToolbarButton({
-        iconClassName: 'jp-RunIcon',
-        onClick: () => {
-          if (!service.isThreadStopped()) {
-            return;
-          }
-          void service.continue();
-        },
-        tooltip: 'Continue'
+      new CommandToolbarButton({
+        commands: commands.registry,
+        id: commands.continue
       })
     );
+
     header.toolbar.addItem(
       'stop',
-      new ToolbarButton({
-        iconClassName: 'jp-StopIcon',
-        onClick: () => {
-          console.log('`stop` was clicked');
-        },
-        tooltip: 'Stop'
+      new CommandToolbarButton({
+        commands: commands.registry,
+        id: ''
       })
     );
+
     header.toolbar.addItem(
       'step-over',
-      new ToolbarButton({
-        iconClassName: 'jp-StepOverIcon',
-        onClick: () => {
-          if (!service.isThreadStopped()) {
-            return;
-          }
-          void service.next();
-        },
-        tooltip: 'Step Over'
+      new CommandToolbarButton({
+        commands: commands.registry,
+        id: commands.next
       })
     );
+
     header.toolbar.addItem(
       'step-in',
-      new ToolbarButton({
-        iconClassName: 'jp-StepInIcon',
-        onClick: () => {
-          if (!service.isThreadStopped()) {
-            return;
-          }
-          void service.stepIn();
-        },
-        tooltip: 'Step In'
+      new CommandToolbarButton({
+        commands: commands.registry,
+        id: commands.stepIn
       })
     );
+
     header.toolbar.addItem(
       'step-out',
-      new ToolbarButton({
-        iconClassName: 'jp-StepOutIcon',
-        onClick: () => {
-          if (!service.isThreadStopped()) {
-            return;
-          }
-          void service.stepOut();
-        },
-        tooltip: 'Step Out'
+      new CommandToolbarButton({
+        commands: commands.registry,
+        id: commands.stepOut
       })
     );
   }
@@ -148,8 +125,39 @@ export namespace Callstack {
     private _currentFrameChanged = new Signal<this, IFrame>(this);
   }
 
+  export interface ICommands {
+    /**
+     * The command registry.
+     */
+    registry: CommandRegistry;
+
+    /**
+     * The continue command ID.
+     */
+    continue: string;
+
+    /**
+     * The next / stepOver command ID.
+     */
+    next: string;
+
+    /**
+     * The stepIn command ID.
+     */
+    stepIn: string;
+
+    /**
+     * The stepOut command ID.
+     */
+    stepOut: string;
+  }
+
   export interface IOptions extends Panel.IOptions {
-    service: IDebugger;
+    /**
+     * The toolbar commands interface for the callstack.
+     */
+    commands: ICommands;
+
     model: Model;
   }
 }

src/debugger.ts

@@ -44,7 +44,8 @@ export class Debugger extends SplitPanel {
 
     this.sidebar = new Debugger.Sidebar({
       model: this.model,
-      service: this.service
+      service: this.service,
+      callstackCommands: options.callstackCommands
     });
 
     this.editors = new DebuggerEditors({
@@ -82,6 +83,7 @@ export namespace Debugger {
   export interface IOptions {
     debugService: DebugService;
     editorFactory: CodeEditor.Factory;
+    callstackCommands: Callstack.ICommands;
     connector?: IDataConnector<ReadonlyJSONValue>;
   }
 
@@ -91,9 +93,12 @@ export namespace Debugger {
       this.orientation = 'vertical';
       this.addClass('jp-DebuggerSidebar');
 
-      const { service, model } = options;
+      const { callstackCommands, service, model } = options;
       this.variables = new Variables({ model: model.variablesModel });
-      this.callstack = new Callstack({ service, model: model.callstackModel });
+      this.callstack = new Callstack({
+        commands: callstackCommands,
+        model: model.callstackModel
+      });
       this.breakpoints = new Breakpoints({
         service,
         model: model.breakpointsModel
@@ -173,6 +178,7 @@ export namespace Debugger {
     export interface IOptions {
       model: Debugger.Model;
       service: IDebugger;
+      callstackCommands: Callstack.ICommands;
     }
   }
 

src/index.ts

@@ -285,6 +285,8 @@ const main: JupyterFrontEndPlugin<IDebugger> = {
 
     commands.addCommand(CommandIDs.debugContinue, {
       label: 'Continue',
+      caption: 'Continue',
+      iconClass: 'jp-MaterialIcon jp-RunIcon',
       isEnabled: () => {
         return service.isThreadStopped();
       },
@@ -296,6 +298,8 @@ const main: JupyterFrontEndPlugin<IDebugger> = {
 
     commands.addCommand(CommandIDs.next, {
       label: 'Next',
+      caption: 'Next',
+      iconClass: 'jp-MaterialIcon jp-StepOverIcon',
       isEnabled: () => {
         return service.isThreadStopped();
       },
@@ -306,6 +310,8 @@ const main: JupyterFrontEndPlugin<IDebugger> = {
 
     commands.addCommand(CommandIDs.stepIn, {
       label: 'StepIn',
+      caption: 'Step In',
+      iconClass: 'jp-MaterialIcon jp-StepInIcon',
       isEnabled: () => {
         return service.isThreadStopped();
       },
@@ -316,6 +322,8 @@ const main: JupyterFrontEndPlugin<IDebugger> = {
 
     commands.addCommand(CommandIDs.stepOut, {
       label: 'StepOut',
+      caption: 'Step Out',
+      iconClass: 'jp-MaterialIcon jp-StepOutIcon',
       isEnabled: () => {
         return service.isThreadStopped();
       },
@@ -344,6 +352,14 @@ const main: JupyterFrontEndPlugin<IDebugger> = {
         const savedMode = (await state.fetch('mode')) as IDebugger.Mode;
         const mode = savedMode ? savedMode : 'expanded';
 
+        const callstackCommands = {
+          registry: commands,
+          continue: CommandIDs.debugContinue,
+          next: CommandIDs.next,
+          stepIn: CommandIDs.stepIn,
+          stepOut: CommandIDs.stepOut
+        };
+
         if (tracker.currentWidget) {
           widget = tracker.currentWidget;
         } else {
@@ -351,6 +367,7 @@ const main: JupyterFrontEndPlugin<IDebugger> = {
             content: new Debugger({
               debugService: service,
               connector: state,
+              callstackCommands,
               editorFactory
             })
           });

tests/src/debugger.spec.ts

@@ -2,6 +2,8 @@ import { expect } from 'chai';
 
 import { CodeMirrorEditorFactory } from '@jupyterlab/codemirror';
 
+import { CommandRegistry } from '@phosphor/commands';
+
 import { Debugger } from '../../lib/debugger';
 
 import { DebugService } from '../../lib/service';
@@ -10,6 +12,7 @@ class TestPanel extends Debugger {}
 
 describe('Debugger', () => {
   const service = new DebugService();
+  const registry = new CommandRegistry();
   const editorServices = new CodeMirrorEditorFactory();
   const editorFactory = editorServices.newInlineEditor;
 
@@ -18,6 +21,13 @@ describe('Debugger', () => {
   beforeEach(() => {
     panel = new TestPanel({
       debugService: service,
+      callstackCommands: {
+        registry,
+        continue: '',
+        next: '',
+        stepIn: '',
+        stepOut: ''
+      },
       editorFactory: editorFactory
     });
   });