debug: make complex debug hover more compact

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

@@ -17,7 +17,7 @@ import viewer = require('vs/workbench/parts/debug/browser/debugViewer');
 const $ = dom.emmet;
 const debugTreeOptions = {
 	indentPixels: 8,
-	twistiePixels: 20
+	twistiePixels: 10
 };
 
 export class DebugHoverWidget implements editorbrowser.IContentWidget {
@@ -40,7 +40,7 @@ export class DebugHoverWidget implements editorbrowser.IContentWidget {
 		this.treeContainer = dom.append(this.domNode, $('.debug-hover-tree'));
 		this.tree = new Tree(this.treeContainer, {
 			dataSource: new viewer.VariablesDataSource(this.debugService),
-			renderer: this.instantiationService.createInstance(viewer.VariablesRenderer),
+			renderer: this.instantiationService.createInstance(VariablesHoverRenderer),
 			controller: new DebugHoverController()
 		}, debugTreeOptions);
 		this.valueContainer = dom.append(this.domNode, $('.debug-hover-value'));
@@ -179,3 +179,10 @@ class DebugHoverController extends DefaultController {
 		return true;
 	}
 }
+
+class VariablesHoverRenderer extends viewer.VariablesRenderer {
+
+	public getHeight(tree: ITree, element: any): number {
+		return 18;
+	}
+}

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

@@ -380,7 +380,7 @@ export class VariablesRenderer implements tree.IRenderer {
 		// noop
 	}
 
-	public getHeight(tree:tree.ITree, element:any): number {
+	public getHeight(tree: tree.ITree, element: any): number {
 		return 24;
 	}
 

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

@@ -32,8 +32,8 @@
 
 .monaco-editor .debug-hover-widget .debug-hover-tree {
 	line-height: 24px;
-	width: 350px;
-	height: 300px;
+	width: 330px;
+	height: 288px;
 }
 
 /* Disable tree hover highlight in debug hover tree. */