From 2d47752d6b2b0f331eeb8fc09e6ffd28db62d344 Mon Sep 17 00:00:00 2001
From: Benjamin Christopher Simmonds
 <44439583+benibenj@users.noreply.github.com>
Date: Wed, 11 Dec 2024 16:47:43 +0100
Subject: [PATCH] Enhance drop feedback for empty panel (#235834)

fix #99052
---
 .../browser/parts/media/paneCompositePart.css | 10 +++++---
 .../browser/parts/paneCompositePart.ts        | 24 +++++++++++++++----
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/vs/workbench/browser/parts/media/paneCompositePart.css b/src/vs/workbench/browser/parts/media/paneCompositePart.css
index 854c02e6bd5..a57bdd617ce 100644
--- a/src/vs/workbench/browser/parts/media/paneCompositePart.css
+++ b/src/vs/workbench/browser/parts/media/paneCompositePart.css
@@ -20,17 +20,21 @@
 	display: none;
 }
 
+.monaco-workbench .pane-composite-part.empty > .title.has-composite-bar > .title-label {
+	border-bottom: none !important;
+}
+
 .monaco-workbench .pane-composite-part > .header-or-footer {
 	padding-left: 4px;
 	padding-right: 4px;
 	background-color: var(--vscode-activityBarTop-background);
 }
 
-.monaco-workbench .pane-composite-part > .header {
+.monaco-workbench .pane-composite-part:not(.empty) > .header {
 	border-bottom: 1px solid var(--vscode-sideBarActivityBarTop-border);
 }
 
-.monaco-workbench .pane-composite-part > .footer {
+.monaco-workbench .pane-composite-part:not(.empty) > .footer {
 	border-top: 1px solid var(--vscode-sideBarActivityBarTop-border);
 }
 
@@ -325,7 +329,7 @@
 	width: 100%;
 }
 
-.monaco-workbench .pane-composite-part .empty-pane-message-area.visible {
+.monaco-workbench .pane-composite-part.empty .empty-pane-message-area {
 	display: flex;
 	align-items: center;
 	align-content: center;
diff --git a/src/vs/workbench/browser/parts/paneCompositePart.ts b/src/vs/workbench/browser/parts/paneCompositePart.ts
index cfad7c02b95..c8780871219 100644
--- a/src/vs/workbench/browser/parts/paneCompositePart.ts
+++ b/src/vs/workbench/browser/parts/paneCompositePart.ts
@@ -275,6 +275,20 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
 		this.emptyPaneMessageElement.appendChild(messageElement);
 		parent.appendChild(this.emptyPaneMessageElement);
 
+		const setDropBackgroundFeedback = (visible: boolean) => {
+			const updateActivityBarBackground = !this.getActiveComposite() || !visible;
+			const backgroundColor = visible ? this.theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND)?.toString() || '' : '';
+
+			if (this.titleContainer && updateActivityBarBackground) {
+				this.titleContainer.style.backgroundColor = backgroundColor;
+			}
+			if (this.headerFooterCompositeBarContainer && updateActivityBarBackground) {
+				this.headerFooterCompositeBarContainer.style.backgroundColor = backgroundColor;
+			}
+
+			this.emptyPaneMessageElement!.style.backgroundColor = backgroundColor;
+		};
+
 		this._register(CompositeDragAndDropObserver.INSTANCE.registerTarget(this.element, {
 			onDragOver: (e) => {
 				EventHelper.stop(e.eventData, true);
@@ -287,20 +301,20 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
 				EventHelper.stop(e.eventData, true);
 				if (this.paneCompositeBar.value) {
 					const validDropTarget = this.paneCompositeBar.value.dndHandler.onDragEnter(e.dragAndDropData, undefined, e.eventData);
-					this.emptyPaneMessageElement!.style.backgroundColor = validDropTarget ? this.theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND)?.toString() || '' : '';
+					setDropBackgroundFeedback(validDropTarget);
 				}
 			},
 			onDragLeave: (e) => {
 				EventHelper.stop(e.eventData, true);
-				this.emptyPaneMessageElement!.style.backgroundColor = '';
+				setDropBackgroundFeedback(false);
 			},
 			onDragEnd: (e) => {
 				EventHelper.stop(e.eventData, true);
-				this.emptyPaneMessageElement!.style.backgroundColor = '';
+				setDropBackgroundFeedback(false);
 			},
 			onDrop: (e) => {
 				EventHelper.stop(e.eventData, true);
-				this.emptyPaneMessageElement!.style.backgroundColor = '';
+				setDropBackgroundFeedback(false);
 				if (this.paneCompositeBar.value) {
 					this.paneCompositeBar.value.dndHandler.drop(e.dragAndDropData, undefined, e.eventData);
 				} else {
@@ -596,7 +610,7 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
 
 	private layoutEmptyMessage(): void {
 		const visible = !this.getActiveComposite();
-		this.emptyPaneMessageElement?.classList.toggle('visible', visible);
+		this.element.classList.toggle('empty', visible);
 		if (visible) {
 			this.titleLabel?.updateTitle('', '');
 		}