Add new toolbar buttons

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

@@ -5,6 +5,8 @@ import { IThemeManager, ToolbarButton } from '@jupyterlab/apputils';
 
 import { nullTranslator, ITranslator } from '@jupyterlab/translation';
 
+import { tableRowsIcon, treeViewIcon } from '@jupyterlab/ui-components';
+
 import { CommandRegistry } from '@lumino/commands';
 
 import { Panel, Widget } from '@lumino/widgets';
@@ -15,7 +17,7 @@ import { VariablesBodyGrid } from './grid';
 
 import { VariablesHeader } from './header';
 
-import { ScopeSwitcher } from './scope';
+// import { ScopeSwitcher } from './scope';
 
 import { VariablesBodyTree } from './tree';
 
@@ -52,22 +54,42 @@ export class Variables extends Panel {
       this.update();
     };
 
+    // this._header.toolbar.addItem(
+    //   'scope-switcher',
+    //   new ScopeSwitcher({
+    //     translator,
+    //     model,
+    //     tree: this._tree,
+    //     grid: this._table
+    //   })
+    // );
+
+    // this._header.toolbar.addItem(
+    //   'view-VariableSwitch',
+    //   new ToolbarButton({
+    //     iconClass: 'jp-ToggleSwitch',
+    //     onClick: onViewChange,
+    //     tooltip: trans.__('Table / Tree View')
+    //   })
+    // );
+
     this._header.toolbar.addItem(
-      'scope-switcher',
-      new ScopeSwitcher({
-        translator,
-        model,
-        tree: this._tree,
-        grid: this._table
+      'view-VariableTreeView',
+      new ToolbarButton({
+        icon: treeViewIcon,
+        className: 'jp-TreeView',
+        onClick: onViewChange,
+        tooltip: trans.__('Tree View')
       })
     );
 
     this._header.toolbar.addItem(
-      'view-VariableSwitch',
+      'view-VariableTableView',
       new ToolbarButton({
-        iconClass: 'jp-ToggleSwitch',
+        icon: tableRowsIcon,
+        className: 'jp-TableView',
         onClick: onViewChange,
-        tooltip: trans.__('Table / Tree View')
+        tooltip: trans.__('Table View')
       })
     );
 

packages/debugger/style/icons.css

@@ -31,6 +31,32 @@
   border-radius: 50%;
 }
 
+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);
+  border-radius: 34px;
+}
+
+button.jp-Button.bp3-button.bp3-minimal.jp-TableView:hover {
+  cursor: pointer;
+  background-color: var(--jp-layout-color1);
+  border-radius: 34px;
+}
+
+.jp-ViewModeSelected {
+  background-color: var(--jp-layout-color1);
+  border-radius: 34px;
+}
+
 [data-jp-debugger='true'] .jp-Toolbar-item .jp-ToggleSwitch,
 [data-jp-table='true'] .jp-Toolbar-item .jp-ToggleSwitch {
   background-color: var(--jp-warn-color0);

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

@@ -74,12 +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 tableSvgstr from '../../style/icons/toolbar/table-rows.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 treeSvgstr from '../../style/icons/toolbar/tree-view.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';
@@ -152,12 +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 tableIcon = new LabIcon({ name: 'ui-components:table', svgstr: tableSvgstr });
+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 treeIcon = new LabIcon({ name: 'ui-components:tree', svgstr: treeSvgstr });
+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,12 +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: url('icons/sidebar/table-rows.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: url('icons/sidebar/tree-view.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');
@@ -290,9 +290,6 @@
 .jp-TabIcon {
   background-image: var(--jp-icon-tab);
 }
-.jp-TableIcon {
-  background-image: var(--jp-icon-table);
-}
 .jp-TagIcon {
   background-image: var(--jp-icon-tag);
 }
@@ -305,9 +302,6 @@
 .jp-TocIcon {
   background-image: var(--jp-icon-toc);
 }
-.jp-TreeIcon {
-  background-image: var(--jp-icon-tree);
-}
 .jp-TrustedIcon {
   background-image: var(--jp-icon-trusted);
 }

packages/ui-components/style/icons/toolbar/table-rows.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><rect fill="none" height="24" width="24"/><path d="M21,8H3V4h18V8z M21,10H3v4h18V10z M21,16H3v4h18V16z"/></svg>
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <g class="jp-icon3" fill="#616161">
+        <path d="M0 0h24v24H0z" fill="none"/>
+        <path d="M21,8H3V4h18V8z M21,10H3v4h18V10z M21,16H3v4h18V16z"/>
+    </g>
+</svg>

packages/ui-components/style/icons/toolbar/tree-view.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M22 11V3h-7v3H9V3H2v8h7V8h2v10h4v3h7v-8h-7v3h-2V8h2v3z"/></svg>
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <g class="jp-icon3" fill="#616161">
+        <path d="M0 0h24v24H0z" fill="none"/>
+        <path d="M22 11V3h-7v3H9V3H2v8h7V8h2v10h4v3h7v-8h-7v3h-2V8h2v3z"/>
+    </g>
+</svg>