refactor callstack

src/callstack/callstack.ts

@@ -1,57 +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 Callstack extends Panel {
-  readonly header: Panel;
-
-  readonly label: Widget;
-
-  readonly toolbar: Toolbar;
-
-  constructor() {
-    super();
-
-    this.header = new Panel();
-    this.header.addClass('jp-DebuggerSidebar-item-header');
-    this.addWidget(this.header);
-
-    this.label = new Widget();
-    this.label.node.textContent = 'Call stack';
-    this.label.addClass('jp-DebuggerSidebar-item-header-label');
-    this.header.addWidget(this.label);
-
-    const toolbar = new Toolbar();
-    toolbar.addItem(
-      'continue',
-      new ToolbarButton({
-        iconClassName: 'jp-RunIcon',
-        onClick: () => {
-          console.log('`run` was clicked');
-        },
-        tooltip: 'Continue'
-      })
-    );
-    toolbar.addItem(
-      'stop',
-      new ToolbarButton({
-        iconClassName: 'jp-StopIcon',
-        onClick: () => {
-          console.log('`stop` was clicked');
-        },
-        tooltip: 'Stop'
-      })
-    );
-    toolbar.addItem('step-over', new ToolbarButton({ label: 'Step Over' }));
-    toolbar.addItem('step-in', new ToolbarButton({ label: 'Step In' }));
-    toolbar.addItem('step-out', new ToolbarButton({ label: 'Step Out' }));
-
-    this.toolbar = toolbar;
-    this.header.addWidget(this.toolbar);
-  }
-}
-
-export namespace Callstack {}

src/callstack/index.ts

@@ -1,4 +1,77 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-export * from './callstack';
+import { Toolbar, ToolbarButton } from '@jupyterlab/apputils';
+
+import { Widget, Panel, PanelLayout } from '@phosphor/widgets';
+
+export class Callstack extends Panel {
+  constructor(options: Callstack.IOptions = {}) {
+    super();
+
+    this.model = {};
+    this.addClass('jp-DebuggerCallstack');
+    this.title.label = 'Callstack';
+
+    const header = new CallstackHeader(this.title.label);
+
+    this.addWidget(header);
+    this.addWidget(this.body);
+
+    header.toolbar.addItem(
+      'continue',
+      new ToolbarButton({
+        iconClassName: 'jp-RunIcon',
+        onClick: () => {
+          console.log('`run` was clicked');
+        },
+        tooltip: 'Continue'
+      })
+    );
+    header.toolbar.addItem(
+      'stop',
+      new ToolbarButton({
+        iconClassName: 'jp-StopIcon',
+        onClick: () => {
+          console.log('`stop` was clicked');
+        },
+        tooltip: 'Stop'
+      })
+    );
+    header.toolbar.addItem(
+      'step-over',
+      new ToolbarButton({ label: 'Step Over' })
+    );
+    header.toolbar.addItem('step-in', new ToolbarButton({ label: 'Step In' }));
+    header.toolbar.addItem(
+      'step-out',
+      new ToolbarButton({ label: 'Step Out' })
+    );
+  }
+
+  readonly body = new Panel();
+
+  readonly model: Callstack.IModel;
+}
+
+class CallstackHeader 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 Callstack {
+  export interface IModel {}
+
+  export interface IOptions extends Panel.IOptions {}
+}

src/variables/description/index.ts

@@ -1,6 +1,6 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-export * from './variableTableDescription';
-export * from './variableDescription';
+export * from './variablesTable';
+export * from './variablesBody';
 export * from './useTbody';

src/variables/description/variableDescription.ts → src/variables/description/variablesBody.ts

@@ -3,36 +3,30 @@
 
 import { Panel, SplitPanel, Widget } from '@phosphor/widgets';
 
-import { Variables } from '../variables';
+import { Variables } from '../index';
 
-import { VariableTableDescription } from './variableTableDescription';
+import { VariablesTable } from './variablesTable';
 
-export class VariableDescription extends SplitPanel {
-  readonly searchParams: Widget;
-  readonly table: Widget;
-  readonly descriptionBox: Panel;
-
-  model: Variables.Model;
-  currentVariable: any;
-
-  constructor(model: Variables.Model) {
+export class VariablesBody extends SplitPanel {
+  constructor(model: Variables.IModel) {
     super();
     this.orientation = 'vertical';
     this.model = model;
     this.currentVariable = this.model.current;
+    this.addClass('jp-DebuggerVariables-body');
 
-    this.table = new VariableTableDescription(this.model);
-    this.table.addClass('jp-DebuggerSidebarVariable-table');
+    this.table = new VariablesTable(this.model);
+    this.table.addClass('jp-DebuggerVariables-table');
     this.addWidget(this.table);
 
     this.descriptionBox = new Panel();
-    this.descriptionBox.addClass('jp-DebuggerSidebarVariable-description');
+    this.descriptionBox.addClass('jp-DebuggerVariables-description');
 
     this.addWidget(this.descriptionBox);
     this.descriptionBox.node.innerHTML = '<b> Select Variable </b>';
 
     this.model.currentChanged.connect(
-      (model: Variables.Model, variable: Variables.IVariable) => {
+      (model: Variables.IModel, variable: Variables.IVariable) => {
         this.descriptionBox.node.innerHTML = this.renderDescription(
           this.model.current
         );
@@ -40,6 +34,13 @@ export class VariableDescription extends SplitPanel {
     );
   }
 
+  readonly searchParams: Widget;
+  readonly table: Widget;
+  readonly descriptionBox: Panel;
+
+  model: Variables.IModel;
+  currentVariable: any;
+
   // Still in progres: rendering description
 
   protected renderDescription(variable: Variables.IVariable) {

src/variables/description/variableTableDescription.tsx → src/variables/description/variablesTable.tsx

@@ -9,18 +9,18 @@ import { Widget, Panel } from '@phosphor/widgets';
 
 import React, { useState } from 'react';
 
-import { Variables } from '../variables';
+import { Variables } from '../index';
 
-import { VariablesSearch } from './../toggle';
+import { VariablesSearch } from '../toggle';
 
 import useTbody from './useTbody';
 
-const ROW_CLASS = 'jp-DebuggerSidebarVariables-table-row';
+const ROW_CLASS = 'jp-DebuggerVariables-table-row';
 
-const HEAD_CLASS = 'jp-DebuggerSidebarVariables-table-head';
+const HEAD_CLASS = 'jp-DebuggerVariables-table-head';
 
-export class VariableTableDescription extends Panel {
-  constructor(model: Variables.Model) {
+export class VariablesTable extends Panel {
+  constructor(model: Variables.IModel) {
     super();
     this._model = model;
     this.searchParams = new VariablesSearch(this._model);
@@ -29,7 +29,7 @@ export class VariableTableDescription extends Panel {
     this.addWidget(this.myWidget);
   }
 
-  private _model: Variables.Model;
+  private _model: Variables.IModel;
   private searchParams: Widget;
   private myWidget: Widget;
 
@@ -66,7 +66,7 @@ export class VariableTableDescription extends Panel {
   }
 }
 
-const Table = ({ model }: { model: Variables.Model }) => {
+const TableComponent = ({ model }: { model: Variables.IModel }) => {
   const [variables, setVariables] = useState(model.variables);
   const [variable, TableBody] = useTbody(variables, model.current, ROW_CLASS);
 
@@ -98,7 +98,7 @@ const Table = ({ model }: { model: Variables.Model }) => {
 };
 
 class TableVariableWidget extends ReactWidget {
-  state: Variables.Model;
+  state: Variables.IModel;
 
   constructor(props: any) {
     super(props);
@@ -106,6 +106,6 @@ class TableVariableWidget extends ReactWidget {
   }
 
   render() {
-    return <Table model={this.state} />;
+    return <TableComponent model={this.state} />;
   }
 }

src/variables/index.ts

@@ -1,4 +1,161 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-export * from './variables';
+import { Panel, Widget, PanelLayout, SplitPanel } from '@phosphor/widgets';
+
+import { VariablesBody } from './description';
+
+import { Signal, ISignal } from '@phosphor/signaling';
+
+import { DebugProtocol } from 'vscode-debugprotocol';
+
+export class Variables extends Panel {
+  constructor(options: Variables.IOptions = {}) {
+    super();
+
+    this.model = new Variables.IModel(MOCK_DATA_ROW.variables);
+    this.addClass('jp-DebuggerVariables');
+    this.title.label = 'Variables';
+
+    const header = new VariablesHeader(this.title.label);
+    this.body = new VariablesBody(this.model);
+
+    this.addWidget(header);
+    this.addWidget(this.body);
+  }
+
+  readonly model: Variables.IModel;
+
+  readonly body: SplitPanel;
+}
+
+class VariablesHeader 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);
+  }
+}
+
+export namespace Variables {
+  export interface IVariable extends DebugProtocol.Variable {
+    description: string;
+  }
+
+  export interface IModel {}
+
+  export class IModel implements IModel {
+    constructor(model: IVariable[]) {
+      this._state = model;
+    }
+
+    get currentChanged(): ISignal<this, IVariable> {
+      return this._currentChanged;
+    }
+
+    get current(): IVariable {
+      return this._current;
+    }
+    set current(variable: IVariable) {
+      if (this._current === variable) {
+        return;
+      }
+      this._current = variable;
+      this._currentChanged.emit(variable);
+    }
+
+    get filter() {
+      return this._filterState;
+    }
+    set filter(value) {
+      if (this._filterState === value) {
+        return;
+      }
+      this._filterState = value;
+      this._variablesChanged.emit(this._filterVariables());
+    }
+
+    get variables(): IVariable[] {
+      if (this._filterState) {
+        return this._filterVariables();
+      }
+      return this._state;
+    }
+    set variables(variables: IVariable[]) {
+      this._state = variables;
+    }
+
+    get variablesChanged(): ISignal<this, IVariable[]> {
+      return this._variablesChanged;
+    }
+
+    getCurrentVariables(): IVariable[] {
+      return this.variables;
+    }
+
+    private _filterVariables(): IVariable[] {
+      return this._state.filter(
+        ele => ele.name.indexOf(this._filterState) !== -1
+      );
+    }
+
+    private _current: IVariable;
+    private _currentChanged = new Signal<this, IVariable>(this);
+    private _variablesChanged = new Signal<this, IVariable[]>(this);
+    private _filterState: string = '';
+    private _state: IVariable[];
+  }
+
+  export interface IOptions extends Panel.IOptions {}
+}
+
+const MOCK_DATA_ROW = {
+  variables: [
+    {
+      name: 'test 1',
+      value: 'function()',
+      type: 'function',
+      variablesReference: 0,
+      description: 'def test1(): return 0'
+    },
+    {
+      name: 'Classtest',
+      value: 'class',
+      type: 'class',
+      variablesReference: 1,
+      description: 'def test2(): return 0'
+    },
+    {
+      name: 'test 3',
+      value: 'function()',
+      type: 'function',
+      variablesReference: 0,
+      description: 'def test1(): return 0'
+    },
+    {
+      name: 'test 4',
+      value: 'function()',
+      type: 'function',
+      variablesReference: 0,
+      description: 'def test2(): return 0'
+    },
+    {
+      name: 'test 5',
+      value: 'function()',
+      type: 'function',
+      variablesReference: 0,
+      description: 'def test1(): return 0'
+    },
+    {
+      name: 'test 6',
+      value: 'function()',
+      type: 'function',
+      variablesReference: 0,
+      description: 'def test2(): return 0'
+    }
+  ]
+};

src/variables/toggle/index.ts

@@ -1,4 +1,4 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-export * from './variableSearch';
+export * from './variablesSearch';

src/variables/toggle/variableSearch.tsx → src/variables/toggle/variablesSearch.tsx

@@ -7,7 +7,7 @@ import { Widget, Panel } from '@phosphor/widgets';
 
 import React, { useState, useRef } from 'react';
 
-import { Variables } from './../variables';
+import { Variables } from '../index';
 import useOutsideClick from './useOutsideClick';
 
 const SEARCH_ITEM = 'jp-Search-item';
@@ -18,7 +18,7 @@ export class VariablesSearch extends Panel {
 
   constructor(model: any) {
     super();
-    this.addClass('jp-DebuggerSidebarVariable-Search');
+    this.addClass('jp-DebuggerVariables-Search');
     this.node.style.overflow = 'visible';
     this.scope = new VariableScopeSearch();
     this.search = new VariableSearchInput(model);
@@ -35,23 +35,21 @@ const SearchComponent = ({ model }: any) => {
   const [state, setState] = useState('');
   model.filter = state;
   return (
-    <div>
-      <input
-        placeholder="Search..."
-        className="jp-DebuggerSidebarVariable-Search-input"
-        value={state}
-        onChange={e => {
-          setState(e.target.value);
-        }}
-      />
-    </div>
+    <input
+      placeholder="Search..."
+      className="jp-DebuggerVariables-Search-input"
+      value={state}
+      onChange={e => {
+        setState(e.target.value);
+      }}
+    />
   );
 };
 
 class VariableSearchInput extends ReactWidget {
   search: string;
-  model: Variables.IVariablesModel;
-  constructor(model: Variables.IVariablesModel) {
+  model: Variables.IModel;
+  constructor(model: Variables.IModel) {
     super();
     this.model = model;
     this.search = model.filter;

src/variables/variables.ts

@@ -1,165 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { Panel } from '@phosphor/widgets';
-
-import { VariableDescription } from './description';
-
-import { Signal, ISignal } from '@phosphor/signaling';
-import { DebugProtocol } from 'vscode-debugprotocol';
-
-export class Variables extends Panel {
-  constructor() {
-    super();
-
-    this.model = new Variables.Model(MOCK_DATA_ROW.variables);
-
-    this.header = new Panel();
-    this.header.addClass('jp-DebuggerSidebar-item-header');
-    this.addWidget(this.header);
-
-    this.label = new Panel();
-    this.label.node.textContent = 'Variables';
-    this.label.addClass('jp-DebuggerSidebar-item-header-label');
-    this.header.addWidget(this.label);
-    this.variablesDescription = new VariableDescription(this.model);
-    this.variablesDescription.addClass('jp-DebuggerSidebarVariables-body');
-    this.addWidget(this.variablesDescription);
-  }
-
-  readonly body: Panel;
-
-  readonly header: Panel;
-
-  readonly label: Panel;
-
-  readonly model: Variables.Model;
-
-  readonly searcher: Panel;
-
-  readonly variablesDescription: Panel;
-}
-
-export namespace Variables {
-  // will be change for DebugProtoclVariable
-  export interface IVariable extends DebugProtocol.Variable {
-    description: string;
-  }
-
-  export interface IVariablesModel {
-    current: IVariable;
-    filter: string;
-    variables: IVariable[];
-    currentChanged: ISignal<Model, IVariable>;
-    variablesChanged: ISignal<Model, IVariable[]>;
-  }
-
-  export class Model implements IVariablesModel {
-    constructor(model: IVariable[]) {
-      this._state = model;
-    }
-
-    get currentChanged(): ISignal<this, IVariable> {
-      return this._currentChanged;
-    }
-
-    get current(): IVariable {
-      return this._current;
-    }
-    set current(variable: IVariable) {
-      if (this._current === variable) {
-        return;
-      }
-      this._current = variable;
-      this._currentChanged.emit(variable);
-    }
-
-    get filter() {
-      return this._filterState;
-    }
-    set filter(value) {
-      if (this._filterState === value) {
-        return;
-      }
-      this._filterState = value;
-      this._variablesChanged.emit(this._filterVariables());
-    }
-
-    get variables(): IVariable[] {
-      if (this._filterState) {
-        return this._filterVariables();
-      }
-      return this._state;
-    }
-    set variables(variables: IVariable[]) {
-      this._state = variables;
-    }
-
-    get variablesChanged(): ISignal<this, IVariable[]> {
-      return this._variablesChanged;
-    }
-
-    getCurrentVariables(): IVariable[] {
-      return this.variables;
-    }
-
-    private _filterVariables(): IVariable[] {
-      return this._state.filter(
-        ele => ele.name.indexOf(this._filterState) !== -1
-      );
-    }
-
-    private _current: IVariable;
-    private _currentChanged = new Signal<this, IVariable>(this);
-    private _variablesChanged = new Signal<this, IVariable[]>(this);
-    private _filterState: string = '';
-    private _state: IVariable[];
-  }
-}
-
-const MOCK_DATA_ROW = {
-  variables: [
-    {
-      name: 'test 1',
-      value: 'function()',
-      type: 'function',
-      variablesReference: 0,
-      description: 'def test1(): return 0'
-    },
-    {
-      name: 'Classtest',
-      value: 'class',
-      type: 'class',
-      variablesReference: 1,
-      description: 'def test2(): return 0'
-    },
-    {
-      name: 'test 3',
-      value: 'function()',
-      type: 'function',
-      variablesReference: 0,
-      description: 'def test1(): return 0'
-    },
-    {
-      name: 'test 4',
-      value: 'function()',
-      type: 'function',
-      variablesReference: 0,
-      description: 'def test2(): return 0'
-    },
-    {
-      name: 'test 5',
-      value: 'function()',
-      type: 'function',
-      variablesReference: 0,
-      description: 'def test1(): return 0'
-    },
-    {
-      name: 'test 6',
-      value: 'function()',
-      type: 'function',
-      variablesReference: 0,
-      description: 'def test2(): return 0'
-    }
-  ]
-};

style/index.css

@@ -2,7 +2,7 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
-
+@import './sidebar.css';
 @import './toolbar.css';
 @import './variables.css';
 @import './callstack.css';
@@ -14,42 +14,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-DebuggerSidebar-item-header {
-  border-top: solid var(--jp-border-width) var(--jp-border-color1);
-}
-
-.jp-DebuggerSidebar div .jp-DebuggerSidebar-item-header {
-  border-bottom: solid var(--jp-border-width) var(--jp-border-color1);
-}
-
-.jp-DebuggerSidebar-item-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  background-color: var(--jp-layout-color2);
-  height: 24px;
-}
-
-.jp-DebuggerSidebar-item-header-label {
-  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;
-}
-
-/*  menu */
-
 .jp-MenuComponent {
   position: absolute;
   list-style: none;

style/sidebar.css

@@ -0,0 +1,31 @@
+.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 > header {
+  border-bottom: solid var(--jp-border-width) var(--jp-border-color1);
+  border-top: solid var(--jp-border-width) var(--jp-border-color1);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--jp-layout-color2);
+  height: 24px;
+}
+
+.jp-DebuggerSidebar > div.jp-DebuggerVariables > header {
+  border-top: none;
+}
+
+.jp-DebuggerSidebar > div > header > span {
+  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;
+}

style/variables.css

@@ -1,4 +1,4 @@
-.jp-DebuggerSidebarVariables-body {
+.jp-DebuggerVariables-body {
   border-bottom: solid var(--jp-border-width) var(--jp-border-color2);
   min-height: 24px;
   height: 99%;
@@ -6,17 +6,17 @@
   flex-direction: column;
 }
 
-.jp-DebuggerSidebarVariable-table {
+.jp-DebuggerVariables-table {
   min-height: 50px;
   flex-basis: 30%;
 }
 
-.jp-DebuggerSidebarVariable-table table {
+.jp-DebuggerVariables-table table {
   width: 100%;
   border-collapse: collapse;
 }
 
-.jp-DebuggerSidebarVariable-table .jp-DebuggerSidebarVariables-table-head {
+.jp-DebuggerVariables-table .jp-DebuggerVariables-table-head {
   margin-bottom: 4px;
   border-top: var(--jp-border-width) solid var(--jp-border-color2);
   border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
@@ -26,34 +26,33 @@
   text-align: left;
 }
 
-.jp-DebuggerSidebarVariables-table-head:hover,
-.jp-DebuggerSidebarVariables-table-row:hover {
+.jp-DebuggerVariables-table-head:hover,
+.jp-DebuggerVariables-table-row:hover {
   background: var(--jp-layout-color2);
 }
 
-.jp-DebuggerSidebarVariables-table-row.selected {
+.jp-DebuggerVariables-table-row.selected {
   color: white;
   background: var(--jp-brand-color1);
 }
 
-.jp-DebuggerSidebarVariables-table-head
-  + .jp-DebuggerSidebarVariables-table-head {
+.jp-DebuggerVariables-table-head + .jp-DebuggerVariables-table-head {
   border-left: var(--jp-border-width) solid var(--jp-border-color2);
 }
 
-.jp-DebuggerSidebarVariable-description {
+.jp-DebuggerVariables-description {
   border-top: var(--jp-border-width) solid var(--jp-border-color2);
   min-height: 25px;
   padding: 10px;
   overflow: auto;
 }
 
-.jp-DebuggerSidebarVariable-description p {
+.jp-DebuggerVariables-description p {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
 
-.jp-DebuggerSidebarVariable-Search {
+.jp-DebuggerVariables-Search {
   color: var(--jp-ui-font-color1);
   flex: 0 0 auto;
   display: flex;
@@ -61,7 +60,7 @@
   height: 24px;
 }
 
-.jp-DebuggerSidebarVariable-Search > .jp-Search-item {
+.jp-DebuggerVariables-Search > .jp-Search-item {
   flex: 0 0 auto;
   padding-left: 8px;
   padding-right: 8px;
@@ -70,7 +69,7 @@
   line-height: 23px;
 }
 
-.jp-DebuggerSidebarVariable-Search-input {
+.jp-DebuggerVariables-Search-input {
   min-height: 22px;
   vertical-align: top;
   width: 100%;
@@ -78,7 +77,7 @@
   border: none;
 }
 
-.jp-DebuggerSidebarVariable-Scope-label {
+.jp-DebuggerVariables-Scope-label {
   padding-left: 10px;
   padding-right: 5px;
 }