debug: put a tree inside a hover

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

@@ -37,7 +37,7 @@ export class DebugEditorContribution implements editorcommon.IEditorContribution
 	) {
 		this.breakpointHintDecoration = [];
 		this.toDispose = [];
-		this.hoverWidget = new DebugHoverWidget(this.editor, this.debugService);
+		this.hoverWidget = new DebugHoverWidget(this.editor, this.debugService, this.instantiationService);
 		this.registerListeners();
 	}
 

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

@@ -6,13 +6,22 @@
 import htmlcontentrenderer = require('vs/base/browser/htmlContentRenderer');
 import errors = require('vs/base/common/errors');
 import dom = require('vs/base/browser/dom');
+import { ITree } from 'vs/base/parts/tree/common/tree';
+import { Tree } from 'vs/base/parts/tree/browser/treeImpl';
+import { DefaultController, ICancelableEvent } from 'vs/base/parts/tree/browser/treeDefaults';
 import editorbrowser = require('vs/editor/browser/editorBrowser');
 import editorcommon = require('vs/editor/common/editorCommon');
-import debug = require('vs/workbench/parts/debug/common/debug');
 import { tokenizeToHtmlContent } from 'vs/editor/common/modes/textToHtmlTokenizer';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import debug = require('vs/workbench/parts/debug/common/debug');
+import viewer = require('vs/workbench/parts/debug/browser/debugViewer');
 
 const $ = dom.emmet;
 const stringRegex = /^(['"]).*\1$/;
+const debugTreeOptions = {
+	indentPixels: 8,
+	twistiePixels: 20
+};
 
 export class DebugHoverWidget implements editorbrowser.IContentWidget {
 
@@ -22,12 +31,20 @@ export class DebugHoverWidget implements editorbrowser.IContentWidget {
 
 	private domNode: HTMLElement;
 	private isVisible: boolean;
+	private tree: ITree;
 	private showAtPosition: editorcommon.IPosition;
 	private lastHoveringOver: string;
 	private highlightDecorations: string[];
 
-	constructor(private editor: editorbrowser.ICodeEditor, private debugService: debug.IDebugService) {
+	constructor(private editor: editorbrowser.ICodeEditor, private debugService: debug.IDebugService, private instantiationService: IInstantiationService) {
 		this.domNode = $('.debug-hover-widget monaco-editor-background');
+		const treeContainer = dom.append(this.domNode, $('.debug-hover-tree'));
+		this.tree = new Tree(treeContainer, {
+			dataSource: new viewer.VariablesDataSource(this.debugService),
+			renderer: this.instantiationService.createInstance(viewer.VariablesRenderer),
+			controller: new DebugHoverController()
+		}, debugTreeOptions);
+
 		this.isVisible = false;
 		this.showAtPosition = null;
 		this.lastHoveringOver = null;
@@ -112,52 +129,9 @@ export class DebugHoverWidget implements editorbrowser.IContentWidget {
 	}
 
 	private doShow(position: editorcommon.IEditorPosition, expression: debug.IExpression): void {
-		let value: string = undefined;
-		if (expression.reference > 0 && expression.value.indexOf('function') === -1) {
-			let objectToString = '{\n';
-			expression.getChildren(this.debugService).then(children => {
-				if (!children) {
-					this.hide();
-					return;
-				}
-
-				for (let i = 0; i < children.length; i++) {
-					const nameAndValue = `   ${ children[i].name }: ${ children[i].value }`;
-					objectToString += nameAndValue.substr(0, 80);
-					// add a quote to the end of the string if cropped
-					if (nameAndValue.length > 80 && stringRegex.test(children[i].value)) {
-						objectToString += children[i].value[0];
-					}
+		this.tree.setInput(expression).done(null, errors.onUnexpectedError);
+		this.tree.layout(this.domNode.clientHeight);
 
-					if (i < children.length - 1) {
-						objectToString += ',\n';
-					}
-				}
-				objectToString += '\n}';
-				return objectToString;
-			}).done(v => value = v, () => this.hide());
-		} else {
-			value = expression.value;
-		}
-
-		const model = this.editor.getModel();
-		if (!value || !model) {
-			return;
-		}
-
-		let crlfCount = 0;
-		for (let i = 0; i < value.length; i++) {
-			if (value[i] === '\n') {
-				crlfCount++;
-			}
-			if (crlfCount > 12) {
-				value = value.substr(0, i + 1) + '   ...\n}';
-				break;
-			}
-		}
-
-		this.domNode.innerHTML = '';
-		this.domNode.appendChild(htmlcontentrenderer.renderHtml(tokenizeToHtmlContent(value, model.getMode())));
 		this.showAtPosition = position;
 		this.isVisible = true;
 		this.editor.layoutContentWidget(this);
@@ -184,3 +158,16 @@ export class DebugHoverWidget implements editorbrowser.IContentWidget {
 		} : null;
 	}
 }
+
+class DebugHoverController extends DefaultController {
+
+	/* protected */ public onLeftClick(tree: ITree, element: any, eventish: ICancelableEvent, origin: string = 'mouse'): boolean {
+		if (element.reference > 0) {
+			super.onLeftClick(tree, element, eventish, origin);
+			tree.clearFocus();
+			tree.deselect(element);
+		}
+
+		return true;
+	}
+}

src/vs/workbench/parts/debug/browser/media/debug.contribution.css

@@ -156,7 +156,8 @@
 	animation-name: fadeIn;
 
 	white-space: pre;
-	min-width: 50px;
+	width: 350px;
+	height: 300px;
 
 	-webkit-user-select: text;
 	-ms-user-select: text;
@@ -167,6 +168,24 @@
 	overflow: hidden;
 }
 
+.monaco-editor .debug-hover-widget .debug-hover-tree {
+	line-height: 24px;
+	height: 100%;
+}
+
+/* Disable tree hover highlight in debug hover tree. */
+.monaco-editor .debug-hover-widget .debug-hover-tree .monaco-tree .monaco-tree-rows > .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused)  {
+	background-color: inherit;
+}
+
+.monaco-editor .debug-hover-widget .debug-hover-tree .monaco-tree .monaco-tree-rows > .monaco-tree-row {
+	cursor: default;
+}
+
+.monaco-editor .debug-hover-widget .debug-hover-tree .monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children {
+	cursor: pointer;
+}
+
 .monaco-editor .debug-hover-widget pre {
 	margin-top: 0;
 	margin-bottom: 0;