Skip to content

Editor: Refine connected tabs UI #337126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Cherry Wang (chryw) merged 30 commits into from
Sep 23, 2026
Merged

Editor: Refine connected tabs UI #337126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
77265b8
Editor: stabilize connected tabs across zoom levels
chryw Sep 21, 2026
e01ff4f
test: update connected tab strip geometry
chryw Sep 21, 2026
6f8f682
Editor: align connected tab actions to the top edge
chryw Sep 21, 2026
88c7618
test: update component screenshot baseline
chryw Sep 21, 2026
ca041dc
Editor: share modern tab row geometry
chryw Sep 21, 2026
dcb5e3d
test: restore stable component screenshot baseline
chryw Sep 21, 2026
3495d12
Editor: isolate connected tab colors and borders
chryw Sep 21, 2026
0e81bc0
Editor: share connected tab left border
chryw Sep 21, 2026
2029405
Editor: simplify connected tab color ownership
chryw Sep 21, 2026
e8263bf
Editor: describe connected tab color as reusable
chryw Sep 21, 2026
9ad5434
Editor: centralize connected tab ownership
chryw Sep 21, 2026
463cc85
docs: define connected tab ownership
chryw Sep 21, 2026
9de120c
Editor: derive connected action height from the row
chryw Sep 21, 2026
9e66d76
Editor: isolate all connected tab palettes
chryw Sep 21, 2026
b519284
Editor: balance connected tab close spacing
chryw Sep 21, 2026
95fbe92
Editor: complete connected tab spacing
chryw Sep 21, 2026
bc06ad0
Editor: balance terminal tab actions
chryw Sep 21, 2026
3a00dd0
Editor: share connected tab frame borders
chryw Sep 21, 2026
fbbeef5
Editor: give frame sole border ownership
chryw Sep 21, 2026
b14fea7
Editor: center connected tab actions
chryw Sep 21, 2026
d31aa2e
Editor: repair connected tab outline regressions
chryw Sep 22, 2026
1a0bdf6
Editor: derive close clearance from the tab surface
chryw Sep 22, 2026
a422e88
Editor: keep compact tab outlines visible under actions
chryw Sep 22, 2026
f502a1c
Editor: keep wrapped tab reservation width invariant
chryw Sep 22, 2026
319b4c0
Editor: explicitly retain high contrast close indicators
chryw Sep 22, 2026
c98b9de
Editor: stabilize connected tab surfaces and close targets
chryw Sep 23, 2026
bc93078
Merge main to incorporate upstream CI fixes
chryw Sep 23, 2026
08e1341
Editor: respect disabled connected tab action hover state
chryw Sep 23, 2026
8e6b60d
Editor: consolidate connected tab high-contrast frames
chryw Sep 23, 2026
55a54e6
Editor: ignore unrendered frame color in connected tab tests
chryw Sep 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions build/lib/stylelint/vscode-known-variables.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,7 @@
"--vscode-editorGroup-emptyBackground",
"--vscode-editorGroup-focusedEmptyBorder",
"--vscode-editorGroupHeader-border",
"--vscode-editorGroupHeader-connectedTabsBackground",
"--vscode-editorGroupHeader-noTabsBackground",
"--vscode-editorGroupHeader-tabsBackground",
"--vscode-editorGroupHeader-tabsBorder",
Expand Down Expand Up @@ -1086,6 +1087,7 @@
"--model-hover-surface-background",
"--modern-ui-activitybar-lane",
"--modern-ui-connected-tab-action-background",
"--modern-ui-connected-tab-action-inset",
"--modern-ui-connected-tab-border",
"--modern-ui-connected-tab-cap-radius",
"--modern-ui-connected-tab-gutter",
Expand Down
5 changes: 3 additions & 2 deletions extensions/theme-defaults/themes/2026-dark.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@
"statusBarItem.prominentHoverBackground": "#3994BC",
"tab.activeBackground": "#121314",
"tab.activeForeground": "#bfbfbf",
"tab.inactiveBackground": "#202122",
"tab.inactiveBackground": "#191A1B",
"tab.inactiveForeground": "#8C8C8C",
"tab.border": "#2A2B2C",
"tab.lastPinnedBorder": "#2A2B2C",
Expand All @@ -205,7 +205,8 @@
"tab.unfocusedActiveForeground": "#8C8C8C",
"tab.unfocusedInactiveBackground": "#191A1B",
"tab.unfocusedInactiveForeground": "#444444",
"editorGroupHeader.tabsBackground": "#202122",
"editorGroupHeader.tabsBackground": "#191A1B",
"editorGroupHeader.connectedTabsBackground": "#202122",
"tab.activeBorder": "#121314",
"editorGroupHeader.tabsBorder": "#2A2B2C",
"breadcrumb.foreground": "#8C8C8C",
Expand Down
5 changes: 3 additions & 2 deletions extensions/theme-defaults/themes/2026-light.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@
"toolbar.activeBackground": "#D6D6D8",
"tab.activeBackground": "#FFFFFF",
"tab.activeForeground": "#202020",
"tab.inactiveBackground": "#EAEAEA",
"tab.inactiveBackground": "#FAFAFD",
"tab.inactiveForeground": "#606060",
"tab.border": "#F0F1F2",
"tab.lastPinnedBorder": "#F0F1F2",
Expand All @@ -212,7 +212,8 @@
"tab.unfocusedActiveForeground": "#606060",
"tab.unfocusedInactiveBackground": "#FAFAFD",
"tab.unfocusedInactiveForeground": "#BBBBBB",
"editorGroupHeader.tabsBackground": "#EAEAEA",
"editorGroupHeader.tabsBackground": "#FAFAFD",
"editorGroupHeader.connectedTabsBackground": "#EAEAEA",
"tab.activeBorder": "#FFFFFF",
"editorGroupHeader.tabsBorder": "#F0F1F2",
"breadcrumb.foreground": "#606060",
Expand Down
5 changes: 3 additions & 2 deletions extensions/theme-defaults/themes/dark_modern.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@
"editor.findMatchBackground": "#9E6A03",
"editor.foreground": "#CCCCCC",
"editorGroup.border": "#FFFFFF17",
"editorGroupHeader.tabsBackground": "#2B2B2B",
"editorGroupHeader.tabsBackground": "#181818",
"editorGroupHeader.connectedTabsBackground": "#2B2B2B",
"editorGroupHeader.tabsBorder": "#2B2B2B",
"editorGutter.addedBackground": "#2EA043",
"editorGutter.deletedBackground": "#F85149",
Expand Down Expand Up @@ -107,7 +108,7 @@
"tab.selectedBorderTop": "#6caddf",
"tab.border": "#2B2B2B",
"tab.hoverBackground": "#1F1F1F",
"tab.inactiveBackground": "#2B2B2B",
"tab.inactiveBackground": "#181818",
"tab.inactiveForeground": "#9D9D9D",
"tab.unfocusedActiveBorder": "#1F1F1F",
"tab.unfocusedActiveBorderTop": "#2B2B2B",
Expand Down
3 changes: 1 addition & 2 deletions extensions/theme-defaults/themes/dark_vs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"checkbox.border": "#6B6B6B",
"editor.background": "#1E1E1E",
"editor.foreground": "#D4D4D4",
"editorGroupHeader.tabsBackground": "#303031",
"editorGroupHeader.connectedTabsBackground": "#303031",
"editor.inactiveSelectionBackground": "#3A3D41",
"editorIndentGuide.background1": "#404040",
"editorIndentGuide.activeBackground1": "#707070",
Expand All @@ -28,7 +28,6 @@
"sideBarSectionHeader.background": "#0000",
"sideBarSectionHeader.border": "#ccc3",
"tab.selectedBackground": "#37373D",
"tab.inactiveBackground": "#303031",
"tab.inactiveForeground": "#A6A6A6",
"tab.selectedForeground": "#FFFFFF",
"tab.lastPinnedBorder": "#ccc3",
Expand Down
5 changes: 3 additions & 2 deletions extensions/theme-defaults/themes/light_modern.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@
"editor.inactiveSelectionBackground": "#E5EBF1",
"editor.selectionHighlightBackground": "#ADD6FF80",
"editorGroup.border": "#E5E5E5",
"editorGroupHeader.tabsBackground": "#E5E5E5",
"editorGroupHeader.tabsBackground": "#F8F8F8",
"editorGroupHeader.connectedTabsBackground": "#E5E5E5",
"editorGroupHeader.tabsBorder": "#E5E5E5",
"editorGutter.addedBackground": "#2EA043",
"editorGutter.deletedBackground": "#F85149",
Expand Down Expand Up @@ -124,7 +125,7 @@
"tab.selectedBorderTop": "#68a3da",
"tab.border": "#E5E5E5",
"tab.hoverBackground": "#FFFFFF",
"tab.inactiveBackground": "#E5E5E5",
"tab.inactiveBackground": "#F8F8F8",
"tab.inactiveForeground": "#616161",
"tab.lastPinnedBorder": "#D4D4D4",
"tab.unfocusedActiveBorder": "#F8F8F8",
Expand Down
3 changes: 1 addition & 2 deletions extensions/theme-defaults/themes/light_vs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"checkbox.border": "#919191",
"editor.background": "#FFFFFF",
"editor.foreground": "#000000",
"editorGroupHeader.tabsBackground": "#E8E8E8",
"editorGroupHeader.connectedTabsBackground": "#E8E8E8",
"editor.inactiveSelectionBackground": "#E5EBF1",
"editorIndentGuide.background1": "#D3D3D3",
"editorIndentGuide.activeBackground1": "#939393",
Expand All @@ -27,7 +27,6 @@
"sideBarSectionHeader.background": "#0000",
"sideBarSectionHeader.border": "#61616130",
"tab.selectedForeground": "#333333",
"tab.inactiveBackground": "#E8E8E8",
"tab.inactiveForeground": "#616161",
"tab.selectedBackground": "#E4E6F1",
"tab.lastPinnedBorder": "#61616130",
Expand Down
3 changes: 1 addition & 2 deletions extensions/theme-quietlight/themes/quietlight-color-theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -521,8 +521,7 @@
"peekViewResult.background": "#F2F8FC",
"peekView.border": "#705697",
"peekViewResult.matchHighlightBackground": "#93C6D6",
"editorGroupHeader.tabsBackground": "#E4E4E4",
"tab.inactiveBackground": "#E4E4E4",
"editorGroupHeader.connectedTabsBackground": "#E4E4E4",
"tab.inactiveForeground": "#54494B",
"tab.unfocusedInactiveForeground": "#54494B",
"tab.hoverBackground": "#F2F2F2",
Expand Down
3 changes: 3 additions & 0 deletions src/vs/workbench/browser/parts/editor/editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@ export interface IEditorPartCreationOptions {
export const DEFAULT_EDITOR_MIN_DIMENSIONS = new Dimension(220, 70);
export const DEFAULT_EDITOR_MAX_DIMENSIONS = new Dimension(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY);

export const CONNECTED_EDITOR_TABS_CLASS = 'modern-ui-connected-editor-tabs';
export const CONNECTED_EDITOR_TABS_SELECTOR = `.${CONNECTED_EDITOR_TABS_CLASS}`;

export const DEFAULT_EDITOR_PART_OPTIONS: IEditorPartOptions = {
showTabs: 'multiple',
highlightModifiedTabs: false,
Expand Down
4 changes: 2 additions & 2 deletions src/vs/workbench/browser/parts/editor/editorTabsControl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { IQuickInputService } from '../../../../platform/quickinput/common/quick
import { IThemeService, Themable } from '../../../../platform/theme/common/themeService.js';
import { DraggedEditorGroupIdentifier, DraggedEditorIdentifier, fillEditorsDragData, isWindowDraggedOver } from '../../dnd.js';
import { EditorPane } from './editorPane.js';
import { IEditorGroupMenuIds, IEditorGroupsView, IEditorGroupView, IEditorPartsView, IInternalEditorOpenOptions } from './editor.js';
import { CONNECTED_EDITOR_TABS_SELECTOR, IEditorGroupMenuIds, IEditorGroupsView, IEditorGroupView, IEditorPartsView, IInternalEditorOpenOptions } from './editor.js';
import { IEditorCommandsContext, EditorResourceAccessor, IEditorPartOptions, SideBySideEditor, EditorsOrder, EditorInputCapabilities, IToolbarActions, GroupIdentifier, Verbosity } from '../../../common/editor.js';
import { EditorInput } from '../../../common/editor/editorInput.js';
import { ResourceContextKey, ActiveEditorPinnedContext, ActiveEditorStickyContext, ActiveEditorDirtyContext, ActiveEditorGroupLockedContext, ActiveEditorCanSplitInGroupContext, SideBySideEditorActiveContext, ActiveEditorFirstInGroupContext, ActiveEditorAvailableEditorIdsContext, applyAvailableEditorIds, ActiveEditorLastInGroupContext, ActiveEditorCannotCloseContext } from '../../../common/contextkeys.js';
Expand Down Expand Up @@ -631,7 +631,7 @@ export abstract class EditorTabsControl extends Themable implements IEditorTabsC
if (usesModernMultiTabHeight || this.useModernUITabs) {
const height = isCompact ? EditorTabsControl.EDITOR_TAB_HEIGHT.modernUICompact : EditorTabsControl.EDITOR_TAB_HEIGHT.modernUI;
// Connected tabs reserve one extra pixel for the separator below the gutter.
return height + (usesModernMultiTabHeight && this.parent.closest('.modern-ui.modern-ui-connected-editor-tabs') ? 1 : 0);
return height + (usesModernMultiTabHeight && this.parent.closest(CONNECTED_EDITOR_TABS_SELECTOR) ? 1 : 0);
}
return isCompact ? EditorTabsControl.EDITOR_TAB_HEIGHT.compact : EditorTabsControl.EDITOR_TAB_HEIGHT.normal;
}
Expand Down
23 changes: 12 additions & 11 deletions src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import { INotificationService } from '../../../../platform/notification/common/n
import { MergeGroupMode, IMergeGroupOptions } from '../../../services/editor/common/editorGroupsService.js';
import { addDisposableListener, EventType, EventHelper, Dimension, scheduleAtNextAnimationFrame, findParentWithClass, clearNode, DragAndDropObserver, isMouseEvent, getWindow, ModifierKeyEmitter, $, isHTMLElement } from '../../../../base/browser/dom.js';
import { localize } from '../../../../nls.js';
import { IEditorGroupMenuIds, IEditorGroupsView, EditorServiceImpl, IEditorGroupView, IInternalEditorOpenOptions, IEditorPartsView, prepareMoveCopyEditors } from './editor.js';
import { CONNECTED_EDITOR_TABS_SELECTOR, IEditorGroupMenuIds, IEditorGroupsView, EditorServiceImpl, IEditorGroupView, IInternalEditorOpenOptions, IEditorPartsView, prepareMoveCopyEditors } from './editor.js';
import { CloseEditorTabAction, CloseOtherEditorTabsInGroupAction, UnpinEditorAction } from './editorActions.js';
import { assertReturnsAllDefined, assertReturnsDefined } from '../../../../base/common/types.js';
import { IEditorService } from '../../../services/editor/common/editorService.js';
Expand Down Expand Up @@ -118,7 +118,7 @@ export class MultiEditorTabsControl extends EditorTabsControl {
private readonly connectedTabTextWidths = new LRUCache<string, number>(256);
private addTabContainer: HTMLElement | undefined;
private tabSizingFixedDisposables: DisposableStore | undefined;
private connectedTabBounds: { tab: HTMLElement; overflowEdge: HTMLElement; fillLeft: number; fillRight: number; viewportLeft: number; viewportRight: number; clippingEdgeExtent: number; shoulderExtent: number } | undefined;
private connectedTabBounds: { tab: HTMLElement; overflowEdge: HTMLElement; fillLeft: number; fillRight: number; viewportLeft: number; viewportRight: number; shoulderExtent: number } | undefined;

private readonly closeEditorAction = this._register(this.instantiationService.createInstance(CloseEditorTabAction, CloseEditorTabAction.ID, CloseEditorTabAction.LABEL));
private readonly unpinEditorAction = this._register(this.instantiationService.createInstance(UnpinEditorAction, UnpinEditorAction.ID, UnpinEditorAction.LABEL));
Expand Down Expand Up @@ -853,7 +853,7 @@ export class MultiEditorTabsControl extends EditorTabsControl {
}

private invalidateConnectedTabLayout(): void {
if (this.connectedTabBounds || this.parent.closest('.modern-ui.modern-ui-connected-editor-tabs')) {
if (this.connectedTabBounds || this.parent.closest(CONNECTED_EDITOR_TABS_SELECTOR)) {
this.clearConnectedTabClipping();
this.layout(this.dimensions);
}
Expand Down Expand Up @@ -1828,7 +1828,7 @@ export class MultiEditorTabsControl extends EditorTabsControl {
// Label
const resource = EditorResourceAccessor.getOriginalUri(editor, { supportSideBySide: SideBySideEditor.PRIMARY });
let suffix: string | undefined;
if (name && resource && name === basename(resource) && this.parent.closest('.modern-ui.modern-ui-connected-editor-tabs') && !(options.pinnedTabSizing === 'compact' && this.tabsModel.isSticky(tabIndex))) {
if (name && resource && name === basename(resource) && this.parent.closest(CONNECTED_EDITOR_TABS_SELECTOR) && !(options.pinnedTabSizing === 'compact' && this.tabsModel.isSticky(tabIndex))) {
const extension = extname(resource);
if (extension.length > 1) {
suffix = extension;
Expand Down Expand Up @@ -2065,7 +2065,7 @@ export class MultiEditorTabsControl extends EditorTabsControl {
}

private doLayoutTabs(dimensions: IEditorTitleControlDimensions, options?: IMultiEditorTabsControlLayoutOptions): void {
const connected = Boolean(this.parent.closest('.modern-ui.modern-ui-connected-editor-tabs'));
const connected = Boolean(this.parent.closest(CONNECTED_EDITOR_TABS_SELECTOR));
this.parent.classList.toggle('connected-tabs-labels', connected);
if (connected !== this.connectedTabLabels) {
this.connectedTabLabels = connected;
Expand All @@ -2080,10 +2080,13 @@ export class MultiEditorTabsControl extends EditorTabsControl {
// wrapping is disabled (e.g. due to space constraints)
const tabsWrapMultiLine = this.doLayoutTabsWrapping(dimensions);
const tabs = Array.from(assertReturnsDefined(this.tabsContainer).children).filter(isHTMLElement);
const top = tabs.at(0)?.offsetTop;
const bottom = tabs.at(-1)?.offsetTop;
const upperTabBar = this.parent.classList.contains('two-tab-bars') && this.parent.firstElementChild === this.tabsAndActionsContainer;
const topTabBar = this.parent.firstElementChild === this.tabsAndActionsContainer;

@dmitrivMS Dmitriy Vasyura (dmitrivMS) Sep 23, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AI Review: Nit: With workbench.editor.pinnedTabsOnSeparateRow enabled and no sticky editors, MultiRowEditorControl retains a hidden sticky control as firstElementChild. The visible row therefore never gets connected-tab-top-row, including after unpinning the final sticky editor. In Dark/Light 2026 this paints an extra active-cap top stroke instead of sharing the editor frame. Could this identify the first visible/nonempty tab bar, with coverage for an empty pinned row and the final unpin transition?

const upperTabBar = this.parent.classList.contains('two-tab-bars') && topTabBar;
for (const tab of tabs) {
tab.classList.toggle('connected-tab-upper-row', connected && (upperTabBar || tab.offsetTop !== bottom));
tab.classList.toggle('connected-tab-top-row', connected && topTabBar && tab.offsetTop === top);
}
if (!tabsWrapMultiLine) {
this.doLayoutTabsNonWrapping(options);
Expand Down Expand Up @@ -2360,14 +2363,13 @@ export class MultiEditorTabsControl extends EditorTabsControl {
this.clearConnectedTabClipping();
const activeTabFill = activeTab?.firstElementChild;
const overflowEdge = this.connectedTabOverflowEdge;
if (activeTab && !activeTab.classList.contains('connected-tab-upper-row') && isHTMLElement(activeTabFill) && overflowEdge && !activeTabPositionStatic && this.parent.closest('.modern-ui.modern-ui-connected-editor-tabs')) {
if (activeTab && !activeTab.classList.contains('connected-tab-upper-row') && isHTMLElement(activeTabFill) && overflowEdge && !activeTabPositionStatic && this.parent.closest(CONNECTED_EDITOR_TABS_SELECTOR)) {
// DOM bounds reflect native scroll clamping before the custom scrollbar dimensions update.
const scrollLeft = tabsContainer.scrollLeft;
const tabsBounds = tabsContainer.getBoundingClientRect();
const fillBounds = activeTabFill.getBoundingClientRect();
const scrollableBounds = tabsScrollbar.getDomNode().getBoundingClientRect();
const targetWindow = getWindow(activeTabFill);
const fillStyle = targetWindow.getComputedStyle(activeTabFill);
const fillLeft = fillBounds.left - tabsBounds.left + scrollLeft;
const viewportRight = visibleTabsWidth - (this.addTabContainer?.offsetWidth ?? 0);
overflowEdge.style.top = `${fillBounds.top - scrollableBounds.top}px`;
Expand All @@ -2381,7 +2383,6 @@ export class MultiEditorTabsControl extends EditorTabsControl {
fillRight: fillBounds.right - tabsBounds.left + scrollLeft,
viewportLeft: stickyTabsWidth,
viewportRight,
clippingEdgeExtent: Number.parseFloat(fillStyle.borderTopLeftRadius),
shoulderExtent: Number.parseFloat(targetWindow.getComputedStyle(activeTabFill, '::after').width),
};
}
Expand Down Expand Up @@ -2512,7 +2513,7 @@ export class MultiEditorTabsControl extends EditorTabsControl {
return;
}

const { tab, overflowEdge, fillLeft, fillRight, viewportLeft, viewportRight, clippingEdgeExtent, shoulderExtent } = this.connectedTabBounds;
const { tab, overflowEdge, fillLeft, fillRight, viewportLeft, viewportRight, shoulderExtent } = this.connectedTabBounds;
const visibleLeft = scrollLeft + viewportLeft;
const visibleRight = scrollLeft + viewportRight;
const visibleFillLeft = Math.max(fillLeft, visibleLeft);
Expand All @@ -2521,7 +2522,7 @@ export class MultiEditorTabsControl extends EditorTabsControl {
const rightClipped = fillRight > visibleRight;
const leftEdge = fillLeft - shoulderExtent < visibleLeft;
const rightEdge = fillRight + shoulderExtent > visibleRight;
const hidden = visibleFillLeft + clippingEdgeExtent >= visibleFillRight;
const hidden = visibleFillLeft + shoulderExtent >= visibleFillRight;
tab.classList.toggle('connected-tab-left-edge', leftEdge);
tab.classList.toggle('connected-tab-right-edge', rightEdge);
tab.classList.toggle('connected-tab-left-clipped', leftClipped);
Expand Down
2 changes: 2 additions & 0 deletions src/vs/workbench/common/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,8 @@ export const EDITOR_GROUP_HEADER_TABS_BACKGROUND = registerColor('editorGroupHea
hcLight: null
}, localize('tabsContainerBackground', "Background color of the editor group title header when tabs are enabled. Editor groups are the containers of editors."));

export const EDITOR_GROUP_HEADER_CONNECTED_TABS_BACKGROUND = registerColor('editorGroupHeader.connectedTabsBackground', EDITOR_GROUP_HEADER_TABS_BACKGROUND, localize('connectedTabsContainerBackground', "Background color of connected tabs in editor group title headers. Editor groups are the containers of editors."));

export const EDITOR_GROUP_HEADER_TABS_BORDER = registerColor('editorGroupHeader.tabsBorder', null, localize('tabsContainerBorder', "Border color of the editor group title header when tabs are enabled. Editor groups are the containers of editors."));

export const EDITOR_GROUP_HEADER_NO_TABS_BACKGROUND = registerColor('editorGroupHeader.noTabsBackground', editorBackground, localize('editorGroupHeaderBackground', "Background color of the editor group title header when (`\"workbench.editor.showTabs\": \"single\"`). Editor groups are the containers of editors."));
Expand Down
Loading
Loading