diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json index 1fb8174701913..b7d31b812d8d9 100644 --- a/build/lib/stylelint/vscode-known-variables.json +++ b/build/lib/stylelint/vscode-known-variables.json @@ -734,6 +734,7 @@ "--tab-sizing-current-width", "--tab-sizing-fixed-min-width", "--tab-sizing-fixed-max-width", + "--editor-group-title-height", "--testMessageDecorationFontFamily", "--testMessageDecorationFontSize", "--title-border-bottom-color", diff --git a/src/vs/workbench/browser/parts/editor/editor.ts b/src/vs/workbench/browser/parts/editor/editor.ts index 23f3371411a35..c8cdf695fcb49 100644 --- a/src/vs/workbench/browser/parts/editor/editor.ts +++ b/src/vs/workbench/browser/parts/editor/editor.ts @@ -31,6 +31,7 @@ export const DEFAULT_EDITOR_PART_OPTIONS: IEditorPartOptions = { tabSizingFixedMinWidth: 50, tabSizingFixedMaxWidth: 160, pinnedTabSizing: 'normal', + tabHeight: 'normal', preventPinnedEditorClose: 'keyboardAndMouse', titleScrollbarSizing: 'default', focusRecentEditorAfterClose: true, diff --git a/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css b/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css index 61440406d69e6..81562a812815f 100644 --- a/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css @@ -6,7 +6,7 @@ /* Title Label */ .monaco-workbench .part.editor > .content .editor-group-container > .title > .label-container { - height: 35px; + height: var(--editor-group-title-height); display: flex; justify-content: flex-start; align-items: center; @@ -15,7 +15,7 @@ } .monaco-workbench .part.editor > .content .editor-group-container > .title > .label-container > .title-label { - line-height: 35px; + line-height: var(--editor-group-title-height); overflow: hidden; text-overflow: ellipsis; position: relative; @@ -94,7 +94,7 @@ flex: initial; opacity: 0.5; padding-right: 8px; - height: 35px; + height: var(--editor-group-title-height); } .monaco-workbench .part.editor > .content .editor-group-container > .title > .title-actions .action-item { diff --git a/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css b/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css index 17e17c1a758c6..f5b39db85fcf0 100644 --- a/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css @@ -71,7 +71,7 @@ .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container { display: flex; - height: 35px; + height: var(--editor-group-title-height); scrollbar-width: none; /* Firefox: hide scrollbar */ } @@ -97,7 +97,7 @@ display: flex; white-space: nowrap; cursor: pointer; - height: 35px; + height: var(--editor-group-title-height); box-sizing: border-box; padding-left: 10px; } @@ -265,7 +265,7 @@ .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label { margin-top: auto; margin-bottom: auto; - line-height: 35px; /* aligns icon and label vertically centered in the tab */ + line-height: var(--editor-group-title-height); /* aligns icon and label vertically centered in the tab */ } .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink .tab-label, @@ -473,7 +473,7 @@ cursor: default; flex: initial; padding: 0 8px 0 4px; - height: 35px; + height: var(--editor-group-title-height); } .monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions .action-item { diff --git a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css b/src/vs/workbench/browser/parts/editor/media/titlecontrol.css index 378d2bfa63f7d..0b22793aacd05 100644 --- a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/titlecontrol.css @@ -30,7 +30,7 @@ } .monaco-workbench .part.editor > .content .editor-group-container > .title .monaco-icon-label::before { - height: 35px; /* tweak the icon size of the editor labels when icons are enabled */ + height: var(--editor-group-title-height); /* tweak the icon size of the editor labels when icons are enabled */ } .monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .monaco-icon-label::after, diff --git a/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts index d60267cd22f69..0772d57a3ceb4 100644 --- a/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts @@ -32,7 +32,9 @@ export class NoTabsTitleControl extends TitleControl { private editorLabel: IResourceLabel | undefined; private activeLabel: IRenderedEditorLabel = Object.create(null); - protected create(parent: HTMLElement): void { + protected override create(parent: HTMLElement): void { + super.create(parent); + const titleContainer = this.titleContainer = parent; titleContainer.draggable = true; @@ -197,7 +199,9 @@ export class NoTabsTitleControl extends TitleControl { }); } - updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void { + override updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void { + super.updateOptions(oldOptions, newOptions); + if (oldOptions.labelFormat !== newOptions.labelFormat || !equals(oldOptions.decorations, newOptions.decorations)) { this.redraw(); } diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index 5d5d132b05d31..5d6b14d633a94 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts @@ -97,8 +97,6 @@ export class TabsTitleControl extends TitleControl { fit: 120 }; - private static readonly TAB_HEIGHT = 35; - private static readonly DRAG_OVER_OPEN_TAB_THRESHOLD = 1500; private static readonly MOUSE_WHEEL_EVENT_THRESHOLD = 150; @@ -165,7 +163,9 @@ export class TabsTitleControl extends TitleControl { this._register(this.tabResourceLabels.onDidChangeDecorations(() => this.doHandleDecorationsChange())); } - protected create(parent: HTMLElement): void { + protected override create(parent: HTMLElement): void { + super.create(parent); + this.titleContainer = parent; // Tabs and Actions Container (are on a single row with flex side-by-side) @@ -710,7 +710,8 @@ export class TabsTitleControl extends TitleControl { this.withTab(editor, (editor, index, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => this.redrawTabActiveAndDirty(this.accessor.activeGroup === this.group, editor, tabContainer, tabActionBar)); } - updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void { + override updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void { + super.updateOptions(oldOptions, newOptions); // A change to a label format options requires to recompute all labels if (oldOptions.labelFormat !== newOptions.labelFormat) { @@ -1549,7 +1550,7 @@ export class TabsTitleControl extends TitleControl { if (this.accessor.partOptions.wrapTabs && this.tabsAndActionsContainer?.classList.contains('wrapping')) { total = this.tabsAndActionsContainer.offsetHeight; } else { - total = TabsTitleControl.TAB_HEIGHT; + total = this.titleHeight; } const offset = total; @@ -1707,7 +1708,7 @@ export class TabsTitleControl extends TitleControl { if (tabsWrapMultiLine) { if ( (tabsContainer.offsetHeight > dimensions.available.height) || // if height exceeds available height - (allTabsWidth === visibleTabsWidth && tabsContainer.offsetHeight === TabsTitleControl.TAB_HEIGHT) || // if wrapping is not needed anymore + (allTabsWidth === visibleTabsWidth && tabsContainer.offsetHeight === this.titleHeight) || // if wrapping is not needed anymore (!lastTabFitsWrapped()) // if last tab does not fit anymore ) { updateTabsWrapping(false); diff --git a/src/vs/workbench/browser/parts/editor/titleControl.ts b/src/vs/workbench/browser/parts/editor/titleControl.ts index e020cd99372cb..22187e0daee5e 100644 --- a/src/vs/workbench/browser/parts/editor/titleControl.ts +++ b/src/vs/workbench/browser/parts/editor/titleControl.ts @@ -93,6 +93,11 @@ export abstract class TitleControl extends Themable { protected readonly groupTransfer = LocalSelectionTransfer.getInstance(); protected readonly treeItemsTransfer = LocalSelectionTransfer.getInstance(); + private static readonly EDITOR_TITLE_HEIGHT = { + normal: 35, + compact: 22 + }; + protected breadcrumbsControl: BreadcrumbsControl | undefined = undefined; private editorActionsToolbar: WorkbenchToolBar | undefined; @@ -115,7 +120,7 @@ export abstract class TitleControl extends Themable { private renderDropdownAsChildElement: boolean; constructor( - parent: HTMLElement, + private parent: HTMLElement, protected accessor: IEditorGroupsAccessor, protected group: IEditorGroupView, @IContextMenuService protected readonly contextMenuService: IContextMenuService, @@ -150,7 +155,9 @@ export abstract class TitleControl extends Themable { this.create(parent); } - protected abstract create(parent: HTMLElement): void; + protected create(parent: HTMLElement): void { + this.updateTitleHeight(); + } protected createBreadcrumbsControl(container: HTMLElement, options: IBreadcrumbsControlOptions): void { const config = this._register(BreadcrumbsConfig.IsEnabled.bindTo(this.configurationService)); @@ -422,6 +429,21 @@ export abstract class TitleControl extends Themable { return keybinding ? keybinding.getLabel() ?? undefined : undefined; } + protected get titleHeight() { + return this.accessor.partOptions.tabHeight !== 'compact' ? TitleControl.EDITOR_TITLE_HEIGHT.normal : TitleControl.EDITOR_TITLE_HEIGHT.compact; + } + + protected updateTitleHeight(): void { + this.parent.style.setProperty('--editor-group-title-height', `${this.titleHeight}px`); + } + + updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void { + // Update title height + if (oldOptions.tabHeight !== newOptions.tabHeight) { + this.updateTitleHeight(); + } + } + abstract openEditor(editor: EditorInput): void; abstract openEditors(editors: EditorInput[]): void; @@ -446,8 +468,6 @@ export abstract class TitleControl extends Themable { abstract updateEditorDirty(editor: EditorInput): void; - abstract updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void; - abstract layout(dimensions: ITitleControlDimensions): Dimension; abstract getHeight(): IEditorGroupTitleHeight; diff --git a/src/vs/workbench/browser/workbench.contribution.ts b/src/vs/workbench/browser/workbench.contribution.ts index a0aa8d51b7bae..b3a2371170275 100644 --- a/src/vs/workbench/browser/workbench.contribution.ts +++ b/src/vs/workbench/browser/workbench.contribution.ts @@ -165,6 +165,12 @@ const registry = Registry.as(ConfigurationExtensions.Con 'minimum': 38, 'markdownDescription': localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'workbench.editor.tabSizingFixedMaxWidth' }, "Controls the maximum width of tabs when `#workbench.editor.tabSizing#` size is set to `fixed`.") }, + 'workbench.editor.tabHeight': { + 'type': 'string', + 'enum': ['normal', 'compact'], + 'default': 'normal', + 'markdownDescription': localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'workbench.editor.tabHeight' }, "Controls the height of editor tabs. Also applies to the title control bar when `#workbench.editor.showTabs#` is disabled.") + }, 'workbench.editor.pinnedTabSizing': { 'type': 'string', 'enum': ['normal', 'compact', 'shrink'], diff --git a/src/vs/workbench/common/editor.ts b/src/vs/workbench/common/editor.ts index 356f88a596247..d38c979a47776 100644 --- a/src/vs/workbench/common/editor.ts +++ b/src/vs/workbench/common/editor.ts @@ -1098,6 +1098,7 @@ interface IEditorPartConfiguration { tabSizingFixedMinWidth?: number; tabSizingFixedMaxWidth?: number; pinnedTabSizing?: 'normal' | 'compact' | 'shrink'; + tabHeight?: 'normal' | 'compact'; preventPinnedEditorClose?: PreventPinnedEditorClose; titleScrollbarSizing?: 'default' | 'large'; focusRecentEditorAfterClose?: boolean;