diff --git a/src/vs/workbench/contrib/modernUI/browser/media/tabs.css b/src/vs/workbench/contrib/modernUI/browser/media/tabs.css index e8bad7c5910f0b..e76994b4a1931e 100644 --- a/src/vs/workbench/contrib/modernUI/browser/media/tabs.css +++ b/src/vs/workbench/contrib/modernUI/browser/media/tabs.css @@ -528,17 +528,16 @@ opacity: 1; } -/* When the reserved action column is always present, keep the action visible and clickable so - * the column never reads as a blank gap (https://github.com/microsoft/vscode/issues/329605). */ -.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tab-actions-reserve-space .tabs-container > .tab:not(.sticky-compact):not(.close-action-off) > .tab-actions { +/* Keep the reserved action visible and clickable on the active tab. */ +.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tab-actions-reserve-space .tabs-container > .tab.active:not(.sticky-compact):not(.close-action-off) > .tab-actions { pointer-events: auto; } -.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container.active > .title.tab-actions-reserve-space .tabs-container > .tab:not(.sticky-compact):not(.close-action-off) > .tab-actions .action-label { +.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container.active > .title.tab-actions-reserve-space .tabs-container > .tab.active:not(.sticky-compact):not(.close-action-off) > .tab-actions .action-label { opacity: 1; } -.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container:not(.active) > .title.tab-actions-reserve-space .tabs-container > .tab:not(.sticky-compact):not(.close-action-off):not(:hover) > .tab-actions .action-label:not(:focus) { +.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container:not(.active) > .title.tab-actions-reserve-space .tabs-container > .tab.active:not(.sticky-compact):not(.close-action-off):not(:hover) > .tab-actions .action-label:not(:focus) { opacity: 0.5; } 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 2e1c4c74e3f9ed..416ded00c8f97a 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 @@ -760,32 +760,35 @@ suite('ModernUIContribution', () => { }); }); - test('persists tab actions when action space is reserved', () => { + test('shows reserved tab actions only for active tabs', () => { const root = document.createElement('div'); root.className = 'monaco-workbench modern-ui-tabs'; document.body.appendChild(root); store.add(toDisposable(() => root.remove())); const content = appendElement(appendElement(root, 'part editor'), 'content'); - const createTab = (groupClassName: string, titleClassName: string): HTMLElement => { + const createTab = (groupClassName: string, titleClassName: string, tabClassName: string): HTMLElement => { const title = appendElement(appendElement(content, groupClassName), titleClassName); - const tab = appendElement(appendElement(title, 'tabs-container'), 'tab'); + const tab = appendElement(appendElement(title, 'tabs-container'), tabClassName); return appendElement(appendElement(tab, 'tab-actions'), 'action-label'); }; - const reservedActive = createTab('editor-group-container active', 'title tab-actions-reserve-space'); - const reservedInactiveGroup = createTab('editor-group-container', 'title tab-actions-reserve-space'); - const transientActive = createTab('editor-group-container active', 'title'); + const reservedActive = createTab('editor-group-container active', 'title tab-actions-reserve-space', 'tab active'); + const reservedInactive = createTab('editor-group-container active', 'title tab-actions-reserve-space', 'tab'); + const reservedActiveInInactiveGroup = createTab('editor-group-container', 'title tab-actions-reserve-space', 'tab active'); + const reservedInactiveInInactiveGroup = createTab('editor-group-container', 'title tab-actions-reserve-space', 'tab'); const targetWindow = getWindow(root); assert.deepStrictEqual({ reservedActive: { opacity: targetWindow.getComputedStyle(reservedActive).opacity, pointerEvents: targetWindow.getComputedStyle(reservedActive.parentElement!).pointerEvents }, - reservedInactiveGroup: { opacity: targetWindow.getComputedStyle(reservedInactiveGroup).opacity, pointerEvents: targetWindow.getComputedStyle(reservedInactiveGroup.parentElement!).pointerEvents }, - transientActive: { opacity: targetWindow.getComputedStyle(transientActive).opacity, pointerEvents: targetWindow.getComputedStyle(transientActive.parentElement!).pointerEvents }, + reservedInactive: { opacity: targetWindow.getComputedStyle(reservedInactive).opacity, pointerEvents: targetWindow.getComputedStyle(reservedInactive.parentElement!).pointerEvents }, + reservedActiveInInactiveGroup: { opacity: targetWindow.getComputedStyle(reservedActiveInInactiveGroup).opacity, pointerEvents: targetWindow.getComputedStyle(reservedActiveInInactiveGroup.parentElement!).pointerEvents }, + reservedInactiveInInactiveGroup: { opacity: targetWindow.getComputedStyle(reservedInactiveInInactiveGroup).opacity, pointerEvents: targetWindow.getComputedStyle(reservedInactiveInInactiveGroup.parentElement!).pointerEvents }, }, { reservedActive: { opacity: '1', pointerEvents: 'auto' }, - reservedInactiveGroup: { opacity: '0.5', pointerEvents: 'auto' }, - transientActive: { opacity: '0', pointerEvents: 'none' }, + reservedInactive: { opacity: '0', pointerEvents: 'none' }, + reservedActiveInInactiveGroup: { opacity: '0.5', pointerEvents: 'auto' }, + reservedInactiveInInactiveGroup: { opacity: '0', pointerEvents: 'none' }, }); });