tested customHeader panel with idiomatic access

packages/apputils/src/mainareawidget.ts

@@ -44,19 +44,21 @@ export class MainAreaWidget<T extends Widget = Widget>
     const toolbar = (this._toolbar = options.toolbar || new Toolbar());
     toolbar.node.setAttribute('role', 'navigation');
     toolbar.node.setAttribute('aria-label', trans.__('notebook actions'));
-
-    const header = (this.header =
-      options.header ||
-      new BoxPanel({ direction: 'top-to-bottom', spacing: 0 }));
     const spinner = this._spinner;
-
-    header.addWidget(toolbar);
+    const customHeader = (this._customHeader =
+      options.customHeader ||
+      new BoxPanel({
+        direction: 'top-to-bottom',
+        spacing: 0
+      }));
 
     const layout = (this.layout = new BoxLayout({ spacing: 0 }));
     layout.direction = 'top-to-bottom';
     BoxLayout.setStretch(toolbar, 0);
+    BoxLayout.setStretch(customHeader, 0);
     BoxLayout.setStretch(content, 1);
-    layout.addWidget(header);
+    layout.addWidget(toolbar);
+    layout.addWidget(customHeader);
     layout.addWidget(content);
 
     if (!content.id) {
@@ -137,6 +139,14 @@ export class MainAreaWidget<T extends Widget = Widget>
     return this._toolbar;
   }
 
+  /**
+   * A panel for widgets that sit between the toolbar and the content.
+   * Imagine a formatting toolbar, notification headers, etc.
+   */
+  get customHeader(): BoxPanel {
+    return this._customHeader;
+  }
+
   /**
    * Whether the content widget or an error is revealed.
    */
@@ -237,9 +247,17 @@ export class MainAreaWidget<T extends Widget = Widget>
     this.content.activate();
   }
 
+  /*
+  MainAreaWidget's layout:
+  - this.layout, a BoxLayout, from parent
+    - this._toolbar, a Toolbar
+    - this._customHeader, a BoxPanel, empty by default
+    - this._content
+  */
   private _content: T;
   private _toolbar: Toolbar;
-  public header: BoxPanel;
+  private _customHeader: BoxPanel;
+
   private _changeGuard = false;
   private _spinner = new Spinner();
 
@@ -266,10 +284,10 @@ export namespace MainAreaWidget {
     toolbar?: Toolbar;
 
     /**
-     * The layout to contain the toolbar and other bars above content.
-     * Defaults to an empty BoxLayout.
+     * The layout to sit underneath the toolbar and above the content,
+     * and that extensions can populate. Defaults to an empty BoxPanel.
      */
-    header?: BoxPanel;
+    customHeader?: BoxPanel;
 
     /**
      * An optional promise for when the content is ready to be revealed.

packages/apputils/test/mainareawidget.spec.ts

@@ -5,7 +5,7 @@ import { MainAreaWidget, Toolbar } from '@jupyterlab/apputils';
 
 import { MessageLoop } from '@lumino/messaging';
 
-import { Widget } from '@lumino/widgets';
+import { BoxPanel, Widget } from '@lumino/widgets';
 
 describe('@jupyterlab/apputils', () => {
   describe('MainAreaWidget', () => {
@@ -24,9 +24,18 @@ describe('@jupyterlab/apputils', () => {
         const toolbar = new Toolbar();
         const widget = new MainAreaWidget({ content, toolbar });
         expect(widget.hasClass('jp-MainAreaWidget')).toBe(true);
+        expect(widget.toolbar).toBe(toolbar);
       });
     });
 
+    describe('customHeader', ()=>{
+      it('should exist and have correct type', ()=>{
+        const content = new Widget();
+        const widget = new MainAreaWidget({ content });
+        expect(widget.customHeader).toBeInstanceOf(BoxPanel);
+      });
+    })
+
     describe('#onActivateRequest()', () => {
       it('should focus on activation', () => {
         const content = new Widget();