use our scrollbars in suggest details

fixes #1928

src/vs/editor/contrib/suggest/browser/suggest.css

@@ -80,7 +80,7 @@
 	opacity: 1;
 }
 
-.monaco-editor .suggest-widget .details > .body > .docs,
+.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .docs,
 .monaco-editor .suggest-widget .monaco-tree .monaco-tree-row > .content .docs {
 	font-family:"Segoe UI", "SFUIText-Regular", "HelveticaNeue", sans-serif, "Droid Sans Fallback";
 	color: #A21B1B;
@@ -100,7 +100,7 @@
 	margin-left: 0.8em;
 }
 
-.monaco-editor .suggest-widget .details > .body > .type,
+.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .type,
 .monaco-editor .suggest-widget .monaco-tree .monaco-tree-row > .content .type-label {
 	font-size: 0.9em;
 	color: #0035DD;
@@ -158,8 +158,6 @@
 }
 
 .monaco-editor .suggest-widget .details {
-	display: flex;
-	flex-flow: column;
 	height: 100%;
 	box-sizing: border-box;
 	padding: 0 10px;
@@ -168,6 +166,8 @@
 .monaco-editor .suggest-widget .details > .header {
 	padding-top: 2px;
 	display: flex;
+	height: 20px;
+	box-sizing: border-box;
 }
 
 .monaco-editor .suggest-widget .details > .header > .title {
@@ -183,12 +183,15 @@
 	opacity: 1;
 }
 
-.monaco-editor .suggest-widget .details > .body {
-	flex: 2;
-	overflow-y: scroll;
+.monaco-editor .suggest-widget .details > .monaco-scrollable-element {
+	height: calc(100% - 20px);
+}
+
+.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body {
+	height: 100%;
 }
 
-.monaco-editor .suggest-widget .details > .body > p {
+.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > p {
 	margin: 0;
 }
 
@@ -202,7 +205,7 @@
 	color: #219AE4;
 }
 
-.monaco-editor.vs-dark .suggest-widget .details > .body > .docs,
+.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .docs,
 .monaco-editor.vs-dark .suggest-widget .monaco-tree .monaco-tree-row > .content .docs {
 	color: #C07A7A;
 }
@@ -210,7 +213,7 @@
 
 .monaco-editor.vs-dark .suggest-widget .monaco-tree .monaco-tree-row > .content .docs > .docs-details,
 .monaco-editor.vs-dark .suggest-widget .details > .header > .go-back,
-.monaco-editor.vs-dark .suggest-widget .details > .body > .type,
+.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .type,
 .monaco-editor.vs-dark .suggest-widget .monaco-tree .monaco-tree-row > .content .type-label {
 	color: #4E94CE;
 }
@@ -248,14 +251,14 @@
 	color: #219AE4;
 }
 
-.monaco-editor.hc-black .suggest-widget .details > .body > .docs,
+.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .docs,
 .monaco-editor.hc-black .suggest-widget .monaco-tree .monaco-tree-row > .content .docs {
 	color: #C07A7A;
 }
 
 .monaco-editor.hc-black .suggest-widget .monaco-tree .monaco-tree-row > .content .docs > .docs-details,
 .monaco-editor.hc-black .suggest-widget .details > .header > .go-back,
-.monaco-editor.hc-black .suggest-widget .details > .body > .type,
+.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .type,
 .monaco-editor.hc-black .suggest-widget .monaco-tree .monaco-tree-row > .content .type-label {
 	color: #4E94CE;
 }

src/vs/editor/contrib/suggest/browser/suggestWidget.ts

@@ -31,6 +31,7 @@ import URI from 'vs/base/common/uri';
 import { isFalsyOrEmpty } from 'vs/base/common/arrays';
 import { onUnexpectedError, isPromiseCanceledError, illegalArgument } from 'vs/base/common/errors';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/impl/scrollableElement';
 
 function completionGroupCompare(one: CompletionGroup, other: CompletionGroup): number {
 	return one.index - other.index;
@@ -399,6 +400,7 @@ class SuggestionDetails {
 	private el: HTMLElement;
 	private title: HTMLElement;
 	private back: HTMLElement;
+	private scrollable: ScrollableElement;
 	private body: HTMLElement;
 	private type: HTMLElement;
 	private docs: HTMLElement;
@@ -409,10 +411,11 @@ class SuggestionDetails {
 		this.title = append(header, $('span.title'));
 		this.back = append(header, $('span.go-back.octicon.octicon-mail-reply'));
 		this.back.title = nls.localize('goback', "Go back");
-		this.body = append(this.el, $('.body'));
+		this.body = $('.body');
+		this.scrollable = new ScrollableElement(this.body, {});
+		append(this.el, this.scrollable.getDomNode());
 		this.type = append(this.body, $('p.type'));
 		this.docs = append(this.body, $('p.docs'));
-		addDisposableListener(this.docs, 'mousewheel', e => e.stopPropagation());
 	}
 
 	get element() {
@@ -435,6 +438,9 @@ class SuggestionDetails {
 			e.stopPropagation();
 			this.widget.toggleDetails();
 		};
+
+		this.scrollable.onElementDimensions();
+		this.scrollable.onElementInternalDimensions();
 	}
 
 	scrollDown(much = 8): void {