WIP

extensions/css-language-features/client/src/cssMain.ts

@@ -9,6 +9,7 @@ import { commands, CompletionItem, CompletionItemKind, ExtensionContext, languag
 import { Disposable, LanguageClient, LanguageClientOptions, ServerOptions, TransportKind, ProvideCompletionItemsSignature } from 'vscode-languageclient';
 import * as nls from 'vscode-nls';
 import { getCustomDataPathsFromAllExtensions, getCustomDataPathsInAllWorkspaces } from './customData';
+import { generateRandomLabel } from './randomWord';
 
 const localize = nls.loadMessageBundle();
 
@@ -58,12 +59,12 @@ export function activate(context: ExtensionContext) {
 					if (item.kind === CompletionItemKind.Color) {
 						item.label2 = {
 							name: item.label,
-							type: (item.documentation as string)
+							signature: '(my, signature)',
+							qualifier: 'my.qualifier',
+							type: (item.documentation as string),
 						};
-					}
-					const range = item.range;
-					if (range instanceof Range && range.end.isAfter(position) && range.start.isBeforeOrEqual(position)) {
-						item.range = { inserting: new Range(range.start, position), replacing: range };
+					} else {
+						item.label2 = generateRandomLabel(item.label);
 					}
 				}
 				// testing the new completion

src/vs/editor/common/modes.ts

@@ -370,19 +370,23 @@ export let completionKindFromString: {
 })();
 
 export interface CompletionItemLabel {
-
 	/**
-	 * The name of this completion item's label.
+	 * The function or variable
 	 */
 	name: string;
 
-	// The signature, without the return type. is render directly after `name`
-	// signature?: string; // parameters
-	// The fully qualified name, like package name, file path etc
-	// qualifier?: string;
+	/**
+	 * The signature, without the return type. is render directly after `name`
+	 */
+	signature?: string;
+
+	/**
+	 * The fully qualified name, like package name, file path etc
+	 */
+	qualifier?: string;
 
 	/**
-	 * The return-type of a function or type of a property, variable
+	 * The return-type of a function or type of a property, variable etc
 	 */
 	type?: string;
 }

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

@@ -132,13 +132,19 @@
 	opacity: 1;
 }
 
+/** signature, qualifier, type/details opacity **/
+.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .signature-label,
+.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .qualifier-label,
+.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label {
+	opacity: 0.7;
+}
+
 /** Type Info and icon next to the label in the focused completion item **/
 
 .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label {
 	margin-left: 0.8em;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	opacity: 0.7;
 	white-space: nowrap;
 }
 
@@ -172,6 +178,7 @@
 /** ReadMore: show on hover **/
 .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right {
 	overflow: hidden;
+	margin-left: 16px;
 }
 
 .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore {

src/vs/editor/contrib/suggest/suggestController.ts

@@ -43,7 +43,7 @@ import { SuggestRangeHighlighter } from 'vs/editor/contrib/suggest/suggestRangeH
  * Stop suggest widget from disappearing when clicking into other areas
  * For development purpose only
  */
-const _sticky = false;
+const _sticky = true;
 
 class LineSuffix {
 

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

@@ -49,8 +49,8 @@ interface ISuggestionTemplateData {
 
 	/**
 	 * Flexbox
-	 * < -- left -->                   <---   right   --->
-	 * <icon><label>                   <details><readmore>
+	 * < ------- left ------- >     < -------- right -------- >
+	 * <icon><label><signature>     <qualifier><type><readmore>
 	 */
 	left: HTMLElement;
 	right: HTMLElement;
@@ -59,8 +59,10 @@ interface ISuggestionTemplateData {
 	colorspan: HTMLElement;
 	iconLabel: IconLabel;
 	iconContainer: HTMLElement;
+	signatureLabel: HTMLElement;
+	qualifierLabel: HTMLElement;
 	/**
-	 * Showing either `CompletionItem#details` or `CompletionItemLabel#name`
+	 * Showing either `CompletionItem#details` or `CompletionItemLabel#type`
 	 */
 	detailsLabel: HTMLElement;
 	readMore: HTMLElement;
@@ -138,11 +140,6 @@ class ItemRenderer implements IListRenderer<CompletionItem, ISuggestionTemplateD
 		const text = append(container, $('.contents'));
 		const main = append(text, $('.main'));
 
-		/**
-		 * Flexbox
-		 * < -- left -->                   <---   right   --->
-		 * <icon><label>                   <details><readmore>
-		 */
 		data.left = append(main, $('span.left'));
 		data.right = append(main, $('span.right'));
 
@@ -151,6 +148,8 @@ class ItemRenderer implements IListRenderer<CompletionItem, ISuggestionTemplateD
 		data.iconLabel = new IconLabel(data.left, { supportHighlights: true, supportCodicons: true });
 		data.disposables.add(data.iconLabel);
 
+		data.signatureLabel = append(data.left, $('span.signature-label'));
+		data.qualifierLabel = append(data.right, $('span.qualifier-label'));
 		data.detailsLabel = append(data.right, $('span.details-label'));
 
 		data.readMore = append(data.right, $('span.readMore.codicon.codicon-info'));
@@ -241,6 +240,8 @@ class ItemRenderer implements IListRenderer<CompletionItem, ISuggestionTemplateD
 			data.detailsLabel.textContent = (suggestion.detail || '').replace(/\n.*$/m, '');
 			removeClass(data.right, 'always-show-details');
 		} else {
+			data.signatureLabel.textContent = (suggestion.label.signature || '').replace(/\n.*$/m, '');
+			data.qualifierLabel.textContent = (suggestion.label.qualifier || '').replace(/\n.*$/m, '');
 			data.detailsLabel.textContent = (suggestion.label.type || '').replace(/\n.*$/m, '');
 			addClass(data.right, 'always-show-details');
 		}

src/vs/monaco.d.ts

@@ -5198,11 +5198,19 @@ declare namespace monaco.languages {
 
 	export interface CompletionItemLabel {
 		/**
-		 * The name of this completion item's label.
+		 * The function or variable
 		 */
 		name: string;
 		/**
-		 * The return-type of a function or type of a property, variable
+		 * The signature, without the return type. is render directly after `name`
+		 */
+		signature?: string;
+		/**
+		 * The fully qualified name, like package name, file path etc
+		 */
+		qualifier?: string;
+		/**
+		 * The return-type of a function or type of a property, variable etc
 		 */
 		type?: string;
 	}

src/vs/vscode.proposed.d.ts

@@ -1386,18 +1386,24 @@ declare module 'vscode' {
 	}
 
 	export interface CompletionItemLabel {
-
 		/**
 		 * The function or variable
 		 */
 		name: string;
 
-		// The signature, without the return type. is render directly after `name`
-		// signature?: string; // parameters
-		// The fully qualified name, like package name, file path etc
-		// qualifier?: string;
+		/**
+		 * The signature, without the return type. is render directly after `name`
+		 */
+		signature?: string;
+
+		/**
+		 * The fully qualified name, like package name, file path etc
+		 */
+		qualifier?: string;
 
-		// The return-type of a function or type of a property, variable etc
+		/**
+		 * The return-type of a function or type of a property, variable etc
+		 */
 		type?: string;
 	}
 

src/vs/workbench/api/common/extHostTypes.ts

@@ -1358,8 +1358,8 @@ export enum CompletionItemTag {
 
 export interface CompletionItemLabel {
 	name: string;
-	// signature?: string; // parameters
-	// qualifier?: string;
+	signature?: string;
+	qualifier?: string;
 	type?: string;
 }