You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Connected editor tabs still suppressed tab.activeBorder and gave tab.border conflicting paint ownership after the broader color-customization restoration in #337986. This restores the remaining legacy border customizations and separates rounded tab boundaries from inter-tab dividers.
Restore active top, bottom, hover, selected, modified, focused, and unfocused border customizations in Connected tabs.
Preserve explicit legacy, shared Modern, and editor-specific Modern fill, label, hover, selected-action, and action-surface customizations.
Add tab.divider, which inherits tab.border by default but can be customized independently.
Keep paint ownership style-specific:
Legacy continues using tab.border as its separator and renders no dedicated divider.
Pill uses rounded tab.border outlines plus dividers at every adjacent boundary.
Connected uses tab.border for the active document cap and dividers only between inactive neighbors.
High Contrast keeps complete theme-owned tab boundaries and renders no redundant divider.
Keep rounded top and bottom accents inside Pill and wrapped Connected corners, and avoid duplicate first-tab/editor-frame edges.
The issue contains the failing before state. These captures show the fixed implementation.
Connected customization in native Code OSS
Dark Modern with distinct active/inactive surfaces, active top and bottom accents, a structural active-tab boundary, and dividers only between inactive neighbors:
Same tokens across tab styles
Top to bottom: Legacy keeps its existing separators without dedicated dividers; Pill uses rounded boundaries and dividers at every adjacency; Connected gives the active cap boundary ownership and limits dividers to inactive neighbors.
Wrapped Connected tabs
An upper-row active tab remains a standalone pill. Its customized top and bottom accents stop before the rounded corners.
High Contrast defaults
Top to bottom: Dark HC and Light HC with no color overrides. Complete theme-owned tab boundaries remain visible and no dedicated divider is added.
Testing
Enable Modern UI and set workbench.experimental.modernUIEditorTabStyle to connected.
Customize tab.border, tab.divider, tab.activeBorder, and tab.activeBorderTop with distinct colors. Verify the active cap uses the tab boundary and top/bottom accents, while dividers appear only between adjacent inactive tabs.
Switch to pill. Verify each rounded tab uses tab.border, top and bottom accents stop before the corners, and dividers appear between every adjacent pair, including beside the active tab.
Disable Modern UI or use Legacy tabs. Verify the existing tab.border separator remains the only shared-edge paint and no dedicated divider is duplicated.
Wrap tabs onto multiple rows. Verify upper-row active tabs retain Pill geometry with inset accents and bottom-row active tabs remain connected to the editor.
Switch between Dark High Contrast and Light High Contrast without color overrides. Verify complete stock tab boundaries and active focus ownership remain visible, with no dedicated divider.
Exercise hover, modified, multi-selection, pinned, split-group, clipped, compact-height, and action-left states.
Validation
npm install
npm run compile
npm run transpile-client
Modern UI and multi-editor tab unit suites
Editor-tab production component fixture Playwright suite
Stylelint for the changed tab styles
Freshly built native Code OSS token audit across focused, hover, multi-selected, pinned, drag-and-drop, modified, and unfocused states
Exhaustive registry guard and computed-style coverage for all 46 relevant tab.*, modernTab.*, modernEditorTab.*, and editor-group-header colors
Keep pill tabs on fill-owned borders while allowing connected tabs to use the standard full-width theme border indicators. Add component fixtures and computed-style coverage for active, unfocused, and selected border colors.
Fixes#325250.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Give explicit tab.border customizations precedence over the connected tab header border default, and cover the connected side stroke in unit, fixture, and Playwright assertions.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Paint active top border customizations on the rounded connected cap instead of layering a straight indicator over it. Preserve the transparent default top-row border and keep selected and modified indicator ownership unchanged.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add matched legacy, pill, and connected fixtures plus first/middle continuity fixtures. Reuse the production legacy-to-modern color collector in the fixture harness and preserve connected structural borders and unfocused colors during active multi-selection.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add a customizable tab.divider element between tabs while reserving tab.border for tab boundaries. Modern pill and connected styles show short dividers only between inactive tabs; legacy keeps dividers at every shared boundary.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Default tab.divider to tab.border while preserving an explicit divider customization as an independent override.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Show dedicated dividers at every pill boundary while keeping connected dividers inactive-only. Keep tab.border as the rounded pill outline and inset active top/bottom accents so mixed colors do not protrude through the corners.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Make the divider transparent in continuity fixtures so the shared tab and editor boundary is tested without an inherited divider repainting it.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Use a longer inactive tab run so divider ownership remains visually obvious across legacy, pill, and connected styles.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Keep inactive connected tabs unoutlined so their dedicated dividers own shared boundaries. Preserve the active left edge and inset selected top accents before their corners.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Expose first-in-row state directly instead of deriving it from sibling selectors, and add Dark and Light High Contrast fixtures and assertions for connected tab boundaries.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Let the outer editor frame own the left edge when the first connected tab is active, while retaining the tab boundary when no outer frame is present.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Keep legacy tab separators single-owned, make modern divider policies explicit, align the connected active bottom accent, and inherit high-contrast divider accents from the active group frame.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Keep dedicated dividers out of High Contrast, retain complete theme-owned tab outlines, and render customized wrapped-tab accents inside rounded pill corners. Align the tab geometry tests with production row and grid ownership.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Keep editor-only Pill accent pseudo-elements off shared Sessions tabs, model production row-start ownership in the Sessions fixture, and restore the missing component-fixture theme type import.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Use the boundary-aligned standard indicator for bottom-row Connected hover accents while upper wrapped pills keep their inset fill-owned border.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
At an inactive pinned-to-normal boundary this divider paints above the existing tab.lastPinnedBorder inset shadow (tabs.css:115-116) because .tab-divider has z-index 9. With distinct custom colors, the last-pinned separator is covered through its center and survives only as short fragments. Suppress the generic divider at that transition so the semantic pinned separator retains paint ownership.
The inset replacement is gated on .tab-border-bottom, so active upper-row hover rendering is inconsistent: without tab.activeBorder, tab.hoverBorder remains a full-width straight indicator across the rounded corners; with tab.activeBorder, this rule hides the hover indicator and the pseudo-element keeps the active-border color instead. Handle hovered active upper-row tabs explicitly with an inset hover accent.
Render focused and unfocused hover-border customizations as a single inset accent on upper wrapped tabs, preserving their rounded pill geometry.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Honor explicit Modern editor action colors in Connected tabs while preserving seamless defaults. Guard the complete 46-token editor-tab audit across legacy, shared Modern, editor-specific Modern, and editor-group-header color families.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Preserve the shared HC frame edge and load the production editor-frame styles in the migrated tab fixture harness.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Drop editor-group-header color imports that became unused when the color fixtures moved into the curated tabs harness.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Remove the redundant first-in-row marker introduced by this branch and use the row-boundary selectors owned by the merged tab structure overhaul.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Scope the editor frame to continuity fixtures, suppress uncustomized Connected active-top accents, and require exact cap/frame/body alignment without changing the tab layout geometry.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This branch has not been deployed
No deployments
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Connected editor tabs still suppressed
tab.activeBorderand gavetab.borderconflicting paint ownership after the broader color-customization restoration in #337986. This restores the remaining legacy border customizations and separates rounded tab boundaries from inter-tab dividers.tab.divider, which inheritstab.borderby default but can be customized independently.tab.borderas its separator and renders no dedicated divider.tab.borderoutlines plus dividers at every adjacent boundary.tab.borderfor the active document cap and dividers only between inactive neighbors.Fixes #325250.
Visuals
The issue contains the failing before state. These captures show the fixed implementation.
Connected customization in native Code OSS
Dark Modern with distinct active/inactive surfaces, active top and bottom accents, a structural active-tab boundary, and dividers only between inactive neighbors:
Same tokens across tab styles
Top to bottom: Legacy keeps its existing separators without dedicated dividers; Pill uses rounded boundaries and dividers at every adjacency; Connected gives the active cap boundary ownership and limits dividers to inactive neighbors.
Wrapped Connected tabs
An upper-row active tab remains a standalone pill. Its customized top and bottom accents stop before the rounded corners.
High Contrast defaults
Top to bottom: Dark HC and Light HC with no color overrides. Complete theme-owned tab boundaries remain visible and no dedicated divider is added.
Testing
workbench.experimental.modernUIEditorTabStyletoconnected.tab.border,tab.divider,tab.activeBorder, andtab.activeBorderTopwith distinct colors. Verify the active cap uses the tab boundary and top/bottom accents, while dividers appear only between adjacent inactive tabs.pill. Verify each rounded tab usestab.border, top and bottom accents stop before the corners, and dividers appear between every adjacent pair, including beside the active tab.tab.borderseparator remains the only shared-edge paint and no dedicated divider is duplicated.Validation
npm installnpm run compilenpm run transpile-clienttab.*,modernTab.*,modernEditorTab.*, and editor-group-header colors