From 6aa6260a843dc710ae976d38afa7a3a55b4effe1 Mon Sep 17 00:00:00 2001
From: Joao Moreno <joao.moreno@microsoft.com>
Date: Wed, 24 Mar 2021 16:01:37 +0100
Subject: [PATCH] fixes #118852

---
 src/vs/base/browser/ui/sash/sash.css            | 17 ++++++++++++++++-
 .../contrib/sash/browser/sash.contribution.ts   | 14 +++++++-------
 src/vs/workbench/contrib/sash/browser/sash.ts   |  8 ++++++--
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/vs/base/browser/ui/sash/sash.css b/src/vs/base/browser/ui/sash/sash.css
index 479b956292e..eb0aa0d6b68 100644
--- a/src/vs/base/browser/ui/sash/sash.css
+++ b/src/vs/base/browser/ui/sash/sash.css
@@ -101,11 +101,26 @@
 	right: calc(var(--sash-size) * -1);
 }
 
-.monaco-sash {
+.monaco-sash:before {
+	content: '';
+	pointer-events: none;
+	position: absolute;
+	width: 100%;
+	height: 100%;
 	transition: background-color 0.1s ease-out;
 	background: transparent;
 }
 
+.monaco-sash.vertical:before {
+	width: var(--sash-hover-size);
+	left: calc(50% - (var(--sash-hover-size) / 2));
+}
+
+.monaco-sash.horizontal:before {
+	height: var(--sash-hover-size);
+	top: calc(50% - (var(--sash-hover-size) / 2));
+}
+
 /** Debug **/
 
 .monaco-sash.debug {
diff --git a/src/vs/workbench/contrib/sash/browser/sash.contribution.ts b/src/vs/workbench/contrib/sash/browser/sash.contribution.ts
index 945ac6a2a85..4dffd37f9c1 100644
--- a/src/vs/workbench/contrib/sash/browser/sash.contribution.ts
+++ b/src/vs/workbench/contrib/sash/browser/sash.contribution.ts
@@ -9,7 +9,7 @@ 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 { SashSettingsController, minSize, maxSize } from 'vs/workbench/contrib/sash/browser/sash';
+import { SashSettingsController } 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';
@@ -25,9 +25,9 @@ Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Configuration)
 		properties: {
 			'workbench.sash.size': {
 				type: 'number',
-				default: isIPad ? maxSize : minSize,
-				minimum: minSize,
-				maximum: maxSize,
+				default: isIPad ? 20 : 4,
+				minimum: 1,
+				maximum: 20,
 				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.")
 			},
 			'workbench.sash.hoverDelay': {
@@ -43,9 +43,9 @@ Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Configuration)
 registerThemingParticipant((theme, collector) => {
 	const sashHoverBorderColor = theme.getColor(sashHoverBorder);
 	collector.addRule(`
-		.monaco-sash.hover,
-		.monaco-sash.active {
-			background: ${sashHoverBorderColor}
+		.monaco-sash.hover:before,
+		.monaco-sash.active:before {
+			background: ${sashHoverBorderColor};
 		}
 	`);
 });
diff --git a/src/vs/workbench/contrib/sash/browser/sash.ts b/src/vs/workbench/contrib/sash/browser/sash.ts
index de01f42115b..228e692b1c5 100644
--- a/src/vs/workbench/contrib/sash/browser/sash.ts
+++ b/src/vs/workbench/contrib/sash/browser/sash.ts
@@ -10,7 +10,7 @@ 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 minSize = 1;
 export const maxSize = 20; // see also https://ux.stackexchange.com/questions/39023/what-is-the-optimum-button-size-of-touch-screen-applications
 
 export class SashSettingsController implements IWorkbenchContribution, IDisposable {
@@ -30,8 +30,12 @@ export class SashSettingsController implements IWorkbenchContribution, IDisposab
 	}
 
 	private onDidChangeSize(): void {
-		const size = clamp(this.configurationService.getValue<number>('workbench.sash.size') ?? minSize, minSize, maxSize);
+		const configuredSize = this.configurationService.getValue<number>('workbench.sash.size');
+		const size = clamp(configuredSize, 4, 20);
+		const hoverSize = clamp(configuredSize, 1, 8);
+
 		document.documentElement.style.setProperty('--sash-size', size + 'px');
+		document.documentElement.style.setProperty('--sash-hover-size', hoverSize + 'px');
 		setGlobalSashSize(size);
 	}