Update tab actions visibility logic for active tabs in Modern UI

Author: mrleemurray

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;
 }
 

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' },
 		});
 	});