Skip to content

Editor: refine connected document tabs and high-contrast document wells #335605

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

Draft
Cherry Wang (chryw) wants to merge 17 commits into
base: main
Choose a base branch
from
Draft

Editor: refine connected document tabs and high-contrast document wells #335605

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e0f7046
feat: add connected tabs support with custom styling and layout adjus…
mrleemurray Sep 7, 2026
5d825c3
style: adjust connected tab styles and add tests for stroke behavior
mrleemurray Sep 9, 2026
86306ec
feat: introduce connected editor tab style with customizable border
mrleemurray Sep 9, 2026
5b9aa85
feat: enhance connected editor tabs with clipping and overflow handling
mrleemurray Sep 9, 2026
0cc7ad9
feat: enhance connected tab behavior with left-shoulder clipping and …
mrleemurray Sep 9, 2026
18f42c8
feat: implement connected tab layout invalidation and enhance test co…
mrleemurray Sep 9, 2026
1e7803f
feat: enhance connected tab layout and alignment with auxiliary windo…
mrleemurray Sep 9, 2026
dbd8058
feat: refactor connected tab styling and update related tests for imp…
mrleemurray Sep 9, 2026
58637a4
feat: implement connected tab theming participant and update color va…
mrleemurray Sep 9, 2026
f577a6d
feat: strengthen connected editor tab hierarchy
chryw Sep 10, 2026
25ecf38
style: connect editor tabs across the full strip
chryw Sep 10, 2026
206c171
feat: refine connected document tab geometry and readability
chryw Sep 11, 2026
c447867
fix: preserve connected tab selection and HC editor frames
chryw Sep 11, 2026
66c40e9
fix: address connected tab review feedback
chryw Sep 11, 2026
a542571
fix: isolate component fixture styles by theme identity
chryw Sep 11, 2026
b99540a
test: refresh baselines after fixture theme isolation
chryw Sep 11, 2026
08c5197
test: load editor styles in fixture isolation regression
chryw Sep 11, 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
12 changes: 12 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 @@ -1027,6 +1027,8 @@
"--chat-current-response-min-height",
"--chat-smooth-delay",
"--chat-smooth-duration",
"--connected-tab-min-name-width",
"--connected-tab-min-width",
"--inline-chat-frame-progress",
"--insert-border-color",
"--last-tab-margin-right",
Expand Down Expand Up @@ -1072,6 +1074,15 @@
"--pane-header-size",
"--model-hover-surface-background",
"--modern-ui-activitybar-lane",
"--modern-ui-connected-tab-action-background",
"--modern-ui-connected-tab-border",
"--modern-ui-connected-tab-cap-radius",
"--modern-ui-connected-tab-gutter",
"--modern-ui-connected-tab-radius",
"--modern-ui-connected-tab-shoulder-radius",
"--modern-ui-connected-tab-surface",
"--modern-ui-connected-tab-top-inset",
"--modern-ui-connected-well-border",
"--modern-ui-editor-border-color",
"--modern-ui-editor-tab-action-active-background",
"--modern-ui-editor-tab-action-active-hover-background",
Expand Down Expand Up @@ -1122,6 +1133,7 @@
"--modern-ui-notifications-block-start-inset",
"--modern-ui-notifications-inline-inset",
"--modern-ui-shell-background",
"--modern-ui-tab-action-padding",
"--modern-ui-tab-active-background",
"--modern-ui-tab-hover-background",
"--search-editor-query-layout-offset",
Expand Down
2 changes: 1 addition & 1 deletion build/rspack/rspack.serve-out.config.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export default {
// Built-in color theme JSON files use JSONC (comments / trailing
// commas), so import them as raw strings and let VS Code's
// JSON parser handle them.
test: /[\\/]extensions[\\/]theme-defaults[\\/]themes[\\/].*\.json$/,
test: /[\\/]extensions[\\/]theme-[^\\/]+[\\/]themes[\\/].*\.json$/,
type: 'asset/source',
},
],
Expand Down
4 changes: 2 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": "#191A1B",
"tab.inactiveBackground": "#202122",
"tab.inactiveForeground": "#8C8C8C",
"tab.border": "#2A2B2C",
"tab.lastPinnedBorder": "#2A2B2C",
Expand All @@ -205,7 +205,7 @@
"tab.unfocusedActiveForeground": "#8C8C8C",
"tab.unfocusedInactiveBackground": "#191A1B",
"tab.unfocusedInactiveForeground": "#444444",
"editorGroupHeader.tabsBackground": "#191A1B",
"editorGroupHeader.tabsBackground": "#202122",
"tab.activeBorder": "#121314",
"editorGroupHeader.tabsBorder": "#2A2B2C",
"breadcrumb.foreground": "#8C8C8C",
Expand Down
4 changes: 2 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": "#FAFAFD",
"tab.inactiveBackground": "#EAEAEA",
"tab.inactiveForeground": "#606060",
"tab.border": "#F0F1F2",
"tab.lastPinnedBorder": "#F0F1F2",
Expand All @@ -212,7 +212,7 @@
"tab.unfocusedActiveForeground": "#606060",
"tab.unfocusedInactiveBackground": "#FAFAFD",
"tab.unfocusedInactiveForeground": "#BBBBBB",
"editorGroupHeader.tabsBackground": "#FAFAFD",
"editorGroupHeader.tabsBackground": "#EAEAEA",
"tab.activeBorder": "#FFFFFF",
"editorGroupHeader.tabsBorder": "#F0F1F2",
"breadcrumb.foreground": "#606060",
Expand Down
4 changes: 2 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,7 @@
"editor.findMatchBackground": "#9E6A03",
"editor.foreground": "#CCCCCC",
"editorGroup.border": "#FFFFFF17",
"editorGroupHeader.tabsBackground": "#181818",
"editorGroupHeader.tabsBackground": "#2B2B2B",
"editorGroupHeader.tabsBorder": "#2B2B2B",
"editorGutter.addedBackground": "#2EA043",
"editorGutter.deletedBackground": "#F85149",
Expand Down Expand Up @@ -107,7 +107,7 @@
"tab.selectedBorderTop": "#6caddf",
"tab.border": "#2B2B2B",
"tab.hoverBackground": "#1F1F1F",
"tab.inactiveBackground": "#181818",
"tab.inactiveBackground": "#2B2B2B",
"tab.inactiveForeground": "#9D9D9D",
"tab.unfocusedActiveBorder": "#1F1F1F",
"tab.unfocusedActiveBorderTop": "#2B2B2B",
Expand Down
3 changes: 3 additions & 0 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,6 +5,7 @@
"checkbox.border": "#6B6B6B",
"editor.background": "#1E1E1E",
"editor.foreground": "#D4D4D4",
"editorGroupHeader.tabsBackground": "#303031",
"editor.inactiveSelectionBackground": "#3A3D41",
"editorIndentGuide.background1": "#404040",
"editorIndentGuide.activeBackground1": "#707070",
Expand All @@ -26,6 +27,8 @@
"sideBarSectionHeader.background": "#0000",
"sideBarSectionHeader.border": "#ccc3",
"tab.selectedBackground": "#37373D",
"tab.inactiveBackground": "#303031",
"tab.inactiveForeground": "#A6A6A6",
"tab.selectedForeground": "#FFFFFF",
"tab.lastPinnedBorder": "#ccc3",
"list.activeSelectionIconForeground": "#FFF",
Expand Down
6 changes: 3 additions & 3 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,7 @@
"editor.inactiveSelectionBackground": "#E5EBF1",
"editor.selectionHighlightBackground": "#ADD6FF80",
"editorGroup.border": "#E5E5E5",
"editorGroupHeader.tabsBackground": "#F8F8F8",
"editorGroupHeader.tabsBackground": "#E5E5E5",
"editorGroupHeader.tabsBorder": "#E5E5E5",
"editorGutter.addedBackground": "#2EA043",
"editorGutter.deletedBackground": "#F85149",
Expand Down Expand Up @@ -124,8 +124,8 @@
"tab.selectedBorderTop": "#68a3da",
"tab.border": "#E5E5E5",
"tab.hoverBackground": "#FFFFFF",
"tab.inactiveBackground": "#F8F8F8",
"tab.inactiveForeground": "#868686",
"tab.inactiveBackground": "#E5E5E5",
"tab.inactiveForeground": "#616161",
"tab.lastPinnedBorder": "#D4D4D4",
"tab.unfocusedActiveBorder": "#F8F8F8",
"tab.unfocusedActiveBorderTop": "#E5E5E5",
Expand Down
3 changes: 3 additions & 0 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,6 +5,7 @@
"checkbox.border": "#919191",
"editor.background": "#FFFFFF",
"editor.foreground": "#000000",
"editorGroupHeader.tabsBackground": "#E8E8E8",
"editor.inactiveSelectionBackground": "#E5EBF1",
"editorIndentGuide.background1": "#D3D3D3",
"editorIndentGuide.activeBackground1": "#939393",
Expand All @@ -25,6 +26,8 @@
"sideBarSectionHeader.background": "#0000",
"sideBarSectionHeader.border": "#61616130",
"tab.selectedForeground": "#333333",
"tab.inactiveBackground": "#E8E8E8",
"tab.inactiveForeground": "#616161",
"tab.selectedBackground": "#E4E6F1",
"tab.lastPinnedBorder": "#61616130",
"notebook.cellBorderColor": "#E8E8E8",
Expand Down
1 change: 1 addition & 0 deletions src/vs/workbench/browser/labels.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -636,6 +636,7 @@ class ResourceLabelWidget extends IconLabel {
strikethrough: this.options?.strikethrough,
matches: this.options?.matches,
descriptionMatches: this.options?.descriptionMatches,
suffix: this.options?.suffix,
extraClasses: [],
separator: this.options?.separator,
domId: this.options?.domId,
Expand Down
3 changes: 3 additions & 0 deletions src/vs/workbench/browser/parts/editor/editorPart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1061,6 +1061,9 @@ export class EditorPart extends Part<IEditorPartMemento> implements IEditorPart,

// Container
this.element = parent;
const updateEditorTabsClass = () => parent.classList.toggle('editor-tabs-multiple', this.partOptions.showTabs === 'multiple');
updateEditorTabsClass();
this._register(this.onDidChangeEditorPartOptions(updateEditorTabsClass));
if (this.windowId !== mainWindow.vscodeWindowId) {
this.container.classList.add('auxiliary');
}
Expand Down
4 changes: 3 additions & 1 deletion 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 @@ -629,7 +629,9 @@ export abstract class EditorTabsControl extends Themable implements IEditorTabsC
// hosts using modern UI tabs opt into the same aligned height.
const usesModernMultiTabHeight = this.parent.classList.contains('tabs') && this.parent.closest('.modern-ui-tabs');
if (usesModernMultiTabHeight || this.useModernUITabs) {
return isCompact ? EditorTabsControl.EDITOR_TAB_HEIGHT.modernUICompact : EditorTabsControl.EDITOR_TAB_HEIGHT.modernUI;
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 isCompact ? EditorTabsControl.EDITOR_TAB_HEIGHT.compact : EditorTabsControl.EDITOR_TAB_HEIGHT.normal;
}
Expand Down
8 changes: 8 additions & 0 deletions src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,14 @@
outline-offset: -2px;
}

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-connected-edge {
display: none;
}

.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container > .monaco-scrollable-element > .tab-connected-overflow-edge {
display: none;
}

/* Tab Background Color in/active group/tab */
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
background-color: var(--vscode-tab-unfocusedInactiveBackground);
Expand Down
Loading