From d17d29d8d146a2cadcd9773e2b8860f49f24c5b0 Mon Sep 17 00:00:00 2001
From: isidor <inikolic@microsoft.com>
Date: Fri, 11 Nov 2016 17:42:27 +0100
Subject: [PATCH] debug: watch expressions use flex

---
 .../debug/browser/media/debugViewlet.css      |  8 ++++++
 .../debug/electron-browser/debugViewer.ts     | 25 ++++++++++++++-----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/vs/workbench/parts/debug/browser/media/debugViewlet.css b/src/vs/workbench/parts/debug/browser/media/debugViewlet.css
index 1b956289078..08077434493 100644
--- a/src/vs/workbench/parts/debug/browser/media/debugViewlet.css
+++ b/src/vs/workbench/parts/debug/browser/media/debugViewlet.css
@@ -249,6 +249,14 @@
 	color: initial;
 }
 
+.debug-viewlet .watch-expression {
+	display: flex;
+}
+
+.debug-viewlet .watch-expression .expression {
+	flex : 1;
+}
+
 .debug-viewlet .debug-action.add-watch-expression,
 .debug-viewlet .debug-action.add-function-breakpoint {
 	background: url('add.svg') center center no-repeat;
diff --git a/src/vs/workbench/parts/debug/electron-browser/debugViewer.ts b/src/vs/workbench/parts/debug/electron-browser/debugViewer.ts
index b3a1b6cdfce..d1ebbb84d8a 100644
--- a/src/vs/workbench/parts/debug/electron-browser/debugViewer.ts
+++ b/src/vs/workbench/parts/debug/electron-browser/debugViewer.ts
@@ -859,8 +859,12 @@ export class WatchExpressionsDataSource implements IDataSource {
 	}
 }
 
-interface IWatchExpressionTemplateData extends IVariableTemplateData {
+interface IWatchExpressionTemplateData {
+	watchExpression: HTMLElement;
 	actionBar: ActionBar;
+	expression: HTMLElement;
+	name: HTMLSpanElement;
+	value: HTMLSpanElement;
 }
 
 export class WatchExpressionsRenderer implements IRenderer {
@@ -893,15 +897,24 @@ export class WatchExpressionsRenderer implements IRenderer {
 	}
 
 	public renderTemplate(tree: ITree, templateId: string, container: HTMLElement): any {
-		let data: IWatchExpressionTemplateData = Object.create(null);
+		const createVariableTemplate = ((data: IVariableTemplateData, container: HTMLElement) => {
+			data.expression = dom.append(container, $('.expression'));
+			data.name = dom.append(data.expression, $('span.name'));
+			data.value = dom.append(data.expression, $('span.value'));
+		});
+
 		if (templateId === WatchExpressionsRenderer.WATCH_EXPRESSION_TEMPLATE_ID) {
-			data.actionBar = new ActionBar(container, { actionRunner: this.actionRunner });
+			const data: IWatchExpressionTemplateData = Object.create(null);
+			data.watchExpression = dom.append(container, $('.watch-expression'));
+			createVariableTemplate(data, data.watchExpression);
+			data.actionBar = new ActionBar(data.watchExpression, { actionRunner: this.actionRunner });
 			data.actionBar.push(this.actionProvider.getExpressionActions(), { icon: true, label: false });
+
+			return data;
 		}
 
-		data.expression = dom.append(container, $('.expression'));
-		data.name = dom.append(data.expression, $('span.name'));
-		data.value = dom.append(data.expression, $('span.value'));
+		const data: IVariableTemplateData = Object.create(null);
+		createVariableTemplate(data, container);
 
 		return data;
 	}
-- 
GitLab