Add setting to control the sash size

build/lib/i18n.resources.json

@@ -138,6 +138,10 @@
 			"name": "vs/workbench/contrib/relauncher",
 			"project": "vscode-workbench"
 		},
+		{
+			"name": "vs/workbench/contrib/sash",
+			"project": "vscode-workbench"
+		},
 		{
 			"name": "vs/workbench/contrib/scm",
 			"project": "vscode-workbench"

src/vs/base/browser/ui/sash/sash.css

@@ -13,13 +13,6 @@
 	pointer-events: none;
 }
 
-.monaco-sash.vertical {
-	cursor: ew-resize;
-	top: 0;
-	width: 4px;
-	height: 100%;
-}
-
 .monaco-sash.mac.vertical {
 	cursor: col-resize;
 }
@@ -32,13 +25,6 @@
 	cursor: w-resize;
 }
 
-.monaco-sash.horizontal {
-	cursor: ns-resize;
-	left: 0;
-	width: 100%;
-	height: 4px;
-}
-
 .monaco-sash.mac.horizontal {
 	cursor: row-resize;
 }
@@ -51,52 +37,11 @@
 	cursor: n-resize;
 }
 
-.monaco-sash:not(.disabled).orthogonal-start::before,
-.monaco-sash:not(.disabled).orthogonal-end::after {
-	content: ' ';
-	height: 8px;
-	width: 8px;
-	z-index: 100;
-	display: block;
-	cursor: all-scroll;
-	position: absolute;
-}
-
-.monaco-sash.orthogonal-start.vertical::before {
-	left: -2px;
-	top: -4px;
-}
-
-.monaco-sash.orthogonal-end.vertical::after {
-	left: -2px;
-	bottom: -4px;
-}
-
-.monaco-sash.orthogonal-start.horizontal::before {
-	top: -2px;
-	left: -4px;
-}
-
-.monaco-sash.orthogonal-end.horizontal::after {
-	top: -2px;
-	right: -4px;
-}
-
 .monaco-sash.disabled {
 	cursor: default !important;
 	pointer-events: none !important;
 }
 
-/** Touch **/
-
-.monaco-sash.touch.vertical {
-	width: 20px;
-}
-
-.monaco-sash.touch.horizontal {
-	height: 20px;
-}
-
 /** Debug **/
 
 .monaco-sash.debug {
@@ -110,4 +55,4 @@
 .monaco-sash.debug:not(.disabled).orthogonal-start::before,
 .monaco-sash.debug:not(.disabled).orthogonal-end::after {
 	background: red;
-}
\ No newline at end of file
+}

src/vs/base/browser/ui/sash/sash.ts

@@ -15,6 +15,8 @@ import { getElementsByTagName, EventHelper, createStyleSheet, addDisposableListe
 import { domEvent } from 'vs/base/browser/event';
 
 const DEBUG = false;
+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 interface ISashLayoutProvider { }
 
@@ -56,7 +58,14 @@ export const enum SashState {
 	Enabled
 }
 
+const _onDidChangeSize = new Emitter<number>();
+const onDidChangeSize: Event<number> = _onDidChangeSize.event;
+export function setSashSize(size: number): void {
+	_onDidChangeSize.fire(size);
+}
+
 export class Sash extends Disposable {
+	private static size: number;
 
 	private el: HTMLElement;
 	private layoutProvider: ISashLayoutProvider;
@@ -130,6 +139,7 @@ export class Sash extends Disposable {
 	constructor(container: HTMLElement, layoutProvider: ISashLayoutProvider, options: ISashOptions = {}) {
 		super();
 
+		Sash.size = isIPad ? maxSize : minSize;
 		this.el = append(container, $('.monaco-sash'));
 
 		if (isMacintosh) {
@@ -142,10 +152,10 @@ export class Sash extends Disposable {
 		this._register(Gesture.addTarget(this.el));
 		this._register(domEvent(this.el, EventType.Start)(this.onTouchStart, this));
 
-		if (isIPad) {
-			// see also https://ux.stackexchange.com/questions/39023/what-is-the-optimum-button-size-of-touch-screen-applications
-			addClass(this.el, 'touch');
-		}
+		this._register(onDidChangeSize(size => {
+			Sash.size = size;
+			this.layout();
+		}));
 
 		this.setOrientation(options.orientation || Orientation.VERTICAL);
 
@@ -169,9 +179,7 @@ export class Sash extends Disposable {
 			addClass(this.el, 'vertical');
 		}
 
-		if (this.layoutProvider) {
-			this.layout();
-		}
+		this.layout();
 	}
 
 	private onMouseDown(e: MouseEvent): void {
@@ -331,29 +339,29 @@ export class Sash extends Disposable {
 	}
 
 	layout(): void {
-		const size = isIPad ? 20 : 4;
-
-		if (this.orientation === Orientation.VERTICAL) {
-			const verticalProvider = (<IVerticalSashLayoutProvider>this.layoutProvider);
-			this.el.style.left = verticalProvider.getVerticalSashLeft(this) - (size / 2) + 'px';
+		if (this.layoutProvider) {
+			if (this.orientation === Orientation.VERTICAL) {
+				const verticalProvider = (<IVerticalSashLayoutProvider>this.layoutProvider);
+				this.el.style.left = verticalProvider.getVerticalSashLeft(this) - (Sash.size / 2) + 'px';
 
-			if (verticalProvider.getVerticalSashTop) {
-				this.el.style.top = verticalProvider.getVerticalSashTop(this) + 'px';
-			}
+				if (verticalProvider.getVerticalSashTop) {
+					this.el.style.top = verticalProvider.getVerticalSashTop(this) + 'px';
+				}
 
-			if (verticalProvider.getVerticalSashHeight) {
-				this.el.style.height = verticalProvider.getVerticalSashHeight(this) + 'px';
-			}
-		} else {
-			const horizontalProvider = (<IHorizontalSashLayoutProvider>this.layoutProvider);
-			this.el.style.top = horizontalProvider.getHorizontalSashTop(this) - (size / 2) + 'px';
+				if (verticalProvider.getVerticalSashHeight) {
+					this.el.style.height = verticalProvider.getVerticalSashHeight(this) + 'px';
+				}
+			} else {
+				const horizontalProvider = (<IHorizontalSashLayoutProvider>this.layoutProvider);
+				this.el.style.top = horizontalProvider.getHorizontalSashTop(this) - (Sash.size / 2) + 'px';
 
-			if (horizontalProvider.getHorizontalSashLeft) {
-				this.el.style.left = horizontalProvider.getHorizontalSashLeft(this) + 'px';
-			}
+				if (horizontalProvider.getHorizontalSashLeft) {
+					this.el.style.left = horizontalProvider.getHorizontalSashLeft(this) + 'px';
+				}
 
-			if (horizontalProvider.getHorizontalSashWidth) {
-				this.el.style.width = horizontalProvider.getHorizontalSashWidth(this) + 'px';
+				if (horizontalProvider.getHorizontalSashWidth) {
+					this.el.style.width = horizontalProvider.getHorizontalSashWidth(this) + 'px';
+				}
 			}
 		}
 	}
@@ -384,15 +392,15 @@ export class Sash extends Disposable {
 
 	private getOrthogonalSash(e: MouseEvent): Sash | undefined {
 		if (this.orientation === Orientation.VERTICAL) {
-			if (e.offsetY <= 4) {
+			if (e.offsetY <= Sash.size) {
 				return this.orthogonalStartSash;
-			} else if (e.offsetY >= this.el.clientHeight - 4) {
+			} else if (e.offsetY >= this.el.clientHeight - Sash.size) {
 				return this.orthogonalEndSash;
 			}
 		} else {
-			if (e.offsetX <= 4) {
+			if (e.offsetX <= Sash.size) {
 				return this.orthogonalStartSash;
-			} else if (e.offsetX >= this.el.clientWidth - 4) {
+			} else if (e.offsetX >= this.el.clientWidth - Sash.size) {
 				return this.orthogonalEndSash;
 			}
 		}

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

+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { localize } from 'vs/nls';
+import { minSize, maxSize } from 'vs/base/browser/ui/sash/sash';
+import { IConfigurationRegistry, Extensions as ConfigurationExtensions } from 'vs/platform/configuration/common/configurationRegistry';
+import { LifecyclePhase } from 'vs/platform/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 } from 'vs/workbench/contrib/sash/browser/sash';
+
+// Sash size contribution
+Registry.as<IWorkbenchContributionsRegistry>(WorkbenchExtensions.Workbench)
+	.registerWorkbenchContribution(SashSizeController, LifecyclePhase.Starting);
+
+// Sash size configuration contribution
+Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Configuration)
+	.registerConfiguration({
+		...workbenchConfigurationNodeBase,
+		'properties': {
+			'workbench.sash.size': {
+				'type': 'number',
+				'default': minSize,
+				'minimum': minSize,
+				'maximum': maxSize,
+				'description': localize('sashSize', "Controls the size of the sash.")
+			},
+		}
+	});

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

+/*---------------------------------------------------------------------------------------------
+ *  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 { createStyleSheet } from 'vs/base/browser/dom';
+import { setSashSize, minSize, maxSize } from 'vs/base/browser/ui/sash/sash';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
+import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
+import { IWorkbenchContribution } from 'vs/workbench/common/contributions';
+import { isIPad } from 'vs/base/browser/browser';
+
+export class SashSizeController extends Disposable implements IWorkbenchContribution {
+	private readonly configurationName = 'workbench.sash.size';
+	private stylesheet: HTMLStyleElement;
+
+	constructor(
+		@IConfigurationService private readonly configurationService: IConfigurationService
+	) {
+		super();
+
+		this.stylesheet = createStyleSheet();
+		this._register(toDisposable(() => this.stylesheet.parentElement!.removeChild(this.stylesheet)));
+
+		const onDidChangeSizeConfiguration = Event.filter(configurationService.onDidChangeConfiguration, e => e.affectsConfiguration(this.configurationName));
+		this._register(onDidChangeSizeConfiguration(this.onDidChangeSizeConfiguration, this));
+		this.onDidChangeSizeConfiguration();
+	}
+
+	private onDidChangeSizeConfiguration(): void {
+		const size = this.configurationService.getValue<number>(this.configurationName);
+
+		if (!isIPad && size && size >= minSize && size <= maxSize) {
+			// Update styles
+			const styles: string[] = [];
+			styles.push(`.monaco-sash.vertical { cursor: ew-resize; top: 0; width: ${size}px; height: 100%; }`);
+			styles.push(`.monaco-sash.horizontal { cursor: ns-resize; left: 0; width: 100%; height: ${size}px; }`);
+			styles.push(`.monaco-sash:not(.disabled).orthogonal-start::before, .monaco-sash:not(.disabled).orthogonal-end::after { content: ' '; height: ${size * 2}px; width: ${size * 2}px; z-index: 100; display: block; cursor: all-scroll; position: absolute; }`);
+			styles.push(`.monaco-sash.orthogonal-start.vertical::before { left: -${size / 2}px; top: -${size}px; }`);
+			styles.push(`.monaco-sash.orthogonal-end.vertical::after { left: -${size / 2}px; bottom: -${size}px; }`);
+			styles.push(`.monaco-sash.orthogonal-start.horizontal::before { top: -${size / 2}px; left: -${size}px; }`);
+			styles.push(`.monaco-sash.orthogonal-end.horizontal::after { top: -${size / 2}px; right: -${size}px; }`);
+
+			this.stylesheet.innerHTML = styles.join('\n');
+
+			// Update behavor
+			setSashSize(size);
+		}
+	}
+}

src/vs/workbench/workbench.common.main.ts

@@ -166,6 +166,9 @@ import 'vs/workbench/contrib/search/browser/searchView';
 // Search Editor
 import 'vs/workbench/contrib/searchEditor/browser/searchEditor.contribution';
 
+// Sash
+import 'vs/workbench/contrib/sash/browser/sash.contribution';
+
 // SCM
 import 'vs/workbench/contrib/scm/browser/scm.contribution';
 import 'vs/workbench/contrib/scm/browser/scmViewlet';