add widgets, which represent variabels,callstack and breakpoints

src/breakpoints/index.ts

@@ -0,0 +1 @@
+export * from './widget';

src/breakpoints/widget.ts

@@ -0,0 +1,31 @@
+import { Widget, Panel } from "@phosphor/widgets";
+
+
+export class BreakPointsWidget extends Panel {
+    
+    readonly header: Panel;
+    readonly label: Widget;
+    readonly body: Panel;
+    readonly variableDescription: Panel;
+
+
+    readonly model_header = {
+        label:'BreakPoints',
+        class:'debugger-variables__header'
+    };
+
+    constructor(){
+        super();
+
+        this.header = new Panel();
+        this.header.addClass(this.model_header.class);
+        this.addWidget(this.header);
+
+        this.label = new Widget();
+        this.label.node.textContent = this.model_header.label;
+        this.label.addClass(this.model_header.class+'-label');
+        this.header.addWidget(this.label);
+    }
+
+
+}

src/callstack/index.ts

@@ -0,0 +1 @@
+export * from './widget';

src/callstack/widget.ts

@@ -0,0 +1,29 @@
+import { Widget, Panel } from "@phosphor/widgets";
+
+
+export class CallstackWidget extends Panel {
+    
+    readonly header: Panel;
+    readonly label: Widget;
+
+    readonly model_header = {
+        label:'CallStack',
+        class:'debugger-variables__header'
+    };
+
+    constructor(){
+        super();
+        // header
+        this.header = new Panel();
+        this.header.addClass(this.model_header.class);
+        this.addWidget(this.header);
+
+        this.label = new Widget();
+        this.label.node.textContent = this.model_header.label;
+        this.label.addClass(this.model_header.class+'-label');
+        this.header.addWidget(this.label);
+
+    }
+
+
+}

src/sidebar.ts

@@ -5,18 +5,31 @@ import { SplitPanel } from '@phosphor/widgets';
 import { VariablesWidget } from './variables';
 
 import { Debugger } from './debugger';
+import { CallstackWidget } from './callstack';
+import { BreakPointsWidget } from './breakpoints';
 
 export class DebuggerSidebar extends SplitPanel {
 
   variables: VariablesWidget;
+  callstack: CallstackWidget;
+  breakPoints: BreakPointsWidget;
 
   constructor(model: Debugger.Model | null) {
     super();
     this.model = model;
+    this.orientation = 'vertical';
     this.addClass('jp-DebuggerSidebar');
+
     this.variables = new VariablesWidget();
+    this.callstack = new CallstackWidget();
+    this.breakPoints = new BreakPointsWidget();
+
     this.addWidget(this.variables);
+    this.addWidget(this.callstack);
+    this.addWidget(this.breakPoints);
   }
 
+
+
   public model: Debugger.Model | null = null;
 }

src/variables/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './variableTableDescription'
+export * from './variableDescription';

src/variables/utils/variableDescription.ts

@@ -0,0 +1,20 @@
+import { Panel } from "@phosphor/widgets";
+import { VariableTableDescription } from './variableTableDescription';
+
+
+export class VariableDescription extends Panel {
+    
+    readonly table: Panel;
+    readonly descriptionBox: Panel; 
+
+    constructor(){
+        super();
+        this.table = new VariableTableDescription();
+        this.table.addClass('debugger-variable__table');
+        this.addWidget(this.table);
+
+        this.descriptionBox = new Panel();
+        this.descriptionBox.addClass('debugger-variable__description');
+        this.addWidget(this.descriptionBox);
+    }
+}

src/variables/utils/variableTableDescription.ts

@@ -0,0 +1,107 @@
+import { h, VirtualDOM, VirtualElement } from "@phosphor/virtualdom";
+import { SplitPanel } from '@phosphor/widgets';
+
+const MOCK_DATA_ROW = {
+    variables: [
+        {
+            name: 'test 1',
+            value: 'function()',
+            desription:'def test1(): return 0'
+        },
+        {
+            name: 'test 2',
+            value: 'function()',
+            desription:'def test2(): return 0'
+        }
+    ]
+}
+
+
+export class VariableTableDescription extends SplitPanel {
+
+    private _modelRow: any;
+
+    constructor() {
+        super();
+        this._modelRow = MOCK_DATA_ROW;
+        this.renderHead();
+        this.renderBody();
+    }
+
+    protected renderHead() {
+        const header = h.table(
+            h.tr(
+                h.td(
+                    {
+                        className: 'debugger-variables_table-head',
+                        style: {
+                            width: '25%'
+                        }
+                    }, 'Name'),
+                h.td({
+                    className: 'debugger-variables_table-head',
+                    style: {
+                        width: '75%'
+                    }
+                }, 'Value')
+            )
+        )
+        this.node.appendChild(VirtualDOM.realize(header));
+    }
+
+    protected renderBody() {
+        const body = h.div(
+            h.table(
+                this.renderVariableNodes({
+                    variables: this._modelRow.variables,
+                    nodes: [],
+                    indent: 0
+                })
+            )
+        );
+        this.node.appendChild(VirtualDOM.realize(body));
+    }
+
+
+    protected renderVariableNodes(context: {
+        readonly variables: Array<any>;
+        readonly nodes: Array<any>;
+        readonly indent: number;
+    }) {
+        let table: VirtualElement[] = [];
+        for (const variable of context.variables) {
+            table.push(this.renderRow(variable, context.indent + 1))
+        }
+        return table;
+    }
+
+
+
+    protected renderRow(variable: any, indent: number) {
+        return h.tr({
+            className: '',
+            onmousedown: () => { },
+            ondblclick: () => { }
+        },
+            h.td({
+                className: '',
+                style: {
+                    paddingLeft: `${12 * indent}px`,
+                    width: `${25}%`
+                }
+            },
+                h.span({ className: '' }),
+                variable.name
+            ),
+            h.td({
+                className: '',
+                style: {
+                    paddingLeft: `12px`,
+                    width: `${75}%`
+                }
+            }, variable.value)
+        );
+    }
+
+
+}

src/variables/widget.ts

@@ -1,31 +1,36 @@
-import {Widget, Panel} from "@phosphor/widgets";
+import { Panel } from "@phosphor/widgets";
+import { VariableDescription } from './utils';
 
 export class VariablesWidget extends Panel {
     
     readonly header: Panel;
-    readonly label: Widget;
+    readonly label: Panel;
     readonly body: Panel;
+    readonly variableDescription: Panel;
+
+
     readonly model_header = {
         label:'Variables',
         class:'debugger-variables__header'
     };
+
     constructor(){
         super();
-        
         // header
         this.header = new Panel();
         this.header.addClass(this.model_header.class);
         this.addWidget(this.header);
 
-        this.label = new Widget();
-        this.label.node.textContent = 'Variables';
-        this.label.addClass('debugger-variables__header-label');
+        this.label = new Panel();
+        this.label.node.textContent = this.model_header.label;
+        this.label.addClass(this.model_header.class+'-label');
         this.header.addWidget(this.label);
-        
+
         //body
-        this.body = new Panel();
-        this.body.addClass('debugger-variables__body')
-        this.addWidget(this.body);
+        this.variableDescription = new VariableDescription();
+        this.variableDescription.addClass('debugger-variables__body')
+        this.addWidget(this.variableDescription);
+
     }
 
 

style/index.css

@@ -3,25 +3,31 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-.jp-DebuggerSidebar {
+.jp-Debugger {
   background: var(--jp-layout-color1);
   top: 0;
   bottom: 0;
 }
 
 
-.jp-Debugger {
+.jp-DebuggerSidebar {
+  display: flex;
+  flex-direction: column;
+  color: var(--jp-ui-font-color1);
   background: var(--jp-layout-color1);
-  top: 0;
-  bottom: 0;
+  font-size: var(--jp-ui-font-size1);
+  min-width: 350px !important;
 }
 
+
+
+
 .debugger-variables__header {
   display: flex;
   flex-direction: row;
   align-items: center;
   border-bottom: solid var(--jp-border-width) var(--jp-border-color1);
-  border-right: solid var(--jp-border-width) var(--jp-border-color1);
+  border-top: solid var(--jp-border-width) var(--jp-border-color1);
   background-color: var(--jp-layout-color2);
   height: 24px;
 }
@@ -41,3 +47,38 @@
   min-height: 24px;
 }
 
+
+.debugger-variable__table {
+  min-height: 50px;
+}
+
+.debugger-variable__table table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.debugger-variable__table .debugger-variables_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);
+  min-height: 23px;
+  padding: 4px 12px;
+  font-weight: 500;
+  text-align: left;
+}
+
+.debugger-variables_table-head:hover {
+  background: var(--jp-layout-color2);
+}
+
+.debugger-variables_table-head + .debugger-variables_table-head {
+  border-left: var(--jp-border-width) solid var(--jp-border-color2);
+}
+
+
+
+.debugger-variable__description {
+  border-top: var(--jp-border-width) solid var(--jp-border-color2);
+  min-height: 25px;
+}
+