Implement scrolling of tabs in tabbar

Author: krassowski

packages/widgets/src/dockpanel.ts

@@ -57,6 +57,9 @@ export class DockPanel extends Widget {
     if (options.addButtonEnabled !== undefined) {
       this._addButtonEnabled = options.addButtonEnabled;
     }
+    if (options.tabScrollingEnabled !== undefined) {
+      this._tabScrollingEnabled = options.tabScrollingEnabled;
+    }
 
     // Toggle the CSS mode attribute.
     this.dataset['mode'] = this._mode;
@@ -258,6 +261,23 @@ export class DockPanel extends Widget {
     });
   }
 
+  /**
+   * Whether scrolling of tabs in tab bars is enabled.
+   */
+  get tabScrollingEnabled(): boolean {
+    return this._tabScrollingEnabled;
+  }
+
+  /**
+   * Set whether the add buttons for each tab bar are enabled.
+   */
+  set tabScrollingEnabled(value: boolean) {
+    this._tabScrollingEnabled = value;
+    each(this.tabBars(), tabbar => {
+      tabbar.scrollingEnabled = value;
+    });
+  }
+
   /**
    * Whether the dock panel is empty.
    */
@@ -938,6 +958,7 @@ export class DockPanel extends Widget {
     tabBar.tabsMovable = this._tabsMovable;
     tabBar.allowDeselect = false;
     tabBar.addButtonEnabled = this._addButtonEnabled;
+    tabBar.scrollingEnabled = this._tabScrollingEnabled;
     tabBar.removeBehavior = 'select-previous-tab';
     tabBar.insertBehavior = 'select-tab-if-needed';
 
@@ -1083,6 +1104,7 @@ export class DockPanel extends Widget {
   private _tabsMovable: boolean = true;
   private _tabsConstrained: boolean = false;
   private _addButtonEnabled: boolean = false;
+  private _tabScrollingEnabled: boolean = false;
   private _pressData: Private.IPressData | null = null;
   private _layoutModified = new Signal<this, void>(this);
 
@@ -1165,6 +1187,13 @@ export namespace DockPanel {
      * The default is `'false'`.
      */
     addButtonEnabled?: boolean;
+
+    /**
+     * Enable scrolling in each of the dock panel's tab bars.
+     *
+     * The default is `'false'`.
+     */
+    tabScrollingEnabled?: boolean;
   }
 
   /**