scale suggest widget with editor's font size

fixes #2465

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

@@ -6,7 +6,7 @@
 /* Suggest */
 .monaco-editor .suggest-widget {
 	background-color: #F3F3F3;
-	font-size: 12px;
+	font-size: 90%;
 	border: 1px solid rgb(200, 200, 200);
 	z-index: 40;
 }
@@ -18,10 +18,6 @@
 	transition: left .05s ease-in-out;
 }
 
-.monaco-editor.mac .suggest-widget {
-	font-size: 11px;
-}
-
 .monaco-editor.mac .suggest-widget .text {
 	line-height: 1.3em;
 }
@@ -83,6 +79,7 @@
 .monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .docs,
 .monaco-editor .suggest-widget .monaco-list .monaco-list-row .docs {
 	color: #A21B1B;
+	font-size: 0.9em;
 }
 
 .monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .docs,

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

@@ -120,28 +120,6 @@ class Renderer implements IRenderer<CompletionItem, ISuggestionTemplateData> {
 	}
 }
 
-const FocusHeight = 35;
-const UnfocusedHeight = 19;
-
-class Delegate implements IDelegate<CompletionItem> {
-
-	constructor(private listProvider: () => List<CompletionItem>) { }
-
-	getHeight(element: CompletionItem): number {
-		const focus = this.listProvider().getFocus()[0];
-
-		if (element.suggestion.documentationLabel && element === focus) {
-			return FocusHeight;
-		}
-
-		return UnfocusedHeight;
-	}
-
-	getTemplateId(element: CompletionItem): string {
-		return 'suggestion';
-	}
-}
-
 function computeScore(suggestion: string, currentWord: string, currentWordLowerCase: string): number {
 	const suggestionLowerCase = suggestion.toLowerCase();
 	let score = 0;
@@ -266,7 +244,7 @@ class SuggestionDetails {
 	}
 }
 
-export class SuggestWidget implements IContentWidget, IDisposable {
+export class SuggestWidget implements IContentWidget, IDelegate<CompletionItem>, IDisposable {
 
 	static ID: string = 'editor.widget.suggestWidget';
 	static WIDTH: number = 438;
@@ -274,7 +252,7 @@ export class SuggestWidget implements IContentWidget, IDisposable {
 	static LOADING_MESSAGE: string = nls.localize('suggestWidget.loading', "Loading...");
 	static NO_SUGGESTIONS_MESSAGE: string = nls.localize('suggestWidget.noSuggestions', "No suggestions.");
 
-	public allowEditorOverflow: boolean = true; // Editor.IContentWidget.allowEditorOverflow
+	allowEditorOverflow: boolean = true; // Editor.IContentWidget.allowEditorOverflow
 
 	private state: State;
 	private isAuto: boolean;
@@ -293,7 +271,6 @@ export class SuggestWidget implements IContentWidget, IDisposable {
 	private messageElement: HTMLElement;
 	private listElement: HTMLElement;
 	private details: SuggestionDetails;
-	private delegate: IDelegate<CompletionItem>;
 	private list: List<CompletionItem>;
 
 	private editorBlurTimeout: TPromise<void>;
@@ -301,7 +278,7 @@ export class SuggestWidget implements IContentWidget, IDisposable {
 	private toDispose: IDisposable[];
 
 	private _onDidVisibilityChange: Emitter<boolean> = new Emitter();
-	public get onDidVisibilityChange(): Event<boolean> { return this._onDidVisibilityChange.event; }
+	get onDidVisibilityChange(): Event<boolean> { return this._onDidVisibilityChange.event; }
 
 	constructor(
 		private editor: ICodeEditor,
@@ -332,8 +309,7 @@ export class SuggestWidget implements IContentWidget, IDisposable {
 
 		let renderer: IRenderer<CompletionItem, any> = instantiationService.createInstance(Renderer, this);
 
-		this.delegate = new Delegate(() => this.list);
-		this.list = new List(this.listElement, this.delegate, [renderer]);
+		this.list = new List(this.listElement, this, [renderer]);
 
 		this.toDispose = [
 			editor.addListener2(EventType.ModelChanged, () => this.onModelModeChanged()),
@@ -641,7 +617,7 @@ export class SuggestWidget implements IContentWidget, IDisposable {
 		}
 	}
 
-	public selectNextPage(): boolean {
+	selectNextPage(): boolean {
 		switch (this.state) {
 			case State.Hidden:
 				return false;
@@ -656,7 +632,7 @@ export class SuggestWidget implements IContentWidget, IDisposable {
 		}
 	}
 
-	public selectNext(): boolean {
+	selectNext(): boolean {
 		switch (this.state) {
 			case State.Hidden:
 				return false;
@@ -671,7 +647,7 @@ export class SuggestWidget implements IContentWidget, IDisposable {
 		}
 	}
 
-	public selectPreviousPage(): boolean {
+	selectPreviousPage(): boolean {
 		switch (this.state) {
 			case State.Hidden:
 				return false;
@@ -686,7 +662,7 @@ export class SuggestWidget implements IContentWidget, IDisposable {
 		}
 	}
 
-	public selectPrevious(): boolean {
+	selectPrevious(): boolean {
 		switch (this.state) {
 			case State.Hidden:
 				return false;
@@ -701,7 +677,7 @@ export class SuggestWidget implements IContentWidget, IDisposable {
 		}
 	}
 
-	public acceptSelectedSuggestion(): boolean {
+	acceptSelectedSuggestion(): boolean {
 		switch (this.state) {
 			case State.Hidden:
 				return false;
@@ -718,7 +694,7 @@ export class SuggestWidget implements IContentWidget, IDisposable {
 		}
 	}
 
-	public toggleDetails(): void {
+	toggleDetails(): void {
 		if (this.state === State.Details) {
 			this.setState(State.Open);
 			this.editor.focus();
@@ -753,7 +729,7 @@ export class SuggestWidget implements IContentWidget, IDisposable {
 		removeClass(this.element, 'visible');
 	}
 
-	public cancel(): void {
+	cancel(): void {
 		if (this.state === State.Details) {
 			this.toggleDetails();
 		} else {
@@ -761,7 +737,7 @@ export class SuggestWidget implements IContentWidget, IDisposable {
 		}
 	}
 
-	public getPosition(): IContentWidgetPosition {
+	getPosition(): IContentWidgetPosition {
 		if (this.state === State.Hidden) {
 			return null;
 		}
@@ -772,11 +748,11 @@ export class SuggestWidget implements IContentWidget, IDisposable {
 		};
 	}
 
-	public getDomNode(): HTMLElement {
+	getDomNode(): HTMLElement {
 		return this.element;
 	}
 
-	public getId(): string {
+	getId(): string {
 		return SuggestWidget.ID;
 	}
 
@@ -789,16 +765,16 @@ export class SuggestWidget implements IContentWidget, IDisposable {
 		let height = 0;
 
 		if (this.state === State.Empty || this.state === State.Loading) {
-			height = UnfocusedHeight;
+			height = this.lineHeight;
 		} else if (this.state === State.Details) {
-			height = 12 * UnfocusedHeight;
+			height = 12 * this.lineHeight;
 		} else {
 			const focus = this.list.getFocus()[0];
-			const focusHeight = focus ? this.delegate.getHeight(focus) : UnfocusedHeight;
+			const focusHeight = focus ? this.getHeight(focus) : this.lineHeight;
 			height = focusHeight;
 
-			const suggestionCount = (this.list.contentHeight - focusHeight) / UnfocusedHeight;
-			height += Math.min(suggestionCount, 11) * UnfocusedHeight;
+			const suggestionCount = (this.list.contentHeight - focusHeight) / this.lineHeight;
+			height += Math.min(suggestionCount, 11) * this.lineHeight;
 		}
 
 		this.element.style.height = height + 'px';
@@ -816,7 +792,28 @@ export class SuggestWidget implements IContentWidget, IDisposable {
 		}
 	}
 
-	public dispose(): void {
+	// IDelegate
+
+	private get lineHeight(): number {
+		const { fontSize } = this.editor.getConfiguration();
+		return Math.floor(fontSize * 1.7);
+	}
+
+	getHeight(element: CompletionItem): number {
+		const focus = this.list.getFocus()[0];
+
+		if (element.suggestion.documentationLabel && element === focus) {
+			return Math.floor(this.lineHeight * 1.7);
+		}
+
+		return this.lineHeight;
+	}
+
+	getTemplateId(element: CompletionItem): string {
+		return 'suggestion';
+	}
+
+	dispose(): void {
 		this.state = null;
 		this.suggestionSupportsAutoAccept = null;
 		this.currentSuggestionDetails = null;