Allow tabs to wrap to multi-line

src/vs/workbench/browser/parts/editor/editor.ts

@@ -137,6 +137,7 @@ export interface IEditorGroupView extends IDisposable, ISerializableView, IEdito
  readonly whenRestored: Promise<void>;
 
  readonly titleDimensions: IEditorGroupTitleDimensions;
+ readonly editorHeight: number;
 
  readonly isEmpty: boolean;
  readonly isMinimized: boolean;

src/vs/workbench/browser/parts/editor/editorGroupView.ts

@@ -721,6 +721,10 @@ export class EditorGroupView extends Themable implements IEditorGroupView {
  return this.titleAreaControl.getDimensions();
  }
 
+ get editorHeight(): number {
+ return (this.element.offsetHeight - this.titleDimensions.height);
+ }
+
  get isMinimized(): boolean {
  if (!this.dimension) {
  return false;
@@ -1698,14 +1702,12 @@ export class EditorGroupView extends Themable implements IEditorGroupView {
  layout(width: number, height: number): void {
  this.dimension = new Dimension(width, height);
 
- // Ensure editor container gets height as CSS depending on the preferred height of the title control
- const titleHeight = this.titleDimensions.height;
- const editorHeight = Math.max(0, height - titleHeight);
- this.editorContainer.style.height = `${editorHeight}px`;
+ // Use the initial height of the title area to layout
+ const initialTitleHeight = this.titleDimensions.height;
+ const titleDimensions = this.titleAreaControl.layout(new Dimension(width, initialTitleHeight)) as Dimension;
 
- // Forward to controls
- this.titleAreaControl.layout(new Dimension(width, titleHeight));
- this.editorControl.layout(new Dimension(width, editorHeight));
+ // Use the new height of the title area to layout the editor
+ this.editorControl.layout(new Dimension(width, this.dimension.height - titleDimensions.height));
  }
 
  relayout(): void {

src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css

@@ -34,6 +34,26 @@
  cursor: default;
 }
 
+/* Title Container (multi-line wrapping) */
+
+.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.multi-line > .monaco-scrollable-element > .tabs-container {
+ height: auto;
+ flex-wrap: wrap;
+}
+
+.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.multi-line > .monaco-scrollable-element > .tabs-container::after {
+ content: ""; /* Add a hidden space after the last tab in multi-line tabs */
+ flex: 1 0 auto;
+}
+
+.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.multi-line > .monaco-scrollable-element {
+ height: auto !important; /* For when breadcrumbs are enabled */
+}
+
+.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.multi-line > .monaco-scrollable-element > .tabs-container > .tab {
+ flex-grow: 1; /* Grow the tabs to fill the row */
+}
+
 /* Tabs Container */
 
 .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container {

src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts

@@ -323,9 +323,11 @@ export class NoTabsTitleControl extends TitleControl {
  };
  }
 
- layout(dimension: Dimension): void {
+ layout(dimension: Dimension): Dimension {
  if (this.breadcrumbsControl) {
  this.breadcrumbsControl.layout(undefined);
  }
+
+ return new Dimension(dimension.width, this.getDimensions().height);
  }
 }

src/vs/workbench/browser/parts/editor/tabsTitleControl.ts

@@ -34,7 +34,7 @@ import { IExtensionService } from 'vs/workbench/services/extensions/common/exten
 import { MergeGroupMode, IMergeGroupOptions, GroupsArrangement, IEditorGroupsService } from 'vs/workbench/services/editor/common/editorGroupsService';
 import { addDisposableListener, EventType, EventHelper, Dimension, scheduleAtNextAnimationFrame, findParentWithClass, clearNode } from 'vs/base/browser/dom';
 import { localize } from 'vs/nls';
-import { IEditorGroupsAccessor, IEditorGroupView, EditorServiceImpl, IEditorGroupTitleDimensions } from 'vs/workbench/browser/parts/editor/editor';
+import { IEditorGroupsAccessor, IEditorGroupView, EditorServiceImpl, IEditorGroupTitleDimensions, DEFAULT_EDITOR_MIN_DIMENSIONS } from 'vs/workbench/browser/parts/editor/editor';
 import { CloseOneEditorAction, UnpinEditorAction } from 'vs/workbench/browser/parts/editor/editorActions';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { BreadcrumbsControl } from 'vs/workbench/browser/parts/editor/breadcrumbsControl';
@@ -123,7 +123,9 @@ export class TabsTitleControl extends TitleControl {
  protected create(parent: HTMLElement): void {
  this.titleContainer = parent;
 
- // Tabs and Actions Container (are on a single row with flex side-by-side)
+ // Tabs and Actions Container: depending on the multi-line setting:
+ // off: single row with flex side-by-side
+ // on: multiple rows with flex side-by-side
  this.tabsAndActionsContainer = document.createElement('div');
  this.tabsAndActionsContainer.classList.add('tabs-and-actions-container');
  this.titleContainer.appendChild(this.tabsAndActionsContainer);
@@ -524,7 +526,8 @@ export class TabsTitleControl extends TitleControl {
  oldOptions.pinnedTabSizing !== newOptions.pinnedTabSizing ||
  oldOptions.showIcons !== newOptions.showIcons ||
  oldOptions.hasIcons !== newOptions.hasIcons ||
- oldOptions.highlightModifiedTabs !== newOptions.highlightModifiedTabs
+ oldOptions.highlightModifiedTabs !== newOptions.highlightModifiedTabs ||
+ oldOptions.multiLineTabs !== newOptions.multiLineTabs
  ) {
  this.redraw();
  }
@@ -1016,6 +1019,12 @@ export class TabsTitleControl extends TitleControl {
 
  // Ensure the active tab is always revealed
  this.layout(this.dimension);
+
+ // When multi-line tabs are enabled, the title height grows beyond the default
+ // Thus, the editor container height needs to relayout
+ if (this.accessor.partOptions.multiLineTabs) {
+ this.group.relayout();
+ }
  }
 
  private redrawTab(editor: IEditorInput, index: number, tabContainer: HTMLElement, tabLabelWidget: IResourceLabel, tabLabel: IEditorInputLabel, tabActionBar: ActionBar): void {
@@ -1223,18 +1232,28 @@ export class TabsTitleControl extends TitleControl {
  }
 
  getDimensions(): IEditorGroupTitleDimensions {
- let height = TabsTitleControl.TAB_HEIGHT;
+ let height: number;
+ let offset: number;
+
+ // Multi-line: we need to ask `offsetHeight` to get
+ // the real height of the title area with wrapping.
+ if (this.accessor.partOptions.multiLineTabs) {
+ const tabsAndActionsContainer = assertIsDefined(this.tabsAndActionsContainer);
+ height = tabsAndActionsContainer.offsetHeight;
+ } else {
+ height = TabsTitleControl.TAB_HEIGHT;
+ }
+
+ offset = height;
+
  if (this.breadcrumbsControl && !this.breadcrumbsControl.isHidden()) {
  height += BreadcrumbsControl.HEIGHT;
  }
 
- return {
- height,
- offset: TabsTitleControl.TAB_HEIGHT
- };
+ return { height, offset };
  }
 
- layout(dimension: Dimension | undefined): void {
+ layout(dimension: Dimension | undefined): Dimension | undefined {
  this.dimension = dimension;
 
  const activeTabAndIndex = this.group.activeEditor ? this.getTabAndIndex(this.group.activeEditor) : undefined;
@@ -1253,6 +1272,8 @@ export class TabsTitleControl extends TitleControl {
  this.layoutScheduled.clear();
  });
  }
+
+ return new Dimension(this.dimension.width, this.getDimensions().height);
  }
 
  private doLayout(dimension: Dimension): void {
@@ -1279,7 +1300,7 @@ export class TabsTitleControl extends TitleControl {
  }
 
  private doLayoutTabs(activeTab: HTMLElement, activeIndex: number): void {
- const [tabsContainer, tabsScrollbar] = assertAllDefined(this.tabsContainer, this.tabsScrollbar);
+ const [tabsContainer, tabsScrollbar, tabsAndActionsContainer] = assertAllDefined(this.tabsContainer, this.tabsScrollbar, this.tabsAndActionsContainer);
 
  //
  // Synopsis
@@ -1334,6 +1355,35 @@ export class TabsTitleControl extends TitleControl {
  tabsContainer.classList.remove('disable-sticky-tabs');
  }
 
+ // Handle multi-line tabs according to setting:
+ // - enabled: only add class if tabs wrap
+ // - disabled: remove class
+ if (this.accessor.partOptions.multiLineTabs) {
+
+ if (this.group.editorHeight < DEFAULT_EDITOR_MIN_DIMENSIONS.height) {
+ tabsAndActionsContainer.classList.remove('multi-line');
+ }
+
+ // tabs exceed the tabs container width, so we start to wrap multi-line
+ if (allTabsWidth > visibleTabsContainerWidth) {
+ tabsAndActionsContainer.classList.add('multi-line');
+ }
+
+ // if we do not exceed the tabs container width, we cannot simply remove
+ // the multi-line class because by wrapping tabs, they reduce their size
+ // and we would otherwise constantly add and remove the class. As such
+ // we need to check if the height of the tabs container is back to normal
+ // and then remove the multi-line class.
+ else if (allTabsWidth === visibleTabsContainerWidth && tabsAndActionsContainer.classList.contains('multi-line')) {
+ const visibleTabsContainerHeight = tabsContainer.offsetHeight;
+ if (visibleTabsContainerHeight === TabsTitleControl.TAB_HEIGHT) {
+ tabsAndActionsContainer.classList.remove('multi-line');
+ }
+ }
+ } else {
+ tabsAndActionsContainer.classList.remove('multi-line');
+ }
+
  let activeTabPosX: number | undefined;
  let activeTabWidth: number | undefined;
 

src/vs/workbench/browser/parts/editor/titleControl.ts

@@ -407,7 +407,7 @@ export abstract class TitleControl extends Themable {
 
  abstract updateStyles(): void;
 
- abstract layout(dimension: Dimension): void;
+ abstract layout(dimension: Dimension): Dimension | undefined;
 
  abstract getDimensions(): IEditorGroupTitleDimensions;
 

src/vs/workbench/browser/workbench.contribution.ts

@@ -32,6 +32,11 @@ import { workbenchConfigurationNodeBase } from 'vs/workbench/common/configuratio
  'description': nls.localize('showEditorTabs', "Controls whether opened editors should show in tabs or not."),
  'default': true
  },
+ 'workbench.editor.multiLineTabs': {
+ 'type': 'boolean',
+ 'description': nls.localize('multiLineTabs', "Controls whether tabs should be wrapped to multi-line or not."),
+ 'default': false
+ },
  'workbench.editor.scrollToSwitchTabs': {
  'type': 'boolean',
  'markdownDescription': nls.localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'scrollToSwitchTabs' }, "Controls whether scrolling over tabs will open them or not. By default tabs will only reveal upon scrolling, but not open. You can press and hold the Shift-key while scrolling to change this behaviour for that duration. This value is ignored when `#workbench.editor.showTabs#` is `false`."),

src/vs/workbench/common/editor.ts

@@ -1225,6 +1225,7 @@ export interface IWorkbenchEditorConfiguration {
 
 interface IEditorPartConfiguration {
  showTabs?: boolean;
+ multiLineTabs?: boolean;
  scrollToSwitchTabs?: boolean;
  highlightModifiedTabs?: boolean;
  tabCloseButton?: 'left' | 'right' | 'off';

src/vs/workbench/test/browser/workbenchTestServices.ts

@@ -604,6 +604,7 @@ export class TestEditorGroupView implements IEditorGroupView {
  maximumHeight!: number;
 
  titleDimensions!: IEditorGroupTitleDimensions;
+ editorHeight!: number;
 
  isEmpty = true;
  isMinimized = false;