Merge pull request #192153 from microsoft/benibenj/tabHeight

Support different tab heights

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",

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,

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 {

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 {

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,

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();
  }

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);

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

@@ -93,6 +93,11 @@ export abstract class TitleControl extends Themable {
  protected readonly groupTransfer = LocalSelectionTransfer.getInstance<DraggedEditorGroupIdentifier>();
  protected readonly treeItemsTransfer = LocalSelectionTransfer.getInstance<DraggedTreeItemsIdentifier>();
 
+ 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;

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

@@ -165,6 +165,12 @@ const registry = Registry.as<IConfigurationRegistry>(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'],

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;