From 137f9307953690f3281c1dd5568604c01ed3b324 Mon Sep 17 00:00:00 2001 From: Cristian Date: Sat, 25 Mar 2017 17:37:41 +0200 Subject: [PATCH 1/8] #22622 - preliminary version --- src/vs/workbench/parts/debug/browser/media/debugHover.css | 5 ++++- src/vs/workbench/parts/debug/electron-browser/debugHover.ts | 4 ++-- src/vs/workbench/parts/debug/electron-browser/debugViewer.ts | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/vs/workbench/parts/debug/browser/media/debugHover.css b/src/vs/workbench/parts/debug/browser/media/debugHover.css index 29707f09e1101..ddf0a9a12465a 100644 --- a/src/vs/workbench/parts/debug/browser/media/debugHover.css +++ b/src/vs/workbench/parts/debug/browser/media/debugHover.css @@ -29,7 +29,7 @@ word-break: normal; text-overflow: ellipsis; height: 18px; - overflow: hidden; + overflow: auto; border-bottom: 1px solid rgba(128, 128, 128, 0.35); } @@ -67,6 +67,9 @@ .monaco-editor .debug-hover-widget .value { white-space: pre-wrap; color: rgba(108, 108, 108, 0.8); + overflow: auto; + max-height: 500px; + z-index: 60; } .monaco-editor .debug-hover-widget .error { diff --git a/src/vs/workbench/parts/debug/electron-browser/debugHover.ts b/src/vs/workbench/parts/debug/electron-browser/debugHover.ts index e88e4e549f59c..2076624feee40 100644 --- a/src/vs/workbench/parts/debug/electron-browser/debugHover.ts +++ b/src/vs/workbench/parts/debug/electron-browser/debugHover.ts @@ -236,7 +236,7 @@ export class DebugHoverWidget implements IContentWidget { this.valueContainer.hidden = false; renderExpressionValue(expression, this.valueContainer, { showChanged: false, - maxValueLength: MAX_VALUE_RENDER_LENGTH_IN_HOVER, + maxValueLength: null, preserveWhitespace: true }); this.valueContainer.title = ''; @@ -274,7 +274,7 @@ export class DebugHoverWidget implements IContentWidget { if (visibleElementsCount === 0) { this.doShow(this.showAtPosition, this.tree.getInput(), false, true); } else { - const height = Math.min(visibleElementsCount, MAX_ELEMENTS_SHOWN) * 18; + const height = visibleElementsCount * 18; //Math.min(visibleElementsCount, MAX_ELEMENTS_SHOWN) * 18; if (this.treeContainer.clientHeight !== height) { this.treeContainer.style.height = `${height}px`; diff --git a/src/vs/workbench/parts/debug/electron-browser/debugViewer.ts b/src/vs/workbench/parts/debug/electron-browser/debugViewer.ts index f3847176b723b..cba5ab1d7c39b 100644 --- a/src/vs/workbench/parts/debug/electron-browser/debugViewer.ts +++ b/src/vs/workbench/parts/debug/electron-browser/debugViewer.ts @@ -76,7 +76,7 @@ export function renderExpressionValue(expressionOrValue: debug.IExpression | str container.className = 'value changed'; } - if (options.maxValueLength && value.length > options.maxValueLength) { + if (options.maxValueLength && options.maxValueLength > 0 && value.length > options.maxValueLength) { value = value.substr(0, options.maxValueLength) + '...'; } if (value && !options.preserveWhitespace) { From b30e1b71332b1bab2aba41b7fe71c45bc1c97a56 Mon Sep 17 00:00:00 2001 From: Cristian Date: Sat, 25 Mar 2017 17:38:17 +0200 Subject: [PATCH 2/8] #22622 - comment out MAX_VALUE_RENDER_LENGTH_IN_HOVER --- src/vs/workbench/parts/debug/electron-browser/debugHover.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/vs/workbench/parts/debug/electron-browser/debugHover.ts b/src/vs/workbench/parts/debug/electron-browser/debugHover.ts index 2076624feee40..1ce0e87f3b758 100644 --- a/src/vs/workbench/parts/debug/electron-browser/debugHover.ts +++ b/src/vs/workbench/parts/debug/electron-browser/debugHover.ts @@ -24,7 +24,7 @@ import { IListService } from 'vs/platform/list/browser/listService'; const $ = dom.$; const MAX_ELEMENTS_SHOWN = 18; -const MAX_VALUE_RENDER_LENGTH_IN_HOVER = 4096; +//const MAX_VALUE_RENDER_LENGTH_IN_HOVER = 4096; export class DebugHoverWidget implements IContentWidget { @@ -274,7 +274,7 @@ export class DebugHoverWidget implements IContentWidget { if (visibleElementsCount === 0) { this.doShow(this.showAtPosition, this.tree.getInput(), false, true); } else { - const height = visibleElementsCount * 18; //Math.min(visibleElementsCount, MAX_ELEMENTS_SHOWN) * 18; + const height = Math.min(visibleElementsCount, MAX_ELEMENTS_SHOWN) * 18; if (this.treeContainer.clientHeight !== height) { this.treeContainer.style.height = `${height}px`; From 517dcacfd5dfe2291c23357e34bd185bfc021272 Mon Sep 17 00:00:00 2001 From: Cristian Date: Sat, 25 Mar 2017 17:44:22 +0200 Subject: [PATCH 3/8] #22622 removed comments --- src/vs/workbench/parts/debug/electron-browser/debugHover.ts | 1 - src/vs/workbench/parts/debug/electron-browser/debugViewer.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/vs/workbench/parts/debug/electron-browser/debugHover.ts b/src/vs/workbench/parts/debug/electron-browser/debugHover.ts index 1ce0e87f3b758..68d1a179e8d2a 100644 --- a/src/vs/workbench/parts/debug/electron-browser/debugHover.ts +++ b/src/vs/workbench/parts/debug/electron-browser/debugHover.ts @@ -236,7 +236,6 @@ export class DebugHoverWidget implements IContentWidget { this.valueContainer.hidden = false; renderExpressionValue(expression, this.valueContainer, { showChanged: false, - maxValueLength: null, preserveWhitespace: true }); this.valueContainer.title = ''; diff --git a/src/vs/workbench/parts/debug/electron-browser/debugViewer.ts b/src/vs/workbench/parts/debug/electron-browser/debugViewer.ts index cba5ab1d7c39b..f3847176b723b 100644 --- a/src/vs/workbench/parts/debug/electron-browser/debugViewer.ts +++ b/src/vs/workbench/parts/debug/electron-browser/debugViewer.ts @@ -76,7 +76,7 @@ export function renderExpressionValue(expressionOrValue: debug.IExpression | str container.className = 'value changed'; } - if (options.maxValueLength && options.maxValueLength > 0 && value.length > options.maxValueLength) { + if (options.maxValueLength && value.length > options.maxValueLength) { value = value.substr(0, options.maxValueLength) + '...'; } if (value && !options.preserveWhitespace) { From 4cd68b0acd2f88a42a48737da36213b52df4a96d Mon Sep 17 00:00:00 2001 From: Cristian Date: Sat, 25 Mar 2017 17:48:08 +0200 Subject: [PATCH 4/8] #22622 - removed comment --- src/vs/workbench/parts/debug/electron-browser/debugHover.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/vs/workbench/parts/debug/electron-browser/debugHover.ts b/src/vs/workbench/parts/debug/electron-browser/debugHover.ts index 68d1a179e8d2a..33e4a4e21e050 100644 --- a/src/vs/workbench/parts/debug/electron-browser/debugHover.ts +++ b/src/vs/workbench/parts/debug/electron-browser/debugHover.ts @@ -24,7 +24,6 @@ import { IListService } from 'vs/platform/list/browser/listService'; const $ = dom.$; const MAX_ELEMENTS_SHOWN = 18; -//const MAX_VALUE_RENDER_LENGTH_IN_HOVER = 4096; export class DebugHoverWidget implements IContentWidget { From 6cd2a1e17ff0ad703b59e2c3934053e82cb91fe0 Mon Sep 17 00:00:00 2001 From: Cristian Date: Sat, 15 Apr 2017 09:41:11 +0300 Subject: [PATCH 5/8] #22622 - removed z-index --- src/vs/workbench/parts/debug/browser/media/debugHover.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/vs/workbench/parts/debug/browser/media/debugHover.css b/src/vs/workbench/parts/debug/browser/media/debugHover.css index ddf0a9a12465a..8fca6b6d66c05 100644 --- a/src/vs/workbench/parts/debug/browser/media/debugHover.css +++ b/src/vs/workbench/parts/debug/browser/media/debugHover.css @@ -69,7 +69,6 @@ color: rgba(108, 108, 108, 0.8); overflow: auto; max-height: 500px; - z-index: 60; } .monaco-editor .debug-hover-widget .error { From 5291f831b69640ef901eb9383781e99cc9fa06a5 Mon Sep 17 00:00:00 2001 From: Cristian Date: Thu, 8 Jun 2017 08:20:45 +0300 Subject: [PATCH 6/8] #22622 - implemented DomScrollableElement --- src/vs/workbench/parts/debug/electron-browser/debugHover.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/vs/workbench/parts/debug/electron-browser/debugHover.ts b/src/vs/workbench/parts/debug/electron-browser/debugHover.ts index 33e4a4e21e050..96f025bc4bc48 100644 --- a/src/vs/workbench/parts/debug/electron-browser/debugHover.ts +++ b/src/vs/workbench/parts/debug/electron-browser/debugHover.ts @@ -21,6 +21,7 @@ import { IDebugService, IExpression, IExpressionContainer } from 'vs/workbench/p import { Expression } from 'vs/workbench/parts/debug/common/debugModel'; import { VariablesRenderer, renderExpressionValue, VariablesDataSource } from 'vs/workbench/parts/debug/electron-browser/debugViewer'; import { IListService } from 'vs/platform/list/browser/listService'; +import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement'; const $ = dom.$; const MAX_ELEMENTS_SHOWN = 18; @@ -42,6 +43,7 @@ export class DebugHoverWidget implements IContentWidget { private valueContainer: HTMLElement; private stoleFocus: boolean; private toDispose: lifecycle.IDisposable[]; + private scrollbar: DomScrollableElement; constructor( private editor: ICodeEditor, @@ -68,6 +70,7 @@ export class DebugHoverWidget implements IContentWidget { private create(instantiationService: IInstantiationService): void { this.domNode = $('.debug-hover-widget'); this.complexValueContainer = dom.append(this.domNode, $('.complex-value')); + this.scrollbar = new DomScrollableElement(this.complexValueContainer, { canUseTranslate3d: false }); this.complexValueTitle = dom.append(this.complexValueContainer, $('.title')); this.treeContainer = dom.append(this.complexValueContainer, $('.debug-hover-tree')); this.treeContainer.setAttribute('role', 'tree'); @@ -81,6 +84,8 @@ export class DebugHoverWidget implements IContentWidget { ariaLabel: nls.localize('treeAriaLabel', "Debug Hover"), keyboardSupport: false }); + this.toDispose.push(this.scrollbar); + this.domNode.appendChild(this.scrollbar.getDomNode()); this.toDispose.push(this.listService.register(this.tree)); } From c348bfb1056122f98580ad6e1e11ae344dd77d71 Mon Sep 17 00:00:00 2001 From: Cristian Date: Sat, 10 Jun 2017 12:16:33 +0300 Subject: [PATCH 7/8] #22622 - final version --- .../parts/debug/electron-browser/debugHover.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/vs/workbench/parts/debug/electron-browser/debugHover.ts b/src/vs/workbench/parts/debug/electron-browser/debugHover.ts index 96f025bc4bc48..ec04f7078bd08 100644 --- a/src/vs/workbench/parts/debug/electron-browser/debugHover.ts +++ b/src/vs/workbench/parts/debug/electron-browser/debugHover.ts @@ -22,6 +22,7 @@ import { Expression } from 'vs/workbench/parts/debug/common/debugModel'; import { VariablesRenderer, renderExpressionValue, VariablesDataSource } from 'vs/workbench/parts/debug/electron-browser/debugViewer'; import { IListService } from 'vs/platform/list/browser/listService'; import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement'; +import { ScrollbarVisibility } from 'vs/base/common/scrollable'; const $ = dom.$; const MAX_ELEMENTS_SHOWN = 18; @@ -55,9 +56,12 @@ export class DebugHoverWidget implements IContentWidget { this.create(instantiationService); this.registerListeners(); - this.valueContainer = dom.append(this.domNode, $('.value')); + this.valueContainer = $('.value'); this.valueContainer.tabIndex = 0; this.valueContainer.setAttribute('role', 'tooltip'); + this.scrollbar = new DomScrollableElement(this.valueContainer, { canUseTranslate3d: false, horizontal: ScrollbarVisibility.Auto, vertical: ScrollbarVisibility.Auto }); + this.domNode.appendChild(this.scrollbar.getDomNode()); + this.toDispose.push(this.scrollbar); this._isVisible = false; this.showAtPosition = null; @@ -70,7 +74,6 @@ export class DebugHoverWidget implements IContentWidget { private create(instantiationService: IInstantiationService): void { this.domNode = $('.debug-hover-widget'); this.complexValueContainer = dom.append(this.domNode, $('.complex-value')); - this.scrollbar = new DomScrollableElement(this.complexValueContainer, { canUseTranslate3d: false }); this.complexValueTitle = dom.append(this.complexValueContainer, $('.title')); this.treeContainer = dom.append(this.complexValueContainer, $('.debug-hover-tree')); this.treeContainer.setAttribute('role', 'tree'); @@ -84,8 +87,6 @@ export class DebugHoverWidget implements IContentWidget { ariaLabel: nls.localize('treeAriaLabel', "Debug Hover"), keyboardSupport: false }); - this.toDispose.push(this.scrollbar); - this.domNode.appendChild(this.scrollbar.getDomNode()); this.toDispose.push(this.listService.register(this.tree)); } @@ -242,6 +243,7 @@ export class DebugHoverWidget implements IContentWidget { showChanged: false, preserveWhitespace: true }); + this.scrollbar.scanDomNode(); this.valueContainer.title = ''; this.editor.layoutContentWidget(this); if (focus) { From 5000246497bb4f0266299335b40ac4b49d77e237 Mon Sep 17 00:00:00 2001 From: Cristian Hosu Date: Wed, 14 Jun 2017 13:30:26 +0300 Subject: [PATCH 8/8] #22622 - removed ScollbarVisibility reference --- src/vs/workbench/parts/debug/electron-browser/debugHover.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/vs/workbench/parts/debug/electron-browser/debugHover.ts b/src/vs/workbench/parts/debug/electron-browser/debugHover.ts index 58f65f88f016b..946fe4db9390e 100644 --- a/src/vs/workbench/parts/debug/electron-browser/debugHover.ts +++ b/src/vs/workbench/parts/debug/electron-browser/debugHover.ts @@ -22,7 +22,6 @@ import { Expression } from 'vs/workbench/parts/debug/common/debugModel'; import { VariablesRenderer, renderExpressionValue, VariablesDataSource } from 'vs/workbench/parts/debug/electron-browser/debugViewer'; import { IListService } from 'vs/platform/list/browser/listService'; import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement'; -import { ScrollbarVisibility } from 'vs/base/common/scrollable'; import { attachListStyler, attachStylerCallback } from 'vs/platform/theme/common/styler'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { editorHoverBackground, editorHoverBorder } from 'vs/platform/theme/common/colorRegistry'; @@ -63,7 +62,7 @@ export class DebugHoverWidget implements IContentWidget { this.valueContainer = $('.value'); this.valueContainer.tabIndex = 0; this.valueContainer.setAttribute('role', 'tooltip'); - this.scrollbar = new DomScrollableElement(this.valueContainer, { canUseTranslate3d: false, horizontal: ScrollbarVisibility.Auto, vertical: ScrollbarVisibility.Auto }); + this.scrollbar = new DomScrollableElement(this.valueContainer, { canUseTranslate3d: false }); this.domNode.appendChild(this.scrollbar.getDomNode()); this.toDispose.push(this.scrollbar);