💄 sash

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

@@ -9,26 +9,26 @@ import { LifecyclePhase } from 'vs/workbench/services/lifecycle/common/lifecycle
 import { Registry } from 'vs/platform/registry/common/platform';
 import { workbenchConfigurationNodeBase } from 'vs/workbench/common/configuration';
 import { IWorkbenchContributionsRegistry, Extensions as WorkbenchExtensions } from 'vs/workbench/common/contributions';
-import { SashSizeController, minSize, maxSize } from 'vs/workbench/contrib/sash/browser/sash';
+import { SashSettingsController, minSize, maxSize } from 'vs/workbench/contrib/sash/browser/sash';
 import { isIPad } from 'vs/base/browser/browser';
 import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { sashHoverBorder } from 'vs/platform/theme/common/colorRegistry';
 
 // Sash size contribution
 Registry.as<IWorkbenchContributionsRegistry>(WorkbenchExtensions.Workbench)
-	.registerWorkbenchContribution(SashSizeController, LifecyclePhase.Restored);
+	.registerWorkbenchContribution(SashSettingsController, LifecyclePhase.Restored);
 
 // Sash size configuration contribution
 Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Configuration)
 	.registerConfiguration({
 		...workbenchConfigurationNodeBase,
-		'properties': {
+		properties: {
 			'workbench.sash.size': {
-				'type': 'number',
-				'default': isIPad ? maxSize : minSize,
-				'minimum': minSize,
-				'maximum': maxSize,
-				'description': localize('sashSize', "Controls the feedback area size in pixels of the dragging area in between views/editors. Set it to a larger value if you feel it's hard to resize views using the mouse.")
+				type: 'number',
+				default: isIPad ? maxSize : minSize,
+				minimum: minSize,
+				maximum: maxSize,
+				description: localize('sashSize', "Controls the feedback area size in pixels of the dragging area in between views/editors. Set it to a larger value if you feel it's hard to resize views using the mouse.")
 			},
 		}
 	});

src/vs/workbench/contrib/sash/browser/sash.ts

@@ -4,39 +4,34 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { clamp } from 'vs/base/common/numbers';
-import { createStyleSheet } from 'vs/base/browser/dom';
 import { setGlobalSashSize } from 'vs/base/browser/ui/sash/sash';
 import { Event } from 'vs/base/common/event';
-import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
+import { DisposableStore, IDisposable } from 'vs/base/common/lifecycle';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { IWorkbenchContribution } from 'vs/workbench/common/contributions';
 
 export const minSize = 4;
 export const maxSize = 20; // see also https://ux.stackexchange.com/questions/39023/what-is-the-optimum-button-size-of-touch-screen-applications
 
-export class SashSizeController extends Disposable implements IWorkbenchContribution {
-	private readonly configurationName = 'workbench.sash.size';
-	private stylesheet: HTMLStyleElement;
+export class SashSettingsController implements IWorkbenchContribution, IDisposable {
+
+	private readonly disposables = new DisposableStore();
 
 	constructor(
 		@IConfigurationService private readonly configurationService: IConfigurationService
 	) {
-		super();
-
-		this.stylesheet = createStyleSheet();
-		this._register(toDisposable(() => this.stylesheet.remove()));
-
-		const onDidChangeSizeConfiguration = Event.filter(configurationService.onDidChangeConfiguration, e => e.affectsConfiguration(this.configurationName));
-		this._register(onDidChangeSizeConfiguration(this.onDidChangeSizeConfiguration, this));
+		const onDidChangeSizeConfiguration = Event.filter(configurationService.onDidChangeConfiguration, e => e.affectsConfiguration('workbench.sash.size'));
+		onDidChangeSizeConfiguration(this.onDidChangeSizeConfiguration, this, this.disposables);
 		this.onDidChangeSizeConfiguration();
 	}
 
 	private onDidChangeSizeConfiguration(): void {
-		const size = clamp(this.configurationService.getValue<number>(this.configurationName) ?? minSize, minSize, maxSize);
-
+		const size = clamp(this.configurationService.getValue<number>('workbench.sash.size') ?? minSize, minSize, maxSize);
 		document.documentElement.style.setProperty('--sash-size', size + 'px');
-
-		// Update behavor
 		setGlobalSashSize(size);
 	}
+
+	dispose(): void {
+		this.disposables.dispose();
+	}
 }