Merge pull request #860 from afshin/toolbar

Stand-alone Toolbar class

src/default-theme/index.css

@@ -33,6 +33,7 @@
 @import '../renderers/index.css';
 @import '../running/index.css';
 @import '../terminal/index.css';
+@import '../toolbar/index.css';
 
 /* Theme images */
-@import './images.css';
+@import './images.css';

src/inspector/index.css

@@ -52,7 +52,7 @@
 }
 
 
-.jp-InspectorItem .jp-NBToolbar {
+.jp-InspectorItem .jp-Toolbar {
     display: flex;
     flex-direction: row;
     border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
@@ -66,39 +66,39 @@
 }
 
 
-.jp-InspectorItem .jp-NBToolbar-button.jp-InspectorItem-clear::before {
+.jp-InspectorItem .jp-Toolbar-button.jp-InspectorItem-clear::before {
    content: "\f05e";  /* ban */
 }
 
 
-.jp-InspectorItem .jp-NBToolbar-button.jp-InspectorItem-back::before {
+.jp-InspectorItem .jp-Toolbar-button.jp-InspectorItem-back::before {
    content: "\f060";  /* arrow-left */
 }
 
 
-.jp-InspectorItem .jp-NBToolbar-button.jp-InspectorItem-forward::before {
+.jp-InspectorItem .jp-Toolbar-button.jp-InspectorItem-forward::before {
    content: "\f061";  /* arrow-right */
 }
 
 
-.jp-InspectorItem .jp-NBToolbar-button.jp-InspectorItem-bottom {
+.jp-InspectorItem .jp-Toolbar-button.jp-InspectorItem-bottom {
   position: absolute;
   right: 0;
 }
 
 
-.jp-InspectorItem .jp-NBToolbar-button.jp-InspectorItem-bottom::before {
+.jp-InspectorItem .jp-Toolbar-button.jp-InspectorItem-bottom::before {
    content: "\f103";  /* angle-double-down */
 }
 
 
-.jp-InspectorItem .jp-NBToolbar-button.jp-InspectorItem-right {
+.jp-InspectorItem .jp-Toolbar-button.jp-InspectorItem-right {
   position: absolute;
   right: 0;
 }
 
 
-.jp-InspectorItem .jp-NBToolbar-button.jp-InspectorItem-right::before {
+.jp-InspectorItem .jp-Toolbar-button.jp-InspectorItem-right::before {
    content: "\f101";  /* angle-double-right */
 }
 

src/inspector/inspector.ts

@@ -26,8 +26,8 @@ import {
 } from 'phosphor/lib/ui/widget';
 
 import {
-  NotebookToolbar, ToolbarButton
-} from '../notebook/notebook/toolbar';
+  Toolbar, ToolbarButton
+} from '../toolbar';
 
 
 /**
@@ -518,14 +518,14 @@ class InspectorItem extends Panel {
   /**
    * Create a history toolbar.
    */
-  private _createToolbar(): NotebookToolbar {
-    let toolbar = new NotebookToolbar();
+  private _createToolbar(): Toolbar {
+    let toolbar = new Toolbar();
 
     if (this.toggleEnabled) {
       let toggle = new ToolbarButton({
         className: this.orientation === 'vertical' ? RIGHT_TOGGLE_CLASS
           : BOTTOM_TOGGLE_CLASS,
-        onClick: () => this.orientationToggled.emit(void 0),
+        onClick: () => { this.orientationToggled.emit(void 0); },
         tooltip: 'Toggle the inspector orientation.'
       });
       toolbar.add('toggle', toggle);
@@ -537,21 +537,21 @@ class InspectorItem extends Panel {
 
     let clear = new ToolbarButton({
       className: CLEAR_CLASS,
-      onClick: () => this._clear(),
+      onClick: () => { this._clear(); },
       tooltip: 'Clear history.'
     });
     toolbar.add('clear', clear);
 
     let back = new ToolbarButton({
       className: BACK_CLASS,
-      onClick: () => this._back(),
+      onClick: () => { this._back(); },
       tooltip: 'Navigate back in history.'
     });
     toolbar.add('back', back);
 
     let forward = new ToolbarButton({
       className: FORWARD_CLASS,
-      onClick: () => this._forward(),
+      onClick: () => { this._forward(); },
       tooltip: 'Navigate forward in history.'
     });
     toolbar.add('forward', forward);
@@ -577,7 +577,7 @@ class InspectorItem extends Panel {
   private _orientation: Inspector.Orientation = 'horizontal';
   private _rank: number = Infinity;
   private _remembers: boolean = false;
-  private _toolbar: NotebookToolbar = null;
+  private _toolbar: Toolbar = null;
 }
 
 

src/notebook/completion.css

@@ -2,6 +2,8 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+
 .jp-Completion {
   background: #EEEEEE;
   border: var(--jp-border-width) solid var(--jp-border-color1);

src/notebook/index.css

@@ -6,6 +6,7 @@
 
 
 @import './completion.css';
+@import './toolbar.css';
 
 
 .jp-Notebook {
@@ -223,122 +224,6 @@ img.jp-mod-unconfined {
 }
 
 
-.jp-NBToolbar {
-  color: var(--jp-ui-font-color1);
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: row;
-  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
-  height: 24px;
-}
-
-
-.jp-NBToolbar > .jp-NBToolbar-item {
-  flex: 0 0 auto;
-  padding-left: 8px;
-  padding-right: 8px;
-  vertical-align: middle;
-  font-size: 14px;
-  line-height: 23px;
-}
-
-
-.jp-NBToolbar-item.jp-NBToolbar-button,
-.jp-NBToolbar-item.jp-NBToolbar-kernelIndicator {
-  font-family: FontAwesome;
-  text-align: center;
-  display: inline-block;
-}
-
-
-.jp-NBToolbar-item.jp-NBToolbar-cellType select {
-    background: #FFFFFF;
-}
-
-.jp-NBToolbar-cellType .jp-NBToolbar-cellTypeDropdown {
-    border: var(--jp-border-width) solid var(--jp-border-color1);
-    border-radius: 0;
-    outline: none;
-    width: 100%;
-    font-size: 14px;
-    line-height: 23px;
-}
-
-
-.jp-NBToolbar-item.jp-NBToolbar-kernelName {
-    text-align: right;
-    flex-grow: 1;
-    flex-shrink: 1;
-}
-
-
-.jp-NBToolbar-item.jp-NBToolbar-kernelIndicator {
-    border-right: none;
-}
-
-
-.jp-NBToolbar-button.jp-mod-pressed {
-    background-color: #E0E0E0;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
-}
-
-
-.jp-NBToolbar-button:hover {
-    background-color: #EEEEEE;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
-}
-
-
-.jp-NBToolbar-button.jp-NBToolbar-save::before {
-   content: "\f0c7";  /* Save */
-}
-
-
-.jp-NBToolbar-button.jp-NBToolbar-insert::before {
-   content: "\f067";  /* Plus */
-}
-
-
-.jp-NBToolbar-button.jp-NBToolbar-cut::before {
-   content: "\f0c4";  /* Cut */
-}
-
-
-.jp-NBToolbar-button.jp-NBToolbar-copy::before {
-   content: "\f0c5";  /* Copy */
-}
-
-
-.jp-NBToolbar-button.jp-NBToolbar-paste::before {
-   content: "\f0ea";  /* Paste */
-}
-
-
-.jp-NBToolbar-button.jp-NBToolbar-run::before {
-   content: "\f051";  /* Step-forward */
-}
-
-
-.jp-NBToolbar-button.jp-NBToolbar-interrupt::before {
-   content: "\f04d";  /* Stop */
-}
-
-
-.jp-NBToolbar-button.jp-NBToolbar-restart::before {
-   content: "\f01e";  /* Rotate-right */
-}
-
-
-.jp-NBToolbar-item.jp-NBToolbar-kernelIndicator::before {
-    content: "\f10c";  /* Circle-o */
-}
-
-
-.jp-NBToolbar-item.jp-NBToolbar-kernelIndicator.jp-mod-busy::before {
-    content: "\f111";  /* Circle */
-}
-
-
 .jp-CellEditor > .CodeMirror {
   line-height: 1.21429em;
   /* Changed from 1em to our global default */

src/notebook/notebook/default-toolbar.ts

@@ -27,7 +27,7 @@ import {
 
 import {
   ToolbarButton
-} from './toolbar';
+} from '../../toolbar';
 
 import {
   Notebook
@@ -37,67 +37,67 @@ import {
 /**
  * The class name added to toolbar save button.
  */
-const TOOLBAR_SAVE = 'jp-NBToolbar-save';
+const TOOLBAR_SAVE_CLASS = 'jp-Notebook-toolbarSave';
 
 /**
  * The class name added to toolbar insert button.
  */
-const TOOLBAR_INSERT = 'jp-NBToolbar-insert';
+const TOOLBAR_INSERT_CLASS = 'jp-Notebook-toolbarInsert';
 
 /**
  * The class name added to toolbar cut button.
  */
-const TOOLBAR_CUT = 'jp-NBToolbar-cut';
+const TOOLBAR_CUT_CLASS = 'jp-Notebook-toolbarCut';
 
 /**
  * The class name added to toolbar copy button.
  */
-const TOOLBAR_COPY = 'jp-NBToolbar-copy';
+const TOOLBAR_COPY_CLASS = 'jp-Notebook-toolbarCopy';
 
 /**
  * The class name added to toolbar paste button.
  */
-const TOOLBAR_PASTE = 'jp-NBToolbar-paste';
+const TOOLBAR_PASTE_CLASS = 'jp-Notebook-toolbarPaste';
 
 /**
  * The class name added to toolbar run button.
  */
-const TOOLBAR_RUN = 'jp-NBToolbar-run';
+const TOOLBAR_RUN_CLASS = 'jp-Notebook-toolbarRun';
 
 /**
  * The class name added to toolbar interrupt button.
  */
-const TOOLBAR_INTERRUPT = 'jp-NBToolbar-interrupt';
+const TOOLBAR_INTERRUPT_CLASS = 'jp-Notebook-toolbarInterrupt';
 
 /**
  * The class name added to toolbar restart button.
  */
-const TOOLBAR_RESTART = 'jp-NBToolbar-restart';
+const TOOLBAR_RESTART_CLASS = 'jp-Notebook-toolbarRestart';
 
 /**
  * The class name added to toolbar cell type dropdown wrapper.
  */
-const TOOLBAR_CELLTYPE = 'jp-NBToolbar-cellType';
+const TOOLBAR_CELLTYPE_CLASS = 'jp-Notebook-toolbarCellType';
 
 /**
  * The class name added to toolbar cell type dropdown.
  */
-const TOOLBAR_CELLTYPE_DROPDOWN = 'jp-NBToolbar-cellTypeDropdown';
+const TOOLBAR_CELLTYPE_DROPDOWN_CLASS = 'jp-Notebook-toolbarCellTypeDropdown';
 
 /**
  * The class name added to toolbar kernel name text.
  */
-const TOOLBAR_KERNEL = 'jp-NBToolbar-kernelName';
+const TOOLBAR_KERNEL_CLASS = 'jp-Notebook-toolbarKernelName';
 
 /**
  * The class name added to toolbar kernel indicator icon.
  */
-const TOOLBAR_INDICATOR = 'jp-NBToolbar-kernelIndicator';
+const TOOLBAR_INDICATOR_CLASS = 'jp-Notebook-toolbarKernelIndicator';
 
 /**
  * The class name added to a busy kernel indicator.
  */
-const TOOLBAR_BUSY = 'jp-mod-busy';
+const TOOLBAR_BUSY_CLASS = 'jp-mod-busy';
 
 
 /**
@@ -111,7 +111,7 @@ namespace ToolbarItems {
   export
   function createSaveButton(panel: NotebookPanel): ToolbarButton {
     return new ToolbarButton({
-      className: TOOLBAR_SAVE,
+      className: TOOLBAR_SAVE_CLASS,
       onClick: () => {
         panel.context.save().then(() => {
           return panel.context.createCheckpoint();
@@ -127,7 +127,7 @@ namespace ToolbarItems {
   export
   function createInsertButton(panel: NotebookPanel): ToolbarButton {
     return new ToolbarButton({
-      className: TOOLBAR_INSERT,
+      className: TOOLBAR_INSERT_CLASS,
       onClick: () => { NotebookActions.insertBelow(panel.content); },
       tooltip: 'Insert a cell below'
     });
@@ -139,7 +139,7 @@ namespace ToolbarItems {
   export
   function createCutButton(panel: NotebookPanel): ToolbarButton {
     return new ToolbarButton({
-      className: TOOLBAR_CUT,
+      className: TOOLBAR_CUT_CLASS,
       onClick: () => {
         NotebookActions.cut(panel.content, panel.clipboard);
       },
@@ -153,7 +153,7 @@ namespace ToolbarItems {
   export
   function createCopyButton(panel: NotebookPanel): ToolbarButton {
     return new ToolbarButton({
-      className: TOOLBAR_COPY,
+      className: TOOLBAR_COPY_CLASS,
       onClick: () => {
         NotebookActions.copy(panel.content, panel.clipboard);
       },
@@ -167,7 +167,7 @@ namespace ToolbarItems {
   export
   function createPasteButton(panel: NotebookPanel): ToolbarButton {
     return new ToolbarButton({
-      className: TOOLBAR_PASTE,
+      className: TOOLBAR_PASTE_CLASS,
       onClick: () => {
         NotebookActions.paste(panel.content, panel.clipboard);
       },
@@ -181,7 +181,7 @@ namespace ToolbarItems {
   export
   function createRunButton(panel: NotebookPanel): ToolbarButton {
     return new ToolbarButton({
-      className: TOOLBAR_RUN,
+      className: TOOLBAR_RUN_CLASS,
       onClick: () => {
         NotebookActions.runAndAdvance(panel.content, panel.kernel);
       },
@@ -195,7 +195,7 @@ namespace ToolbarItems {
   export
   function createInterruptButton(panel: NotebookPanel): ToolbarButton {
     return new ToolbarButton({
-      className: TOOLBAR_INTERRUPT,
+      className: TOOLBAR_INTERRUPT_CLASS,
       onClick: () => {
         if (panel.kernel) {
           panel.context.kernel.interrupt();
@@ -211,7 +211,7 @@ namespace ToolbarItems {
   export
   function createRestartButton(panel: NotebookPanel): ToolbarButton {
     return new ToolbarButton({
-      className: TOOLBAR_RESTART,
+      className: TOOLBAR_RESTART_CLASS,
       onClick: () => {
         restartKernel(panel.kernel, panel.node);
       },
@@ -246,7 +246,7 @@ namespace ToolbarItems {
   export
   function createKernelNameItem(panel: NotebookPanel): Widget {
     let widget = new Widget();
-    widget.addClass(TOOLBAR_KERNEL);
+    widget.addClass(TOOLBAR_KERNEL_CLASS);
     updateKernelNameItem(widget, panel.kernel);
     panel.kernelChanged.connect(() => {
       updateKernelNameItem(widget, panel.kernel);
@@ -315,7 +315,7 @@ class CellTypeSwitcher extends Widget {
    */
   constructor(widget: Notebook) {
     super({ node: createCellTypeSwitcherNode() });
-    this.addClass(TOOLBAR_CELLTYPE);
+    this.addClass(TOOLBAR_CELLTYPE_CLASS);
 
     let select = this.node.firstChild as HTMLSelectElement;
     this._wildCard = document.createElement('option');
@@ -392,7 +392,7 @@ function createCellTypeSwitcherNode(): HTMLElement {
     option.textContent = t;
     select.appendChild(option);
   }
-  select.className = TOOLBAR_CELLTYPE_DROPDOWN;
+  select.className = TOOLBAR_CELLTYPE_DROPDOWN_CLASS;
   div.appendChild(select);
   return div;
 }
@@ -407,12 +407,12 @@ class KernelIndicator extends Widget {
    */
   constructor(panel: NotebookPanel) {
     super();
-    this.addClass(TOOLBAR_INDICATOR);
+    this.addClass(TOOLBAR_INDICATOR_CLASS);
     if (panel.kernel) {
       this._handleStatus(panel.kernel, panel.kernel.status);
       panel.kernel.statusChanged.connect(this._handleStatus, this);
     } else {
-      this.addClass(TOOLBAR_BUSY);
+      this.addClass(TOOLBAR_BUSY_CLASS);
       this.node.title = 'No Kernel!';
     }
     panel.kernelChanged.connect((c, kernel) => {
@@ -421,7 +421,7 @@ class KernelIndicator extends Widget {
         kernel.statusChanged.connect(this._handleStatus, this);
       } else {
         this.node.title = 'No Kernel!';
-        this.addClass(TOOLBAR_BUSY);
+        this.addClass(TOOLBAR_BUSY_CLASS);
       }
     });
   }
@@ -433,7 +433,7 @@ class KernelIndicator extends Widget {
     if (this.isDisposed) {
       return;
     }
-    this.toggleClass(TOOLBAR_BUSY, status !== 'idle');
+    this.toggleClass(TOOLBAR_BUSY_CLASS, status !== 'idle');
     let title = 'Kernel ' + status[0].toUpperCase() + status.slice(1);
     this.node.title = title;
   }

src/notebook/notebook/index.ts

@@ -7,7 +7,6 @@ export * from './model';
 export * from './modelfactory';
 export * from './nbformat';
 export * from './panel';
-export * from './toolbar';
 export * from './trust';
 export * from './widget';
 export * from './widgetfactory';

src/notebook/notebook/panel.ts

@@ -50,8 +50,8 @@ import {
 } from './model';
 
 import {
-  NotebookToolbar
-} from './toolbar';
+  Toolbar
+} from '../../toolbar';
 
 import {
   Notebook
@@ -132,8 +132,8 @@ class NotebookPanel extends Widget {
    * #### Notes
    * This is a read-only property.
    */
-  get toolbar(): NotebookToolbar {
-    return (this.layout as PanelLayout).widgets.at(0) as NotebookToolbar;
+  get toolbar(): Toolbar {
+    return (this.layout as PanelLayout).widgets.at(0) as Toolbar;
   }
 
   /**
@@ -448,7 +448,7 @@ export namespace NotebookPanel {
     /**
      * Create a new toolbar for the panel.
      */
-    createToolbar(): NotebookToolbar;
+    createToolbar(): Toolbar;
 
     /**
      * Create a new completion widget for the panel.
@@ -469,8 +469,8 @@ export namespace NotebookPanel {
     /**
      * Create a new toolbar for the panel.
      */
-    createToolbar(): NotebookToolbar {
-      return new NotebookToolbar();
+    createToolbar(): Toolbar {
+      return new Toolbar();
     }
 
     /**

src/notebook/notebook/widgetfactory.ts

@@ -87,7 +87,6 @@ class NotebookWidgetFactory extends ABCWidgetFactory<NotebookPanel, INotebookMod
     panel.context = context;
     ToolbarItems.populateDefaults(panel);
     this.widgetCreated.emit(panel);
-    console.log(panel.content.childAt(0).editor);
     return panel;
   }
 

src/notebook/toolbar.css

@@ -0,0 +1,88 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+.jp-Toolbar-item.jp-Notebook-toolbarKernelIndicator {
+  font-family: FontAwesome;
+  text-align: center;
+  display: inline-block;
+}
+
+
+.jp-Notebook-toolbarCellType select {
+  background: #FFFFFF;
+}
+
+
+.jp-Notebook-toolbarCellType .jp-Notebook-toolbarCellTypeDropdown {
+  border: var(--jp-border-width) solid var(--jp-border-color1);
+  border-radius: 0;
+  outline: none;
+  width: 100%;
+  font-size: 14px;
+  line-height: 23px;
+}
+
+
+.jp-Toolbar > .jp-Toolbar-item.jp-Notebook-toolbarKernelName {
+  text-align: right;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+
+.jp-Toolbar-item.jp-Notebook-toolbarKernelIndicator {
+  border-right: none;
+}
+
+
+.jp-Notebook-toolbarSave::before {
+  content: "\f0c7";  /* save */
+}
+
+
+.jp-Notebook-toolbarInsert::before {
+  content: "\f067";  /* plus */
+}
+
+
+.jp-Notebook-toolbarCut::before {
+  content: "\f0c4";  /* cut */
+}
+
+
+.jp-Notebook-toolbarCopy::before {
+  content: "\f0c5";  /* copy */
+}
+
+
+.jp-Notebook-toolbarPaste::before {
+  content: "\f0ea";  /* paste */
+}
+
+
+.jp-Notebook-toolbarRun::before {
+  content: "\f051";  /* step-forward */
+}
+
+
+.jp-Notebook-toolbarInterrupt::before {
+  content: "\f04d";  /* stop */
+}
+
+
+.jp-Notebook-toolbarRestart::before {
+  content: "\f01e";  /* rotate-right */
+}
+
+
+.jp-Notebook-toolbarKernelIndicator::before {
+  content: "\f10c";  /* circle-o */
+}
+
+
+.jp-Notebook-toolbarKernelIndicator.jp-mod-busy::before {
+  content: "\f111";  /* circle */
+}

src/toolbar/index.css

@@ -0,0 +1,44 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) 2014-2016, Jupyter Development Team.
+|
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+.jp-Toolbar {
+  color: var(--jp-ui-font-color1);
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: row;
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
+  height: 24px;
+}
+
+
+.jp-Toolbar > .jp-Toolbar-item {
+  flex: 0 0 auto;
+  padding-left: 8px;
+  padding-right: 8px;
+  vertical-align: middle;
+  font-size: 14px;
+  line-height: 23px;
+}
+
+
+.jp-Toolbar-item.jp-Toolbar-button {
+  font-family: FontAwesome;
+  text-align: center;
+  display: inline-block;
+}
+
+
+.jp-Toolbar-button.jp-mod-pressed {
+    background-color: #E0E0E0;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+
+.jp-Toolbar-button:hover {
+    background-color: #EEEEEE;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
+}

src/notebook/notebook/toolbar.ts → src/toolbar/index.ts

@@ -18,37 +18,37 @@ import {
 } from 'phosphor/lib/ui/widget';
 
 /**
- * The class name added to notebook toolbars.
+ * The class name added to toolbars.
  */
-const NB_TOOLBAR = 'jp-NBToolbar';
+const TOOLBAR_CLASS = 'jp-Toolbar';
 
 /**
- * The class name added to notebook toolbar items.
+ * The class name added to toolbar items.
  */
-const TOOLBAR_ITEM = 'jp-NBToolbar-item';
+const TOOLBAR_ITEM_CLASS = 'jp-Toolbar-item';
 
 /**
- * The class name added to notebook toolbar buttons.
+ * The class name added to toolbar buttons.
  */
-const TOOLBAR_BUTTON = 'jp-NBToolbar-button';
+const TOOLBAR_BUTTON_CLASS = 'jp-Toolbar-button';
 
 /**
  * The class name added to a pressed button.
  */
-const TOOLBAR_PRESSED = 'jp-mod-pressed';
+const TOOLBAR_PRESSED_CLASS = 'jp-mod-pressed';
 
 
 /**
- * A class which provides a notebook toolbar widget.
+ * A class which provides a toolbar widget.
  */
 export
-class NotebookToolbar extends Widget {
+class Toolbar extends Widget {
   /**
    * Construct a new toolbar widget.
    */
   constructor() {
     super();
-    this.addClass(NB_TOOLBAR);
+    this.addClass(TOOLBAR_CLASS);
     this.layout = new PanelLayout();
   }
 
@@ -71,7 +71,7 @@ class NotebookToolbar extends Widget {
     if (names.indexOf(name) !== -1) {
       throw new Error(`A button named "${name}" was already added`);
     }
-    widget.addClass(TOOLBAR_ITEM);
+    widget.addClass(TOOLBAR_ITEM_CLASS);
     let layout = this.layout as PanelLayout;
     let index = names.indexOf(after);
     if (index === -1) {
@@ -108,9 +108,9 @@ class ToolbarButton extends Widget {
    * Construct a new toolbar button.
    */
   constructor(options: ToolbarButton.IOptions = {}) {
-    super({ node: Private.createNode() });
+    super({ node: document.createElement('span') });
     options = options || {};
-    this.addClass(TOOLBAR_BUTTON);
+    this.addClass(TOOLBAR_BUTTON_CLASS);
     this._onClick = options.onClick;
     if (options.className) {
       this.addClass(options.className);
@@ -139,17 +139,16 @@ class ToolbarButton extends Widget {
   handleEvent(event: Event): void {
     switch (event.type) {
     case 'click':
-      let cb = this._onClick;
-      if (cb) {
-        cb();
+      if (this._onClick) {
+        this._onClick();
       }
       break;
     case 'mousedown':
-      this.addClass(TOOLBAR_PRESSED);
+      this.addClass(TOOLBAR_PRESSED_CLASS);
       break;
     case 'mouseup':
     case 'mouseout':
-      this.removeClass(TOOLBAR_PRESSED);
+      this.removeClass(TOOLBAR_PRESSED_CLASS);
       break;
     default:
       break;
@@ -217,12 +216,4 @@ namespace Private {
    */
   export
   const nameProperty = new AttachedProperty<Widget, string>({ name: 'name' });
-
-  /**
-   * Create the node for the toolbar button.
-   */
-  export
-  function createNode(): HTMLElement {
-    return document.createElement('span');
-  }
 }

test/src/index.ts

@@ -34,7 +34,6 @@ import './notebook/notebook/model.spec';
 import './notebook/notebook/modelfactory.spec';
 import './notebook/notebook/nbformat.spec';
 import './notebook/notebook/panel.spec';
-import './notebook/notebook/toolbar.spec';
 import './notebook/notebook/trust.spec';
 import './notebook/notebook/widget.spec';
 import './notebook/notebook/widgetfactory.spec';
@@ -42,4 +41,6 @@ import './notebook/notebook/widgetfactory.spec';
 import './notebook/output-area/model.spec';
 import './notebook/output-area/widget.spec';
 
+import './toolbar/toolbar.spec';
+
 import 'phosphor/styles/base.css';

test/src/notebook/index.ts

@@ -1,12 +1,2 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-
-/*
-import './cells/model.spec';
-import './input-area/model.spec';
-import './output-area/model.spec';
-import './editor/model.spec';
-import './notebook/model.spec';
-import './notebook/nbformat.spec';
-import './notebook/serialize.spec';
-*/

test/src/notebook/notebook/default-toolbar.spec.ts

@@ -88,9 +88,9 @@ describe('notebook/notebook/default-toolbar', () => {
         button.dispose();
       });
 
-      it("should have the `'jp-NBToolbar-save'` class", () => {
+      it('should have the `\'jp-Notebook-toolbarSave\'` class', () => {
         let button = ToolbarItems.createSaveButton(panel);
-        expect(button.hasClass('jp-NBToolbar-save')).to.be(true);
+        expect(button.hasClass('jp-Notebook-toolbarSave')).to.be(true);
       });
 
     });
@@ -106,9 +106,9 @@ describe('notebook/notebook/default-toolbar', () => {
         button.dispose();
       });
 
-      it("should have the `'jp-NBToolbar-insert'` class", () => {
+      it('should have the `\'jp-Notebook-toolbarInsert\'` class', () => {
         let button = ToolbarItems.createInsertButton(panel);
-        expect(button.hasClass('jp-NBToolbar-insert')).to.be(true);
+        expect(button.hasClass('jp-Notebook-toolbarInsert')).to.be(true);
       });
 
     });
@@ -125,9 +125,9 @@ describe('notebook/notebook/default-toolbar', () => {
         button.dispose();
       });
 
-      it("should have the `'jp-NBToolbar-cut'` class", () => {
+      it('should have the `\'jp-Notebook-toolbarCut\'` class', () => {
         let button = ToolbarItems.createCutButton(panel);
-        expect(button.hasClass('jp-NBToolbar-cut')).to.be(true);
+        expect(button.hasClass('jp-Notebook-toolbarCut')).to.be(true);
       });
 
     });
@@ -144,9 +144,9 @@ describe('notebook/notebook/default-toolbar', () => {
         button.dispose();
       });
 
-      it("should have the `'jp-NBToolbar-copy'` class", () => {
+      it('should have the `\'jp-Notebook-toolbarCopy\'` class', () => {
         let button = ToolbarItems.createCopyButton(panel);
-        expect(button.hasClass('jp-NBToolbar-copy')).to.be(true);
+        expect(button.hasClass('jp-Notebook-toolbarCopy')).to.be(true);
       });
 
     });
@@ -166,9 +166,9 @@ describe('notebook/notebook/default-toolbar', () => {
         });
       });
 
-      it('should have the `\'jp-NBToolbar-paste\'` class', () => {
+      it('should have the `\'jp-Notebook-toolbarPaste\'` class', () => {
         let button = ToolbarItems.createPasteButton(panel);
-        expect(button.hasClass('jp-NBToolbar-paste')).to.be(true);
+        expect(button.hasClass('jp-Notebook-toolbarPaste')).to.be(true);
       });
 
     });
@@ -196,9 +196,9 @@ describe('notebook/notebook/default-toolbar', () => {
         button.node.click();
       });
 
-      it("should have the `'jp-NBToolbar-run'` class", () => {
+      it('should have the `\'jp-Notebook-toolbarRun\'` class', () => {
         let button = ToolbarItems.createRunButton(panel);
-        expect(button.hasClass('jp-NBToolbar-run')).to.be(true);
+        expect(button.hasClass('jp-Notebook-toolbarRun')).to.be(true);
       });
 
     });
@@ -218,18 +218,18 @@ describe('notebook/notebook/default-toolbar', () => {
         });
       });
 
-      it("should have the `'jp-NBToolbar-interrupt'` class", () => {
+      it('should have the `\'jp-Notebook-toolbarInterrupt\'` class', () => {
         let button = ToolbarItems.createInterruptButton(panel);
-        expect(button.hasClass('jp-NBToolbar-interrupt')).to.be(true);
+        expect(button.hasClass('jp-Notebook-toolbarInterrupt')).to.be(true);
       });
 
     });
 
     describe('#createRestartButton()', () => {
 
-      it("should have the `'jp-NBToolbar-restart'` class", () => {
+      it('should have the `\'jp-Notebook-toolbarRestart\'` class', () => {
         let button = ToolbarItems.createRestartButton(panel);
-        expect(button.hasClass('jp-NBToolbar-restart')).to.be(true);
+        expect(button.hasClass('jp-Notebook-toolbarRestart')).to.be(true);
       });
 
     });
@@ -244,7 +244,7 @@ describe('notebook/notebook/default-toolbar', () => {
         expect(node.value).to.be('markdown');
       });
 
-      it("should display `'-'` if multiple cell types are selected", () => {
+      it('should display `\'-\'` if multiple cell types are selected', () => {
         let item = ToolbarItems.createCellTypeItem(panel);
         let node = item.node.getElementsByTagName('select')[0] as HTMLSelectElement;
         expect(node.value).to.be('code');
@@ -270,15 +270,15 @@ describe('notebook/notebook/default-toolbar', () => {
         context.changeKernel({ name: 'python' });
         panel.context = context;
         panel.content.activeCellIndex++;
-        let node = item.node.getElementsByTagName('select')[0] as HTMLSelectElement;
-        expect(node.value).to.be('markdown');
+        let node = item.node.getElementsByTagName('select')[0];
+        expect((node as HTMLSelectElement).value).to.be('markdown');
       });
 
     });
 
     describe('#createKernelNameItem()', () => {
 
-      it("should display the `'display_name`' of the current kernel", (done) => {
+      it('should display the `\'display_name\'` of the kernel', (done) => {
         let item = ToolbarItems.createKernelNameItem(panel);
         panel.kernel.getKernelSpec().then(spec => {
           expect(item.node.textContent).to.be(spec.display_name);
@@ -286,7 +286,7 @@ describe('notebook/notebook/default-toolbar', () => {
         });
       });
 
-      it("should display `'No Kernel!'` if there is no kernel", () => {
+      it('should display `\'No Kernel!\'` if there is no kernel', () => {
         panel.context = null;
         let item = ToolbarItems.createKernelNameItem(panel);
         expect(item.node.textContent).to.be('No Kernel!');

test/src/notebook/notebook/panel.spec.ts

@@ -19,10 +19,6 @@ import {
   IDocumentContext
 } from '../../../../lib/docregistry';
 
-import {
-  ICellEditorWidget, ITextChange, ICompletionRequest
-} from '../../../../lib/notebook/cells/editor';
-
 import {
   CompletionWidget
 } from '../../../../lib/notebook/completion';
@@ -36,8 +32,8 @@ import {
 } from '../../../../lib/notebook/notebook/panel';
 
 import {
-  NotebookToolbar
-} from '../../../../lib/notebook/notebook/toolbar';
+  Toolbar
+} from '../../../../lib/toolbar';
 
 import {
   Notebook
@@ -173,7 +169,7 @@ describe('notebook/notebook/panel', () => {
 
       it('should be the toolbar used by the widget', () => {
         let panel = new NotebookPanel({ rendermime, clipboard, renderer });
-        expect(panel.toolbar).to.be.a(NotebookToolbar);
+        expect(panel.toolbar).to.be.a(Toolbar);
       });
 
       it('should be read-only', () => {
@@ -412,7 +408,7 @@ describe('notebook/notebook/panel', () => {
 
         it('should create a notebook toolbar', () => {
           let renderer = new CodeMirrorNotebookPanelRenderer();
-          expect(renderer.createToolbar()).to.be.a(NotebookToolbar);
+          expect(renderer.createToolbar()).to.be.a(Toolbar);
         });
 
       });

test/src/notebook/notebook/toolbar.spec.ts → test/src/toolbar/toolbar.spec.ts

@@ -16,8 +16,8 @@ import {
 } from 'simulate-event';
 
 import {
-  NotebookToolbar, ToolbarButton
-} from '../../../../lib/notebook/notebook/toolbar';
+  Toolbar, ToolbarButton
+} from '../../../lib/toolbar';
 
 
 class LogToolbarButton extends ToolbarButton {
@@ -43,20 +43,20 @@ class LogToolbarButton extends ToolbarButton {
 }
 
 
-describe('notebook/notebook/toolbar', () => {
+describe('toolbar/toolbar', () => {
 
-  describe('NotebookToolbar', () => {
+  describe('Toolbar', () => {
 
     describe('#constructor()', () => {
 
       it('should construct a new toolbar widget', () => {
-        let widget = new NotebookToolbar();
-        expect(widget).to.be.a(NotebookToolbar);
+        let widget = new Toolbar();
+        expect(widget).to.be.a(Toolbar);
       });
 
-      it('should add the `jp-NBToolbar` class', () => {
-        let widget = new NotebookToolbar();
-        expect(widget.hasClass('jp-NBToolbar')).to.be(true);
+      it('should add the `jp-Toolbar` class', () => {
+        let widget = new Toolbar();
+        expect(widget.hasClass('jp-Toolbar')).to.be(true);
       });
 
     });
@@ -65,21 +65,21 @@ describe('notebook/notebook/toolbar', () => {
 
       it('should add an item to the toolbar', () => {
         let item = new Widget();
-        let widget = new NotebookToolbar();
+        let widget = new Toolbar();
         widget.add('test', item);
         expect(widget.list()).to.contain('test');
       });
 
-      it('should add the `jp-NBToolbar-item` class to the widget', () => {
+      it('should add the `jp-Toolbar-item` class to the widget', () => {
         let item = new Widget();
-        let widget = new NotebookToolbar();
+        let widget = new Toolbar();
         widget.add('test', item);
-        expect(item.hasClass('jp-NBToolbar-item')).to.be(true);
+        expect(item.hasClass('jp-Toolbar-item')).to.be(true);
       });
 
       it('should add the item after a named item', () => {
         let items = [new Widget(), new Widget(), new Widget()];
-        let widget = new NotebookToolbar();
+        let widget = new Toolbar();
         widget.add('foo', items[0]);
         widget.add('bar', items[1]);
         widget.add('baz', items[2], 'foo');
@@ -88,7 +88,7 @@ describe('notebook/notebook/toolbar', () => {
 
       it('should ignore an invalid `after`', () => {
         let items = [new Widget(), new Widget(), new Widget()];
-        let widget = new NotebookToolbar();
+        let widget = new Toolbar();
         widget.add('foo', items[0]);
         widget.add('bar', items[1]);
         widget.add('baz', items[2], 'fuzz');
@@ -96,7 +96,7 @@ describe('notebook/notebook/toolbar', () => {
       });
 
       it('should throw an error if the name is alreay used', () => {
-        let widget = new NotebookToolbar();
+        let widget = new Toolbar();
         widget.add('test', new Widget());
         expect(() => { widget.add('test', new Widget()); }).to.throwError();
       });
@@ -106,7 +106,7 @@ describe('notebook/notebook/toolbar', () => {
     describe('#list()', () => {
 
       it('should get an ordered list the toolbar item names', () => {
-        let widget = new NotebookToolbar();
+        let widget = new Toolbar();
         widget.add('foo', new Widget());
         widget.add('bar', new Widget());
         widget.add('baz', new Widget());

tutorial/notebook.md

@@ -50,7 +50,7 @@ After the NotebookModel is created, the NotebookWidgetFactory constructs a
 new NotebookPanel from the model. The NotebookPanel widget is added to
 the DockPanel. The **NotebookPanel** contains:
 
-- a [NotebookToolbar](http://jupyter.org/jupyterlab/classes/_notebook_notebook_toolbar_.notebooktoolbar.html)
+- a [Toolbar](http://jupyter.org/jupyterlab/modules/_toolbar_index_.html)
 - a [Notebook widget](http://jupyter.org/jupyterlab/classes/_notebook_notebook_widget_.notebook.html).
 
 The NotebookPanel also adds completion logic.