Refactor breakpoints.

src/breakpoints/index.ts

@@ -1,4 +1,64 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-export * from './widget';
+import { Toolbar, ToolbarButton } from '@jupyterlab/apputils';
+
+import { Widget, Panel, PanelLayout } from '@phosphor/widgets';
+
+export class Breakpoints extends Panel {
+  constructor(options: Breakpoints.IOptions = {}) {
+    super();
+
+    this.model = {};
+    this.addClass('jp-DebuggerBreakpoints');
+    this.title.label = 'Breakpoints';
+
+    const header = new BreakpointsHeader(this.title.label);
+
+    this.addWidget(header);
+    this.addWidget(this.body);
+
+    header.toolbar.addItem(
+      'deactivate',
+      new ToolbarButton({
+        iconClassName: 'jp-DebuggerDeactivateIcon',
+        onClick: () => {
+          console.log('`deactivate` was clicked');
+        },
+        tooltip: 'Deactivate Breakpoints'
+      })
+    );
+  }
+
+  readonly body = new Panel();
+
+  readonly model: Breakpoints.IModel;
+}
+
+class BreakpointsHeader extends Widget {
+  constructor(title: string) {
+    super({ node: document.createElement('header') });
+
+    const layout = new PanelLayout();
+    const span = new Widget({ node: document.createElement('span') });
+
+    this.layout = layout;
+    span.node.textContent = title;
+    layout.addWidget(span);
+    layout.addWidget(this.toolbar);
+  }
+
+  readonly toolbar = new Toolbar();
+}
+
+export namespace Breakpoints {
+  /**
+   * The breakpoints UI model.
+   */
+  export interface IModel {}
+
+  /**
+   * Instantiation options for `Breakpoints`;
+   */
+  export interface IOptions extends Panel.IOptions {}
+}

src/breakpoints/widget.ts

@@ -1,43 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { Toolbar, ToolbarButton } from '@jupyterlab/apputils';
-
-import { Widget, Panel } from '@phosphor/widgets';
-
-export class BreakPointsWidget extends Panel {
-  readonly body: Panel;
-
-  readonly header: Panel;
-
-  readonly label: Widget;
-
-  readonly toolbar: Toolbar;
-
-  constructor() {
-    super();
-
-    this.header = new Panel();
-    this.header.addClass('jp-DebuggerSidebarVariables-header');
-    this.addWidget(this.header);
-
-    this.label = new Widget();
-    this.label.node.textContent = 'BreakPoints';
-    this.label.addClass('jp-DebuggerSidebarVariables-header-label');
-    this.header.addWidget(this.label);
-
-    const toolbar = new Toolbar();
-    toolbar.addItem(
-      'deactivate',
-      new ToolbarButton({
-        iconClassName: 'jp-DebuggerDeactivateIcon',
-        onClick: () => {
-          console.log('`deactivate` was clicked');
-        },
-        tooltip: 'Deactivate Breakpoints'
-      })
-    );
-    this.toolbar = toolbar;
-    this.header.addWidget(this.toolbar);
-  }
-}

src/sidebar.ts

@@ -3,7 +3,7 @@
 
 import { SplitPanel } from '@phosphor/widgets';
 
-import { BreakPointsWidget } from './breakpoints';
+import { Breakpoints } from './breakpoints';
 
 import { Debugger } from './debugger';
 
@@ -20,18 +20,18 @@ export class DebuggerSidebar extends SplitPanel {
 
     this.variables = new VariablesWidget();
     this.callstack = new CallstackWidget();
-    this.breakPoints = new BreakPointsWidget();
+    this.breakpoints = new Breakpoints();
 
     this.addWidget(this.variables);
     this.addWidget(this.callstack);
-    this.addWidget(this.breakPoints);
+    this.addWidget(this.breakpoints);
   }
 
   readonly variables: VariablesWidget;
 
   readonly callstack: CallstackWidget;
 
-  readonly breakPoints: BreakPointsWidget;
+  readonly breakpoints: Breakpoints;
 
   get model(): Debugger.Model | null {
     return this._model;