simple header in variables

src/debugger.ts

@@ -12,6 +12,13 @@ import { IDisposable } from '@phosphor/disposable';
 import { DebuggerSidebar } from './sidebar';
 
 export class Debugger extends BoxPanel {
+
+  readonly model: Debugger.Model;
+
+  readonly tabs = new TabPanel();
+
+  readonly sidebar: DebuggerSidebar;
+
   constructor(options: Debugger.IOptions) {
     super({ direction: 'left-to-right' });
 
@@ -24,11 +31,7 @@ export class Debugger extends BoxPanel {
     this.addWidget(this.sidebar);
   }
 
-  readonly model: Debugger.Model;
-
-  readonly tabs = new TabPanel();
-
-  readonly sidebar: DebuggerSidebar;
+  
 
   dispose(): void {
     if (this.isDisposed) {

src/sidebar.ts

@@ -1,15 +1,21 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { Widget } from '@phosphor/widgets';
+import { SplitPanel } from '@phosphor/widgets';
+import { VariablesWidget } from './variables';
 
 import { Debugger } from './debugger';
 
-export class DebuggerSidebar extends Widget {
+export class DebuggerSidebar extends SplitPanel {
+
+  variables: VariablesWidget;
+
   constructor(model: Debugger.Model | null) {
     super();
     this.model = model;
     this.addClass('jp-DebuggerSidebar');
+    this.variables = new VariablesWidget();
+    this.addWidget(this.variables);
   }
 
   public model: Debugger.Model | null = null;

src/variables/index.ts

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

src/variables/widget.ts

@@ -0,0 +1,32 @@
+import {Widget, Panel} from "@phosphor/widgets";
+
+export class VariablesWidget extends Panel {
+    
+    readonly header: Panel;
+    readonly label: Widget;
+    readonly body: 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.header.addWidget(this.label);
+        
+        //body
+        this.body = new Panel();
+        this.body.addClass('debugger-variables__body')
+        this.addWidget(this.body);
+    }
+
+
+}

style/index.css

@@ -7,4 +7,37 @@
   background: var(--jp-layout-color1);
   top: 0;
   bottom: 0;
-}
+}
+
+
+.jp-Debugger {
+  background: var(--jp-layout-color1);
+  top: 0;
+  bottom: 0;
+}
+
+.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);
+  background-color: var(--jp-layout-color2);
+  height: 24px;
+}
+
+.debugger-variables__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;
+}
+
+
+.debugger-variables__body {
+  border-bottom: solid var(--jp-border-width) var(--jp-border-color2);
+  min-height: 24px;
+}
+