Use switch for debugger

packages/debugger/src/handler.ts

@@ -23,7 +23,7 @@ import { Kernel, Session } from '@jupyterlab/services';
 
 import { nullTranslator, ITranslator } from '@jupyterlab/translation';
 
-import { bugIcon } from '@jupyterlab/ui-components';
+import { bugIcon, Switch } from '@jupyterlab/ui-components';
 
 import { DisposableSet } from '@lumino/disposable';
 
@@ -58,11 +58,13 @@ function updateToolbar(
   });
   widget.toolbar.addItem('debugger-icon', icon);
 
-  const button = new ToolbarButton({
-    iconClass: 'jp-ToggleSwitch',
-    tooltip: trans.__('Enable / Disable Debugger'),
-    onClick
+  const button = new Switch();
+  button.id = 'jp-debugger';
+  button.valueChanged.connect((_, args) => {
+    onClick();
   });
+  // button.tooltip = trans.__('Enable / Disable Debugger');
+
   widget.toolbar.addItem('debugger-button', button);
 
   const elements = new DisposableSet();

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

@@ -1,9 +1,10 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { IThemeManager, ToolbarButton } from '@jupyterlab/apputils';
+import { IThemeManager } from '@jupyterlab/apputils';
 
 import { nullTranslator, ITranslator } from '@jupyterlab/translation';
+import { Switch } from '@jupyterlab/ui-components';
 
 import { CommandRegistry } from '@lumino/commands';
 
@@ -31,7 +32,7 @@ export class Variables extends Panel {
 
     const { model, service, commands, themeManager } = options;
     const translator = options.translator || nullTranslator;
-    const trans = translator.load('jupyterlab');
+    // const trans = translator.load('jupyterlab');
     this._header = new VariablesHeader(translator);
     this._tree = new VariablesBodyTree({ model, service });
     this._table = new VariablesBodyGrid({ model, commands, themeManager });
@@ -50,14 +51,14 @@ export class Variables extends Panel {
       this.update();
     };
 
-    this._header.toolbar.addItem(
-      'view-VariableSwitch',
-      new ToolbarButton({
-        iconClass: 'jp-ToggleSwitch',
-        onClick,
-        tooltip: trans.__('Table / Tree View')
-      })
-    );
+    const button = new Switch();
+    button.id = 'jp-debugger';
+    button.valueChanged.connect((_, args) => {
+      onClick();
+    });
+    // button.tooltip = trans.__('Table / Tree View');
+
+    this._header.toolbar.addItem('view-VariableSwitch', button);
 
     this.addWidget(this._header);
     this.addWidget(this._tree);

packages/debugger/style/base.css

@@ -6,7 +6,6 @@
 @import './editor.css';
 @import './callstack.css';
 @import './variables.css';
-@import './icons.css';
 @import './sidebar.css';
 @import './sources.css';
 

packages/debugger/style/icons.css

@@ -1,43 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-.jp-Toolbar-item button.jp-DebuggerBugButton.bp3-button.bp3-minimal:hover {
-  background-color: unset;
-  cursor: unset;
-}
-
-.jp-Toolbar-item .jp-ToggleSwitch {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  background-color: var(--jp-border-color1);
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-  border-radius: 34px;
-  width: 35px;
-}
-
-.jp-Toolbar-item .jp-ToggleSwitch::before {
-  content: '';
-  height: 10px;
-  width: 10px;
-  margin-left: 5px;
-  margin-right: 50%;
-  background-color: white;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-  border-radius: 50%;
-}
-
-[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::before,
-[data-jp-table='true'] .jp-Toolbar-item .jp-ToggleSwitch::before {
-  margin-left: 50%;
-  margin-right: 5px;
-}

packages/ui-components/src/components/switch.ts

@@ -25,7 +25,9 @@ export class Switch extends Widget {
     track.className = 'jp-switch-track';
     track.setAttribute('aria-hidden', 'true');
 
-    this._button.appendChild(this._label);
+    if (this._label.textContent !== '') {
+      this._button.appendChild(this._label);
+    }
     this._button.appendChild(track);
     this.node.appendChild(this._button);
   }

packages/ui-components/style/switch.css

@@ -6,6 +6,8 @@
 .jp-switch {
   display: flex;
   align-items: center;
+  padding-left: 4px;
+  padding-right: 4px;
   font-size: var(--jp-ui-font-size1);
   background-color: transparent;
   color: var(--jp-ui-font-color1);

tsconfigdoc.json

@@ -92,6 +92,9 @@
     {
       "path": "./packages/extensionmanager-extension"
     },
+    {
+      "path": "./packages/faq-extension"
+    },
     {
       "path": "./packages/filebrowser"
     },
@@ -230,6 +233,9 @@
     {
       "path": "./packages/statusbar-extension"
     },
+    {
+      "path": "./packages/tabmanager-extension"
+    },
     {
       "path": "./packages/terminal"
     },