Use tree/table buttons to display debugger variables view mode

packages/debugger/src/panels/variables/index.ts

@@ -1,10 +1,11 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { IThemeManager } from '@jupyterlab/apputils';
+import { IThemeManager, ToolbarButton } from '@jupyterlab/apputils';
 
 import { nullTranslator, ITranslator } from '@jupyterlab/translation';
-import { Switch } from '@jupyterlab/ui-components';
+
+import { tableRowsIcon, treeViewIcon } from '@jupyterlab/ui-components';
 
 import { CommandRegistry } from '@lumino/commands';
 
@@ -49,26 +50,53 @@ export class Variables extends Panel {
         grid: this._table
       })
     );
+
     const onViewChange = (): void => {
       if (this._table.isHidden) {
         this._tree.hide();
         this._table.show();
         this.node.setAttribute('data-jp-table', 'true');
+        markViewButtonSelection('table');
       } else {
         this._tree.show();
         this._table.hide();
         this.node.removeAttribute('data-jp-table');
+        markViewButtonSelection('tree');
       }
       this.update();
     };
 
-    const button = new Switch();
-    button.id = 'jp-debugger';
-    button.valueChanged.connect((_, args) => {
-      onViewChange();
+    const treeViewButton = new ToolbarButton({
+      icon: treeViewIcon,
+      className: 'jp-TreeView',
+      onClick: onViewChange,
+      tooltip: trans.__('Tree View')
+    });
+
+    const tableViewButton = new ToolbarButton({
+      icon: tableRowsIcon,
+      className: 'jp-TableView',
+      onClick: onViewChange,
+      tooltip: trans.__('Table View')
     });
-    button.caption = trans.__('Table / Tree View');
-    this._header.toolbar.addItem('view-VariableSwitch', button);
+
+    const markViewButtonSelection = (selectedView: string): void => {
+      const viewModeClassName = 'jp-ViewModeSelected';
+
+      if (selectedView === 'tree') {
+        tableViewButton.removeClass(viewModeClassName);
+        treeViewButton.addClass(viewModeClassName);
+      } else {
+        treeViewButton.removeClass(viewModeClassName);
+        tableViewButton.addClass(viewModeClassName);
+      }
+    };
+
+    markViewButtonSelection(this._table.isHidden ? 'tree' : 'table');
+
+    this._header.toolbar.addItem('view-VariableTreeView', treeViewButton);
+
+    this._header.toolbar.addItem('view-VariableTableView', tableViewButton);
 
     this.addWidget(this._header);
     this.addWidget(this._tree);

packages/debugger/style/base.css

@@ -3,11 +3,12 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 @import './breakpoints.css';
-@import './editor.css';
 @import './callstack.css';
-@import './variables.css';
+@import './editor.css';
+@import './icons.css';
 @import './sidebar.css';
 @import './sources.css';
+@import './variables.css';
 
 .jp-left-truncated {
   overflow: hidden;

packages/debugger/style/icons.css

@@ -0,0 +1,27 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+button.jp-Button.bp3-button.bp3-minimal.jp-TreeView.jp-TreeView,
+button.jp-Button.bp3-button.bp3-minimal.jp-TreeView.jp-TableView {
+  display: flex;
+  align-items: center;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  width: 35px;
+}
+
+button.jp-Button.bp3-button.bp3-minimal.jp-TreeView:hover {
+  cursor: pointer;
+  background-color: var(--jp-layout-color1);
+}
+
+button.jp-Button.bp3-button.bp3-minimal.jp-TableView:hover {
+  cursor: pointer;
+  background-color: var(--jp-layout-color1);
+}
+
+.jp-ViewModeSelected {
+  background-color: var(--jp-layout-color1);
+}

packages/ui-components/src/icon/iconimports.ts

@@ -74,10 +74,12 @@ import settingsSvgstr from '../../style/icons/filetype/settings.svg';
 import spreadsheetSvgstr from '../../style/icons/filetype/spreadsheet.svg';
 import stopSvgstr from '../../style/icons/toolbar/stop.svg';
 import tabSvgstr from '../../style/icons/sidebar/tab.svg';
+import tableRowsSvgstr from '../../style/icons/toolbar/table-rows.svg';
 import tagSvgstr from '../../style/icons/toolbar/tag.svg';
 import terminalSvgstr from '../../style/icons/statusbar/terminal.svg';
 import textEditorSvgstr from '../../style/icons/filetype/text-editor.svg';
 import tocSvgstr from '../../style/icons/sidebar/toc.svg';
+import treeViewSvgstr from '../../style/icons/toolbar/tree-view.svg';
 import trustedSvgstr from '../../style/icons/statusbar/trusted.svg';
 import undoSvgstr from '../../style/icons/toolbar/undo.svg';
 import vegaSvgstr from '../../style/icons/filetype/vega.svg';
@@ -150,10 +152,12 @@ export const settingsIcon = new LabIcon({ name: 'ui-components:settings', svgstr
 export const spreadsheetIcon = new LabIcon({ name: 'ui-components:spreadsheet', svgstr: spreadsheetSvgstr });
 export const stopIcon = new LabIcon({ name: 'ui-components:stop', svgstr: stopSvgstr });
 export const tabIcon = new LabIcon({ name: 'ui-components:tab', svgstr: tabSvgstr });
+export const tableRowsIcon = new LabIcon({ name: 'ui-components:table-rows', svgstr: tableRowsSvgstr });
 export const tagIcon = new LabIcon({ name: 'ui-components:tag', svgstr: tagSvgstr });
 export const terminalIcon = new LabIcon({ name: 'ui-components:terminal', svgstr: terminalSvgstr });
 export const textEditorIcon = new LabIcon({ name: 'ui-components:text-editor', svgstr: textEditorSvgstr });
 export const tocIcon = new LabIcon({ name: 'ui-components:toc', svgstr: tocSvgstr });
+export const treeViewIcon = new LabIcon({ name: 'ui-components:tree-view', svgstr: treeViewSvgstr });
 export const trustedIcon = new LabIcon({ name: 'ui-components:trusted', svgstr: trustedSvgstr });
 export const undoIcon = new LabIcon({ name: 'ui-components:undo', svgstr: undoSvgstr });
 export const vegaIcon = new LabIcon({ name: 'ui-components:vega', svgstr: vegaSvgstr });

packages/ui-components/style/deprecated.css

@@ -78,10 +78,12 @@
   --jp-icon-spreadsheet: url('icons/filetype/spreadsheet.svg');
   --jp-icon-stop: url('icons/toolbar/stop.svg');
   --jp-icon-tab: url('icons/sidebar/tab.svg');
+  --jp-icon-table-rows: url('icons/toolbar/table-rows.svg');
   --jp-icon-tag: url('icons/toolbar/tag.svg');
   --jp-icon-terminal: url('icons/statusbar/terminal.svg');
   --jp-icon-text-editor: url('icons/filetype/text-editor.svg');
   --jp-icon-toc: url('icons/sidebar/toc.svg');
+  --jp-icon-tree-view: url('icons/toolbar/tree-view.svg');
   --jp-icon-trusted: url('icons/statusbar/trusted.svg');
   --jp-icon-undo: url('icons/toolbar/undo.svg');
   --jp-icon-vega: url('icons/filetype/vega.svg');
@@ -288,6 +290,9 @@
 .jp-TabIcon {
   background-image: var(--jp-icon-tab);
 }
+.jp-TableRowsIcon {
+  background-image: var(--jp-icon-table-rows);
+}
 .jp-TagIcon {
   background-image: var(--jp-icon-tag);
 }
@@ -300,6 +305,9 @@
 .jp-TocIcon {
   background-image: var(--jp-icon-toc);
 }
+.jp-TreeViewIcon {
+  background-image: var(--jp-icon-tree-view);
+}
 .jp-TrustedIcon {
   background-image: var(--jp-icon-trusted);
 }