debug: drag n drop watch expressions

fixes #14125

src/vs/workbench/parts/debug/common/debug.ts

@@ -443,6 +443,11 @@ export interface IDebugService {
 	 */
 	renameWatchExpression(id: string, newName: string): TPromise<void>;
 
+	/**
+	 * Moves a watch expression to a new possition. Used for reordering watch expressions.
+	 */
+	moveWatchExpression(id: string, position: number): void;
+
 	/**
 	 * Removes all watch expressions. If id is passed only removes the watch expression with the passed id.
 	 */

src/vs/workbench/parts/debug/common/debugModel.ts

@@ -936,6 +936,14 @@ export class Model implements debug.IModel {
 		this._onDidChangeWatchExpressions.fire();
 	}
 
+	public moveWatchExpression(id: string, position: number): void {
+		const we = this.watchExpressions.filter(we => we.getId() === id).pop();
+		this.watchExpressions = this.watchExpressions.filter(we => we.getId() !== id);
+		this.watchExpressions = this.watchExpressions.slice(0, position).concat(we, this.watchExpressions.slice(position));
+
+		this._onDidChangeWatchExpressions.fire();
+	}
+
 	public sourceIsUnavailable(source: Source): void {
 		this.processes.forEach(p => p.sourceIsUnavailable(source));
 		this._onDidChangeCallStack.fire();

src/vs/workbench/parts/debug/electron-browser/debugService.ts

@@ -534,6 +534,10 @@ export class DebugService implements debug.IDebugService {
 		return this.model.renameWatchExpression(this.viewModel.focusedProcess, this.viewModel.focusedStackFrame, id, newName);
 	}
 
+	public moveWatchExpression(id: string, position: number): void {
+		this.model.moveWatchExpression(id, position);
+	}
+
 	public removeWatchExpressions(id?: string): void {
 		this.model.removeWatchExpressions(id);
 	}

src/vs/workbench/parts/debug/electron-browser/debugViewer.ts

@@ -13,13 +13,13 @@ import * as errors from 'vs/base/common/errors';
 import { equalsIgnoreCase } from 'vs/base/common/strings';
 import { isMacintosh } from 'vs/base/common/platform';
 import * as dom from 'vs/base/browser/dom';
-import { IMouseEvent } from 'vs/base/browser/mouseEvent';
+import { IMouseEvent, DragMouseEvent } from 'vs/base/browser/mouseEvent';
 import { getPathLabel } from 'vs/base/common/labels';
 import { IAction, IActionRunner } from 'vs/base/common/actions';
 import { IActionItem, Separator, ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
-import { ITree, IAccessibilityProvider, ContextMenuEvent, IDataSource, IRenderer } from 'vs/base/parts/tree/browser/tree';
+import { ITree, IAccessibilityProvider, ContextMenuEvent, IDataSource, IRenderer, DRAG_OVER_ACCEPT, IDragAndDropData, IDragOverReaction } from 'vs/base/parts/tree/browser/tree';
 import { InputBox, IInputValidationOptions } from 'vs/base/browser/ui/inputbox/inputBox';
-import { DefaultController } from 'vs/base/parts/tree/browser/treeDefaults';
+import { DefaultController, DefaultDragAndDrop } from 'vs/base/parts/tree/browser/treeDefaults';
 import { IActionProvider } from 'vs/base/parts/tree/browser/actionsRenderer';
 import * as debug from 'vs/workbench/parts/debug/common/debug';
 import { Expression, Variable, FunctionBreakpoint, StackFrame, Thread, Process, Breakpoint, ExceptionBreakpoint, Model, Scope } from 'vs/workbench/parts/debug/common/debugModel';
@@ -991,6 +991,43 @@ export class WatchExpressionsController extends BaseDebugController {
 	}
 }
 
+export class WatchExpressionsDragAndDrop extends DefaultDragAndDrop {
+
+	constructor( @debug.IDebugService private debugService: debug.IDebugService) {
+		super();
+	}
+
+	public getDragURI(tree: ITree, element: Expression): string {
+		if (!(element instanceof Expression)) {
+			return null;
+		}
+
+		return element.getId();
+	}
+
+	public getDragLabel(tree: ITree, elements: Expression[]): string {
+		if (elements.length > 1) {
+			return String(elements.length);
+		}
+
+		return elements[0].name;
+	}
+
+	public onDragOver(tree: ITree, data: IDragAndDropData, target: Expression | Model, originalEvent: DragMouseEvent): IDragOverReaction {
+		return DRAG_OVER_ACCEPT;
+	}
+
+	public drop(tree: ITree, data: IDragAndDropData, target: Expression | Model, originalEvent: DragMouseEvent): void {
+		const draggedData = data.getData();
+		if (Array.isArray(draggedData)) {
+			const draggedElement = <Expression>draggedData[0];
+			const watches = this.debugService.getModel().getWatchExpressions();
+			const position = target instanceof Model ? watches.length - 1 : watches.indexOf(target);
+			this.debugService.moveWatchExpression(draggedElement.getId(), position);
+		}
+	}
+}
+
 // breakpoints
 
 export class BreakpointsActionProvider implements IActionProvider {

src/vs/workbench/parts/debug/electron-browser/debugViews.ts

@@ -197,6 +197,7 @@ export class WatchExpressionsView extends CollapsibleViewletView {
 			renderer: this.instantiationService.createInstance(viewer.WatchExpressionsRenderer, actionProvider, this.actionRunner),
 			accessibilityProvider: new viewer.WatchExpressionsAccessibilityProvider(),
 			controller: new viewer.WatchExpressionsController(this.debugService, this.contextMenuService, actionProvider),
+			dnd: this.instantiationService.createInstance(viewer.WatchExpressionsDragAndDrop)
 		}, debugTreeOptions(nls.localize({ comment: ['Debug is a noun in this context, not a verb.'], key: 'watchAriaTreeLabel' }, "Debug Watch Expressions")));
 
 		this.tree.setInput(this.debugService.getModel());

src/vs/workbench/parts/debug/test/common/mockDebug.ts

@@ -47,6 +47,8 @@ export class MockDebugService implements debug.IDebugService {
 
 	public addFunctionBreakpoint(): void { }
 
+	public moveWatchExpression(id: string, position: number): void { }
+
 	public renameFunctionBreakpoint(id: string, newFunctionName: string): TPromise<void> {
 		return TPromise.as(null);
 	}