make sugest widget adopt editor's font in code html elements

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

@@ -36,10 +36,6 @@
 	width: 100%;
 }
 
-.monaco-editor .suggest-widget > .tree {
-	font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
-}
-
 .monaco-editor .suggest-widget .monaco-list .monaco-list-row {
 	-mox-box-sizing: border-box;
 	box-sizing: border-box;
@@ -89,17 +85,6 @@
 	color: #A21B1B;
 }
 
-.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .docs,
-.monaco-editor .suggest-widget .monaco-list .monaco-list-row .docs { font-family: "Segoe UI", "SFUIText-Regular", "HelveticaNeue", sans-serif, "Droid Sans Fallback"; }
-.monaco-editor:lang(zh-Hans) .suggest-widget .details > .monaco-scrollable-element > .body > .docs,
-.monaco-editor:lang(zh-Hans) .suggest-widget .monaco-list .monaco-list-row .docs { font-family: "Segoe UI", "SFUIText-Regular", "HelveticaNeue", "Noto Sans", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", sans-serif; }
-.monaco-editor:lang(zh-Hant) .suggest-widget .details > .monaco-scrollable-element > .body > .docs,
-.monaco-editor:lang(zh-Hant) .suggest-widget .monaco-list .monaco-list-row .docs { font-family: "Segoe UI", "SFUIText-Regular", "HelveticaNeue", "Noto Sans", "Microsoft Jhenghei", "PingFang TC", "Source Han Sans TC", "Source Han Sans", "Source Han Sans TW", sans-serif; }
-.monaco-editor:lang(ja) .suggest-widget .details > .monaco-scrollable-element > .body > .docs,
-.monaco-editor:lang(ja) .suggest-widget .monaco-list .monaco-list-row .docs { font-family: "Segoe UI", "SFUIText-Regular", "HelveticaNeue", "Noto Sans", "Meiryo", "Hiragino Kaku Gothic Pro", "Source Han Sans J", "Source Han Sans JP", "Source Han Sans", "Sazanami Gothic", "IPA Gothic", sans-serif; }
-.monaco-editor:lang(ko) .suggest-widget .details > .monaco-scrollable-element > .body > .docs,
-.monaco-editor:lang(ko) .suggest-widget .monaco-list .monaco-list-row .docs { font-family: "Segoe UI", "SFUIText-Regular", "HelveticaNeue", "Noto Sans", "Malgun Gothic", "Nanum Gothic", "Dotom", "Apple SD Gothic Neo", "AppleGothic", "Source Han Sans K", "Source Han Sans JR", "Source Han Sans", "UnDotum", "FBaekmuk Gulim", sans-serif; }
-
 .monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-highlighted-label > span {
 	opacity: 1;
 }

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

@@ -10,7 +10,7 @@ import * as nls from 'vs/nls';
 import * as strings from 'vs/base/common/strings';
 import {isPromiseCanceledError, onUnexpectedError} from 'vs/base/common/errors';
 import Event, { Emitter } from 'vs/base/common/event';
-import {IDisposable, dispose} from 'vs/base/common/lifecycle';
+import {IDisposable, dispose, toDisposable} from 'vs/base/common/lifecycle';
 import * as timer from 'vs/base/common/timer';
 import {TPromise} from 'vs/base/common/winjs.base';
 import {addClass, append, emmet as $, hide, removeClass, show, toggleClass} from 'vs/base/browser/dom';
@@ -21,7 +21,7 @@ import {DomScrollableElement} from 'vs/base/browser/ui/scrollbar/scrollableEleme
 import {IInstantiationService} from 'vs/platform/instantiation/common/instantiation';
 import {IKeybindingContextKey, IKeybindingService} from 'vs/platform/keybinding/common/keybindingService';
 import {ITelemetryService} from 'vs/platform/telemetry/common/telemetry';
-import {EventType, IModeSupportChangedEvent} from 'vs/editor/common/editorCommon';
+import {EventType, IModeSupportChangedEvent, IConfigurationChangedEvent} from 'vs/editor/common/editorCommon';
 import {SuggestRegistry} from 'vs/editor/common/modes';
 import {ContentWidgetPositionPreference, ICodeEditor, IContentWidget, IContentWidgetPosition} from 'vs/editor/browser/editorBrowser';
 import {CONTEXT_SUGGESTION_SUPPORTS_ACCEPT_ON_KEY} from '../common/suggest';
@@ -37,6 +37,7 @@ interface ISuggestionTemplateData {
 	typeLabel: HTMLElement;
 	documentationDetails: HTMLElement;
 	documentation: HTMLElement;
+	disposables: IDisposable[];
 }
 
 class Renderer implements IRenderer<CompletionItem, ISuggestionTemplateData> {
@@ -45,6 +46,7 @@ class Renderer implements IRenderer<CompletionItem, ISuggestionTemplateData> {
 
 	constructor(
 		private widget: SuggestWidget,
+		private editor: ICodeEditor,
 		@IKeybindingService keybindingService: IKeybindingService
 	) {
 		const keybindings = keybindingService.lookupKeybindings('editor.action.triggerSuggest');
@@ -57,20 +59,35 @@ class Renderer implements IRenderer<CompletionItem, ISuggestionTemplateData> {
 
 	renderTemplate(container: HTMLElement): ISuggestionTemplateData {
 		const data = <ISuggestionTemplateData>Object.create(null);
+		data.disposables = [];
 		data.root = container;
-
 		data.icon = append(container, $('.icon'));
 		data.colorspan = append(data.icon, $('span.colorspan'));
 
 		const text = append(container, $('.text'));
 		const main = append(text, $('.main'));
 		data.highlightedLabel = new HighlightedLabel(main);
+		data.disposables.push(data.highlightedLabel);
 		data.typeLabel = append(main, $('span.type-label'));
+
 		const docs = append(text, $('.docs'));
 		data.documentation = append(docs, $('span.docs-text'));
 		data.documentationDetails = append(docs, $('span.docs-details.octicon.octicon-info'));
 		data.documentationDetails.title = nls.localize('readMore', "Read More...{0}", this.triggerKeybindingLabel);
 
+		const configureFont = () => {
+			const fontInfo = this.editor.getConfiguration().fontInfo;
+			main.style.fontFamily = fontInfo.fontFamily;
+		};
+
+		configureFont();
+
+		data.disposables.push(this.editor.addListener2(EventType.ConfigurationChanged, (e: IConfigurationChangedEvent) => {
+			if (e.fontInfo) {
+				configureFont();
+			}
+		}));
+
 		return data;
 	}
 
@@ -116,6 +133,7 @@ class Renderer implements IRenderer<CompletionItem, ISuggestionTemplateData> {
 
 	disposeTemplate(templateData: ISuggestionTemplateData): void {
 		templateData.highlightedLabel.dispose();
+		templateData.disposables = dispose(templateData.disposables);
 	}
 }
 
@@ -185,21 +203,40 @@ class SuggestionDetails {
 	private body: HTMLElement;
 	private type: HTMLElement;
 	private docs: HTMLElement;
-	private ariaLabel:string;
+	private ariaLabel: string;
+	private disposables: IDisposable[];
+
+	constructor(
+		container: HTMLElement,
+		private widget: SuggestWidget,
+		private editor: ICodeEditor
+	) {
+		this.disposables = [];
 
-	constructor(container: HTMLElement, private widget: SuggestWidget) {
 		this.el = append(container, $('.details'));
+		this.disposables.push(toDisposable(() => container.removeChild(this.el)));
+
 		const header = append(this.el, $('.header'));
 		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 = $('.body');
+
 		this.scrollbar = new DomScrollableElement(this.body, {});
 		append(this.el, this.scrollbar.getDomNode());
+		this.disposables.push(this.scrollbar);
+
 		this.type = append(this.body, $('p.type'));
 		this.docs = append(this.body, $('p.docs'));
-
 		this.ariaLabel = null;
+
+		this.configureFont();
+
+		this.disposables.push(this.editor.addListener2(EventType.ConfigurationChanged, (e: IConfigurationChangedEvent) => {
+			if (e.fontInfo) {
+				this.configureFont();
+			}
+		}));
 	}
 
 	get element() {
@@ -253,11 +290,14 @@ class SuggestionDetails {
 		this.scrollUp(80);
 	}
 
-	dispose(): void {
-		this.scrollbar.dispose();
+	private configureFont() {
+		const fontInfo = this.editor.getConfiguration().fontInfo;
+		this.title.style.fontFamily = fontInfo.fontFamily;
+		this.type.style.fontFamily = fontInfo.fontFamily;
+	}
 
-		this.el.parentElement.removeChild(this.el);
-		this.el = null;
+	dispose(): void {
+		this.disposables = dispose(this.disposables);
 	}
 }
 
@@ -323,9 +363,9 @@ export class SuggestWidget implements IContentWidget, IDisposable {
 
 		this.messageElement = append(this.element, $('.message'));
 		this.listElement = append(this.element, $('.tree'));
-		this.details = new SuggestionDetails(this.element, this);
+		this.details = new SuggestionDetails(this.element, this, this.editor);
 
-		let renderer: IRenderer<CompletionItem, any> = instantiationService.createInstance(Renderer, this);
+		let renderer: IRenderer<CompletionItem, any> = instantiationService.createInstance(Renderer, this, this.editor);
 
 		this.delegate = new Delegate(() => this.list);
 		this.list = new List(this.listElement, this.delegate, [renderer]);