Update default toolbar

src/notebook/notebook/default-toolbar.ts

@@ -316,34 +316,67 @@ class CellTypeSwitcher extends Widget {
   /**
    * Construct a new cell type switcher.
    */
-  constructor(content: Notebook) {
+  constructor(widget: Notebook) {
     super();
     this.addClass(TOOLBAR_CELLTYPE);
 
     let select = this.node.firstChild as HTMLSelectElement;
+    this._wildCard = document.createElement('option');
+    this._wildCard.value = '-';
+    this._wildCard.textContent = '-';
+
     // Change current cell type on a change in the dropdown.
     select.addEventListener('change', event => {
+      if (select.value === '-') {
+        return;
+      }
       if (!this._changeGuard) {
         let value = select.value as nbformat.CellType;
-        NotebookActions.changeCellType(content, value);
+        NotebookActions.changeCellType(widget, value);
       }
     });
 
     // Set the initial value.
-    let index = content.activeCellIndex;
-    if (content.model) {
-      select.value = content.model.cells.get(index).type;
+    if (widget.model) {
+      this._updateValue(widget, select);
     }
 
     // Follow the type of the active cell.
-    content.activeCellChanged.connect((sender, cell) => {
-      this._changeGuard = true;
-      select.value = cell.model.type;
-      this._changeGuard = false;
+    widget.activeCellChanged.connect((sender, cell) => {
+      this._updateValue(widget, select);
+    });
+
+    // Follow a change in the selection.
+    widget.selectionChanged.connect(() => {
+      this._updateValue(widget, select);
     });
   }
 
+  /**
+   * Update the value of the dropdown from the widget state.
+   */
+  private _updateValue(widget: Notebook, select: HTMLSelectElement): void {
+    let mType: string = widget.activeCell.model.type;
+    for (let i = 0; i < widget.childCount(); i++) {
+      let child = widget.childAt(i);
+      if (widget.isSelected(child)) {
+        if (child.model.type !== mType) {
+          mType = '-';
+          select.appendChild(this._wildCard);
+          break;
+        }
+      }
+    }
+    if (mType !== '-') {
+      select.remove(3);
+    }
+    this._changeGuard = true;
+    select.value = mType;
+    this._changeGuard = false;
+  }
+
   private _changeGuard = false;
+  private _wildCard: HTMLOptionElement = null;
 }