Merge pull request #191642 from microsoft/tyriar/dim_editors

Action feedback on dim unfocused view feature
This commit is contained in:
Daniel Imms 2023-08-29 12:16:17 -07:00 committed by GitHub
commit 93ac91a8c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 11 deletions

View file

@ -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,

View file

@ -21,21 +21,23 @@ 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
@ -43,9 +45,19 @@ export class UnfocusedViewDimmingContribution extends Disposable implements IWor
// 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');
}