Editor dimming should be a core workbench feature

[bpasero]

It looks like today the editor dimming is done from the outside via explicit knowledge of CSS selectors which is prone to breaking easily. Every new editor would have to be adopted here. This should rather be an option that every editor has to support built-in and then this CSS patching should go away.

Refs:

vscode/src/vs/workbench/contrib/accessibility/browser/unfocusedViewDimmingContribution.ts

Lines 38 to 62 in 35be9bf

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

//cc @jrieken

[jrieken]

Could this be implemented on the level of workbench parts? I believe there is a pretty good abstraction for those and dimming could be a click-through (pointer-events: none) overlay on top of inactive parts

[Tyriar]

It was much simpler initially but it turns out that using filter on an editor instance can impact the contents like the hover's position.

@jrieken interesting idea, right now the only workbench part that is dimmed is the terminal by design. This could be a nice solution to the iframe and above hover position problem though 👍

[Tyriar]

Merging into #236576

/duplicate

[vs-code-engineering]

Thanks for creating this issue! We figured it's covering the same as another one we already have. Thus, we closed this one as a duplicate. You can search for similar existing issues. See also our issue reporting guidelines.

Happy Coding!