diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index 2ca9e41bdd7fd6ea197f50aa088d42ce14fc50d6..7cf955410a9cb9bd4573b004011f7ef034042a62 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/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(); } } diff --git a/src/vs/workbench/browser/parts/editor/editorPart.ts b/src/vs/workbench/browser/parts/editor/editorPart.ts index e079384a5a1e957e03c76bf7207c888afbea1ca3..73f99e1e0b3ede36a0724a0546c651098ea65bd4 100644 --- a/src/vs/workbench/browser/parts/editor/editorPart.ts +++ b/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, }; diff --git a/src/vs/workbench/browser/parts/editor/media/tabstitle.css b/src/vs/workbench/browser/parts/editor/media/tabstitle.css index d57c2e9416ef85662052d1079aa1bb2d6b173334..e10f3451c3f39ad90d1da370dcb478ddf325df51 100644 --- a/src/vs/workbench/browser/parts/editor/media/tabstitle.css +++ b/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 */ } diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index f0d693efe772d40951be5c2eb47299fd7f59b791..4168edf3fe949c9f54de6d809b7ad556197a5e0b 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/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 }); diff --git a/src/vs/workbench/common/editor.ts b/src/vs/workbench/common/editor.ts index 60d6992a66430fb896f765f0b6d3097ff52cde3d..bc6931efe8ce86d2aae5b0f07b100ed4fc3d3bfe 100644 --- a/src/vs/workbench/common/editor.ts +++ b/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; diff --git a/src/vs/workbench/electron-browser/main.contribution.ts b/src/vs/workbench/electron-browser/main.contribution.ts index c7b3f2fc56d4b4db563ab6ea9c36b8245349c1cb..1fe4f80c9119414a447f4f75a2592c227ac6dbe6 100644 --- a/src/vs/workbench/electron-browser/main.contribution.ts +++ b/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."), diff --git a/src/vs/workbench/services/group/common/groupService.ts b/src/vs/workbench/services/group/common/groupService.ts index 5a614d5c9a43fe35d006a11b93d8e9ca5b299649..5dce1038c11cf43fd70b53fa01933fc0a202af4b 100644 --- a/src/vs/workbench/services/group/common/groupService.ts +++ b/src/vs/workbench/services/group/common/groupService.ts @@ -22,6 +22,7 @@ export const IEditorGroupService = createDecorator('editorG export interface IEditorTabOptions { showTabs?: boolean; tabCloseButton?: 'left' | 'right' | 'off'; + tabSizing?: 'fit' | 'shrink'; showIcons?: boolean; previewEditors?: boolean; labelFormat?: 'default' | 'short' | 'medium' | 'long';