create debug hover lazily

#38625

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

@@ -199,7 +199,12 @@ export class DebugEditorContribution implements IDebugEditorContribution {
 		this.toDispose.push(this.editor.onMouseDown((e: IEditorMouseEvent) => this.onEditorMouseDown(e)));
 		this.toDispose.push(this.editor.onMouseMove((e: IEditorMouseEvent) => this.onEditorMouseMove(e)));
 		this.toDispose.push(this.editor.onMouseLeave((e: IEditorMouseEvent) => {
-			const rect = this.hoverWidget.getDomNode().getBoundingClientRect();
+			const hoverDomNode = this.hoverWidget.getDomNode();
+			if (!hoverDomNode) {
+				return;
+			}
+
+			const rect = hoverDomNode.getBoundingClientRect();
 			// Only hide the hover widget if the editor mouse leave event is outside the hover widget #3528
 			if (e.event.posx < rect.left || e.event.posx > rect.right || e.event.posy < rect.top || e.event.posy > rect.bottom) {
 				this.hideHoverWidget();

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

@@ -53,29 +53,17 @@ export class DebugHoverWidget implements IContentWidget {
 		private editor: ICodeEditor,
 		private debugService: IDebugService,
 		private listService: IListService,
-		instantiationService: IInstantiationService,
+		private instantiationService: IInstantiationService,
 		private themeService: IThemeService
 	) {
 		this.toDispose = [];
-		this.create(instantiationService);
-		this.registerListeners();
-
-		this.valueContainer = $('.value');
-		this.valueContainer.tabIndex = 0;
-		this.valueContainer.setAttribute('role', 'tooltip');
-		this.scrollbar = new DomScrollableElement(this.valueContainer, { horizontal: ScrollbarVisibility.Hidden });
-		this.domNode.appendChild(this.scrollbar.getDomNode());
-		this.toDispose.push(this.scrollbar);
 
 		this._isVisible = false;
 		this.showAtPosition = null;
 		this.highlightDecorations = [];
-
-		this.editor.addContentWidget(this);
-		this.editor.applyFontInfo(this.domNode);
 	}
 
-	private create(instantiationService: IInstantiationService): void {
+	private create(): void {
 		this.domNode = $('.debug-hover-widget');
 		this.complexValueContainer = dom.append(this.domNode, $('.complex-value'));
 		this.complexValueTitle = dom.append(this.complexValueContainer, $('.title'));
@@ -83,7 +71,7 @@ export class DebugHoverWidget implements IContentWidget {
 		this.treeContainer.setAttribute('role', 'tree');
 		this.tree = new Tree(this.treeContainer, {
 			dataSource: new VariablesDataSource(),
-			renderer: instantiationService.createInstance(VariablesHoverRenderer),
+			renderer: this.instantiationService.createInstance(VariablesHoverRenderer),
 			controller: new DebugHoverController(this.editor)
 		}, {
 				indentPixels: 6,
@@ -92,6 +80,15 @@ export class DebugHoverWidget implements IContentWidget {
 				keyboardSupport: false
 			});
 
+		this.valueContainer = $('.value');
+		this.valueContainer.tabIndex = 0;
+		this.valueContainer.setAttribute('role', 'tooltip');
+		this.scrollbar = new DomScrollableElement(this.valueContainer, { horizontal: ScrollbarVisibility.Hidden });
+		this.domNode.appendChild(this.scrollbar.getDomNode());
+		this.toDispose.push(this.scrollbar);
+
+		this.editor.applyFontInfo(this.domNode);
+
 		this.toDispose.push(attachListStyler(this.tree, this.themeService));
 		this.toDispose.push(this.listService.register(this.tree));
 		this.toDispose.push(attachStylerCallback(this.themeService, { editorHoverBackground, editorHoverBorder }, colors => {
@@ -102,6 +99,9 @@ export class DebugHoverWidget implements IContentWidget {
 				this.domNode.style.border = null;
 			}
 		}));
+
+		this.registerListeners();
+		this.editor.addContentWidget(this);
 	}
 
 	private registerListeners(): void {
@@ -245,6 +245,10 @@ export class DebugHoverWidget implements IContentWidget {
 	}
 
 	private doShow(position: Position, expression: IExpression, focus: boolean, forceValueHover = false): TPromise<void> {
+		if (!this.domNode) {
+			this.create();
+		}
+
 		this.showAtPosition = position;
 		this._isVisible = true;
 		this.stoleFocus = focus;