align parameter hints with suggest

fixes #6170

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

@@ -2,18 +2,15 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
-/* Parameter Hints */
 
 .monaco-editor .parameter-hints-widget {
 	font-size: 12px;
 	width: 440px;
 	z-index: 10;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: -moz-none;
-	-o-user-select: none;
-	user-select: none;
+}
+
+.monaco-editor.mac .suggest-widget {
+	font-size: 11px;
 }
 
 .monaco-editor .parameter-hints-widget.visible {
@@ -89,17 +86,11 @@
 
 .monaco-editor .parameter-hints-widget .signature .parameter {
 	display: inline-block;
-	color: #999;
 }
 
 .monaco-editor .parameter-hints-widget .signature .parameter.active {
-	color: black;
 	font-weight: bold;
-}
-
-.monaco-editor .parameter-hints-widget .signature .return-type,
-.monaco-editor .parameter-hints-widget .signature .parameter.active .parameter-type {
-	color: #0035DD;
+	text-decoration: underline;
 }
 
 .monaco-editor .parameter-hints-widget .documentation {
@@ -108,45 +99,21 @@
 	color: #A21B1B;
 }
 
-.monaco-editor .parameter-hints-widget .documentation { font-family: "Segoe UI", "SFUIText-Regular", "HelveticaNeue", sans-serif, "Droid Sans Fallback"; }
-.monaco-editor:lang(zh-Hans) .parameter-hints-widget .documentation { 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) .parameter-hints-widget .documentation { 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) .parameter-hints-widget .documentation { 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) .parameter-hints-widget .documentation { 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 .parameter-hints-widget .documentation .parameter {
-	color: black;
+.monaco-editor .parameter-hints-widget .documentation-parameter > .parameter {
 	font-weight: bold;
 	margin-right: 0.5em;
 }
 
-/* VS Dark theme */
+/*** VS Dark */
 
 .monaco-editor.vs-dark .parameter-hints-widget .wrapper {
 	border-color: #707070;
 }
 
-.monaco-editor.vs-dark .parameter-hints-widget .signature .parameter.active {
-	color: #D8D8D8;
-}
-
-.monaco-editor.vs-dark .parameter-hints-widget .signature .return-type,
-.monaco-editor.vs-dark .parameter-hints-widget .signature .parameter.active .parameter-type {
-	color: #219AE4;
-}
-
-.monaco-editor.vs-dark .parameter-hints-widget .signature {
-	color: #777;
-}
-
 .monaco-editor.vs-dark .parameter-hints-widget .documentation {
 	color: #C07A7A;
 }
 
-.monaco-editor.vs-dark .parameter-hints-widget .documentation .parameter {
-	color: #D8D8D8;
-}
-
 .monaco-editor.vs-dark .parameter-hints-widget .button.previous {
 	background-image: url('arrow-up-dark.svg');
 }
@@ -155,48 +122,20 @@
 	background-image: url('arrow-down-dark.svg');
 }
 
-/* High Contrast Theming */
+/*** High Contrast */
 
 .monaco-editor.hc-black .parameter-hints-widget .wrapper {
 	border-color: #707070;
 }
 
-.monaco-editor.hc-black .parameter-hints-widget .signature .parameter.active {
-	color: #D8D8D8;
-}
-
-.monaco-editor.hc-black .parameter-hints-widget .signature .return-type,
-.monaco-editor.hc-black .parameter-hints-widget .signature .parameter.active .parameter-type {
-	color: #219AE4;
-}
-
-.monaco-editor.hc-black .parameter-hints-widget .signature {
-	color: #777;
-}
-
 .monaco-editor.hc-black .parameter-hints-widget .documentation {
 	color: #C07A7A;
 }
 
-.monaco-editor.hc-black .parameter-hints-widget .documentation .parameter {
-	color: #D8D8D8;
-}
-
-.monaco-editor.hc-black .parameter-hints-widget .button {
-	background: none;
-}
-
-.monaco-editor.hc-black .parameter-hints-widget .button:before {
-	position: relative;
-	opacity: 0.8;
-}
-
 .monaco-editor.hc-black .parameter-hints-widget .button.previous:before {
 	content: url('arrow-up-dark.svg');
-	top: -2px;
 }
 
 .monaco-editor.hc-black .parameter-hints-widget .button.next:before {
 	content: url('arrow-down-dark.svg');
-	top: -4px;
 }
\ No newline at end of file

src/vs/editor/contrib/parameterHints/browser/parameterHintsWidget.ts

@@ -102,13 +102,6 @@ export class ParameterHintsWidget implements IContentWidget {
 				this.editor.layoutContentWidget(this);
 			}
 		}));
-
-		this.editor.applyFontInfo(this.getDomNode());
-		this.disposables.push(this.editor.onDidChangeConfiguration(e => {
-			if (e.fontInfo) {
-				this.editor.applyFontInfo(this.getDomNode());
-			}
-		}));
 	}
 
 	private show(): void {
@@ -173,14 +166,22 @@ export class ParameterHintsWidget implements IContentWidget {
 		}
 	}
 
+	private applyFont(element: HTMLElement): void {
+		const fontInfo = this.editor.getConfiguration().fontInfo;
+		element.style.fontFamily = fontInfo.fontFamily;
+	}
+
 	private renderSignature(element: HTMLElement, signature:SignatureInformation, currentParameter:number): HTMLElement {
 		const signatureElement = dom.append(element, $('.signature'));
+		const code = dom.append(signatureElement, $('.code'));
 		const hasParameters = signature.parameters.length > 0;
 
+		this.applyFont(code);
+
 		if(!hasParameters) {
-			const label = dom.append(signatureElement, $('span'));
+			const label = dom.append(code, $('span'));
 			label.textContent = signature.label;
-			return signatureElement;
+			return code;
 		}
 
 		const parameters = $('span.parameters');
@@ -200,7 +201,7 @@ export class ParameterHintsWidget implements IContentWidget {
 				signatureLabelEnd = idx;
 			}
 
-			const element = i === 0 ? signatureElement : parameters;
+			const element = i === 0 ? code : parameters;
 
 			const label = $('span');
 			label.textContent = signature.label.substring(offset, signatureLabelOffset);
@@ -217,8 +218,8 @@ export class ParameterHintsWidget implements IContentWidget {
 		const label = $('span');
 		label.textContent = signature.label.substring(offset);
 
-		dom.append(signatureElement, parameters);
-		dom.append(signatureElement, label);
+		dom.append(code, parameters);
+		dom.append(code, label);
 
 		return signatureElement;
 	}
@@ -233,11 +234,12 @@ export class ParameterHintsWidget implements IContentWidget {
 		const activeParameter = signature.parameters[activeParameterIdx];
 
 		if(activeParameter && activeParameter.documentation) {
-			const parameter = $('.documentation');
+			const parameter = $('.documentation-parameter');
 			const label = $('span.parameter');
+			this.applyFont(label);
 			label.textContent = activeParameter.label;
 
-			const documentation = $('span');
+			const documentation = $('span.documentation');
 			documentation.textContent = activeParameter.documentation;
 
 			dom.append(parameter, label);