Implement scrolling of tabs in tabbar

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;
  }
 
  /**