fixes #97007

src/vs/workbench/browser/parts/compositeBar.ts

@@ -41,7 +41,7 @@ export class CompositeDragAndDrop implements ICompositeDragAndDrop {
 		private moveComposite: (from: string, to: string, before?: Before2D) => void,
 	) { }
 
-	drop(data: CompositeDragAndDropData, targetCompositeId: string, originalEvent: DragEvent, before?: Before2D): void {
+	drop(data: CompositeDragAndDropData, targetCompositeId: string | undefined, originalEvent: DragEvent, before?: Before2D): void {
 		const dragData = data.getData();
 
 		if (dragData.type === 'composite') {
@@ -50,7 +50,9 @@ export class CompositeDragAndDrop implements ICompositeDragAndDrop {
 
 			// ... on the same composite bar
 			if (currentLocation === this.targetContainerLocation) {
-				this.moveComposite(dragData.id, targetCompositeId, before);
+				if (targetCompositeId) {
+					this.moveComposite(dragData.id, targetCompositeId, before);
+				}
 			}
 			// ... on a different composite bar
 			else {
@@ -60,7 +62,10 @@ export class CompositeDragAndDrop implements ICompositeDragAndDrop {
 				}
 
 				this.viewDescriptorService.moveViewContainerToLocation(currentContainer, this.targetContainerLocation);
-				this.moveComposite(currentContainer.id, targetCompositeId, before);
+
+				if (targetCompositeId) {
+					this.moveComposite(currentContainer.id, targetCompositeId, before);
+				}
 
 				this.openComposite(currentContainer.id, true);
 			}
@@ -74,7 +79,9 @@ export class CompositeDragAndDrop implements ICompositeDragAndDrop {
 
 				const newContainer = this.viewDescriptorService.getViewContainerByViewId(viewToMove.id)!;
 
-				this.moveComposite(newContainer.id, targetCompositeId, before);
+				if (targetCompositeId) {
+					this.moveComposite(newContainer.id, targetCompositeId, before);
+				}
 
 				this.openComposite(newContainer.id, true).then(composite => {
 					if (composite) {
@@ -530,7 +537,7 @@ export class CompositeBar extends Widget implements ICompositeBar {
 		});
 
 		// Add overflow action as needed
-		if ((visibleCompositesChange && overflows) || compositeSwitcherBar.length() === 0) {
+		if ((visibleCompositesChange && overflows)) {
 			this.compositeOverflowAction = this.instantiationService.createInstance(CompositeOverflowActivityAction, () => {
 				if (this.compositeOverflowActionViewItem) {
 					this.compositeOverflowActionViewItem.showMenu();

src/vs/workbench/browser/parts/panel/media/panelpart.css

@@ -62,6 +62,22 @@
 
 }
 
+.monaco-workbench .part.panel .empty-panel-message-area {
+	position: absolute;
+	display: none;
+	top: 0px;
+	height: 100%;
+	width: 100%;
+	z-index: 10;
+}
+
+.monaco-workbench .part.panel .empty-panel-message-area.visible {
+	display: flex;
+	align-items: center;
+	align-content: center;
+	justify-content: center;
+}
+
 .monaco-workbench .part.panel > .composite.title > .composite-bar-excess {
 	width: 100px;
 }

src/vs/workbench/browser/parts/panel/panelPart.ts

@@ -20,13 +20,13 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { ClosePanelAction, PanelActivityAction, ToggleMaximizedPanelAction, TogglePanelAction, PlaceHolderPanelActivityAction, PlaceHolderToggleCompositePinnedAction, PositionPanelActionConfigs, SetPanelPositionAction } from 'vs/workbench/browser/parts/panel/panelActions';
 import { IThemeService, registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
-import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_DRAG_AND_DROP_BACKGROUND, PANEL_INPUT_BORDER } from 'vs/workbench/common/theme';
+import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_DRAG_AND_DROP_BACKGROUND, PANEL_INPUT_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme';
 import { activeContrastBorder, focusBorder, contrastBorder, editorBackground, badgeBackground, badgeForeground } from 'vs/platform/theme/common/colorRegistry';
 import { CompositeBar, ICompositeBarItem, CompositeDragAndDrop } from 'vs/workbench/browser/parts/compositeBar';
 import { ToggleCompositePinnedAction } from 'vs/workbench/browser/parts/compositeBarActions';
 import { IBadge } from 'vs/workbench/services/activity/common/activity';
 import { INotificationService } from 'vs/platform/notification/common/notification';
-import { Dimension, trackFocus } from 'vs/base/browser/dom';
+import { Dimension, trackFocus, addClass, toggleClass, EventHelper } from 'vs/base/browser/dom';
 import { localize } from 'vs/nls';
 import { IDisposable, DisposableStore } from 'vs/base/common/lifecycle';
 import { IContextKey, IContextKeyService, ContextKeyExpr } from 'vs/platform/contextkey/common/contextkey';
@@ -38,7 +38,7 @@ import { MenuId } from 'vs/platform/actions/common/actions';
 import { ViewMenuActions } from 'vs/workbench/browser/parts/views/viewMenuActions';
 import { IPaneComposite } from 'vs/workbench/common/panecomposite';
 import { IStorageKeysSyncRegistryService } from 'vs/platform/userDataSync/common/storageKeys';
-import { Before2D } from 'vs/workbench/browser/dnd';
+import { Before2D, CompositeDragAndDropObserver, ICompositeDragAndDrop } from 'vs/workbench/browser/dnd';
 import { IActivity } from 'vs/workbench/common/activity';
 
 interface ICachedPanel {
@@ -96,6 +96,8 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 
 	private panelRegistry: PanelRegistry;
 
+	private dndHandler: ICompositeDragAndDrop;
+
 	constructor(
 		@INotificationService notificationService: INotificationService,
 		@IStorageService storageService: IStorageService,
@@ -132,6 +134,11 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 		this.panelRegistry = Registry.as<PanelRegistry>(PanelExtensions.Panels);
 		storageKeysSyncRegistryService.registerStorageKey({ key: PanelPart.PINNED_PANELS, version: 1 });
 
+		this.dndHandler = new CompositeDragAndDrop(this.viewDescriptorService, ViewContainerLocation.Panel,
+			(id: string, focus?: boolean) => (this.openPanel(id, focus) as Promise<IPaneComposite | undefined>).then(panel => panel || null),
+			(from: string, to: string, before?: Before2D) => this.compositeBar.move(from, to, before?.horizontallyBefore)
+		);
+
 		this.compositeBar = this._register(this.instantiationService.createInstance(CompositeBar, this.getCachedPanels(), {
 			icon: false,
 			orientation: ActionsOrientation.HORIZONTAL,
@@ -149,10 +156,7 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 			getContextMenuActionsForComposite: (compositeId: string) => this.getContextMenuActionsForComposite(compositeId) as Action[],
 			getDefaultCompositeId: () => this.panelRegistry.getDefaultPanelId(),
 			hidePart: () => this.layoutService.setPanelHidden(true),
-			dndHandler: new CompositeDragAndDrop(this.viewDescriptorService, ViewContainerLocation.Panel,
-				(id: string, focus?: boolean) => (this.openPanel(id, focus) as Promise<IPaneComposite | undefined>).then(panel => panel || null),
-				(from: string, to: string, before?: Before2D) => this.compositeBar.move(from, to, before?.horizontallyBefore)
-			),
+			dndHandler: this.dndHandler,
 			compositeSize: 0,
 			overflowActionSize: 44,
 			colors: (theme: IColorTheme) => ({
@@ -192,7 +196,7 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 		for (const panel of panels) {
 			const cachedPanel = this.getCachedPanels().filter(({ id }) => id === panel.id)[0];
 			const activePanel = this.getActivePanel();
-			const isActive = activePanel?.getId() === panel.id;
+			const isActive = activePanel?.getId() === panel.id || (!activePanel && this.getLastActivePanelId() === panel.id);
 
 			if (isActive || !this.shouldBeHidden(panel.id, cachedPanel)) {
 				this.compositeBar.addComposite(panel);
@@ -203,6 +207,10 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 				}
 
 				if (isActive) {
+					if (!activePanel) {
+						this.doOpenPanel(panel.id);
+					}
+
 					this.compositeBar.activateComposite(panel.id);
 				}
 			}
@@ -352,6 +360,7 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 		}
 
 		this.layoutCompositeBar(); // Need to relayout composite bar since different panels have different action bar width
+		this.layoutEmptyMessage();
 	}
 
 	private onPanelClose(panel: IPanel): void {
@@ -362,6 +371,7 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 		}
 
 		this.compositeBar.deactivateComposite(panel.getId());
+		this.layoutEmptyMessage();
 	}
 
 	create(parent: HTMLElement): void {
@@ -369,11 +379,51 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 
 		super.create(parent);
 
+		this.createEmptyPanelMessage();
+
 		const focusTracker = this._register(trackFocus(parent));
 		this._register(focusTracker.onDidFocus(() => this.panelFocusContextKey.set(true)));
 		this._register(focusTracker.onDidBlur(() => this.panelFocusContextKey.set(false)));
 	}
 
+	private createEmptyPanelMessage(): void {
+		this.emptyPanelMessageElement = document.createElement('div');
+		addClass(this.emptyPanelMessageElement, 'empty-panel-message-area');
+
+		const messageElement = document.createElement('div');
+		addClass(messageElement, 'empty-panel-message');
+		messageElement.innerText = localize('panel.emptyMessage', "No panels to display. Drag a view into the panel.");
+
+		this.emptyPanelMessageElement.appendChild(messageElement);
+		this.element.appendChild(this.emptyPanelMessageElement);
+
+		this._register(CompositeDragAndDropObserver.INSTANCE.registerTarget(this.emptyPanelMessageElement, {
+			onDragOver: (e) => {
+				EventHelper.stop(e.eventData, true);
+			},
+			onDragEnter: (e) => {
+				EventHelper.stop(e.eventData, true);
+
+				const validDropTarget = this.dndHandler.onDragEnter(e.dragAndDropData, undefined, e.eventData);
+				this.emptyPanelMessageElement!.style.backgroundColor = validDropTarget ? this.theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND)?.toString() || '' : '';
+			},
+			onDragLeave: (e) => {
+				EventHelper.stop(e.eventData, true);
+				this.emptyPanelMessageElement!.style.backgroundColor = '';
+			},
+			onDragEnd: (e) => {
+				EventHelper.stop(e.eventData, true);
+				this.emptyPanelMessageElement!.style.backgroundColor = '';
+			},
+			onDrop: (e) => {
+				EventHelper.stop(e.eventData, true);
+				this.emptyPanelMessageElement!.style.backgroundColor = '';
+
+				this.dndHandler.drop(e.dragAndDropData, undefined, e.eventData);
+			},
+		}));
+	}
+
 	updateStyles(): void {
 		super.updateStyles();
 
@@ -508,6 +558,9 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 
 		// Layout composite bar
 		this.layoutCompositeBar();
+
+		// Add empty panel message
+		this.layoutEmptyMessage();
 	}
 
 	private layoutCompositeBar(): void {
@@ -521,6 +574,13 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 		}
 	}
 
+	private emptyPanelMessageElement: HTMLElement | undefined;
+	private layoutEmptyMessage(): void {
+		if (this.emptyPanelMessageElement) {
+			toggleClass(this.emptyPanelMessageElement, 'visible', this.compositeBar.getVisibleComposites().length === 0);
+		}
+	}
+
 	private getCompositeActions(compositeId: string): { activityAction: PanelActivityAction, pinnedAction: ToggleCompositePinnedAction; } {
 		let compositeActions = this.compositeActions.get(compositeId);
 		if (!compositeActions) {