Skip to content

Commit 1018bfa

Browse files
octrefoctref
authored
Merge pull request microsoft#89014 from microsoft/pine/alwaysShowInlineDetails
Add API to always show details inline. Fix microsoft#39441
2 parents 18ea329 + 999af5d commit 1018bfa

15 files changed

Lines changed: 210 additions & 58 deletions

‎src/vs/editor/common/modes.ts‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -369,6 +369,24 @@ export let completionKindFromString: {
369369
};
370370
})();
371371

372+
export interface CompletionItemLabel {
373+
374+
/**
375+
* The name of this completion item's label.
376+
*/
377+
name: string;
378+
379+
// The signature, without the return type. is render directly after `name`
380+
// signature?: string; // parameters
381+
// The fully qualified name, like package name, file path etc
382+
// qualifier?: string;
383+
384+
/**
385+
* The return-type of a function or type of a property, variable
386+
*/
387+
type?: string;
388+
}
389+
372390
export const enum CompletionItemTag {
373391
Deprecated = 1
374392
}
@@ -396,7 +414,7 @@ export interface CompletionItem {
396414
* this is also the text that is inserted when selecting
397415
* this completion.
398416
*/
399-
label: string;
417+
label: string | CompletionItemLabel;
400418
/**
401419
* The kind of this completion item. Based on the kind
402420
* an icon is chosen by the editor.
@@ -481,7 +499,6 @@ export interface CompletionItem {
481499
export interface CompletionList {
482500
suggestions: CompletionItem[];
483501
incomplete?: boolean;
484-
isDetailsResolved?: boolean;
485502
dispose?(): void;
486503
}
487504

‎src/vs/editor/contrib/suggest/completionModel.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,7 @@ export class CompletionModel {
192192
}
193193
}
194194

195+
const textLabel = typeof item.completion.label === 'string' ? item.completion.label : item.completion.label.name;
195196
if (wordPos >= wordLen) {
196197
// the wordPos at which scoring starts is the whole word
197198
// and therefore the same rules as not having a word apply
@@ -206,19 +207,19 @@ export class CompletionModel {
206207
if (!match) {
207208
continue; // NO match
208209
}
209-
if (compareIgnoreCase(item.completion.filterText, item.completion.label) === 0) {
210+
if (compareIgnoreCase(item.completion.filterText, textLabel) === 0) {
210211
// filterText and label are actually the same -> use good highlights
211212
item.score = match;
212213
} else {
213214
// re-run the scorer on the label in the hope of a result BUT use the rank
214215
// of the filterText-match
215-
item.score = anyScore(word, wordLow, wordPos, item.completion.label, item.labelLow, 0);
216+
item.score = anyScore(word, wordLow, wordPos, textLabel, item.labelLow, 0);
216217
item.score[0] = match[0]; // use score from filterText
217218
}
218219

219220
} else {
220221
// by default match `word` against the `label`
221-
let match = scoreFn(word, wordLow, wordPos, item.completion.label, item.labelLow, 0, false);
222+
let match = scoreFn(word, wordLow, wordPos, textLabel, item.labelLow, 0, false);
222223
if (!match) {
223224
continue; // NO match
224225
}

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

Lines changed: 67 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -99,20 +99,25 @@
9999
overflow: hidden;
100100
text-overflow: ellipsis;
101101
white-space: pre;
102+
justify-content: space-between;
103+
}
104+
105+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left,
106+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right {
107+
display: flex;
102108
}
103109

104110
.monaco-editor .suggest-widget:not(.frozen) .monaco-highlighted-label .highlight {
105111
font-weight: bold;
106112
}
107113

108-
/** Icon styles **/
114+
/** ReadMore Icon styles **/
109115

110116
.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .header > .codicon-close,
111-
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .readMore::before {
117+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore::before {
112118
color: inherit;
113-
opacity: 0.6;
119+
opacity: 1;
114120
font-size: 14px;
115-
margin-left: 4px;
116121
cursor: pointer;
117122
}
118123

@@ -123,39 +128,85 @@
123128
}
124129

125130
.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .header > .codicon-close:hover,
126-
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .readMore:hover {
131+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore:hover {
127132
opacity: 1;
128133
}
129134

130135
/** Type Info and icon next to the label in the focused completion item **/
131136

132-
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .type-label {
137+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label {
133138
margin-left: 0.8em;
134-
flex: 1;
135-
text-align: right;
136139
overflow: hidden;
137140
text-overflow: ellipsis;
138141
opacity: 0.7;
139142
white-space: nowrap;
140143
}
141144

142-
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .type-label > .monaco-tokenized-source {
145+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label > .monaco-tokenized-source {
143146
display: inline;
144147
}
145148

146-
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .readMore,
147-
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .type-label,
148-
.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row.focused > .contents > .main > .readMore,
149-
.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row.focused > .contents > .main > .type-label,
150-
.monaco-editor .suggest-widget.docs-below .monaco-list .monaco-list-row.focused > .contents > .main > .readMore {
149+
/** Details: if using CompletionItem#details, show on focus **/
150+
151+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label,
152+
.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row.focused > .contents > .main > .right > .details-label {
151153
display: none;
152154
}
153155

154-
.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .readMore,
155-
.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .type-label {
156+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .right > .details-label {
157+
display: inline;
158+
}
159+
160+
/** Details: if using CompletionItemLabel#details, always show **/
161+
162+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right.always-show-details > .details-label,
163+
.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row.focused > .contents > .main > .right.always-show-details > .details-label {
156164
display: inline;
157165
}
158166

167+
/** Ellipsis on hover **/
168+
.monaco-editor .suggest-widget:not(.docs-side) .monaco-list .monaco-list-row:hover > .contents > .main > .right.can-expand-details > .details-label {
169+
width: calc(100% - 26px);
170+
}
171+
172+
/** ReadMore: show on hover **/
173+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right {
174+
overflow: hidden;
175+
}
176+
177+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore {
178+
display: inline-block;
179+
position: absolute;
180+
right: 10px;
181+
width: 18px;
182+
height: 18px;
183+
visibility: hidden;
184+
}
185+
186+
/** Do NOT display ReadMore when docs is side/below **/
187+
.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row > .contents > .main > .right > .readMore,
188+
.monaco-editor .suggest-widget.docs-below .monaco-list .monaco-list-row > .contents > .main > .right > .readMore {
189+
display: none !important;
190+
}
191+
192+
/** Do NOT display ReadMore when using plain CompletionItemLabel (details/documentation might not be resolved) **/
193+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right:not(.always-show-details) > .readMore {
194+
display: none;
195+
}
196+
/** Focused item can show ReadMore, but can't when docs is side/below **/
197+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .right:not(.always-show-details) > .readMore {
198+
display: inline-block;
199+
}
200+
201+
.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row > .contents > .main > .right > .readMore,
202+
.monaco-editor .suggest-widget.docs-below .monaco-list .monaco-list-row > .contents > .main > .right > .readMore {
203+
display: none;
204+
}
205+
206+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row:hover > .contents > .main > .right > .readMore {
207+
visibility: visible;
208+
}
209+
159210
/** Styles for each row in the list **/
160211

161212
.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label.deprecated {

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ export class CompletionItem {
3737
readonly editInsertEnd: IPosition;
3838
readonly editReplaceEnd: IPosition;
3939

40+
//
41+
readonly textLabel: string;
42+
4043
// perf
4144
readonly labelLow: string;
4245
readonly sortTextLow?: string;
@@ -48,18 +51,20 @@ export class CompletionItem {
4851
idx?: number;
4952
word?: string;
5053

51-
//
52-
readonly isDetailsResolved: boolean;
53-
5454
constructor(
5555
readonly position: IPosition,
5656
readonly completion: modes.CompletionItem,
5757
readonly container: modes.CompletionList,
5858
readonly provider: modes.CompletionItemProvider,
5959
model: ITextModel
6060
) {
61+
this.textLabel = typeof completion.label === 'string'
62+
? completion.label
63+
: completion.label.name;
64+
6165
// ensure lower-variants (perf)
62-
this.labelLow = completion.label.toLowerCase();
66+
this.labelLow = this.textLabel.toLowerCase();
67+
6368
this.sortTextLow = completion.sortText && completion.sortText.toLowerCase();
6469
this.filterTextLow = completion.filterText && completion.filterText.toLowerCase();
6570

@@ -74,8 +79,6 @@ export class CompletionItem {
7479
this.editReplaceEnd = new Position(completion.range.replace.endLineNumber, completion.range.replace.endColumn);
7580
}
7681

77-
this.isDetailsResolved = container.isDetailsResolved || typeof provider.resolveCompletionItem === 'undefined';
78-
7982
// create the suggestion resolver
8083
const { resolveCompletionItem } = provider;
8184
if (typeof resolveCompletionItem !== 'function') {
@@ -189,7 +192,7 @@ export function provideSuggestionItems(
189192
}
190193
// fill in default sortText when missing
191194
if (!suggestion.sortText) {
192-
suggestion.sortText = suggestion.label;
195+
suggestion.sortText = typeof suggestion.label === 'string' ? suggestion.label : suggestion.label.name;
193196
}
194197

195198
allSuggestions.push(new CompletionItem(position, suggestion, container, provider, model));

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -341,8 +341,9 @@ export class SuggestController implements IEditorContribution {
341341
}
342342

343343
private _alertCompletionItem({ completion: suggestion }: CompletionItem): void {
344+
const textLabel = typeof suggestion.label === 'string' ? suggestion.label : suggestion.label.name;
344345
if (isNonEmptyArray(suggestion.additionalTextEdits)) {
345-
let msg = nls.localize('arai.alert.snippet', "Accepting '{0}' made {1} additional edits", suggestion.label, suggestion.additionalTextEdits.length);
346+
let msg = nls.localize('arai.alert.snippet', "Accepting '{0}' made {1} additional edits", textLabel, suggestion.additionalTextEdits.length);
346347
alert(msg);
347348
}
348349
}

0 commit comments

Comments
 (0)