hover: scrollbar

joaomoreno · joaomoreno · commit 71076263d843 · 2016-09-05T16:04:03.000+02:00
diff --git a/src/vs/editor/contrib/hover/browser/hover.css b/src/vs/editor/contrib/hover/browser/hover.css
@@ -28,6 +28,7 @@
 
 .monaco-editor-hover .monaco-editor-hover-content {
 	max-width: 438px;
+	max-height: 244px;
 }
 
 .monaco-editor-hover .hover-row {
diff --git a/src/vs/editor/contrib/hover/browser/hoverWidgets.ts b/src/vs/editor/contrib/hover/browser/hoverWidgets.ts
@@ -11,16 +11,20 @@ import {Position} from 'vs/editor/common/core/position';
 import {IPosition, IConfigurationChangedEvent} from 'vs/editor/common/editorCommon';
 import * as editorBrowser from 'vs/editor/browser/editorBrowser';
 import {Widget} from 'vs/base/browser/ui/widget';
+import {DomScrollableElement} from 'vs/base/browser/ui/scrollbar/scrollableElement';
+import {IDisposable, dispose} from 'vs/base/common/lifecycle';
 
 export class ContentHoverWidget extends Widget implements editorBrowser.IContentWidget {
 
 	private _id: string;
 	protected _editor: editorBrowser.ICodeEditor;
 	private _isVisible: boolean;
 	private _containerDomNode: HTMLElement;
-	protected _domNode: HTMLElement;
+	private _domNode: HTMLElement;
 	protected _showAtPosition: Position;
 	private _stoleFocus: boolean;
+	private scrollbar: DomScrollableElement;
+	private disposables: IDisposable[] = [];
 
 	// Editor.IContentWidget.allowEditorOverflow
 	public allowEditorOverflow = true;
@@ -42,11 +46,15 @@ export class ContentHoverWidget extends Widget implements editorBrowser.IContent
 
 		this._containerDomNode = document.createElement('div');
 		this._containerDomNode.className = 'monaco-editor-hover hidden';
+		this._containerDomNode.tabIndex = 0;
 
 		this._domNode = document.createElement('div');
 		this._domNode.className = 'monaco-editor-hover-content';
-		this._containerDomNode.appendChild(this._domNode);
-		this._containerDomNode.tabIndex = 0;
+
+		this.scrollbar = new DomScrollableElement(this._domNode, { canUseTranslate3d: false });
+		this.disposables.push(this.scrollbar);
+		this._containerDomNode.appendChild(this.scrollbar.getDomNode());
+
 		this.onkeydown(this._containerDomNode, (e: IKeyboardEvent) => {
 			if (e.equals(CommonKeybindings.ESCAPE)) {
 				this.hide();
@@ -72,9 +80,6 @@ export class ContentHoverWidget extends Widget implements editorBrowser.IContent
 	}
 
 	public showAt(position:IPosition, focus: boolean): void {
-		// Update the font for the `code` class elements
-		this.updateFont();
-
 		// Position has changed
 		this._showAtPosition = new Position(position.lineNumber, position.column);
 		this.isVisible = true;
@@ -117,6 +122,7 @@ export class ContentHoverWidget extends Widget implements editorBrowser.IContent
 
 	public dispose(): void {
 		this._editor.removeContentWidget(this);
+		this.disposables = dispose(this.disposables);
 		super.dispose();
 	}
 
@@ -126,6 +132,15 @@ export class ContentHoverWidget extends Widget implements editorBrowser.IContent
 
 		[...codeTags, ...codeClasses].forEach(node => this._editor.applyFontInfo(node));
 	}
+
+	protected updateContents(node: Node): void {
+		this._domNode.textContent = '';
+		this._domNode.appendChild(node);
+		this.updateFont();
+
+		this._editor.layoutContentWidget(this);
+		this.scrollbar.scanDomNode();
+	}
 }
 
 export class GlyphHoverWidget extends Widget implements editorBrowser.IOverlayWidget {
diff --git a/src/vs/editor/contrib/hover/browser/modesContentHover.ts b/src/vs/editor/contrib/hover/browser/modesContentHover.ts
@@ -260,15 +260,14 @@ export class ModesContentHoverWidget extends ContentHoverWidget {
 				});
 		});
 
-		this._domNode.textContent = '';
-		this._domNode.appendChild(fragment);
-
 		// show
 		this.showAt({
 			lineNumber: renderRange.startLineNumber,
 			column: renderColumn
 		}, this._shouldFocus);
 
+		this.updateContents(fragment);
+
 		this._isChangingDecorations = true;
 		this._highlightDecorations = this._editor.deltaDecorations(this._highlightDecorations, [{
 			range: highlightRange,

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,7 @@`
`28`	`28`
`29`	`29`	`.monaco-editor-hover .monaco-editor-hover-content {`
`30`	`30`	`max-width: 438px;`
	`31`	`+ max-height: 244px;`
`31`	`32`	`}`
`32`	`33`
`33`	`34`	`.monaco-editor-hover .hover-row {`