add toggle for switch table/tree view

src/variables/header.ts

@@ -1,6 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+import { Toolbar } from '@jupyterlab/apputils';
 import { PanelLayout, Widget } from '@lumino/widgets';
 
 /**
@@ -17,7 +18,13 @@ export class VariablesHeader extends Widget {
     title.node.textContent = 'Variables';
 
     const layout = new PanelLayout();
-    this.layout = layout;
     layout.addWidget(title);
+    layout.addWidget(this.toolbar);
+    this.layout = layout;
   }
+
+  /**
+   * The toolbar for the callstack header.
+   */
+  readonly toolbar = new Toolbar();
 }

src/variables/index.ts

@@ -5,12 +5,13 @@ import { IDebugger } from '../tokens';
 
 import { Panel, Widget } from '@lumino/widgets';
 
-// import { VariablesBody } from './body';
+import { VariablesBody } from './body';
 
 import { VariablesBodyTable } from './table';
 
 import { VariablesHeader } from './header';
 
+import { ToolbarButton } from '@jupyterlab/apputils';
 import { VariablesModel } from './model';
 
 /**
@@ -27,16 +28,42 @@ export class Variables extends Panel {
     const { model, service } = options;
 
     this._header = new VariablesHeader();
-    this._body = new VariablesBodyTable({ model, service });
+    this._tree = new VariablesBody(model);
+    this._table = new VariablesBodyTable({ model, service });
+    this._table.hide();
 
-    this.addWidget(this._header);
-    this.addWidget(this._body);
+    const onClick = () => {
+      if (this._table.isHidden) {
+        this._tree.hide();
+        this._table.show();
+        this.node.setAttribute('data-jp-table', 'true');
+      } else {
+        this._tree.show();
+        this._table.hide();
+        this.node.removeAttribute('data-jp-table');
+      }
+      this.update();
+    };
+
+    this._header.toolbar.addItem(
+      'view-VariableSwitch',
+      new ToolbarButton({
+        className: 'jp-SwitchButton',
+        iconClass: 'jp-ToggleSwitch',
+        onClick,
+        tooltip: 'Table / Tree View'
+      })
+    );
 
+    this.addWidget(this._header);
+    this.addWidget(this._tree);
+    this.addWidget(this._table);
     this.addClass('jp-DebuggerVariables');
   }
 
   private _header: VariablesHeader;
-  private _body: Widget;
+  private _tree: Widget;
+  private _table: Widget;
 
   /**
    * A message handler invoked on a `'resize'` message.
@@ -52,7 +79,7 @@ export class Variables extends Panel {
    */
   private _resizeBody(msg: Widget.ResizeMessage) {
     const height = msg.height - this._header.node.offsetHeight;
-    this._body.node.style.height = `${height}px`;
+    this._table.node.style.height = `${height}px`;
   }
 }
 

style/icons.css

@@ -120,11 +120,13 @@
   border-radius: 50%;
 }
 
-[data-jp-debugger='true'] .jp-Toolbar-item .jp-ToggleSwitch {
+[data-jp-debugger='true'] .jp-Toolbar-item .jp-ToggleSwitch,
+[data-jp-table='true'] .jp-Toolbar-item .jp-ToggleSwitch {
   background-color: var(--jp-warn-color0);
 }
 
-[data-jp-debugger='true'] .jp-Toolbar-item .jp-ToggleSwitch svg {
+[data-jp-debugger='true'] .jp-Toolbar-item .jp-ToggleSwitch svg,
+[data-jp-table='true'] .jp-Toolbar-item .jp-ToggleSwitch svg {
   margin-left: 50%;
   margin-right: 5px;
 }

style/variables.css

@@ -3,6 +3,10 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+.jp-DebuggerVariables header .jp-Toolbar {
+  margin-left: auto;
+}
+
 .jp-DebuggerVariables-body {
   min-height: 24px;
   overflow: auto;
@@ -48,7 +52,6 @@
   z-index: 1253;
   background-color: white;
   text-align: center;
-  padding: 15px;
   border: 1px solid #c1c1c1;
 }
 
@@ -57,3 +60,8 @@
   font-weight: bold;
   background-color: #c1c1c1;
 }
+
+.jp-detailsVariable-box > button {
+  margin-bottom: 10px;
+  margin-top: 10px;
+}