Allow to shrink tabs instead of keeping a minimum width (fixes #15048) (#39176)

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

@@ -227,6 +227,8 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 
 	private updateTabOptions(tabOptions: IEditorTabOptions, refresh?: boolean): void {
 		const tabCloseButton = this.tabOptions ? this.tabOptions.tabCloseButton : 'right';
+		const tabSizing = this.tabOptions ? this.tabOptions.tabSizing : 'fit';
+
 		this.tabOptions = tabOptions;
 
 		if (!refresh) {
@@ -263,8 +265,8 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 					this.createTitleControl(this.stacks.groupAt(position), this.silos[position], titleContainer, this.getInstantiationService(position));
 				}
 
-				// Refresh title when icons change
-				else if (showingIcons !== this.tabOptions.showIcons || tabCloseButton !== this.tabOptions.tabCloseButton) {
+				// Refresh title when layout options change
+				else if (showingIcons !== this.tabOptions.showIcons || tabCloseButton !== this.tabOptions.tabCloseButton || tabSizing !== this.tabOptions.tabSizing) {
 					titleControl.refresh();
 				}
 			}

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

@@ -162,6 +162,7 @@ export class EditorPart extends Part implements IEditorPart, IEditorGroupService
 				showIcons: editorConfig.showIcons,
 				showTabs: editorConfig.showTabs,
 				tabCloseButton: editorConfig.tabCloseButton,
+				tabSizing: editorConfig.tabSizing,
 				labelFormat: editorConfig.labelFormat,
 			};
 
@@ -172,6 +173,7 @@ export class EditorPart extends Part implements IEditorPart, IEditorGroupService
 				showIcons: false,
 				showTabs: true,
 				tabCloseButton: 'right',
+				tabSizing: 'fit',
 				labelFormat: 'default',
 			};
 
@@ -225,6 +227,7 @@ export class EditorPart extends Part implements IEditorPart, IEditorGroupService
 					previewEditors: newPreviewEditors,
 					showIcons: editorConfig.showIcons,
 					tabCloseButton: editorConfig.tabCloseButton,
+					tabSizing: editorConfig.tabSizing,
 					showTabs: this.forceHideTabs ? false : editorConfig.showTabs,
 					labelFormat: editorConfig.labelFormat,
 				};

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

@@ -37,8 +37,6 @@
 
 .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab {
 	display: flex;
-	width: 120px;
-	min-width: fit-content;
 	white-space: nowrap;
 	cursor: pointer;
 	height: 35px;
@@ -47,6 +45,22 @@
 	padding-left: 10px;
 }
 
+.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.sizing-fit {
+	width: 120px;
+	min-width: fit-content;
+}
+
+.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.sizing-shrink {
+	min-width: 80px;
+	flex-basis: 0; /* all tabs are even */
+	flex-grow: 1; /* all tabs grow even */
+	max-width: fit-content;
+}
+
+.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.sizing-shrink.tab.close-button-off {
+	min-width: 60px;
+}
+
 .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.dragged {
 	will-change: transform; /* forces tab to be drawn on a separate layer (fixes https://github.com/Microsoft/vscode/issues/18733) */
 }
@@ -68,8 +82,8 @@
 	margin-bottom: auto;
 }
 
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .monaco-icon-label,
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .monaco-icon-label > .monaco-icon-label-description-container {
+.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.sizing-fit .monaco-icon-label,
+.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.sizing-fit .monaco-icon-label > .monaco-icon-label-description-container {
 	overflow: visible; /* fixes https://github.com/Microsoft/vscode/issues/20182 */
 }
 

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

@@ -307,11 +307,17 @@ export class TabsTitleControl extends TitleControl {
 			tabContainer.style.outlineColor = this.getColor(activeContrastBorder);
 
 			const tabOptions = this.editorGroupService.getTabOptions();
+
 			['off', 'left'].forEach(option => {
 				const domAction = tabOptions.tabCloseButton === option ? DOM.addClass : DOM.removeClass;
 				domAction(tabContainer, `close-button-${option}`);
 			});
 
+			['fit', 'shrink'].forEach(option => {
+				const domAction = tabOptions.tabSizing === option ? DOM.addClass : DOM.removeClass;
+				domAction(tabContainer, `sizing-${option}`);
+			});
+
 			// Label
 			const tabLabel = this.editorLabels[index];
 			tabLabel.setLabel({ name, description, resource: toResource(editor, { supportSideBySide: true }) }, { extraClasses: ['tab-label'], italic: !isPinned });

src/vs/workbench/common/editor.ts

@@ -808,23 +808,11 @@ export const EditorOpenPositioning = {
 export const OPEN_POSITIONING_CONFIG = 'workbench.editor.openPositioning';
 
 export interface IWorkbenchEditorConfiguration {
-	/* __GDPR__FRAGMENT__
-		"IWorkbenchEditorConfiguration" : {
-			"showTabs" : { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
-			"tabCloseButton": { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
-			"showIcons": { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
-			"enablePreview": { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
-			"enablePreviewFromQuickOpen": { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
-			"closeOnFileDelete": { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
-			"openPositioning": { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
-			"revealIfOpen": { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
-			"swipeToNavigate": { "classification": "SystemMetaData", "purpose": "FeatureInsight" }
-		}
-	*/
 	workbench: {
 		editor: {
 			showTabs: boolean;
 			tabCloseButton: 'left' | 'right' | 'off';
+			tabSizing: 'fit' | 'shrink';
 			showIcons: boolean;
 			enablePreview: boolean;
 			enablePreviewFromQuickOpen: boolean;

src/vs/workbench/electron-browser/main.contribution.ts

@@ -157,6 +157,12 @@ let workbenchProperties: { [path: string]: IJSONSchema; } = {
 		'default': 'right',
 		'description': nls.localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'editorTabCloseButton' }, "Controls the position of the editor's tabs close buttons or disables them when set to 'off'.")
 	},
+	'workbench.editor.tabSizing': {
+		'type': 'string',
+		'enum': ['fit', 'shrink'],
+		'default': 'fit',
+		'description': nls.localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'tabSizing' }, "Controls the sizing of editor tabs. Set to 'fit' to keep tabs always large enough to show the full editor label. Set to 'shrink' to allow tabs to get smaller when the available space is not enough to show all tabs at once.")
+	},
 	'workbench.editor.showIcons': {
 		'type': 'boolean',
 		'description': nls.localize('showIcons', "Controls if opened editors should show with an icon or not. This requires an icon theme to be enabled as well."),

src/vs/workbench/services/group/common/groupService.ts

@@ -22,6 +22,7 @@ export const IEditorGroupService = createDecorator<IEditorGroupService>('editorG
 export interface IEditorTabOptions {
 	showTabs?: boolean;
 	tabCloseButton?: 'left' | 'right' | 'off';
+	tabSizing?: 'fit' | 'shrink';
 	showIcons?: boolean;
 	previewEditors?: boolean;
 	labelFormat?: 'default' | 'short' | 'medium' | 'long';