Merge pull request microsoft#189248 from microsoft/tyriar/fade_unfocused

Implement unfocused view dimming

Author: Tyriar

src/vs/workbench/contrib/accessibility/browser/accessibility.contribution.ts

@@ -29,6 +29,7 @@ import { NotificationFocusedContext } from 'vs/workbench/common/contextkeys';
 import { IAccessibleViewService, AccessibleViewService, IAccessibleContentProvider, IAccessibleViewOptions, AccessibleViewType } from 'vs/workbench/contrib/accessibility/browser/accessibleView';
 import { IHoverService } from 'vs/workbench/services/hover/browser/hover';
 import { alert } from 'vs/base/browser/ui/aria/aria';
+import { UnfocusedViewDimmingContribution } from 'vs/workbench/contrib/accessibility/browser/unfocusedViewDimmingContribution';
 
 registerAccessibilityConfiguration();
 registerSingleton(IAccessibleViewService, AccessibleViewService, InstantiationType.Delayed);
@@ -101,6 +102,7 @@ class EditorAccessibilityHelpContribution extends Disposable {
 
 const workbenchRegistry = Registry.as<IWorkbenchContributionsRegistry>(WorkbenchExtensions.Workbench);
 workbenchRegistry.registerWorkbenchContribution(EditorAccessibilityHelpContribution, LifecyclePhase.Eventually);
+workbenchRegistry.registerWorkbenchContribution(UnfocusedViewDimmingContribution, LifecyclePhase.Restored);
 
 
 

src/vs/workbench/contrib/accessibility/browser/accessibilityContribution.ts

@@ -15,6 +15,10 @@ import { RawContextKey } from 'vs/platform/contextkey/common/contextkey';
 export const accessibilityHelpIsShown = new RawContextKey<boolean>('accessibilityHelpIsShown', false, true);
 export const accessibleViewIsShown = new RawContextKey<boolean>('accessibleViewIsShown', false, true);
 
+export const enum AccessibilitySettingId {
+	UnfocusedViewOpacity = 'accessibility.unfocusedViewOpacity'
+}
+
 export const enum AccessibilityVerbositySettingId {
 	Terminal = 'accessibility.verbosity.terminal',
 	DiffEditor = 'accessibility.verbosity.diffEditor',
@@ -69,6 +73,14 @@ const configuration: IConfigurationNode = {
 		[AccessibilityVerbositySettingId.Notification]: {
 			description: localize('verbosity.notification', 'Provide information about how to open the notification in an accessible view.'),
 			...baseProperty
+		},
+		[AccessibilitySettingId.UnfocusedViewOpacity]: {
+			description: localize('unfocusedViewOpacity', 'The opacity percentage (0.2 to 1.0) to use for unfocused editors and terminals.'),
+			type: 'number',
+			minimum: 0.2,
+			maximum: 1,
+			default: 1,
+			tags: ['accessibility']
 		}
 	}
 };

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

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Event } from 'vs/base/common/event';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
+import { clamp } from 'vs/base/common/numbers';
+import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
+import { IWorkbenchContribution } from 'vs/workbench/common/contributions';
+import { AccessibilitySettingId } from 'vs/workbench/contrib/accessibility/browser/accessibilityContribution';
+
+export class UnfocusedViewDimmingContribution extends Disposable implements IWorkbenchContribution {
+	constructor(
+		@IConfigurationService configurationService: IConfigurationService,
+	) {
+		super();
+
+		const elStyle = document.createElement('style');
+		elStyle.className = 'accessibilityUnfocusedViewOpacity';
+		document.head.appendChild(elStyle);
+		this._register(toDisposable(() => elStyle.remove()));
+
+		this._register(Event.runAndSubscribe(configurationService.onDidChangeConfiguration, e => {
+			if (e && !e.affectsConfiguration(AccessibilitySettingId.UnfocusedViewOpacity)) {
+				return;
+			}
+
+			let opacity: number;
+			const opacityConfig = configurationService.getValue(AccessibilitySettingId.UnfocusedViewOpacity);
+			if (typeof opacityConfig !== 'number') {
+				opacity = 1;
+			} else {
+				opacity = clamp(opacityConfig, 0.2, 1);
+			}
+
+			const rules = new Set<string>();
+			rules.add(`.monaco-workbench .terminal.xterm:not(.focus) { filter: opacity(${opacity}); }`);
+			rules.add(`.monaco-workbench .editor-instance .monaco-editor:not(.focused) { filter: opacity(${opacity}); }`);
+
+			elStyle.textContent = [...rules].join('\n');
+		}));
+	}
+}