Address feedback

microsoft · Sep 11, 2020 · 3334251 · 3334251
1 parent b52a17a
commit 3334251
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git a/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css b/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css
@@ -35,7 +35,7 @@
 }
 
 .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs> .tabs-and-actions-container.multi-line-tabs-container > .monaco-scrollable-element > .tabs-container > .tab {
-	border-bottom: 1px solid rgba(128,128,128,0.2);
+	flex-grow: 1;
 }
 
 .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element {

diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts
@@ -127,15 +127,9 @@ export class TabsTitleControl extends TitleControl {
 			}
 		}));
 
-		this._register(this.configurationService.onDidChangeConfiguration(e => {
-			if (e.affectsConfiguration('workbench.editor.multiLineTabs')) {
-				const tabsAndActionsContainer = this.tabsAndActionsContainer as HTMLElement;
-
-				if (this.configurationService.getValue<boolean>('workbench.editor.multiLineTabs')) {
-					addClass(tabsAndActionsContainer, 'multi-line-tabs-container');
-				} else {
-					removeClass(tabsAndActionsContainer, 'multi-line-tabs-container');
-				}
+		this._register(this.accessor.onDidEditorPartOptionsChange(e => {
+			if (e.oldPartOptions.multiLineTabs !== e.newPartOptions.multiLineTabs) {
+				this.updateWrappedTabs();
 			}
 		}));
 	}
@@ -147,8 +141,8 @@ export class TabsTitleControl extends TitleControl {
 		this.tabsAndActionsContainer = document.createElement('div');
 		addClass(this.tabsAndActionsContainer, 'tabs-and-actions-container');
 		this.titleContainer.appendChild(this.tabsAndActionsContainer);
-		if (this.configurationService.getValue<boolean>('workbench.editor.multiLineTabs')) {
-			addClass(this.tabsAndActionsContainer, 'multi-line-tabs-container');
+		if (this.accessor.partOptions.multiLineTabs) {
+			this.tabsAndActionsContainer.classList.add('multi-line-tabs-container');
 		}
 
 		// Tabs Container
@@ -202,6 +196,16 @@ export class TabsTitleControl extends TitleControl {
 		});
 	}
 
+	private updateWrappedTabs(): void {
+		const tabsAndActionsContainer = this.tabsAndActionsContainer as HTMLElement;
+
+		if (this.accessor.partOptions.multiLineTabs) {
+			tabsAndActionsContainer.classList.add('multi-line-tabs-container');
+		} else {
+			tabsAndActionsContainer.classList.remove('multi-line-tabs-container');
+		}
+	}
+
 	private getTabsScrollbarSizing(): number {
 		if (this.accessor.partOptions.titleScrollbarSizing !== 'large') {
 			return TabsTitleControl.SCROLLBAR_SIZES.default;
@@ -542,7 +546,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();
 		}
@@ -1057,6 +1062,10 @@ export class TabsTitleControl extends TitleControl {
 		const borderRightColor = ((isTabLastSticky ? this.getColor(TAB_LAST_PINNED_BORDER) : undefined) || this.getColor(TAB_BORDER) || this.getColor(contrastBorder));
 		tabContainer.style.borderRight = borderRightColor ? `1px solid ${borderRightColor}` : '';
 		tabContainer.style.outlineColor = this.getColor(activeContrastBorder) || '';
+		// Add a border to the bottom of the tabs if multi-line tabs is enabled
+		if (this.accessor.partOptions.multiLineTabs) {
+			tabContainer.style.borderBottom = `1px solid ${borderRightColor}`;
+		}
 
 		// Settings
 		const tabActionsVisibility = isTabSticky && options.pinnedTabSizing === 'compact' ? 'off' /* treat sticky compact tabs as tabCloseButton: 'off' */ : options.tabCloseButton;

diff --git a/src/vs/workbench/common/editor.ts b/src/vs/workbench/common/editor.ts
@@ -1243,6 +1243,7 @@ interface IEditorPartConfiguration {
 		value?: number;
 		perEditorGroup?: boolean;
 	};
+	multiLineTabs?: boolean;
 }
 
 export interface IEditorPartOptions extends IEditorPartConfiguration {