[icon-themes] Support glob keys in file icon associations

src/vs/base/browser/ui/iconLabel/iconLabel.ts

@@ -33,6 +33,7 @@ export interface IIconLabelValueOptions {
 	suffix?: string;
 	hideIcon?: boolean;
 	extraClasses?: readonly string[];
+	extraAttributes?: { [attrName: string]: string };
 	italic?: boolean;
 	strikethrough?: boolean;
 	matches?: readonly IMatch[];
@@ -132,6 +133,7 @@ export class IconLabel extends Disposable {
 	setLabel(label: string | string[], description?: string, options?: IIconLabelValueOptions): void {
 		const labelClasses = ['monaco-icon-label'];
 		const containerClasses = ['monaco-icon-label-container'];
+		const dataAttributes = {};
 		let ariaLabel: string = '';
 		if (options) {
 			if (options.extraClasses) {
@@ -149,6 +151,11 @@ export class IconLabel extends Disposable {
 			if (options.disabledCommand) {
 				containerClasses.push('disabled');
 			}
+
+			if (options.extraAttributes) {
+				Object.assign(dataAttributes, options.extraAttributes);
+			}
+
 			if (options.title) {
 				if (typeof options.title === 'string') {
 					ariaLabel += options.title;
@@ -174,6 +181,7 @@ export class IconLabel extends Disposable {
 
 		this.domNode.classNames = labelClasses;
 		this.domNode.element.setAttribute('aria-label', ariaLabel);
+		Object.assign(this.domNode.element.dataset, dataAttributes);
 		this.labelContainer.classList.value = '';
 		this.labelContainer.classList.add(...containerClasses);
 		this.setupHover(options?.descriptionTitle ? this.labelContainer : this.element, options?.title);

src/vs/editor/common/services/getIconClasses.ts

@@ -11,6 +11,7 @@ import { ILanguageService } from '../languages/language.js';
 import { IModelService } from './model.js';
 import { FileKind } from '../../../platform/files/common/files.js';
 import { ThemeIcon } from '../../../base/common/themables.js';
+import { extname, basename } from '../../../base/common/path.js';
 
 const fileIconDirectoryRegex = /(?:\/|^)(?:([^\/]+)\/)?([^\/]+)$/;
 
@@ -24,51 +25,44 @@ export function getIconClasses(modelService: IModelService, languageService: ILa
 	}
 
 	// we always set these base classes even if we do not have a path
-	const classes = fileKind === FileKind.ROOT_FOLDER ? ['rootfolder-icon'] : fileKind === FileKind.FOLDER ? ['folder-icon'] : ['file-icon'];
+	const kindClass = fileKind === FileKind.ROOT_FOLDER ? 'rootfolder-icon' : fileKind === FileKind.FOLDER ? 'folder-icon' : 'file-icon';
+	const classes = [kindClass];
 	if (resource) {
+		const { filename, dirname } = getResourceName(resource);
 
-		// Get the path and name of the resource. For data-URIs, we need to parse specially
-		let name: string | undefined;
-		if (resource.scheme === Schemas.data) {
-			const metadata = DataUri.parseMetaData(resource);
-			name = metadata.get(DataUri.META_DATA_LABEL);
-		} else {
-			const match = resource.path.match(fileIconDirectoryRegex);
-			if (match) {
-				name = fileIconSelectorEscape(match[2].toLowerCase());
-				if (match[1]) {
-					classes.push(`${fileIconSelectorEscape(match[1].toLowerCase())}-name-dir-icon`); // parent directory
-				}
+		if (dirname) {
+			classes.push(`${dirname}-dirname-${kindClass}`); // parent directory
+		}
 
-			} else {
-				name = fileIconSelectorEscape(resource.authority.toLowerCase());
-			}
+		// Get dot segments for filename, and avoid doing an explosive combination of segments
+		// (from a filename with lots of `.` characters; most file systems do not allow files > 255 length)
+		// https://github.com/microsoft/vscode/issues/116199
+		let segments: string[] | undefined;
+		if (typeof filename === 'string' && filename.length <= 255) {
+			segments = filename.replace(/\.\.\.+/g, '').split('.');
 		}
 
 		// Root Folders
 		if (fileKind === FileKind.ROOT_FOLDER) {
-			classes.push(`${name}-root-name-folder-icon`);
+			classes.push(`${filename}-root-name-folder-icon`);
 		}
 
 		// Folders
-		else if (fileKind === FileKind.FOLDER) {
-			classes.push(`${name}-name-folder-icon`);
+		if (typeof filename === 'string' && fileKind === FileKind.FOLDER) {
+			classes.push(`${filename}-name-folder-icon`);
+			classes.push(`name-folder-icon`); // extra segment to increase folder-name score
 		}
 
 		// Files
 		else {
 
 			// Name & Extension(s)
-			if (name) {
-				classes.push(`${name}-name-file-icon`);
+			if (typeof filename === 'string') {
+				classes.push(`${filename}-name-file-icon`);
 				classes.push(`name-file-icon`); // extra segment to increase file-name score
-				// Avoid doing an explosive combination of extensions for very long filenames
-				// (most file systems do not allow files > 255 length) with lots of `.` characters
-				// https://github.com/microsoft/vscode/issues/116199
-				if (name.length <= 255) {
-					const dotSegments = name.split('.');
-					for (let i = 1; i < dotSegments.length; i++) {
-						classes.push(`${dotSegments.slice(i).join('.')}-ext-file-icon`); // add each combination of all found extensions if more than one
+				if (filename.length <= 255 && segments) {
+					for (let i = 1; i < segments.length; i++) {
+						classes.push(`${segments.slice(i).join('.')}-ext-file-icon`); // add each combination of all found extensions if more than one
 					}
 				}
 				classes.push(`ext-file-icon`); // extra segment to increase file-ext score
@@ -88,6 +82,23 @@ export function getIconClassesForLanguageId(languageId: string): string[] {
 	return ['file-icon', `${fileIconSelectorEscape(languageId)}-lang-file-icon`];
 }
 
+export function getIconAttributes(resource: uri | undefined) {
+	const attributes: Record<string, string> = {};
+
+	if (resource) {
+		const { filename } = getResourceName(resource);
+
+		if (filename) {
+			const fileExtname = extname(filename);
+			const fileBasename = basename(filename, fileExtname);
+			attributes.fileIconExtname = fileExtname.substring(1);
+			attributes.fileIconBasename = fileBasename;
+		}
+	}
+
+	return attributes;
+}
+
 function detectLanguageId(modelService: IModelService, languageService: ILanguageService, resource: uri): string | null {
 	if (!resource) {
 		return null; // we need a resource at least
@@ -122,6 +133,30 @@ function detectLanguageId(modelService: IModelService, languageService: ILanguag
 	return languageService.guessLanguageIdByFilepathOrFirstLine(resource);
 }
 
+function getResourceName(resource: uri) {
+	// Get the path and name of the resource. For data-URIs, we need to parse specially
+	let filename: string | undefined;
+	let dirname: string | undefined;
+
+	if (resource.scheme === Schemas.data) {
+		const metadata = DataUri.parseMetaData(resource);
+		filename = metadata.get(DataUri.META_DATA_LABEL);
+
+	} else {
+		const match = resource.path.match(fileIconDirectoryRegex);
+		if (match) {
+			filename = fileIconSelectorEscape(match[2].toLowerCase());
+			if (match[1]) {
+				dirname = fileIconSelectorEscape(match[1].toLowerCase());
+			}
+		} else {
+			filename = fileIconSelectorEscape(resource.authority.toLowerCase());
+		}
+	}
+
+	return { filename, dirname };
+}
+
 export function fileIconSelectorEscape(str: string): string {
 	return str.replace(/[\s]/g, '/'); // HTML class names can not contain certain whitespace characters (https://dom.spec.whatwg.org/#interface-domtokenlist), use / instead, which doesn't exist in file names.
 }

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

@@ -15,7 +15,7 @@ import { URI } from '../../../../base/common/uri.js';
 import { ICodeEditor } from '../../../browser/editorBrowser.js';
 import { EditorOption } from '../../../common/config/editorOptions.js';
 import { CompletionItemKind, CompletionItemKinds, CompletionItemTag } from '../../../common/languages.js';
-import { getIconClasses } from '../../../common/services/getIconClasses.js';
+import { getIconAttributes, getIconClasses } from '../../../common/services/getIconClasses.js';
 import { IModelService } from '../../../common/services/model.js';
 import { ILanguageService } from '../../../common/languages/language.js';
 import * as nls from '../../../../nls.js';
@@ -184,6 +184,9 @@ export class ItemRenderer implements IListRenderer<CompletionItem, ISuggestionTe
 			const labelClasses = getIconClasses(this._modelService, this._languageService, URI.from({ scheme: 'fake', path: element.textLabel }), FileKind.FILE);
 			const detailClasses = getIconClasses(this._modelService, this._languageService, URI.from({ scheme: 'fake', path: completion.detail }), FileKind.FILE);
 			labelOptions.extraClasses = labelClasses.length > detailClasses.length ? labelClasses : detailClasses;
+			const labelAttributes = getIconAttributes(URI.from({ scheme: 'fake', path: element.textLabel }));
+			const detailAttributes = getIconAttributes(URI.from({ scheme: 'fake', path: completion.detail }));
+			labelOptions.extraAttributes = Object.assign(detailAttributes, labelAttributes);
 
 		} else if (completion.kind === CompletionItemKind.Folder && this._themeService.getFileIconTheme().hasFolderIcons) {
 			// special logic for 'folder' completion items
@@ -193,6 +196,10 @@ export class ItemRenderer implements IListRenderer<CompletionItem, ISuggestionTe
 				getIconClasses(this._modelService, this._languageService, URI.from({ scheme: 'fake', path: element.textLabel }), FileKind.FOLDER),
 				getIconClasses(this._modelService, this._languageService, URI.from({ scheme: 'fake', path: completion.detail }), FileKind.FOLDER)
 			].flat();
+			labelOptions.extraAttributes = Object.assign(
+				getIconAttributes(URI.from({ scheme: 'fake', path: element.textLabel })),
+				getIconAttributes(URI.from({ scheme: 'fake', path: completion.detail }))
+			);
 		} else {
 			// normal icon
 			data.icon.className = 'icon hide';

src/vs/platform/quickinput/common/quickInput.ts

@@ -39,6 +39,7 @@ export interface IQuickPickItem {
 	 */
 	keybinding?: ResolvedKeybinding;
 	iconClasses?: readonly string[];
+	iconAttributes?: Record<string, string>;
 	iconPath?: { dark: URI; light?: URI };
 	iconClass?: string;
 	italic?: boolean;

src/vs/workbench/browser/actions/windowActions.ts

@@ -20,7 +20,7 @@ import { IModelService } from '../../../editor/common/services/model.js';
 import { ILanguageService } from '../../../editor/common/languages/language.js';
 import { IRecent, isRecentFolder, isRecentWorkspace, IWorkspacesService } from '../../../platform/workspaces/common/workspaces.js';
 import { URI } from '../../../base/common/uri.js';
-import { getIconClasses } from '../../../editor/common/services/getIconClasses.js';
+import { getIconAttributes, getIconClasses } from '../../../editor/common/services/getIconClasses.js';
 import { FileKind } from '../../../platform/files/common/files.js';
 import { splitRecentLabel } from '../../../base/common/labels.js';
 import { isMacintosh, isWeb, isWindows } from '../../../base/common/platform.js';
@@ -185,6 +185,7 @@ abstract class BaseOpenRecentAction extends Action2 {
 	private toQuickPick(modelService: IModelService, languageService: ILanguageService, labelService: ILabelService, recent: IRecent, isDirty: boolean): IRecentlyOpenedPick {
 		let openable: IWindowOpenable | undefined;
 		let iconClasses: string[];
+		let iconAttributes: Record<string, string>;
 		let fullLabel: string | undefined;
 		let resource: URI | undefined;
 		let isWorkspace = false;
@@ -193,6 +194,7 @@ abstract class BaseOpenRecentAction extends Action2 {
 		if (isRecentFolder(recent)) {
 			resource = recent.folderUri;
 			iconClasses = getIconClasses(modelService, languageService, resource, FileKind.FOLDER);
+			iconAttributes = getIconAttributes(resource);
 			openable = { folderUri: resource };
 			fullLabel = recent.label || labelService.getWorkspaceLabel(resource, { verbose: Verbosity.LONG });
 		}
@@ -201,6 +203,7 @@ abstract class BaseOpenRecentAction extends Action2 {
 		else if (isRecentWorkspace(recent)) {
 			resource = recent.workspace.configPath;
 			iconClasses = getIconClasses(modelService, languageService, resource, FileKind.ROOT_FOLDER);
+			iconAttributes = getIconAttributes(resource);
 			openable = { workspaceUri: resource };
 			fullLabel = recent.label || labelService.getWorkspaceLabel(recent.workspace, { verbose: Verbosity.LONG });
 			isWorkspace = true;
@@ -210,6 +213,7 @@ abstract class BaseOpenRecentAction extends Action2 {
 		else {
 			resource = recent.fileUri;
 			iconClasses = getIconClasses(modelService, languageService, resource, FileKind.FILE);
+			iconAttributes = getIconAttributes(resource);
 			openable = { fileUri: resource };
 			fullLabel = recent.label || labelService.getUriLabel(resource, { appendWorkspaceSuffix: true });
 		}
@@ -218,6 +222,7 @@ abstract class BaseOpenRecentAction extends Action2 {
 
 		return {
 			iconClasses,
+			iconAttributes,
 			label: name,
 			ariaLabel: isDirty ? isWorkspace ? localize('recentDirtyWorkspaceAriaLabel', "{0}, workspace with unsaved changes", name) : localize('recentDirtyFolderAriaLabel', "{0}, folder with unsaved changes", name) : name,
 			description: parentPath,

src/vs/workbench/browser/actions/workspaceCommands.ts

@@ -14,7 +14,7 @@ import { FileKind } from '../../../platform/files/common/files.js';
 import { ServicesAccessor } from '../../../platform/instantiation/common/instantiation.js';
 import { ILabelService } from '../../../platform/label/common/label.js';
 import { IQuickInputService, IPickOptions, IQuickPickItem } from '../../../platform/quickinput/common/quickInput.js';
-import { getIconClasses } from '../../../editor/common/services/getIconClasses.js';
+import { getIconAttributes, getIconClasses } from '../../../editor/common/services/getIconClasses.js';
 import { IModelService } from '../../../editor/common/services/model.js';
 import { ILanguageService } from '../../../editor/common/languages/language.js';
 import { IFileDialogService, IPickAndOpenOptions } from '../../../platform/dialogs/common/dialogs.js';
@@ -124,7 +124,8 @@ CommandsRegistry.registerCommand(PICK_WORKSPACE_FOLDER_COMMAND_ID, async functio
 			label,
 			description: description !== label ? description : undefined, // https://github.com/microsoft/vscode/issues/183418
 			folder,
-			iconClasses: getIconClasses(modelService, languageService, folder.uri, FileKind.ROOT_FOLDER)
+			iconClasses: getIconClasses(modelService, languageService, folder.uri, FileKind.ROOT_FOLDER),
+			iconAttributes: getIconAttributes(folder.uri)
 		};
 	});
 

src/vs/workbench/browser/labels.ts

@@ -19,7 +19,7 @@ import { ITextModel } from '../../editor/common/model.js';
 import { IThemeService } from '../../platform/theme/common/themeService.js';
 import { Event, Emitter } from '../../base/common/event.js';
 import { ILabelService } from '../../platform/label/common/label.js';
-import { getIconClasses } from '../../editor/common/services/getIconClasses.js';
+import { getIconAttributes, getIconClasses } from '../../editor/common/services/getIconClasses.js';
 import { Disposable, dispose, IDisposable, MutableDisposable } from '../../base/common/lifecycle.js';
 import { IInstantiationService } from '../../platform/instantiation/common/instantiation.js';
 import { normalizeDriveLetter } from '../../base/common/labels.js';
@@ -295,6 +295,7 @@ class ResourceLabelWidget extends IconLabel {
 	private options: IResourceLabelOptions | undefined = undefined;
 
 	private computedIconClasses: string[] | undefined = undefined;
+	private computedIconAttributes: Record<string, string> | undefined = undefined;
 	private computedLanguageId: string | undefined = undefined;
 	private computedPathLabel: string | undefined = undefined;
 	private computedWorkspaceFolderLabel: string | undefined = undefined;
@@ -570,13 +571,14 @@ class ResourceLabelWidget extends IconLabel {
 			return false;
 		}
 
-		const iconLabelOptions: IIconLabelValueOptions & { extraClasses: string[] } = {
+		const iconLabelOptions: IIconLabelValueOptions & { extraClasses: string[]; extraAttributes: { [attrName: string]: string } } = {
 			title: '',
 			italic: this.options?.italic,
 			strikethrough: this.options?.strikethrough,
 			matches: this.options?.matches,
 			descriptionMatches: this.options?.descriptionMatches,
 			extraClasses: [],
+			extraAttributes: {},
 			separator: this.options?.separator,
 			domId: this.options?.domId,
 			disabledCommand: this.options?.disabledCommand,
@@ -612,17 +614,26 @@ class ResourceLabelWidget extends IconLabel {
 				this.computedIconClasses = getIconClasses(this.modelService, this.languageService, resource, this.options.fileKind, this.options.icon);
 			}
 
+			if (!this.computedIconAttributes) {
+				this.computedIconAttributes = getIconAttributes(resource);
+			}
+
 			if (URI.isUri(this.options.icon)) {
 				iconLabelOptions.iconPath = this.options.icon;
 			}
 
 			iconLabelOptions.extraClasses = this.computedIconClasses.slice(0);
+			iconLabelOptions.extraAttributes = this.computedIconAttributes;
 		}
 
 		if (this.options?.extraClasses) {
 			iconLabelOptions.extraClasses.push(...this.options.extraClasses);
 		}
 
+		if (this.options?.extraAttributes) {
+			Object.assign(iconLabelOptions.extraAttributes, this.options.extraAttributes);
+		}
+
 		if (this.options?.fileDecorations && resource) {
 			if (options.updateDecoration) {
 				this.decoration.value = this.decorationsService.getDecoration(resource, this.options.fileKind !== FileKind.FILE);

src/vs/workbench/browser/parts/editor/editorQuickAccess.ts

@@ -12,7 +12,7 @@ import { EditorsOrder, IEditorIdentifier, EditorResourceAccessor, SideBySideEdit
 import { IEditorService } from '../../../services/editor/common/editorService.js';
 import { IModelService } from '../../../../editor/common/services/model.js';
 import { ILanguageService } from '../../../../editor/common/languages/language.js';
-import { getIconClasses } from '../../../../editor/common/services/getIconClasses.js';
+import { getIconAttributes, getIconClasses } from '../../../../editor/common/services/getIconClasses.js';
 import { prepareQuery, scoreItemFuzzy, compareItemsByFuzzyScore, FuzzyScorerCache } from '../../../../base/common/fuzzyScorer.js';
 import { CancellationToken } from '../../../../base/common/cancellation.js';
 import { IDisposable } from '../../../../base/common/lifecycle.js';
@@ -158,6 +158,7 @@ export abstract class BaseEditorQuickAccessProvider extends PickerQuickAccessPro
 				})(),
 				description,
 				iconClasses: getIconClasses(this.modelService, this.languageService, resource, undefined, editor.getIcon()).concat(editor.getLabelExtraClasses()),
+				iconAttributes: getIconAttributes(resource),
 				italic: !this.editorGroupService.getGroup(groupId)?.isPinned(editor),
 				buttons: (() => {
 					return [

src/vs/workbench/contrib/chat/browser/chatContentParts/chatMarkdownContentPart.ts

@@ -16,7 +16,7 @@ import { MarkdownRenderer } from '../../../../../editor/browser/widget/markdownR
 import { Range } from '../../../../../editor/common/core/range.js';
 import { ILanguageService } from '../../../../../editor/common/languages/language.js';
 import { ITextModel } from '../../../../../editor/common/model.js';
-import { getIconClasses } from '../../../../../editor/common/services/getIconClasses.js';
+import { getIconAttributes, getIconClasses } from '../../../../../editor/common/services/getIconClasses.js';
 import { IModelService } from '../../../../../editor/common/services/model.js';
 import { ITextModelService } from '../../../../../editor/common/services/resolverService.js';
 import { localize } from '../../../../../nls.js';
@@ -329,16 +329,21 @@ class CollapsedCodeBlock extends Disposable {
 		const isComplete = !modifiedEntry?.isCurrentlyBeingModified.get();
 
 		let iconClasses: string[] = [];
+		let iconAttributes: Record<string, string> = {};
 		if (isStreaming || !isComplete) {
 			const codicon = ThemeIcon.modify(Codicon.loading, 'spin');
 			iconClasses = ThemeIcon.asClassNameArray(codicon);
+			iconAttributes = getIconAttributes(undefined);
 		} else {
 			const fileKind = uri.path.endsWith('/') ? FileKind.FOLDER : FileKind.FILE;
 			iconClasses = getIconClasses(this.modelService, this.languageService, uri, fileKind);
+			iconAttributes = getIconAttributes(uri);
 		}
 
 		const iconEl = dom.$('span.icon');
 		iconEl.classList.add(...iconClasses);
+		Object.assign(iconEl.dataset, iconAttributes);
+		this.element.replaceChildren(iconEl, dom.$('span.icon-label', {}, iconText));
 
 		const children = [dom.$('span.icon-label', {}, iconText)];
 		if (isStreaming) {