mirror of
https://github.com/coder/code-server.git
synced 2026-05-10 14:27:26 +02:00
Merge commit 'be3e8236086165e5e45a5a10783823874b3f3ebd' as 'lib/vscode'
This commit is contained in:
Joe Previte
@@ -0,0 +1,240 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import * as nls from 'vs/nls';
|
||||
import { createMatches } from 'vs/base/common/filters';
|
||||
import { DisposableStore } from 'vs/base/common/lifecycle';
|
||||
import { append, $, hide, show } from 'vs/base/browser/dom';
|
||||
import { IListRenderer } from 'vs/base/browser/ui/list/list';
|
||||
import { EditorOption } from 'vs/editor/common/config/editorOptions';
|
||||
import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
|
||||
import { CompletionItem } from './suggest';
|
||||
import { IThemeService } from 'vs/platform/theme/common/themeService';
|
||||
import { IModeService } from 'vs/editor/common/services/modeService';
|
||||
import { CompletionItemKind, completionKindToCssClass, CompletionItemTag } from 'vs/editor/common/modes';
|
||||
import { IconLabel, IIconLabelValueOptions } from 'vs/base/browser/ui/iconLabel/iconLabel';
|
||||
import { getIconClasses } from 'vs/editor/common/services/getIconClasses';
|
||||
import { IModelService } from 'vs/editor/common/services/modelService';
|
||||
import { URI } from 'vs/base/common/uri';
|
||||
import { FileKind } from 'vs/platform/files/common/files';
|
||||
import { flatten } from 'vs/base/common/arrays';
|
||||
import { canExpandCompletionItem } from './suggestWidgetDetails';
|
||||
import { Codicon, registerIcon } from 'vs/base/common/codicons';
|
||||
import { Emitter, Event } from 'vs/base/common/event';
|
||||
|
||||
export function getAriaId(index: number): string {
|
||||
return `suggest-aria-id:${index}`;
|
||||
}
|
||||
|
||||
export const suggestMoreInfoIcon = registerIcon('suggest-more-info', Codicon.chevronRight);
|
||||
|
||||
const colorRegExp = /^(#([\da-f]{3}){1,2}|(rgb|hsl)a\(\s*(\d{1,3}%?\s*,\s*){3}(1|0?\.\d+)\)|(rgb|hsl)\(\s*\d{1,3}%?(\s*,\s*\d{1,3}%?){2}\s*\))$/i;
|
||||
|
||||
function extractColor(item: CompletionItem, out: string[]): boolean {
|
||||
const label = typeof item.completion.label === 'string'
|
||||
? item.completion.label
|
||||
: item.completion.label.name;
|
||||
|
||||
if (label.match(colorRegExp)) {
|
||||
out[0] = label;
|
||||
return true;
|
||||
}
|
||||
if (typeof item.completion.documentation === 'string' && item.completion.documentation.match(colorRegExp)) {
|
||||
out[0] = item.completion.documentation;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
export interface ISuggestionTemplateData {
|
||||
root: HTMLElement;
|
||||
|
||||
/**
|
||||
* Flexbox
|
||||
* < ------------- left ------------ > < --- right -- >
|
||||
* <icon><label><signature><qualifier> <type><readmore>
|
||||
*/
|
||||
left: HTMLElement;
|
||||
right: HTMLElement;
|
||||
|
||||
icon: HTMLElement;
|
||||
colorspan: HTMLElement;
|
||||
iconLabel: IconLabel;
|
||||
iconContainer: HTMLElement;
|
||||
parametersLabel: HTMLElement;
|
||||
qualifierLabel: HTMLElement;
|
||||
/**
|
||||
* Showing either `CompletionItem#details` or `CompletionItemLabel#type`
|
||||
*/
|
||||
detailsLabel: HTMLElement;
|
||||
readMore: HTMLElement;
|
||||
disposables: DisposableStore;
|
||||
}
|
||||
|
||||
export class ItemRenderer implements IListRenderer<CompletionItem, ISuggestionTemplateData> {
|
||||
|
||||
private readonly _onDidToggleDetails = new Emitter<void>();
|
||||
readonly onDidToggleDetails: Event<void> = this._onDidToggleDetails.event;
|
||||
|
||||
readonly templateId = 'suggestion';
|
||||
|
||||
constructor(
|
||||
private readonly _editor: ICodeEditor,
|
||||
@IModelService private readonly _modelService: IModelService,
|
||||
@IModeService private readonly _modeService: IModeService,
|
||||
@IThemeService private readonly _themeService: IThemeService
|
||||
) { }
|
||||
|
||||
dispose(): void {
|
||||
this._onDidToggleDetails.dispose();
|
||||
}
|
||||
|
||||
renderTemplate(container: HTMLElement): ISuggestionTemplateData {
|
||||
const data = <ISuggestionTemplateData>Object.create(null);
|
||||
data.disposables = new DisposableStore();
|
||||
|
||||
data.root = container;
|
||||
data.root.classList.add('show-file-icons');
|
||||
|
||||
data.icon = append(container, $('.icon'));
|
||||
data.colorspan = append(data.icon, $('span.colorspan'));
|
||||
|
||||
const text = append(container, $('.contents'));
|
||||
const main = append(text, $('.main'));
|
||||
|
||||
data.iconContainer = append(main, $('.icon-label.codicon'));
|
||||
data.left = append(main, $('span.left'));
|
||||
data.right = append(main, $('span.right'));
|
||||
|
||||
data.iconLabel = new IconLabel(data.left, { supportHighlights: true, supportCodicons: true });
|
||||
data.disposables.add(data.iconLabel);
|
||||
|
||||
data.parametersLabel = append(data.left, $('span.signature-label'));
|
||||
data.qualifierLabel = append(data.left, $('span.qualifier-label'));
|
||||
data.detailsLabel = append(data.right, $('span.details-label'));
|
||||
|
||||
data.readMore = append(data.right, $('span.readMore' + suggestMoreInfoIcon.cssSelector));
|
||||
data.readMore.title = nls.localize('readMore', "Read More");
|
||||
|
||||
const configureFont = () => {
|
||||
const options = this._editor.getOptions();
|
||||
const fontInfo = options.get(EditorOption.fontInfo);
|
||||
const fontFamily = fontInfo.fontFamily;
|
||||
const fontFeatureSettings = fontInfo.fontFeatureSettings;
|
||||
const fontSize = options.get(EditorOption.suggestFontSize) || fontInfo.fontSize;
|
||||
const lineHeight = options.get(EditorOption.suggestLineHeight) || fontInfo.lineHeight;
|
||||
const fontWeight = fontInfo.fontWeight;
|
||||
const fontSizePx = `${fontSize}px`;
|
||||
const lineHeightPx = `${lineHeight}px`;
|
||||
|
||||
data.root.style.fontSize = fontSizePx;
|
||||
data.root.style.fontWeight = fontWeight;
|
||||
main.style.fontFamily = fontFamily;
|
||||
main.style.fontFeatureSettings = fontFeatureSettings;
|
||||
main.style.lineHeight = lineHeightPx;
|
||||
data.icon.style.height = lineHeightPx;
|
||||
data.icon.style.width = lineHeightPx;
|
||||
data.readMore.style.height = lineHeightPx;
|
||||
data.readMore.style.width = lineHeightPx;
|
||||
};
|
||||
|
||||
configureFont();
|
||||
|
||||
data.disposables.add(this._editor.onDidChangeConfiguration(e => {
|
||||
if (e.hasChanged(EditorOption.fontInfo) || e.hasChanged(EditorOption.suggestFontSize) || e.hasChanged(EditorOption.suggestLineHeight)) {
|
||||
configureFont();
|
||||
}
|
||||
}));
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
renderElement(element: CompletionItem, index: number, data: ISuggestionTemplateData): void {
|
||||
const { completion } = element;
|
||||
const textLabel = typeof completion.label === 'string' ? completion.label : completion.label.name;
|
||||
|
||||
data.root.id = getAriaId(index);
|
||||
data.colorspan.style.backgroundColor = '';
|
||||
|
||||
const labelOptions: IIconLabelValueOptions = {
|
||||
labelEscapeNewLines: true,
|
||||
matches: createMatches(element.score)
|
||||
};
|
||||
|
||||
let color: string[] = [];
|
||||
if (completion.kind === CompletionItemKind.Color && extractColor(element, color)) {
|
||||
// special logic for 'color' completion items
|
||||
data.icon.className = 'icon customcolor';
|
||||
data.iconContainer.className = 'icon hide';
|
||||
data.colorspan.style.backgroundColor = color[0];
|
||||
|
||||
} else if (completion.kind === CompletionItemKind.File && this._themeService.getFileIconTheme().hasFileIcons) {
|
||||
// special logic for 'file' completion items
|
||||
data.icon.className = 'icon hide';
|
||||
data.iconContainer.className = 'icon hide';
|
||||
const labelClasses = getIconClasses(this._modelService, this._modeService, URI.from({ scheme: 'fake', path: textLabel }), FileKind.FILE);
|
||||
const detailClasses = getIconClasses(this._modelService, this._modeService, URI.from({ scheme: 'fake', path: completion.detail }), FileKind.FILE);
|
||||
labelOptions.extraClasses = labelClasses.length > detailClasses.length ? labelClasses : detailClasses;
|
||||
|
||||
} else if (completion.kind === CompletionItemKind.Folder && this._themeService.getFileIconTheme().hasFolderIcons) {
|
||||
// special logic for 'folder' completion items
|
||||
data.icon.className = 'icon hide';
|
||||
data.iconContainer.className = 'icon hide';
|
||||
labelOptions.extraClasses = flatten([
|
||||
getIconClasses(this._modelService, this._modeService, URI.from({ scheme: 'fake', path: textLabel }), FileKind.FOLDER),
|
||||
getIconClasses(this._modelService, this._modeService, URI.from({ scheme: 'fake', path: completion.detail }), FileKind.FOLDER)
|
||||
]);
|
||||
} else {
|
||||
// normal icon
|
||||
data.icon.className = 'icon hide';
|
||||
data.iconContainer.className = '';
|
||||
data.iconContainer.classList.add('suggest-icon', ...completionKindToCssClass(completion.kind).split(' '));
|
||||
}
|
||||
|
||||
if (completion.tags && completion.tags.indexOf(CompletionItemTag.Deprecated) >= 0) {
|
||||
labelOptions.extraClasses = (labelOptions.extraClasses || []).concat(['deprecated']);
|
||||
labelOptions.matches = [];
|
||||
}
|
||||
|
||||
data.iconLabel.setLabel(textLabel, undefined, labelOptions);
|
||||
if (typeof completion.label === 'string') {
|
||||
data.parametersLabel.textContent = '';
|
||||
data.qualifierLabel.textContent = '';
|
||||
data.detailsLabel.textContent = (completion.detail || '').replace(/\n.*$/m, '');
|
||||
data.root.classList.add('string-label');
|
||||
data.root.title = '';
|
||||
} else {
|
||||
data.parametersLabel.textContent = (completion.label.parameters || '').replace(/\n.*$/m, '');
|
||||
data.qualifierLabel.textContent = (completion.label.qualifier || '').replace(/\n.*$/m, '');
|
||||
data.detailsLabel.textContent = (completion.label.type || '').replace(/\n.*$/m, '');
|
||||
data.root.classList.remove('string-label');
|
||||
data.root.title = `${textLabel}${completion.label.parameters ?? ''} ${completion.label.qualifier ?? ''} ${completion.label.type ?? ''}`;
|
||||
}
|
||||
|
||||
if (canExpandCompletionItem(element)) {
|
||||
data.right.classList.add('can-expand-details');
|
||||
show(data.readMore);
|
||||
data.readMore.onmousedown = e => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
};
|
||||
data.readMore.onclick = e => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
this._onDidToggleDetails.fire();
|
||||
};
|
||||
} else {
|
||||
data.right.classList.remove('can-expand-details');
|
||||
hide(data.readMore);
|
||||
data.readMore.onmousedown = null;
|
||||
data.readMore.onclick = null;
|
||||
}
|
||||
}
|
||||
|
||||
disposeTemplate(templateData: ISuggestionTemplateData): void {
|
||||
templateData.disposables.dispose();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user