From 339d53945024ee25a5db5d0751f741c5c267d6e6 Mon Sep 17 00:00:00 2001 From: na2co3 Date: Sun, 27 Sep 2026 11:22:55 +0900 Subject: [PATCH 1/7] Modern UI: Prevent vertical scrolling when dragging connected tabs --- .../browser/media/connectedEditorTabs.css | 20 +++++++++++-------- .../browser/modernUI.contribution.test.ts | 6 +++--- .../editor/multiEditorTabsControl.test.ts | 13 +++++++----- 3 files changed, 23 insertions(+), 16 deletions(-) diff --git a/src/vs/workbench/contrib/modernUI/browser/media/connectedEditorTabs.css b/src/vs/workbench/contrib/modernUI/browser/media/connectedEditorTabs.css index b9a26cab71303..6bc9e6477a3c2 100644 --- a/src/vs/workbench/contrib/modernUI/browser/media/connectedEditorTabs.css +++ b/src/vs/workbench/contrib/modernUI/browser/media/connectedEditorTabs.css @@ -193,12 +193,8 @@ --modern-ui-editor-tab-unfocused-active-border-top: var(--modern-ui-connected-tab-border); --modern-ui-editor-tab-active-border: transparent; --modern-ui-editor-tab-unfocused-active-border: transparent; - top: 0; - inset-inline: 0; - bottom: calc(-2 * var(--vscode-strokeThickness)); z-index: 1; background-color: var(--modern-ui-connected-tab-current-background); - background-clip: padding-box; border: var(--vscode-strokeThickness) solid var(--modern-ui-connected-tab-border); border-bottom-color: transparent; border-radius: var(--modern-ui-connected-tab-cap-radius) var(--modern-ui-connected-tab-cap-radius) 0 0; @@ -212,7 +208,7 @@ .modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .modern-ui-editor-tab.active > .modern-ui-editor-tab-fill::after { content: ''; position: absolute; - bottom: 0; + bottom: calc(-1 * var(--vscode-strokeThickness)); width: var(--modern-ui-connected-tab-shoulder-radius); height: var(--modern-ui-connected-tab-shoulder-radius); box-sizing: border-box; @@ -245,7 +241,7 @@ position: absolute; top: 0; inset-inline: 0; - bottom: calc(-2 * var(--vscode-strokeThickness)); + bottom: calc(-1 * var(--vscode-strokeThickness)); z-index: 8; pointer-events: none; } @@ -499,8 +495,7 @@ .modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .connected-tab-right-clipped > .tab-connected-overflow-right, .modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .modern-ui-editor-tab-strip .connected-tab-right-clipped > .tab-connected-overflow-right { position: absolute; - /* Match the ordinary fill's inner border edge, not its reserved bottom stroke. */ - inset: 0 0 var(--vscode-strokeThickness); + inset: 0 0; z-index: 1; } @@ -564,11 +559,20 @@ border-color: transparent; } +.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.connected-tab-upper-row.active > .tab-fill { + background-clip: padding-box; +} + .modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.wrapping .tabs-container > .tab.connected-tab-upper-row > .tab-fill { inset-block: calc(-1 * var(--vscode-spacing-size20)); inset-inline: 0; } +.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.wrapping .tabs-container > .tab:not(.connected-tab-upper-row) > .tab-fill, +.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.wrapping .tabs-container > .tab.active:not(.connected-tab-upper-row) > .tab-connected-edge { + bottom: 0; +} + .modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.active.connected-tab-top-row:not(.connected-tab-upper-row) > .tab-fill { border-top-color: transparent; } diff --git a/src/vs/workbench/contrib/modernUI/test/browser/modernUI.contribution.test.ts b/src/vs/workbench/contrib/modernUI/test/browser/modernUI.contribution.test.ts index 078dc8000965b..88fa8be3e84c6 100644 --- a/src/vs/workbench/contrib/modernUI/test/browser/modernUI.contribution.test.ts +++ b/src/vs/workbench/contrib/modernUI/test/browser/modernUI.contribution.test.ts @@ -2836,7 +2836,7 @@ suite('ModernUIContribution', () => { middleTab: { shoulders: ['""', '""'], capRadii: ['5px', '5px'], - backgroundClip: 'padding-box', + backgroundClip: 'border-box', radii: ['5px', '5px'], sizes: [['5px', '5px'], ['5px', '5px']], }, @@ -2888,8 +2888,8 @@ suite('ModernUIContribution', () => { rowPaddingTop: '0px', topFrame: { borderColors: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0)'], borderTopLeftRadius: '0px' }, upper: { tabBorders: ['2px', '2px'], fillInsets: ['-2px', '-2px'], fillInlineStart: '0px' }, - inactiveBottom: { tabBorders: ['0px', '0px'], fillInsets: ['0px', '-1px'], fillInlineStart: '0px' }, - activeBottom: { tabBorders: ['0px', '0px'], fillInsets: ['0px', '-2px'], fillInlineStart: '0px' }, + inactiveBottom: { tabBorders: ['0px', '0px'], fillInsets: ['0px', '0px'], fillInlineStart: '0px' }, + activeBottom: { tabBorders: ['0px', '0px'], fillInsets: ['0px', '0px'], fillInlineStart: '0px' }, }); }); diff --git a/src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts b/src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts index 892db65d4f27e..0f023034c46e3 100644 --- a/src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts +++ b/src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts @@ -1106,17 +1106,17 @@ suite('MultiEditorTabsControl', () => { stripHeight: strip.getBoundingClientRect().height, wrapping: strip.classList.contains('wrapping'), upperRow: tab.classList.contains('connected-tab-upper-row'), - gap: strip.getBoundingClientRect().bottom - (fill.getBoundingClientRect().bottom - parseFloat(fillStyle.borderBottomWidth)), + gap: strip.getBoundingClientRect().bottom - fill.getBoundingClientRect().bottom, clippingGap: strip.getBoundingClientRect().bottom - clippingBottom, bottomRadius: fillStyle.borderBottomRightRadius, shoulder: mainWindow.getComputedStyle(fill, '::after').content, - visibleHeights: fills.map(rect => Math.min(rect.bottom, clippingBottom) - rect.top), + fillHeights: fills.map(rect => rect.bottom - rect.top), rowGap: fills[1].top - fills[0].bottom, }); } assert.deepStrictEqual(measurements, [ - { tabHeight: 'default', stripHeight: 58, wrapping: true, upperRow: false, gap: -1, clippingGap: 0, bottomRadius: '0px', shoulder: '""', visibleHeights: [28, 28], rowGap: 2 }, - { tabHeight: 'compact', stripHeight: 50, wrapping: true, upperRow: false, gap: -1, clippingGap: 0, bottomRadius: '0px', shoulder: '""', visibleHeights: [24, 24], rowGap: 2 }, + { tabHeight: 'default', stripHeight: 58, wrapping: true, upperRow: false, gap: 0, clippingGap: 0, bottomRadius: '0px', shoulder: '""', fillHeights: [28, 28], rowGap: 2 }, + { tabHeight: 'compact', stripHeight: 50, wrapping: true, upperRow: false, gap: 0, clippingGap: 0, bottomRadius: '0px', shoulder: '""', fillHeights: [24, 24], rowGap: 2 }, ]); }); @@ -1191,6 +1191,7 @@ suite('MultiEditorTabsControl', () => { const [activeTab, inactiveTab] = container.querySelectorAll('.tabs-container > .tab'); const activeFillStyle = mainWindow.getComputedStyle(activeTab.querySelector('.tab-fill')!); + const activeEdgeStyle = mainWindow.getComputedStyle(activeTab.querySelector('.tab-connected-edge')!); const inactiveFillStyle = mainWindow.getComputedStyle(inactiveTab.querySelector('.tab-fill')!); const row = container.querySelector('.tabs-and-actions-container')!; const rowStyle = mainWindow.getComputedStyle(row); @@ -1200,13 +1201,15 @@ suite('MultiEditorTabsControl', () => { assert.deepStrictEqual({ active: { top: activeFillStyle.top, left: activeFillStyle.left, right: activeFillStyle.right, bottom: activeFillStyle.bottom }, + activeEdgeBottom: activeEdgeStyle.bottom, inactive: { top: inactiveFillStyle.top, left: inactiveFillStyle.left, right: inactiveFillStyle.right, bottom: inactiveFillStyle.bottom }, alignItems: rowStyle.alignItems, editorActionsHeight: editorActionsStyle.height, rowPaddingLeft: rowStyle.paddingLeft, rowPaddingTop: rowStyle.paddingTop, }, { - active: { top: '0px', left: '0px', right: '0px', bottom: '-2px' }, + active: { top: '0px', left: '0px', right: '0px', bottom: '-1px' }, + activeEdgeBottom: '-1px', inactive: { top: '0px', left: '0px', right: '0px', bottom: '-1px' }, alignItems: 'flex-start', editorActionsHeight: '32px', From 1d4da997da836d059b2aa86151bb796381ae9d30 Mon Sep 17 00:00:00 2001 From: na2co3 Date: Sun, 27 Sep 2026 15:49:45 +0900 Subject: [PATCH 2/7] test: connected tabs do not overflow vertically while dragging --- .../editor/multiEditorTabsControl.test.ts | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts b/src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts index 0f023034c46e3..5bf36e033f843 100644 --- a/src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts +++ b/src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts @@ -1148,6 +1148,31 @@ suite('MultiEditorTabsControl', () => { ]); }); + test('connected tabs do not overflow vertically while dragging', async () => { + const group = connectedGroup(); + group.style.setProperty('--modern-ui-connected-tab-surface', '#ffffff'); + model.openEditor(model.getEditorByIndex(1)!, { active: true }); + control.openEditors(model.getEditors(EditorsOrder.SEQUENTIAL)); + const measurements = []; + for (const [wrapTabs, width] of [[false, 320], [true, 150]] as const) { + const oldOptions = partOptions; + partOptions = { ...partOptions, wrapTabs, tabSizing: 'fixed', tabSizingFixedMinWidth: 120, tabSizingFixedMaxWidth: 120, editorActionsLocation: 'hidden' }; + control.updateOptions(oldOptions, partOptions); + await layoutConnectedGroup(group, width); + const tabs = container.querySelector('.tabs-container')!; + tabs.classList.add('scroll'); + measurements.push({ + wrapTabs, + wrapping: tabs.closest('.tabs-and-actions-container')!.classList.contains('wrapping'), + verticalOverflow: tabs.scrollHeight - tabs.clientHeight, + }); + } + assert.deepStrictEqual(measurements, [ + { wrapTabs: false, wrapping: false, verticalOverflow: 0 }, + { wrapTabs: true, wrapping: true, verticalOverflow: 0 }, + ]); + }); + test('connected tabs reserve separator height without changing classic or shared modern tabs', async () => { const readHeight = async () => { control.layout({ container: Dimension.None, available: Dimension.None }); From 2fbfcd1785769a402293ce76b52f250e29f00d37 Mon Sep 17 00:00:00 2001 From: na2co3 Date: Thu, 1 Oct 2026 23:21:39 +0900 Subject: [PATCH 3/7] test: fix failing editor part test --- src/vs/sessions/test/browser/editorPart.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/sessions/test/browser/editorPart.test.ts b/src/vs/sessions/test/browser/editorPart.test.ts index 39e9085790f94..0b0fd6d410971 100644 --- a/src/vs/sessions/test/browser/editorPart.test.ts +++ b/src/vs/sessions/test/browser/editorPart.test.ts @@ -120,7 +120,7 @@ suite('Sessions - EditorPart', () => { active: true, laterRow: wrapped, leadingEdge: wrapped, - backgroundClip: wrapped ? 'border-box' : 'padding-box', + backgroundClip: 'border-box', leftBorder: wrapped ? 'rgba(0, 0, 0, 0)' : border, leftCorner: wrapped ? '0px' : '5px', }, `${theme}, active: ${active}, compact: ${compact}, zoom: ${zoom}, wrapped: ${wrapped}`); From 4ca8c4bbda130a223c2175c44b2537ac7ca757ed Mon Sep 17 00:00:00 2001 From: na2co3 Date: Fri, 2 Oct 2026 22:52:39 +0900 Subject: [PATCH 4/7] Modern UI: Fix connected tab styles after merging main --- .../modernUI/browser/media/connectedEditorTabs.css | 11 +---------- .../test/browser/modernUI.contribution.test.ts | 8 ++++---- .../parts/editor/multiEditorTabsControl.test.ts | 6 +++--- 3 files changed, 8 insertions(+), 17 deletions(-) diff --git a/src/vs/workbench/contrib/modernUI/browser/media/connectedEditorTabs.css b/src/vs/workbench/contrib/modernUI/browser/media/connectedEditorTabs.css index 8a03a93d889f6..d94a8074147e3 100644 --- a/src/vs/workbench/contrib/modernUI/browser/media/connectedEditorTabs.css +++ b/src/vs/workbench/contrib/modernUI/browser/media/connectedEditorTabs.css @@ -271,7 +271,7 @@ position: absolute; bottom: 0; width: var(--vscode-strokeThickness); - height: calc(var(--modern-ui-connected-tab-shoulder-radius) - var(--vscode-strokeThickness)); + height: calc(var(--modern-ui-connected-tab-shoulder-radius) - var(--vscode-strokeThickness) * 2); box-sizing: border-box; background: linear-gradient(to bottom, transparent var(--vscode-strokeThickness), var(--modern-ui-connected-tab-current-background) var(--vscode-strokeThickness)); } @@ -575,10 +575,6 @@ background-clip: padding-box; } -.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.connected-tab-upper-row.active > .tab-fill { - background-clip: padding-box; -} - .modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.wrapping .tabs-container > .tab.connected-tab-upper-row > .tab-fill { inset-block: calc(-1 * var(--vscode-spacing-size20)); inset-inline: var(--vscode-strokeThickness); @@ -592,11 +588,6 @@ right: var(--vscode-spacing-size20); } -.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.wrapping .tabs-container > .tab:not(.connected-tab-upper-row) > .tab-fill, -.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.wrapping .tabs-container > .tab.active:not(.connected-tab-upper-row) > .tab-connected-edge { - bottom: 0; -} - .modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.active.connected-tab-top-row:not(.connected-tab-upper-row) > .tab-fill { border-top-color: transparent; } diff --git a/src/vs/workbench/contrib/modernUI/test/browser/modernUI.contribution.test.ts b/src/vs/workbench/contrib/modernUI/test/browser/modernUI.contribution.test.ts index 0ec4e5e6ff9a5..8d1a2ff29ab11 100644 --- a/src/vs/workbench/contrib/modernUI/test/browser/modernUI.contribution.test.ts +++ b/src/vs/workbench/contrib/modernUI/test/browser/modernUI.contribution.test.ts @@ -3027,12 +3027,12 @@ suite('ModernUIContribution', () => { topFrame: { borderColors: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0)'], borderTopLeftRadius: '6px', borderWidths: ['1px', '1px'] }, upper: { tabBorders: ['2px', '2px'], fillInsets: ['-2px', '-2px'], fillInlineStart: '2px' }, inactive: { - single: { tabBorders: ['0px', '0px'], fillInsets: ['0px', '0px'], fillInlineStart: '0px' }, - wrappedBottom: { tabBorders: ['0px', '0px'], fillInsets: ['0px', '0px'], fillInlineStart: '0px' }, + single: { tabBorders: ['0px', '0px'], fillInsets: ['0px', '-1px'], fillInlineStart: '0px' }, + wrappedBottom: { tabBorders: ['0px', '0px'], fillInsets: ['0px', '-1px'], fillInlineStart: '0px' }, }, active: { - single: { tabBorders: ['0px', '0px'], fillInsets: ['0px', '0px'], fillInlineStart: '0px' }, - wrappedBottom: { tabBorders: ['0px', '0px'], fillInsets: ['0px', '0px'], fillInlineStart: '0px' }, + single: { tabBorders: ['0px', '0px'], fillInsets: ['0px', '-1px'], fillInlineStart: '0px' }, + wrappedBottom: { tabBorders: ['0px', '0px'], fillInsets: ['0px', '-1px'], fillInlineStart: '0px' }, }, }); }); diff --git a/src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts b/src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts index fe82b2e8831cd..8db902cebbb3c 100644 --- a/src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts +++ b/src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts @@ -1247,8 +1247,8 @@ suite('MultiEditorTabsControl', () => { }); } assert.deepStrictEqual(measurements, [ - { tabHeight: 'default', stripHeight: 61, wrapping: true, upperRow: false, gap: 0, clippingGap: 0, bottomRadius: '0px', shoulder: '""', tabFillHeights: [28, 28], rowGap: 2, overflow: ['visible', 'visible'], separatorOffset: 0, connectionOverlap: 1 }, - { tabHeight: 'compact', stripHeight: 53, wrapping: true, upperRow: false, gap: 0, clippingGap: 0, bottomRadius: '0px', shoulder: '""', tabFillHeights: [24, 24], rowGap: 2, overflow: ['visible', 'visible'], separatorOffset: 0, connectionOverlap: 1 }, + { tabHeight: 'default', stripHeight: 61, wrapping: true, upperRow: false, gap: 0, clippingGap: 0, bottomRadius: '0px', shoulder: '""', tabFillHeights: [28, 28], rowGap: 2, overflow: ['visible', 'visible'], separatorOffset: 0, connectionOverlap: 0 }, + { tabHeight: 'compact', stripHeight: 53, wrapping: true, upperRow: false, gap: 0, clippingGap: 0, bottomRadius: '0px', shoulder: '""', tabFillHeights: [24, 24], rowGap: 2, overflow: ['visible', 'visible'], separatorOffset: 0, connectionOverlap: 0 }, ]); }); @@ -1635,7 +1635,7 @@ suite('MultiEditorTabsControl', () => { multiSelected: { clipping: '0px', edge: 'block', radius: '0px 5px 0px 0px', connectedClass: true }, singleSelected: { clipping: '0px', connectedClass: true }, terminalOutline: { right: '1px', rightShoulder: '""', rightMask: '""' }, - normalOutline: { left: '1px', right: '1px', leftShoulder: '""', rightShoulder: '""', edge: 'block', overflowEdge: 'none', leftMaskHeight: '4px', leftMaskTop: '0px', rightMaskHeight: '4px', rightMaskTop: '0px' }, + normalOutline: { left: '1px', right: '1px', leftShoulder: '""', rightShoulder: '""', edge: 'block', overflowEdge: 'none', leftMaskHeight: '3px', leftMaskTop: '0px', rightMaskHeight: '3px', rightMaskTop: '0px' }, rightShoulderAtViewport: { edge: true, clipped: false, right: '1px', rightShoulder: '""', rightMask: '""', overflowEdge: 'block' }, rightShoulderRevealed: { edge: false, clipped: false, rightShoulder: '""', rightMask: '""' }, leftShoulderAtViewport: { edge: true, clipped: false, left: '1px', leftShoulder: 'none', leftMask: 'none', overflowEdge: 'none' }, From 176474daf3ce2568fc5a29b6fffdcf9133805a4c Mon Sep 17 00:00:00 2001 From: na2co3 Date: Sat, 3 Oct 2026 10:00:24 +0900 Subject: [PATCH 5/7] Modern UI: Fix connected tab styles after merging main --- .../contrib/modernUI/browser/media/connectedEditorTabs.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/workbench/contrib/modernUI/browser/media/connectedEditorTabs.css b/src/vs/workbench/contrib/modernUI/browser/media/connectedEditorTabs.css index 6bd7f772fc5ba..67a9854d27fe9 100644 --- a/src/vs/workbench/contrib/modernUI/browser/media/connectedEditorTabs.css +++ b/src/vs/workbench/contrib/modernUI/browser/media/connectedEditorTabs.css @@ -243,7 +243,7 @@ .modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench.floating-panels .monaco-grid-view .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.active:not(.connected-tab-upper-row) > .tab-fill, .modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench.floating-panels .monaco-grid-view .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.active:not(.connected-tab-upper-row) > .tab-connected-edge { - bottom: calc(-3 * var(--vscode-strokeThickness)); + bottom: calc(-2 * var(--vscode-strokeThickness)); } .modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench.floating-panels .monaco-grid-view .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.active:not(.connected-tab-upper-row) > .tab-fill, From 5396da3db6d88d0047b8b833a6dfea9681f8b2c3 Mon Sep 17 00:00:00 2001 From: na2co3 Date: Sat, 3 Oct 2026 13:57:06 +0900 Subject: [PATCH 6/7] test: Apply floating-panels class in the connected tabs test The floating-panels class enables the bottom offsets and transforms that define connected tab geometry. --- .../parts/editor/multiEditorTabsControl.test.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts b/src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts index 89ec11a2b83ed..6e47b5acb7c31 100644 --- a/src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts +++ b/src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts @@ -155,7 +155,7 @@ suite('MultiEditorTabsControl', () => { } function connectedGroup(): HTMLElement { - const root = $('.monaco-workbench.modern-ui.modern-ui-tabs.modern-ui-connected-editor-tabs'); + const root = $('.monaco-workbench.modern-ui.modern-ui-tabs.modern-ui-connected-editor-tabs.floating-panels'); root.style.cssText = '--vscode-spacing-size20: 2px; --vscode-spacing-size40: 4px; --vscode-spacing-size60: 6px; --vscode-spacing-size80: 8px; --vscode-spacing-size160: 16px; --vscode-spacing-size200: 20px; --vscode-spacing-size280: 28px; --vscode-strokeThickness: 1px; --vscode-cornerRadius-small: 4px; --vscode-cornerRadius-medium: 6px; --vscode-cornerRadius-large: 8px; --vscode-fontSize-body1: 13px; --vscode-fontWeight-regular: 400;'; mainWindow.document.body.appendChild(root); disposables.add(toDisposable(() => root.remove())); @@ -516,7 +516,7 @@ suite('MultiEditorTabsControl', () => { actionPadding: measurements.every(measurement => new Set(measurement.padding).size === 1 && measurement.padding[0] === multiple.padding[0]), }, { single: { top: true, right: true, left: true, width: true }, - horizontal: { clearance: [[6, 6, 6, 6], [6, 6, 6, 6], [3, 4, 3, 5], [4, 4, 4, 4]] }, + horizontal: { clearance: [[7, 6, 6, 6], [7, 6, 6, 6], [4, 4, 3, 5], [4, 4, 4, 4]] }, leftAction: { top: true, right: true, left: true, width: true }, balancedActionSurface: true, balancedActionInsets: true, @@ -630,7 +630,7 @@ suite('MultiEditorTabsControl', () => { const clearance = trailing - (wrapTabs && activeIndex === 1 ? 1 : 0); expected.push({ tabHeight, tabActionLocation, wrapTabs, activeIndex, - top: clearance, bottom: clearance, trailing, + top: clearance + (!wrapTabs || activeIndex === 1 ? 1 : 0), bottom: clearance, trailing, leftBorder: rowStart && !upperRow ? 'rgba(0, 0, 0, 0)' : undefined, }); } @@ -1111,7 +1111,7 @@ suite('MultiEditorTabsControl', () => { }); expected.push({ ...context, - insets: [upper ? index === 0 ? 2 : 1 : 0, upper ? rowEnd ? 2 : 1 : 0, 0], + insets: [upper ? index === 0 ? 2 : 1 : 0, upper ? rowEnd ? 2 : 1 : 0, active && !upper ? -1 : 0], corners: [topLeftRadius, radius, active && !upper ? '0px' : upper ? '6px' : '4px', roundLeft && !(active && !upper) ? upper ? '6px' : '4px' : '0px'], leftBorder: rowStart ? 'rgba(0, 0, 0, 0)' : undefined, }); @@ -1261,8 +1261,8 @@ suite('MultiEditorTabsControl', () => { }); } assert.deepStrictEqual(measurements, [ - { tabHeight: 'default', stripHeight: 61, wrapping: true, upperRow: false, gap: 0, clippingGap: 0, bottomRadius: '0px', shoulder: '""', shoulderStroke: ['rgb(34, 211, 238)', 'rgb(34, 211, 238)'], shoulderBaselineOffset: 0, tabFillHeights: [28, 28], rowGap: 2, overflow: ['visible', 'visible'], separatorOffset: 0, connectionOverlap: 0 }, - { tabHeight: 'compact', stripHeight: 53, wrapping: true, upperRow: false, gap: 0, clippingGap: 0, bottomRadius: '0px', shoulder: '""', shoulderStroke: ['rgb(34, 211, 238)', 'rgb(34, 211, 238)'], shoulderBaselineOffset: 0, tabFillHeights: [24, 24], rowGap: 2, overflow: ['visible', 'visible'], separatorOffset: 0, connectionOverlap: 0 }, + { tabHeight: 'default', stripHeight: 61, wrapping: true, upperRow: false, gap: 0, clippingGap: 0, bottomRadius: '0px', shoulder: '""', shoulderStroke: ['rgb(34, 211, 238)', 'rgb(34, 211, 238)'], shoulderBaselineOffset: 0, tabFillHeights: [28, 29], rowGap: 1, overflow: ['visible', 'visible'], separatorOffset: 0, connectionOverlap: 0 }, + { tabHeight: 'compact', stripHeight: 53, wrapping: true, upperRow: false, gap: 0, clippingGap: 0, bottomRadius: '0px', shoulder: '""', shoulderStroke: ['rgb(34, 211, 238)', 'rgb(34, 211, 238)'], shoulderBaselineOffset: 0, tabFillHeights: [24, 25], rowGap: 1, overflow: ['visible', 'visible'], separatorOffset: 0, connectionOverlap: 0 }, ]); }); From 4dcc0832f50560a1aa3b272284dafd15290934e5 Mon Sep 17 00:00:00 2001 From: na2co3 Date: Mon, 5 Oct 2026 22:41:54 +0900 Subject: [PATCH 7/7] test: fix failing editor tab bar test --- .../playwright/tests/editorTabBar.spec.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/componentFixtures/playwright/tests/editorTabBar.spec.ts b/test/componentFixtures/playwright/tests/editorTabBar.spec.ts index 9bee3ff63bfe6..43994472c7516 100644 --- a/test/componentFixtures/playwright/tests/editorTabBar.spec.ts +++ b/test/componentFixtures/playwright/tests/editorTabBar.spec.ts @@ -70,7 +70,7 @@ test('Connected defaults do not surface the theme active-top accent', async ({ p structuralBoundary: '#2a2b2c', themeActiveTop: '#3994bc', shoulder: { - bottom: '0px', + bottom: '-1px', height: '7px', radius: '7px', color: 'rgb(42, 43, 44)', @@ -545,11 +545,11 @@ for (const [fixture, expected] of [ separator: 'rgb(34, 211, 238)', indicator: 'block', topAligned: true, - bodyOverlap: 1, + bodyOverlap: 0, frameInsets: [1, 1], shoulderTangents: { - left: ['0px', '7px', '7px', 'rgb(34, 211, 238)'], - right: ['0px', '7px', '7px', 'rgb(34, 211, 238)'], + left: ['-1px', '7px', '7px', 'rgb(34, 211, 238)'], + right: ['-1px', '7px', '7px', 'rgb(34, 211, 238)'], }, visibleDividers: expected.dividers, });