Clean up notebook toolbar and toolbar button

src/notebook/notebook/default-toolbar.ts

@@ -106,9 +106,11 @@ namespace ToolbarItems {
    */
   export
   function createSaveButton(panel: NotebookPanel): ToolbarButton {
-    return new ToolbarButton(TOOLBAR_SAVE, () => {
-      panel.context.save();
-    }, 'Save the notebook contents');
+    return new ToolbarButton({
+      className: TOOLBAR_SAVE,
+      onClick: () => { panel.context.save();  },
+      tooltip: 'Save the notebook contents'
+    });
   }
 
   /**
@@ -116,9 +118,11 @@ namespace ToolbarItems {
    */
   export
   function createInsertButton(panel: NotebookPanel): ToolbarButton {
-    return new ToolbarButton(TOOLBAR_INSERT, () => {
-      NotebookActions.insertBelow(panel.content);
-    }, 'Insert a cell below');
+    return new ToolbarButton({
+      className: TOOLBAR_INSERT,
+      onClick: () => { NotebookActions.insertBelow(panel.content); },
+      tooltip: 'Insert a cell below'
+    });
   }
 
   /**
@@ -126,9 +130,13 @@ namespace ToolbarItems {
    */
   export
   function createCutButton(panel: NotebookPanel): ToolbarButton {
-    return new ToolbarButton(TOOLBAR_CUT, () => {
-      NotebookActions.cut(panel.content, panel.clipboard);
-    }, 'Cut the selected cell(s)');
+    return new ToolbarButton({
+      className: TOOLBAR_CUT,
+      onClick: () => {
+        NotebookActions.cut(panel.content, panel.clipboard);
+      },
+      tooltip: 'Cut the selected cell(s)'
+    });
   }
 
   /**
@@ -136,9 +144,13 @@ namespace ToolbarItems {
    */
   export
   function createCopyButton(panel: NotebookPanel): ToolbarButton {
-    return new ToolbarButton(TOOLBAR_COPY, () => {
-      NotebookActions.copy(panel.content, panel.clipboard);
-    }, 'Copy the selected cell(s)');
+    return new ToolbarButton({
+      className: TOOLBAR_COPY,
+      onClick: () => {
+        NotebookActions.copy(panel.content, panel.clipboard);
+      },
+      tooltip: 'Copy the selected cell(s)'
+    });
   }
 
   /**
@@ -146,9 +158,13 @@ namespace ToolbarItems {
    */
   export
   function createPasteButton(panel: NotebookPanel): ToolbarButton {
-    return new ToolbarButton(TOOLBAR_PASTE, () => {
-      NotebookActions.paste(panel.content, panel.clipboard);
-    }, 'Paste cell(s) from the clipboard');
+    return new ToolbarButton({
+      className: TOOLBAR_PASTE,
+      onClick: () => {
+        NotebookActions.paste(panel.content, panel.clipboard);
+      },
+      tooltip: 'Paste cell(s) from the clipboard'
+    });
   }
 
   /**
@@ -156,9 +172,13 @@ namespace ToolbarItems {
    */
   export
   function createRunButton(panel: NotebookPanel): ToolbarButton {
-    return new ToolbarButton(TOOLBAR_RUN, () => {
-      NotebookActions.runAndAdvance(panel.content, panel.context.kernel);
-    }, 'Run the selected cell(s) and advance');
+    return new ToolbarButton({
+      className: TOOLBAR_RUN,
+      onClick: () => {
+        NotebookActions.runAndAdvance(panel.content, panel.context.kernel);
+      },
+      tooltip: 'Run the selected cell(s) and advance'
+    });
   }
 
   /**
@@ -166,11 +186,15 @@ namespace ToolbarItems {
    */
   export
   function createInterruptButton(panel: NotebookPanel): ToolbarButton {
-    return new ToolbarButton(TOOLBAR_INTERRUPT, () => {
-      if (panel.context.kernel) {
-        panel.context.kernel.interrupt();
-      }
-    }, 'Interrupt the kernel');
+    return new ToolbarButton({
+      className: TOOLBAR_INTERRUPT,
+      onClick: () => {
+        if (panel.context.kernel) {
+          panel.context.kernel.interrupt();
+        }
+      },
+      tooltip: 'Interrupt the kernel'
+    });
   }
 
   /**
@@ -178,9 +202,13 @@ namespace ToolbarItems {
    */
   export
   function createRestartButton(panel: NotebookPanel): ToolbarButton {
-    return new ToolbarButton(TOOLBAR_RESTART, () => {
-      panel.restart();
-    }, 'Restart the kernel');
+    return new ToolbarButton({
+      className: TOOLBAR_RESTART,
+      onClick: () => {
+        panel.restart();
+      },
+      tooltip: 'Restart the kernel'
+    });
   }
 
   /**

src/notebook/notebook/toolbar.ts

@@ -77,13 +77,13 @@ class NotebookToolbar extends Widget {
     if (index === -1) {
       layout.addChild(widget);
     } else {
-      layout.insertChild(index, widget);
+      layout.insertChild(index + 1, widget);
     }
     Private.nameProperty.set(widget, name);
   }
 
   /**
-   * List the names of the toolbar items.
+   * Get an ordered list the toolbar item names.
    *
    * @returns A new array of the current toolbar item names.
    */
@@ -114,14 +114,15 @@ class ToolbarButton extends Widget {
   /**
    * Construct a new toolbar button.
    */
-  constructor(className: string, onClick: () => void, tooltip?: string) {
+  constructor(options: ToolbarButton.IOptions = {}) {
     super();
+    options = options || {};
     this.addClass(TOOLBAR_BUTTON);
-    this.addClass(className);
-    this._onClick = onClick;
-    if (tooltip) {
-      this.node.title = tooltip;
+    this._onClick = options.onClick;
+    if (options.className) {
+      this.addClass(options.className);
     }
+    this.node.title = options.tooltip || '';
   }
 
   /**
@@ -180,7 +181,35 @@ class ToolbarButton extends Widget {
     this.node.removeEventListener('mouseout', this);
   }
 
-  private _onClick: () => void = null;
+  private _onClick: () => void = () => { return void 0; };
+}
+
+
+/**
+ * A namespace for `ToolbarButton` statics.
+ */
+export
+namespace ToolbarButton {
+  /**
+   * The options used to construct a toolbar button.
+   */
+  export
+  interface IOptions {
+    /**
+     * The callback for a click event.
+     */
+    onClick?: () => void;
+
+    /**
+     * The class name added to the button.
+     */
+    className?: string;
+
+    /**
+     * The tooltip added to the button node.
+     */
+    tooltip?: string;
+  }
 }