diff --git a/packages/debugger/src/panels/variables/index.ts b/packages/debugger/src/panels/variables/index.ts
index 5ef245c1e25f..7f9b343c460f 100644
--- a/packages/debugger/src/panels/variables/index.ts
+++ b/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);
diff --git a/packages/debugger/style/base.css b/packages/debugger/style/base.css
index aa18b19850fa..ff1581a82a2e 100644
--- a/packages/debugger/style/base.css
+++ b/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;
diff --git a/packages/debugger/style/icons.css b/packages/debugger/style/icons.css
new file mode 100644
index 000000000000..41ba77ae9f04
--- /dev/null
+++ b/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);
+}
diff --git a/packages/ui-components/src/icon/iconimports.ts b/packages/ui-components/src/icon/iconimports.ts
index bb1819210814..2c2aaf2a1757 100644
--- a/packages/ui-components/src/icon/iconimports.ts
+++ b/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 });
diff --git a/packages/ui-components/style/deprecated.css b/packages/ui-components/style/deprecated.css
index f7e7606d1e90..6f6512c58a3f 100644
--- a/packages/ui-components/style/deprecated.css
+++ b/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);
}
diff --git a/packages/ui-components/style/icons/toolbar/table-rows.svg b/packages/ui-components/style/icons/toolbar/table-rows.svg
new file mode 100644
index 000000000000..0a241774cede
--- /dev/null
+++ b/packages/ui-components/style/icons/toolbar/table-rows.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/packages/ui-components/style/icons/toolbar/tree-view.svg b/packages/ui-components/style/icons/toolbar/tree-view.svg
new file mode 100644
index 000000000000..48a64351298c
--- /dev/null
+++ b/packages/ui-components/style/icons/toolbar/tree-view.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file