Merge pull request #191642 from microsoft/tyriar/dim_editors

Action feedback on dim unfocused view feature
microsoft · Aug 29, 2023 · 93ac91a · 93ac91a
2 parents bf0dc4d + 64f1488
commit 93ac91a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git a/src/vs/workbench/contrib/accessibility/browser/accessibilityConfiguration.ts b/src/vs/workbench/contrib/accessibility/browser/accessibilityConfiguration.ts
@@ -21,8 +21,8 @@ export const accessibleViewCurrentProviderId = new RawContextKey<string>('access
  * were better to live under workbench for discoverability.
  */
 export const enum AccessibilityWorkbenchSettingId {
-	ViewDimUnfocusedEnabled = 'workbench.view.dimUnfocused.enabled',
-	ViewDimUnfocusedOpacity = 'workbench.view.dimUnfocused.opacity'
+	DimUnfocusedEnabled = 'accessibility.dimUnfocused.enabled',
+	DimUnfocusedOpacity = 'accessibility.dimUnfocused.opacity'
 }
 
 export const enum ViewDimUnfocusedOpacityProperties {
@@ -120,15 +120,15 @@ export function registerAccessibilityConfiguration() {
 	registry.registerConfiguration({
 		...workbenchConfigurationNodeBase,
 		properties: {
-			[AccessibilityWorkbenchSettingId.ViewDimUnfocusedEnabled]: {
-				description: localize('dimUnfocusedEnabled', 'Whether to dim unfocused editors and terminals, making the focused view more obvious.'),
+			[AccessibilityWorkbenchSettingId.DimUnfocusedEnabled]: {
+				description: localize('dimUnfocusedEnabled', 'Whether to dim unfocused editors and terminals, which makes it more clear where typed input will go to. This works with the majority of editors with the notable exceptions of those that utilize iframes like notebooks and extension webview editors.'),
 				type: 'boolean',
 				default: false,
 				tags: ['accessibility'],
 				scope: ConfigurationScope.APPLICATION,
 			},
-			[AccessibilityWorkbenchSettingId.ViewDimUnfocusedOpacity]: {
-				description: localize('dimUnfocusedOpacity', 'The opacity fraction (0.2 to 1.0) to use for unfocused editors and terminals. This will only take effect when {0} is enabled.', `\`#${AccessibilityWorkbenchSettingId.ViewDimUnfocusedEnabled}#\``),
+			[AccessibilityWorkbenchSettingId.DimUnfocusedOpacity]: {
+				description: localize('dimUnfocusedOpacity', 'The opacity fraction (0.2 to 1.0) to use for unfocused editors and terminals. This will only take effect when {0} is enabled.', `\`#${AccessibilityWorkbenchSettingId.DimUnfocusedEnabled}#\``),
 				type: 'number',
 				minimum: ViewDimUnfocusedOpacityProperties.Minimum,
 				maximum: ViewDimUnfocusedOpacityProperties.Maximum,

diff --git a/src/vs/workbench/contrib/accessibility/browser/unfocusedViewDimmingContribution.ts b/src/vs/workbench/contrib/accessibility/browser/unfocusedViewDimmingContribution.ts
@@ -21,31 +21,43 @@ export class UnfocusedViewDimmingContribution extends Disposable implements IWor
 		this._register(toDisposable(() => this._removeStyleElement()));
 
 		this._register(Event.runAndSubscribe(configurationService.onDidChangeConfiguration, e => {
-			if (e && !e.affectsConfiguration(AccessibilityWorkbenchSettingId.ViewDimUnfocusedEnabled) && !e.affectsConfiguration(AccessibilityWorkbenchSettingId.ViewDimUnfocusedOpacity)) {
+			if (e && !e.affectsConfiguration(AccessibilityWorkbenchSettingId.DimUnfocusedEnabled) && !e.affectsConfiguration(AccessibilityWorkbenchSettingId.DimUnfocusedOpacity)) {
 				return;
 			}
 
 			let cssTextContent = '';
 
-			const enabled = ensureBoolean(configurationService.getValue(AccessibilityWorkbenchSettingId.ViewDimUnfocusedEnabled), false);
+			const enabled = ensureBoolean(configurationService.getValue(AccessibilityWorkbenchSettingId.DimUnfocusedEnabled), false);
 			if (enabled) {
 				const opacity = clamp(
-					ensureNumber(configurationService.getValue(AccessibilityWorkbenchSettingId.ViewDimUnfocusedOpacity), ViewDimUnfocusedOpacityProperties.Default),
+					ensureNumber(configurationService.getValue(AccessibilityWorkbenchSettingId.DimUnfocusedOpacity), ViewDimUnfocusedOpacityProperties.Default),
 					ViewDimUnfocusedOpacityProperties.Minimum,
 					ViewDimUnfocusedOpacityProperties.Maximum
 				);
 
 				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-instance:not(:focus-within) .monaco-editor { ${filterRule} }`);
+					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-instance:not(:focus-within) .terminal-wrapper { ${filterRule} }`);
+					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');
 				}