wip

src/vs/base/parts/composite/browser/compositeDnd.ts

@@ -23,3 +23,12 @@ export interface ICompositeDragAndDrop {
 	onDragOver(data: IDragAndDropData, target: string | undefined, originalEvent: DragEvent): boolean;
 	onDragEnter(data: IDragAndDropData, target: string | undefined, originalEvent: DragEvent): boolean;
 }
+
+export interface ICompositeDragAndDropObserverCallbacks {
+	onDragEnter?: (e: DragEvent) => void;
+	onDragLeave?: (e: DragEvent) => void;
+	onDrop?: (e: DragEvent) => void;
+	onDragOver?: (e: DragEvent) => void;
+	onDragStart?: (e: DragEvent) => void;
+	onDragEnd?: (e: DragEvent) => void;
+}

src/vs/workbench/browser/parts/activitybar/activitybarPart.ts

@@ -19,7 +19,7 @@ import { ToggleActivityBarVisibilityAction, ToggleMenuBarAction } from 'vs/workb
 import { IThemeService, IColorTheme } from 'vs/platform/theme/common/themeService';
 import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND, ACTIVITY_BAR_INACTIVE_FOREGROUND, ACTIVITY_BAR_ACTIVE_BACKGROUND } from 'vs/workbench/common/theme';
 import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
-import { CompositeBar, ICompositeBarItem, CompositeDragAndDrop } from 'vs/workbench/browser/parts/compositeBar';
+import { CompositeBar, ICompositeBarItem, CompositeDragAndDrop, CompositeDragAndDropObserver } from 'vs/workbench/browser/parts/compositeBar';
 import { Dimension, addClass, removeNode } from 'vs/base/browser/dom';
 import { IStorageService, StorageScope, IWorkspaceStorageChangeEvent } from 'vs/platform/storage/common/storage';
 import { IExtensionService } from 'vs/workbench/services/extensions/common/extensions';
@@ -317,6 +317,15 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 
 		this.createGlobalActivityActionBar(globalActivities);
 
+		CompositeDragAndDropObserver.INSTANCE.registerParticipant(this.element, {
+			onDragStart: e => {
+				this.element.style.border = `2px solid blue`;
+			},
+			onDragEnd: e => {
+				this.element.style.border = '';
+			}
+		});
+
 		return this.content;
 	}
 

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

@@ -7,7 +7,7 @@ import * as nls from 'vs/nls';
 import { Action, IAction } from 'vs/base/common/actions';
 import { illegalArgument } from 'vs/base/common/errors';
 import * as arrays from 'vs/base/common/arrays';
-import { IDisposable, toDisposable } from 'vs/base/common/lifecycle';
+import { IDisposable, toDisposable, Disposable, DisposableStore } from 'vs/base/common/lifecycle';
 import { IBadge } from 'vs/workbench/services/activity/common/activity';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { ActionBar, ActionsOrientation, Separator } from 'vs/base/browser/ui/actionbar/actionbar';
@@ -23,7 +23,7 @@ import { Emitter } from 'vs/base/common/event';
 import { DraggedViewIdentifier } from 'vs/workbench/browser/parts/views/viewPaneContainer';
 import { Registry } from 'vs/platform/registry/common/platform';
 import { IViewContainersRegistry, Extensions as ViewContainerExtensions, ViewContainerLocation, IViewDescriptorService } from 'vs/workbench/common/views';
-import { ICompositeDragAndDrop, CompositeDragAndDropData } from 'vs/base/parts/composite/browser/compositeDnd';
+import { ICompositeDragAndDrop, CompositeDragAndDropData, ICompositeDragAndDropObserverCallbacks } from 'vs/base/parts/composite/browser/compositeDnd';
 import { IPaneComposite } from 'vs/workbench/common/panecomposite';
 import { IComposite } from 'vs/workbench/common/composite';
 
@@ -35,6 +35,72 @@ export interface ICompositeBarItem {
 	visible: boolean;
 }
 
+export type ViewType = 'composite' | 'view';
+
+export class CompositeDragAndDropObserver extends Disposable {
+	private _onDragStart = this._register(new Emitter<DragEvent>());
+	private _onDragEnd = this._register(new Emitter<DragEvent>());
+
+	private static _instance: CompositeDragAndDropObserver | undefined;
+	static get INSTANCE(): CompositeDragAndDropObserver {
+		if (!CompositeDragAndDropObserver._instance) {
+			CompositeDragAndDropObserver._instance = new CompositeDragAndDropObserver();
+		}
+
+		return CompositeDragAndDropObserver._instance;
+	}
+
+	private constructor() { super(); }
+
+	registerParticipant(element: HTMLElement, callbacks: ICompositeDragAndDropObserverCallbacks): IDisposable {
+		const disposableStore = new DisposableStore();
+
+		disposableStore.add(addDisposableListener(element, EventType.DRAG_START, e => {
+			this._onDragStart.fire(e);
+		}));
+
+		disposableStore.add(new DragAndDropObserver(element, {
+			onDragEnd: e => {
+				this._onDragEnd.fire(e);
+			},
+			onDragEnter: e => {
+				if (callbacks.onDragEnter) {
+					callbacks.onDragEnter(e);
+				}
+			},
+			onDragLeave: e => {
+				if (callbacks.onDragLeave) {
+					callbacks.onDragLeave(e);
+				}
+			},
+			onDrop: e => {
+				if (callbacks.onDrop) {
+					callbacks.onDrop(e);
+				}
+			},
+			onDragOver: e => {
+				if (callbacks.onDragOver) {
+					callbacks.onDragOver(e);
+				}
+			}
+		}));
+
+		if (callbacks.onDragStart) {
+			this._onDragStart.event(e => {
+				callbacks.onDragStart!(e);
+			}, this, disposableStore);
+		}
+
+		if (callbacks.onDragEnd) {
+			this._onDragEnd.event(e => {
+				callbacks.onDragEnd!(e);
+			});
+		}
+
+		return this._register(disposableStore);
+	}
+}
+
 export class CompositeDragAndDrop implements ICompositeDragAndDrop {
 
 	constructor(
@@ -279,7 +345,7 @@ export class CompositeBar extends Widget implements ICompositeBar {
 		this._register(addDisposableListener(parent, EventType.CONTEXT_MENU, e => this.showContextMenu(e)));
 
 		// Allow to drop at the end to move composites to the end
-		this._register(new DragAndDropObserver(excessDiv, {
+		this._register(CompositeDragAndDropObserver.INSTANCE.registerParticipant(excessDiv, {
 			onDragOver: (e: DragEvent) => {
 				if (this.compositeTransfer.hasData(DraggedCompositeIdentifier.prototype)) {
 					EventHelper.stop(e, true);
@@ -344,9 +410,6 @@ export class CompositeBar extends Widget implements ICompositeBar {
 					this.updateFromDragging(excessDiv, false);
 				}
 			},
-			onDragEnd: (e: DragEvent) => {
-				// no-op, will not be called
-			},
 			onDrop: (e: DragEvent) => {
 				if (this.compositeTransfer.hasData(DraggedCompositeIdentifier.prototype)) {
 					EventHelper.stop(e, true);
@@ -372,6 +435,12 @@ export class CompositeBar extends Widget implements ICompositeBar {
 					}
 				}
 			},
+			onDragStart: (e: DragEvent) => {
+				// excessDiv.style.background = 'blue';
+			},
+			onDragEnd: (e: DragEvent) => {
+				// excessDiv.style.background = 'red';
+			}
 		}));
 
 		return actionBarDiv;

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

@@ -18,10 +18,11 @@ import { DelayedDragHandler } from 'vs/base/browser/dnd';
 import { IActivity } from 'vs/workbench/common/activity';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { Emitter } from 'vs/base/common/event';
-import { DragAndDropObserver, LocalSelectionTransfer } from 'vs/workbench/browser/dnd';
+import { LocalSelectionTransfer } from 'vs/workbench/browser/dnd';
 import { Color } from 'vs/base/common/color';
 import { DraggedViewIdentifier } from 'vs/workbench/browser/parts/views/viewPaneContainer';
 import { ICompositeDragAndDrop, CompositeDragAndDropData } from 'vs/base/parts/composite/browser/compositeDnd';
+import { CompositeDragAndDropObserver } from 'vs/workbench/browser/parts/compositeBar';
 
 export interface ICompositeActivity {
 	badge: IBadge;
@@ -537,7 +538,7 @@ export class CompositeActionViewItem extends ActivityActionViewItem {
 			}
 		}));
 
-		this._register(new DragAndDropObserver(this.container, {
+		this._register(CompositeDragAndDropObserver.INSTANCE.registerParticipant(this.container, {
 			onDragEnter: e => {
 				if (this.compositeTransfer.hasData(DraggedCompositeIdentifier.prototype)) {
 					const data = this.compositeTransfer.getData(DraggedCompositeIdentifier.prototype);
@@ -622,6 +623,24 @@ export class CompositeActionViewItem extends ActivityActionViewItem {
 						this.dndHandler.drop(new CompositeDragAndDropData('view', draggedViewId), this.activity.id, e);
 					}
 				}
+			},
+			onDragStart: e => {
+
+				if (e.target !== this.container) {
+					return;
+				}
+
+				if (e.dataTransfer) {
+					e.dataTransfer.effectAllowed = 'move';
+				}
+
+				// Register as dragged to local transfer
+				this.compositeTransfer.setData([new DraggedCompositeIdentifier(this.activity.id)], DraggedCompositeIdentifier.prototype);
+
+				// Trigger the action even on drag start to prevent clicks from failing that started a drag
+				if (!this.getAction().checked) {
+					this.getAction().run();
+				}
 			}
 		}));
 

src/vs/workbench/browser/parts/sidebar/sidebarPart.ts

@@ -36,6 +36,7 @@ import { assertIsDefined } from 'vs/base/common/types';
 import { LocalSelectionTransfer } from 'vs/workbench/browser/dnd';
 import { DraggedViewIdentifier } from 'vs/workbench/browser/parts/views/viewPaneContainer';
 import { DraggedCompositeIdentifier } from 'vs/workbench/browser/parts/compositeBarActions';
+import { CompositeDragAndDropObserver } from 'vs/workbench/browser/parts/compositeBar';
 
 export class SidebarPart extends CompositePart<Viewlet> implements IViewletService {
 
@@ -154,6 +155,15 @@ export class SidebarPart extends CompositePart<Viewlet> implements IViewletServi
 
 		super.create(parent);
 
+		CompositeDragAndDropObserver.INSTANCE.registerParticipant(this.element, {
+			onDragStart: e => {
+				this.element.style.border = `2px solid blue`;
+			},
+			onDragEnd: e => {
+				this.element.style.border = '';
+			}
+		});
+
 		const focusTracker = this._register(trackFocus(parent));
 		this._register(focusTracker.onDidFocus(() => this.sideBarFocusContextKey.set(true)));
 		this._register(focusTracker.onDidBlur(() => this.sideBarFocusContextKey.set(false)));

src/vs/workbench/browser/parts/views/viewPaneContainer.ts

@@ -44,6 +44,7 @@ import { Button } from 'vs/base/browser/ui/button/button';
 import { Link } from 'vs/platform/opener/browser/link';
 import { LocalSelectionTransfer } from 'vs/workbench/browser/dnd';
 import { Orientation } from 'vs/base/browser/ui/sash/sash';
+import { CompositeDragAndDropObserver } from 'vs/workbench/browser/parts/compositeBar';
 
 export interface IPaneColors extends IColorMapping {
 	dropBackground?: ColorIdentifier;
@@ -936,6 +937,8 @@ export class ViewPaneContainer extends Component implements IViewPaneContainer {
 				ViewPaneContainer.viewTransfer.clearData(DraggedViewIdentifier.prototype);
 			}
 		}));
+
+		CompositeDragAndDropObserver.INSTANCE.registerParticipant(pane.draggableElement, {});
 	}
 
 	removePanes(panes: ViewPane[]): void {