Skip to content

Make editor dimming a core workbench feature #236576

Open
@Tyriar

Description

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:

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

Labels

feature-requestRequest for new features or functionalityworkbench-dim-unfocusedRelated to the accessibility.dimUnfocused.* feature

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions