debug: allow toolbar to be in two different vertical lines

src/vs/workbench/parts/debug/browser/debugActionsWidget.ts

@@ -33,6 +33,8 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { IDisposable } from 'vs/base/common/lifecycle';
 
 const DEBUG_ACTIONS_WIDGET_POSITION_KEY = 'debug.actionswidgetposition';
+const DEBUG_ACTIONS_WIDGET_Y_KEY = 'debug.actionswidgety';
+const HEIGHT = 32;
 
 export const debugToolBarBackground = registerColor('debugToolBar.background', {
 	dark: '#333333',
@@ -136,14 +138,14 @@ export class DebugActionsWidget extends Themable implements IWorkbenchContributi
 				this.telemetryService.publicLog('workbenchActionExecuted', { id: e.action.id, from: 'debugActionsWidget' });
 			}
 		}));
-		$(window).on(dom.EventType.RESIZE, () => this.setXCoordinate(), this.toUnbind);
+		$(window).on(dom.EventType.RESIZE, () => this.setCoordinates(), this.toUnbind);
 
 		this.dragArea.on(dom.EventType.MOUSE_UP, (event: MouseEvent) => {
 			const mouseClickEvent = new StandardMouseEvent(event);
 			if (mouseClickEvent.detail === 2) {
 				// double click on debug bar centers it again #8250
 				const widgetWidth = this.$el.getHTMLElement().clientWidth;
-				this.setXCoordinate(0.5 * window.innerWidth - 0.5 * widgetWidth);
+				this.setCoordinates(0.5 * window.innerWidth - 0.5 * widgetWidth, 0);
 				this.storePosition();
 			}
 		});
@@ -157,7 +159,7 @@ export class DebugActionsWidget extends Themable implements IWorkbenchContributi
 				// Prevent default to stop editor selecting text #8524
 				mouseMoveEvent.preventDefault();
 				// Reduce x by width of drag handle to reduce jarring #16604
-				this.setXCoordinate(mouseMoveEvent.posx - 14);
+				this.setCoordinates(mouseMoveEvent.posx - 14, mouseMoveEvent.posy);
 			}).once('mouseup', (e: MouseEvent) => {
 				this.storePosition();
 				this.dragArea.removeClass('dragged');
@@ -171,7 +173,7 @@ export class DebugActionsWidget extends Themable implements IWorkbenchContributi
 
 	private storePosition(): void {
 		const position = parseFloat(this.$el.getComputedStyle().left) / window.innerWidth;
-		this.storageService.store(DEBUG_ACTIONS_WIDGET_POSITION_KEY, position, StorageScope.WORKSPACE);
+		this.storageService.store(DEBUG_ACTIONS_WIDGET_POSITION_KEY, position, StorageScope.GLOBAL);
 	}
 
 	protected updateStyles(): void {
@@ -203,18 +205,27 @@ export class DebugActionsWidget extends Themable implements IWorkbenchContributi
 		$(this.$el).style('top', `${titlebarOffset}px`);
 	}
 
-	private setXCoordinate(x?: number): void {
+	private setCoordinates(x?: number, y?: number): void {
 		if (!this.isVisible) {
 			return;
 		}
 		const widgetWidth = this.$el.getHTMLElement().clientWidth;
 		if (x === undefined) {
-			const positionPercentage = this.storageService.get(DEBUG_ACTIONS_WIDGET_POSITION_KEY, StorageScope.WORKSPACE);
+			const positionPercentage = this.storageService.get(DEBUG_ACTIONS_WIDGET_POSITION_KEY, StorageScope.GLOBAL);
 			x = positionPercentage !== undefined ? parseFloat(positionPercentage) * window.innerWidth : (0.5 * window.innerWidth - 0.5 * widgetWidth);
 		}
 
 		x = Math.max(0, Math.min(x, window.innerWidth - widgetWidth)); // do not allow the widget to overflow on the right
 		this.$el.style('left', `${x}px`);
+
+		if (y === undefined) {
+			y = this.storageService.getInteger(DEBUG_ACTIONS_WIDGET_Y_KEY, StorageScope.GLOBAL, 0);
+		}
+		if ((y < HEIGHT / 2) || (y > HEIGHT + HEIGHT / 2)) {
+			const moveToTop = y < HEIGHT;
+			this.$el.style('top', moveToTop ? '0px' : `${HEIGHT}px`);
+			this.storageService.store(DEBUG_ACTIONS_WIDGET_Y_KEY, moveToTop ? 0 : 2 * HEIGHT, StorageScope.GLOBAL);
+		}
 	}
 
 	private onDidConfigurationChange(event: IConfigurationChangeEvent): void {
@@ -234,7 +245,7 @@ export class DebugActionsWidget extends Themable implements IWorkbenchContributi
 
 		this.isVisible = true;
 		this.$el.show();
-		this.setXCoordinate();
+		this.setCoordinates();
 	}
 
 	private hide(): void {