diff --git a/src/vs/workbench/parts/debug/browser/debugHover.ts b/src/vs/workbench/parts/debug/browser/debugHover.ts index 7e111d588a7..5d41b0dd750 100644 --- a/src/vs/workbench/parts/debug/browser/debugHover.ts +++ b/src/vs/workbench/parts/debug/browser/debugHover.ts @@ -42,14 +42,18 @@ export class DebugHoverWidget implements editorbrowser.IContentWidget { private tree: ITree; private showAtPosition: Position; private highlightDecorations: string[]; + private complexValueContainer: HTMLElement; private treeContainer: HTMLElement; + private complexValueTitle: HTMLElement; private valueContainer: HTMLElement; private stoleFocus: boolean; private toDispose: lifecycle.IDisposable[]; constructor(private editor: editorbrowser.ICodeEditor, private debugService: debug.IDebugService, private instantiationService: IInstantiationService) { this.domNode = $('.debug-hover-widget monaco-editor-background'); - this.treeContainer = dom.append(this.domNode, $('.debug-hover-tree')); + this.complexValueContainer = dom.append(this.domNode, $('.complex-value')); + this.complexValueTitle = dom.append(this.complexValueContainer, $('.title')); + this.treeContainer = dom.append(this.complexValueContainer, $('.debug-hover-tree')); this.treeContainer.setAttribute('role', 'tree'); this.tree = new Tree(this.treeContainer, { dataSource: new viewer.VariablesDataSource(this.debugService), @@ -183,7 +187,7 @@ export class DebugHoverWidget implements editorbrowser.IContentWidget { this.stoleFocus = focus; if (expression.reference === 0 || forceValueHover) { - this.treeContainer.hidden = true; + this.complexValueContainer.hidden = true; this.valueContainer.hidden = false; viewer.renderExpressionValue(expression, this.valueContainer, false, MAX_VALUE_RENDER_LENGTH_IN_HOVER); this.valueContainer.title = ''; @@ -192,13 +196,15 @@ export class DebugHoverWidget implements editorbrowser.IContentWidget { this.editor.render(); this.valueContainer.focus(); } + return TPromise.as(null); } this.valueContainer.hidden = true; - this.treeContainer.hidden = false; + this.complexValueContainer.hidden = false; return this.tree.setInput(expression).then(() => { + this.complexValueTitle.textContent = expression.value; this.layoutTree(); this.editor.layoutContentWidget(this); if (focus) { @@ -229,9 +235,9 @@ export class DebugHoverWidget implements editorbrowser.IContentWidget { public hide(): void { if (!this.isVisible) { - // already not visible return; } + this.isVisible = false; this.editor.deltaDecorations(this.highlightDecorations, []); this.highlightDecorations = []; diff --git a/src/vs/workbench/parts/debug/browser/media/debugHover.css b/src/vs/workbench/parts/debug/browser/media/debugHover.css index 5043ef6fbab..5971fd9df5a 100644 --- a/src/vs/workbench/parts/debug/browser/media/debugHover.css +++ b/src/vs/workbench/parts/debug/browser/media/debugHover.css @@ -15,6 +15,12 @@ word-break: break-all; } +.monaco-editor .debug-hover-widget .complex-value .title { + padding-left: 10px; + margin: 0 5px; + border-bottom: 1px solid rgba(128, 128, 128, 0.35); +} + .monaco-editor .debug-hover-widget .debug-hover-tree { line-height: 18px; width: 324px;