Merge pull request #25 from afshin/breakpoints-refactor

Refactor breakpoints widget.

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;

style/index.css

@@ -3,7 +3,8 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-@import './toolbar.css';
+@import './icons.css';
+@import './sidebar.css';
 
 .jp-Debugger {
   background: var(--jp-layout-color1);
@@ -11,15 +12,6 @@
   bottom: 0;
 }
 
-.jp-DebuggerSidebar {
-  display: flex;
-  flex-direction: column;
-  color: var(--jp-ui-font-color1);
-  background: var(--jp-layout-color1);
-  font-size: var(--jp-ui-font-size1);
-  min-width: 350px !important;
-}
-
 .jp-DebuggerSidebar div:not(:first-child) .jp-DebuggerSidebarVariables-header {
   border-top: solid var(--jp-border-width) var(--jp-border-color1);
 }

style/sidebar.css

@@ -0,0 +1,33 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+.jp-DebuggerSidebar {
+  display: flex;
+  flex-direction: column;
+  color: var(--jp-ui-font-color1);
+  background: var(--jp-layout-color1);
+  font-size: var(--jp-ui-font-size1);
+  width: 350px;
+}
+
+.jp-DebuggerSidebar header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--jp-layout-color2);
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
+  height: 24px;
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: var(--jp-ui-font-size0);
+  color: var(--jp-ui-font-color1);
+  padding-left: 8px;
+  padding-right: 4px;
+}
+
+.jp-DebuggerSidebar .jp-Toolbar {
+  background: var(--jp-layout-color2);
+  box-shadow: none;
+}

style/toolbar.css

@@ -1,11 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-@import './icons.css';
-
-.jp-DebuggerSidebar .jp-Toolbar {
-  background: var(--jp-layout-color2);
-  box-shadow: none;
-}