Skip to content

Update tab actions visibility for active tabs in Modern UI #331629

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

Closed
Lee Murray (mrleemurray) wants to merge 1 commit into from
+17 −15
Closed

Update tab actions visibility for active tabs in Modern UI #331629

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 4 additions & 5 deletions src/vs/workbench/contrib/modernUI/browser/media/tabs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
23 changes: 13 additions & 10 deletions src/vs/workbench/contrib/modernUI/test/browser/modernUI.contribution.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
});
});

Expand Down
Loading