Merge branch 'master' into debugger-ui

package.json

@@ -46,8 +46,9 @@
     "@jupyterlab/coreutils": "^3.1.0-alpha.1",
     "@jupyterlab/fileeditor": "^1.1.0-alpha.1",
     "@jupyterlab/launcher": "^1.1.0-alpha.1",
-    "@jupyterlab/services": "^4.1.0-alpha.1",
     "@jupyterlab/notebook": "^1.1.0-alpha.1",
+    "@jupyterlab/services": "^4.1.0-alpha.1",
+    "@phosphor/algorithm": "^1.2.0",
     "@phosphor/coreutils": "^1.3.1",
     "@phosphor/disposable": "^1.2.0",
     "@phosphor/widgets": "^1.8.0",

src/breakpoints/index.ts

@@ -1 +1,4 @@
-export * from './widget';
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+export * from './widget';

src/breakpoints/widget.ts

@@ -1,35 +1,43 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { Toolbar, ToolbarButton } from '@jupyterlab/apputils';
+
 import { Widget, Panel } from '@phosphor/widgets';
-import { ToolbarWidget } from '../utils';
 
 export class BreakPointsWidget extends Panel {
+  readonly body: Panel;
+
   readonly header: Panel;
+
   readonly label: Widget;
-  readonly body: Panel;
-  readonly toolbar: ToolbarWidget;
 
-  readonly model_header = {
-    label: 'BreakPoints',
-    class: 'jp-DebuggerSidebarVariables-header'
-  };
+  readonly toolbar: Toolbar;
 
   constructor() {
     super();
 
     this.header = new Panel();
-    this.header.addClass(this.model_header.class);
+    this.header.addClass('jp-DebuggerSidebarVariables-header');
     this.addWidget(this.header);
 
     this.label = new Widget();
-    this.label.node.textContent = this.model_header.label;
-    this.label.addClass(this.model_header.class + '-label');
+    this.label.node.textContent = 'BreakPoints';
+    this.label.addClass('jp-DebuggerSidebarVariables-header-label');
     this.header.addWidget(this.label);
 
-    this.toolbar = new ToolbarWidget();
-    this.toolbar.createSpanElement(
-      'fa fa-breakpoints disactive',
-      'Deactive All Breakpoints'
+    const toolbar = new Toolbar();
+    toolbar.addItem(
+      'deactivate',
+      new ToolbarButton({
+        iconClassName: 'jp-DebuggerDeactivateIcon',
+        onClick: () => {
+          console.log('`deactivate` was clicked');
+        },
+        tooltip: 'Deactivate Breakpoints'
+      })
     );
-    this.toolbar.createSpanElement('fa fa-remove', 'Remove All Breakpoints');
+    this.toolbar = toolbar;
     this.header.addWidget(this.toolbar);
   }
 }

src/callstack/index.ts

@@ -1 +1,4 @@
-export * from './widget';
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+export * from './widget';

src/callstack/widget.ts

@@ -1,35 +1,55 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { Toolbar, ToolbarButton } from '@jupyterlab/apputils';
+
 import { Widget, Panel } from '@phosphor/widgets';
-import { ToolbarWidget } from '../utils';
 
 export class CallstackWidget extends Panel {
   readonly header: Panel;
+
   readonly label: Widget;
-  readonly toolbar: ToolbarWidget;
 
-  readonly model_header = {
-    label: 'CallStack',
-    class: 'jp-DebuggerSidebarVariables-header'
-  };
+  readonly toolbar: Toolbar;
 
   constructor() {
     super();
-    // header
+
     this.header = new Panel();
-    this.header.addClass(this.model_header.class);
+    this.header.addClass('jp-DebuggerSidebarVariables-header');
     this.addWidget(this.header);
 
     this.label = new Widget();
-    this.label.node.textContent = this.model_header.label;
-    this.label.addClass(this.model_header.class + '-label');
+    this.label.node.textContent = 'Call stack';
+    this.label.addClass('jp-DebuggerSidebarVariables-header-label');
     this.header.addWidget(this.label);
 
-    //toolbar
-    this.toolbar = new ToolbarWidget();
-    this.toolbar.createSpanElement(`fa fa-active`, 'Continue');
-    this.toolbar.createSpanElement(`fa fa-stop`, 'Stop');
-    this.toolbar.createSpanElement(`fa fa-stepOver`, 'Step Over');
-    this.toolbar.createSpanElement(`fa fa-stepIn`, 'Step In');
-    this.toolbar.createSpanElement(`fa fa-stepOut`, 'Step Out');
+    const toolbar = new Toolbar();
+    toolbar.addItem(
+      'continue',
+      new ToolbarButton({
+        iconClassName: 'jp-RunIcon',
+        onClick: () => {
+          console.log('`run` was clicked');
+        },
+        tooltip: 'Continue'
+      })
+    );
+    toolbar.addItem(
+      'stop',
+      new ToolbarButton({
+        iconClassName: 'jp-StopIcon',
+        onClick: () => {
+          console.log('`stop` was clicked');
+        },
+        tooltip: 'Stop'
+      })
+    );
+    toolbar.addItem('step-over', new ToolbarButton({ label: 'Step Over' }));
+    toolbar.addItem('step-in', new ToolbarButton({ label: 'Step In' }));
+    toolbar.addItem('step-out', new ToolbarButton({ label: 'Step Out' }));
+
+    this.toolbar = toolbar;
     this.header.addWidget(this.toolbar);
   }
 }

src/sidebar.ts

@@ -2,17 +2,16 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { SplitPanel } from '@phosphor/widgets';
-import { VariablesWidget } from './variables';
+
+import { BreakPointsWidget } from './breakpoints';
 
 import { Debugger } from './debugger';
+
 import { CallstackWidget } from './callstack';
-import { BreakPointsWidget } from './breakpoints';
 
-export class DebuggerSidebar extends SplitPanel {
-  variables: VariablesWidget;
-  callstack: CallstackWidget;
-  breakPoints: BreakPointsWidget;
+import { VariablesWidget } from './variables';
 
+export class DebuggerSidebar extends SplitPanel {
   constructor(model: Debugger.Model | null) {
     super();
     this.model = model;
@@ -28,6 +27,12 @@ export class DebuggerSidebar extends SplitPanel {
     this.addWidget(this.breakPoints);
   }
 
+  readonly variables: VariablesWidget;
+
+  readonly callstack: CallstackWidget;
+
+  readonly breakPoints: BreakPointsWidget;
+
   get model(): Debugger.Model | null {
     return this._model;
   }

src/utils/index.ts

@@ -1,2 +1 @@
-export * from './toolbar';
 export * from './useOutsideClick';

src/utils/toolbar.ts

@@ -1,19 +0,0 @@
-import { Widget } from '@phosphor/widgets';
-
-const TOOLBAR_CLASS = 'jp-DebuggerToolbar';
-const TOOLBAR_ITEM_CLASS = TOOLBAR_CLASS + '-item';
-
-export class ToolbarWidget extends Widget {
-  constructor() {
-    super();
-    this.addClass(TOOLBAR_CLASS);
-  }
-
-  // now create only non-clickable buttons
-  createSpanElement(className: string, title: string) {
-    const spanButton = document.createElement('span');
-    spanButton.className = `${TOOLBAR_ITEM_CLASS} ${className}`;
-    spanButton.title = title;
-    this.node.appendChild(spanButton);
-  }
-}

src/variables/index.ts

@@ -1 +1,4 @@
-export * from './widget';
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+export * from './widget';

src/variables/model.ts

@@ -1,12 +1,16 @@
-import { IVariable } from './variable';
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
 import { Signal, ISignal } from '@phosphor/signaling';
 
+import { IVariable } from './variable';
+
 export interface IVariablesModel {
+  current: IVariable;
   filter: string;
   variables: IVariable[];
-  changeCurrentVariable: ISignal<Model, IVariable>;
-  changeVariables: ISignal<Model, IVariable[]>;
-  variable: IVariable;
+  currentChanged: ISignal<Model, IVariable>;
+  variablesChanged: ISignal<Model, IVariable[]>;
 }
 
 export namespace IVariablesModel {
@@ -20,69 +24,66 @@ export class Model implements IVariablesModel {
     this._state = model;
   }
 
-  get changeCurrentVariable(): ISignal<this, IVariable> {
-    return this._changeCurrentVariable;
-  }
-
-  get changeVariables(): ISignal<this, IVariable[]> {
-    return this._changeVariables;
-  }
-
-  get variables(): IVariable[] {
-    if (this._filterState) {
-      return this._filterVariabiles();
-    }
-    return this._state;
-  }
-
-  set variables(variables: IVariable[]) {
-    this._state = variables;
+  get currentChanged(): ISignal<this, IVariable> {
+    return this._currentChanged;
   }
 
-  get variable(): IVariable {
-    return this._currentVariabile;
+  get current(): IVariable {
+    return this._current;
   }
-
-  set variable(variable: IVariable) {
-    if (this._currentVariabile === variable) {
+  set current(variable: IVariable) {
+    if (this._current === variable) {
       return;
     }
-    this._currentVariabile = variable;
-    this._changeCurrentVariable.emit(variable);
+    this._current = variable;
+    this._currentChanged.emit(variable);
   }
 
   get filter() {
     return this._filterState;
   }
-
   set filter(value) {
     if (this._filterState === value) {
       return;
     }
     this._filterState = value;
-    this._changeVariables.emit(this._filterVariabiles());
+    this._variablesChanged.emit(this._filterVariables());
+  }
+
+  get variables(): IVariable[] {
+    if (this._filterState) {
+      return this._filterVariables();
+    }
+    return this._state;
+  }
+  set variables(variables: IVariable[]) {
+    this._state = variables;
+  }
+
+  get variablesChanged(): ISignal<this, IVariable[]> {
+    return this._variablesChanged;
   }
 
   getCurrentVariables(): IVariable[] {
     return this.variables;
   }
 
-  fstFil = function(item_name: string) {
+  fstFil(name: string): boolean {
     return (
       this._filterState
         .split('')
-        .filter((ele: string, index: number) => item_name[index] === ele)
+        .filter((ele: string, index: number) => name[index] === ele)
         .join('') === this._filterState
     );
-  };
+  }
 
-  private _filterVariabiles(): IVariable[] {
+  private _filterVariables(): IVariable[] {
     return this._state.filter(ele => this.fstFil(ele.name));
   }
 
-  private _currentVariabile: IVariable;
-  private _state: IVariable[];
+  private _current: IVariable;
+  private _currentChanged = new Signal<this, IVariable>(this);
+  private _variablesChanged = new Signal<this, IVariable[]>(this);
   private _filterState: string = '';
-  private _changeCurrentVariable = new Signal<this, IVariable>(this);
-  private _changeVariables = new Signal<this, IVariable[]>(this);
+  private _state: IVariable[];
 }

src/variables/utils/index.ts

@@ -1,3 +1,6 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
 export * from './variableTableDescription';
 export * from './variableDescription';
 export * from './useTbody';

src/variables/utils/toggle/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+export * from './variableSearch';

src/variables/utils/toogle/variableSearch.tsx → src/variables/utils/toggle/variableSearch.tsx

@@ -1,6 +1,12 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { ReactWidget } from '@jupyterlab/apputils';
+
 import { Panel, Widget } from '@phosphor/widgets';
+
 import React, { useState, useRef } from 'react';
-import { ReactWidget } from '@jupyterlab/apputils';
+
 import { IVariablesModel } from '../../model';
 import useOutsideClick from '../../../utils/useOutsideClick';
 
@@ -56,7 +62,7 @@ class VariableSearchInput extends ReactWidget {
   }
 }
 
-const MenuReact = ({ config }: any) => {
+const VariablesMenu = ({ config }: any) => {
   const [toggleState, setToggle] = useState(false);
   const [scope, setScope] = useState('local');
   const wrapperRef = useRef(null);
@@ -65,14 +71,16 @@ const MenuReact = ({ config }: any) => {
     setToggle(false);
   };
 
-  const toogle = (e: React.MouseEvent) => {
+  const toggle = (e: any) => {
     setToggle(!toggleState);
   };
 
   useOutsideClick(wrapperRef, onClickOutSide);
 
   const changeScope = (newScope: string) => {
-    if (newScope === scope) return;
+    if (newScope === scope) {
+      return;
+    }
     setScope(newScope);
     setToggle(false);
   };
@@ -90,9 +98,9 @@ const MenuReact = ({ config }: any) => {
       </li>
       <li
         className="jp-MenuComponent-item"
-        onClick={e => changeScope('builin')}
+        onClick={e => changeScope('built-in')}
       >
-        builin
+        built-in
       </li>
     </ul>
   );
@@ -100,9 +108,7 @@ const MenuReact = ({ config }: any) => {
   return (
     <div ref={wrapperRef}>
       <span
-        onClick={(e: React.MouseEvent) => {
-          toogle(e);
-        }}
+        onClick={e => toggle(e)}
         className="jp-DebuggerSidebarVariable-Scope-label"
       >
         {scope}
@@ -114,13 +120,7 @@ const MenuReact = ({ config }: any) => {
 };
 
 class VariableScopeSearch extends ReactWidget {
-  constructor() {
-    super();
-  }
-  menu: ReactWidget;
-  widget: Widget;
-
   render() {
-    return <MenuReact />;
+    return <VariablesMenu />;
   }
 }

src/variables/utils/toogle/index.ts

@@ -1 +0,0 @@
-export * from './variableSearch';

src/variables/utils/useTbody.tsx

@@ -1,47 +1,28 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
 import React, { useState } from 'react';
 
 const useTbody = (items: Array<any>, defaultState: any, id: string) => {
   const [state, setState] = useState(defaultState);
 
-  const style = {
-    paddingLeft: `${10}px`,
-    width: `${30}%`
-  };
-  const style_2 = {
-    paddingLeft: `${10}px`,
-    width: `${70}%`
-  };
-
-  const expandToggle = (e: React.MouseEvent) => {
-    console.log(e);
-  };
-
   const List = () => (
-    <div style={{ overflowY: 'auto' }}>
-      <table>
-        <tbody>
-          {items.map(item => (
-            <tr
-              key={item.name}
-              onClick={e => setState(item)}
-              className={id + (state === item ? ' selected' : '')}
-            >
-              <td style={style}>
-                {item.value === 'class' ? (
-                  <span
-                    className={`expand-toggle-collapsed`}
-                    onClick={e => expandToggle(e)}
-                  ></span>
-                ) : null}
-                <span></span>
-                {item.name}
-              </td>
-              <td style={style_2}> {item.value} </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
+    <tbody>
+      {items.map(item => (
+        <tr
+          key={item.name}
+          onClick={e => setState(item)}
+          className={id + (state === item ? ' selected' : '')}
+        >
+          <td style={{ paddingLeft: `${12}px`, width: `${25}%` }}>
+            {item.name}
+          </td>
+          <td style={{ paddingLeft: `${12}px`, width: `${75}%` }}>
+            {item.value}
+          </td>
+        </tr>
+      ))}
+    </tbody>
   );
 
   return [state, List, setState];

src/variables/utils/variableDescription.ts

@@ -1,8 +1,14 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
 import { Panel, SplitPanel, Widget } from '@phosphor/widgets';
-import { VariableTableDescription } from './variableTableDescription';
+
 import { IVariablesModel } from '../model';
+
 import { IVariable } from '../variable';
 
+import { VariableTableDescription } from './variableTableDescription';
+
 export class VariableDescription extends SplitPanel {
   readonly searchParams: Widget;
   readonly table: Widget;
@@ -15,7 +21,7 @@ export class VariableDescription extends SplitPanel {
     super();
     this.orientation = 'vertical';
     this.model = model;
-    this.currentVariable = this.model.variable;
+    this.currentVariable = this.model.current;
 
     this.table = new VariableTableDescription(this.model);
     this.table.addClass('jp-DebuggerSidebarVariable-table');
@@ -27,11 +33,10 @@ export class VariableDescription extends SplitPanel {
     this.addWidget(this.descriptionBox);
     this.descriptionBox.node.innerHTML = '<b> Select Variable </b>';
 
-    //observable change current variable
-    this.model.changeCurrentVariable.connect(
+    this.model.currentChanged.connect(
       (model: IVariablesModel, variable: IVariable) => {
         this.descriptionBox.node.innerHTML = this.renderDescription(
-          this.model.variable
+          this.model.current
         );
       }
     );

src/variables/utils/variableTableDescription.tsx

@@ -1,55 +1,50 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { ReactWidget } from '@jupyterlab/apputils';
+
+import { ArrayExt } from '@phosphor/algorithm';
+
 import { Widget, Panel } from '@phosphor/widgets';
-import { IVariablesModel } from '../model';
+
 import React, { useState } from 'react';
-import { ReactWidget } from '@jupyterlab/apputils';
+
+import { IVariablesModel } from '../model';
+
+import { VariablesSearch } from './toggle';
+
 import useTbody from './useTbody';
-import { VariablesSearch } from './toogle';
 
 const ROW_CLASS = 'jp-DebuggerSidebarVariables-table-row';
+
 const HEAD_CLASS = 'jp-DebuggerSidebarVariables-table-head';
 
-const TableHead = () => {
-  var styleElement_1 = {
-    width: '25%'
-  };
-  var styleElement_2 = {
-    width: '75%'
-  };
-  const element = (
+const Table = ({ model }: { model: IVariablesModel }) => {
+  const [variables, setVariables] = useState(model.variables);
+  const [variable, TableBody] = useTbody(variables, model.current, ROW_CLASS);
+
+  model.variablesChanged.connect((_: any, updates) => {
+    if (ArrayExt.shallowEqual(variables, updates)) {
+      return;
+    }
+    setVariables(updates);
+  });
+
+  model.current = variable;
+  return (
     <table>
       <thead>
         <tr>
-          <th style={styleElement_1} className={HEAD_CLASS}>
+          <th style={{ width: '25%' }} className={HEAD_CLASS}>
             Name
           </th>
-          <th style={styleElement_2} className={HEAD_CLASS}>
+          <th style={{ width: '75%' }} className={HEAD_CLASS}>
             Value
           </th>
         </tr>
       </thead>
-    </table>
-  );
-
-  return element;
-};
-
-const Table = ({ model }: any) => {
-  const [variables, setVariables] = useState(model.variables);
-  const [variable, TableBody] = useTbody(variables, model.variable, ROW_CLASS);
-
-  model.changeVariables.connect((model: any, new_variables: any) => {
-    if (new_variables === variables) {
-      return;
-    }
-    setVariables(new_variables);
-  });
-
-  model.variable = variable;
-  return (
-    <div>
-      <TableHead />
       <TableBody />
-    </div>
+    </table>
   );
 };
 

src/variables/variable.ts

@@ -1,29 +1,29 @@
-
-
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
 
 export interface IVariable {
-    /**
-     * The name of this variable.
-     */
-    readonly name: string;
-    /**
-     * The value of this variable.
-     */
-    readonly value: string;
-    /**
-     * The type of this variable.
-     */
-    readonly type: string | undefined;
-    /**
-     * The description of the variable.
-     */
-    readonly description: string | undefined;
-    /**
-     * a data URI or null.
-     */
-    readonly dataUri?: string;
-    /**
-     * a data URI or null.
-     */
-    readonly sourceUri?: string;
-}
+  /**
+   * The name of this variable.
+   */
+  readonly name: string;
+  /**
+   * The value of this variable.
+   */
+  readonly value: string;
+  /**
+   * The type of this variable.
+   */
+  readonly type: string | undefined;
+  /**
+   * The description of the variable.
+   */
+  readonly description: string | undefined;
+  /**
+   * a data URI or null.
+   */
+  readonly dataUri?: string;
+  /**
+   * a data URI or null.
+   */
+  readonly sourceUri?: string;
+}

src/variables/widget.ts

@@ -1,5 +1,10 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
 import { Panel } from '@phosphor/widgets';
+
 import { IVariablesModel } from './model';
+
 import { VariableDescription } from './utils';
 
 const MOCK_DATA_ROW = {
@@ -44,37 +49,34 @@ const MOCK_DATA_ROW = {
 };
 
 export class VariablesWidget extends Panel {
-  readonly model: IVariablesModel;
-
-  readonly header: Panel;
-  readonly label: Panel;
-  readonly body: Panel;
-  readonly variable: Panel;
-  readonly searcher: Panel;
-
-  readonly model_header = {
-    label: 'Variables',
-    class: 'jp-DebuggerSidebarVariables-header'
-  };
-
   constructor() {
     super();
 
     this.model = IVariablesModel.create(MOCK_DATA_ROW.variables);
 
-    // header
     this.header = new Panel();
-    this.header.addClass(this.model_header.class);
+    this.header.addClass('jp-DebuggerSidebarVariables-header');
     this.addWidget(this.header);
 
     this.label = new Panel();
-    this.label.node.textContent = this.model_header.label;
-    this.label.addClass(this.model_header.class + '-label');
+    this.label.node.textContent = 'Variables';
+    this.label.addClass('jp-DebuggerSidebarVariables-header-label');
     this.header.addWidget(this.label);
 
-    //body
-    this.variable = new VariableDescription(this.model);
-    this.variable.addClass('jp-DebuggerSidebarVariables-body');
-    this.addWidget(this.variable);
+    this.variables = new VariableDescription(this.model);
+    this.variables.addClass('jp-DebuggerSidebarVariables-body');
+    this.addWidget(this.variables);
   }
+
+  readonly body: Panel;
+
+  readonly header: Panel;
+
+  readonly label: Panel;
+
+  readonly model: IVariablesModel;
+
+  readonly searcher: Panel;
+
+  readonly variables: Panel;
 }

style/icons.css

@@ -0,0 +1,16 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+[data-jp-theme-light='true'] {
+  --jp-debugger-deactivate: url('./icons/md-light/baseline-label_off-24px.svg');
+}
+
+[data-jp-theme-light='false'] {
+  --jp-debugger-deactivate: url('./icons/md-dark/baseline-label_off-24px.svg');
+}
+
+.jp-DebuggerDeactivateIcon {
+  background-image: var(--jp-debugger-deactivate);
+}

style/icons/md-dark/baseline-label_off-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0V0z"/>
+    <path fill="#e0e0e0" d="M3.25 2.75l17 17L19 21l-2-2H5c-1.1 0-2-.9-2-2V7c0-.55.23-1.05.59-1.41L2 4l1.25-1.25zM22 12l-4.37-6.16C17.27 5.33 16.67 5 16 5H8l11 11 3-4z"/>
+</svg>

style/icons/md-light/baseline-label_off-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3.25 2.75l17 17L19 21l-2-2H5c-1.1 0-2-.9-2-2V7c0-.55.23-1.05.59-1.41L2 4l1.25-1.25zM22 12l-4.37-6.16C17.27 5.33 16.67 5 16 5H8l11 11 3-4z"/></svg>

style/index.css

@@ -3,6 +3,8 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+@import './toolbar.css';
+
 .jp-Debugger {
   background: var(--jp-layout-color1);
   top: 0;

style/toolbar.css

@@ -0,0 +1,11 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+@import './icons.css';
+
+.jp-DebuggerSidebar .jp-Toolbar {
+  background: var(--jp-layout-color2);
+  box-shadow: none;
+}

tests/babel.config.js

@@ -1 +1 @@
-module.exports = require("@jupyterlab/testutils/lib/babel.config");
+module.exports = require('@jupyterlab/testutils/lib/babel.config');