Skip to content
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.

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

Make editor dimming a core workbench feature #236576

Open
Tyriar opened this issue Dec 19, 2024 · 0 comments
Open

Make editor dimming a core workbench feature #236576

Tyriar opened this issue Dec 19, 2024 · 0 comments
Assignees
Labels
feature-request Request for new features or functionality workbench-dim-unfocused Related to the accessibility.dimUnfocused.* feature
Milestone

Comments

@Tyriar
Copy link
Member

Tyriar commented Dec 19, 2024

The dim unfocused feature is currently built using some CSS overrides to accomplish the majority of what users wanted without much work. For example:

if (opacity !== 1) {
// These filter rules are more specific than may be expected as the `filter`
// rule can cause problems if it's used inside the element like on editor hovers
const rules = new Set<string>();
const filterRule = `filter: opacity(${opacity});`;
// Terminal tabs
rules.add(`.monaco-workbench .pane-body.integrated-terminal:not(:focus-within) .tabs-container { ${filterRule} }`);
// Terminals
rules.add(`.monaco-workbench .pane-body.integrated-terminal .terminal-wrapper:not(:focus-within) { ${filterRule} }`);
// Text editors
rules.add(`.monaco-workbench .editor-group-container:not(.active) .monaco-editor { ${filterRule} }`);
// Breadcrumbs
rules.add(`.monaco-workbench .editor-group-container:not(.active) .tabs-breadcrumbs { ${filterRule} }`);
// Terminal editors
rules.add(`.monaco-workbench .editor-group-container:not(.active) .terminal-wrapper { ${filterRule} }`);
// Settings editor
rules.add(`.monaco-workbench .editor-group-container:not(.active) .settings-editor { ${filterRule} }`);
// Keybindings editor
rules.add(`.monaco-workbench .editor-group-container:not(.active) .keybindings-editor { ${filterRule} }`);
// Editor placeholder (error case)
rules.add(`.monaco-workbench .editor-group-container:not(.active) .monaco-editor-pane-placeholder { ${filterRule} }`);
// Welcome editor
rules.add(`.monaco-workbench .editor-group-container:not(.active) .gettingStartedContainer { ${filterRule} }`);
cssTextContent = [...rules].join('\n');
}

Since this relies upon internal CSS classes it's prone to break though. When this feature went through the test phase there were a collection of problems reported, mostly around certain edge cases not working. I'm merging all those issues into this one to track any further development on the feature if we choose to do so:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature-request Request for new features or functionality workbench-dim-unfocused Related to the accessibility.dimUnfocused.* feature
Projects
None yet
Development

No branches or pull requests

1 participant