Support VS Code Default Language Icons

packages/core/src/browser/frontend-application-module.ts

@@ -138,6 +138,7 @@ import { StylingParticipant, StylingService } from './styling-service';
 import { bindCommonStylingParticipants } from './common-styling-participants';
 import { HoverService } from './hover-service';
 import { AdditionalViewsMenuWidget, AdditionalViewsMenuWidgetFactory } from './shell/additional-views-menu-widget';
+import { LanguageIconLabelProvider } from './language-icon-provider';
 
 export { bindResourceProvider, bindMessageService, bindPreferenceService };
 
@@ -150,6 +151,8 @@ export const frontendApplicationModule = new ContainerModule((bind, _unbind, _is
     bind(IconThemeContribution).toService(DefaultFileIconThemeContribution);
     bind(IconThemeApplicationContribution).toSelf().inSingletonScope();
     bind(FrontendApplicationContribution).toService(IconThemeApplicationContribution);
+    bind(LanguageIconLabelProvider).toSelf().inSingletonScope();
+    bind(LabelProviderContribution).toService(LanguageIconLabelProvider);
 
     bind(ColorRegistry).toSelf().inSingletonScope();
     bindContributionProvider(bind, ColorContribution);

packages/core/src/browser/icon-theme-contribution.ts

@@ -50,6 +50,7 @@ export class DefaultFileIconThemeContribution implements IconTheme, IconThemeCon
     readonly label = 'File Icons (Theia)';
     readonly hasFileIcons = true;
     readonly hasFolderIcons = true;
+    readonly showLanguageModeIcons = true;
 
     registerIconThemes(iconThemes: IconThemeService): MaybePromise<void> {
         iconThemes.register(this);

packages/core/src/browser/icon-theme-service.ts

@@ -31,6 +31,7 @@ export interface IconThemeDefinition {
     readonly hasFileIcons?: boolean;
     readonly hasFolderIcons?: boolean;
     readonly hidesExplorerArrows?: boolean;
+    readonly showLanguageModeIcons?: boolean;
 }
 
 export interface IconTheme extends IconThemeDefinition {

packages/core/src/browser/language-icon-provider.ts

@@ -0,0 +1,55 @@
+// *****************************************************************************
+// Copyright (C) 2023 EclipseSource and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { inject, injectable, postConstruct } from 'inversify';
+import { Emitter, Event } from '../common';
+import { IconThemeService } from './icon-theme-service';
+import { DidChangeLabelEvent, LabelProviderContribution } from './label-provider';
+import { LanguageService } from './language-service';
+
+@injectable()
+export class LanguageIconLabelProvider implements LabelProviderContribution {
+    @inject(IconThemeService) protected readonly iconThemeService: IconThemeService;
+    @inject(LanguageService) protected readonly languageService: LanguageService;
+
+    protected readonly onDidChangeEmitter = new Emitter<DidChangeLabelEvent>();
+
+    @postConstruct()
+    protected init(): void {
+        this.languageService.onDidChangeIcon(() => this.fireDidChange());
+    }
+
+    canHandle(element: object): number {
+        const current = this.iconThemeService.getDefinition(this.iconThemeService.current);
+        return current?.showLanguageModeIcons === true && this.languageService.getIcon(element) ? Number.MAX_SAFE_INTEGER : 0;
+    }
+
+    getIcon(element: object): string | undefined {
+        const language = this.languageService.detectLanguage(element);
+        return this.languageService.getIcon(language!.id);
+    }
+
+    get onDidChange(): Event<DidChangeLabelEvent> {
+        return this.onDidChangeEmitter.event;
+    }
+
+    protected fireDidChange(): void {
+        this.onDidChangeEmitter.fire({
+            affects: element => this.canHandle(element) > 0
+        });
+    }
+
+}

packages/core/src/browser/language-service.ts

@@ -15,16 +15,19 @@
 // *****************************************************************************
 
 import { injectable } from 'inversify';
+import { Disposable, Emitter, Event } from '../common';
 
 export interface Language {
     readonly id: string;
     readonly name: string;
     readonly extensions: Set<string>;
     readonly filenames: Set<string>;
+    readonly iconClass?: string;
 }
 
 @injectable()
 export class LanguageService {
+    protected readonly onDidChangeIconEmitter = new Emitter<DidChangeIconEvent>();
 
     /**
      * It should be implemented by an extension, e.g. by the monaco extension.
@@ -40,4 +43,35 @@ export class LanguageService {
         return undefined;
     }
 
+    /**
+     * It should be implemented by an extension, e.g. by the monaco extension.
+     */
+    detectLanguage(obj: unknown): Language | undefined {
+        return undefined;
+    }
+
+    /**
+     * It should be implemented by an extension, e.g. by the monaco extension.
+     */
+    registerIcon(languageId: string, iconClass: string): Disposable {
+        return Disposable.NULL;
+    }
+
+    /**
+     * It should be implemented by an extension, e.g. by the monaco extension.
+     */
+    getIcon(obj: unknown): string | undefined {
+        return undefined;
+    }
+
+    /**
+     * Emit when the icon of a particular language was changed.
+     */
+    get onDidChangeIcon(): Event<DidChangeIconEvent> {
+        return this.onDidChangeIconEmitter.event;
+    }
+}
+
+export interface DidChangeIconEvent {
+    languageId: string;
 }

packages/monaco/src/browser/monaco-languages.ts

@@ -25,18 +25,23 @@ import { Language, LanguageService } from '@theia/core/lib/browser/language-serv
 import { MonacoMarkerCollection } from './monaco-marker-collection';
 import { ProtocolToMonacoConverter } from './protocol-to-monaco-converter';
 import * as monaco from '@theia/monaco-editor-core';
+import { FileStat } from '@theia/filesystem/lib/common/files';
+import { FileStatNode } from '@theia/filesystem/lib/browser';
+import { ILanguageService } from '@theia/monaco-editor-core/esm/vs/editor/common/languages/language';
+import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
 
 export interface WorkspaceSymbolProvider {
     provideWorkspaceSymbols(params: WorkspaceSymbolParams, token: CancellationToken): MaybePromise<SymbolInformation[] | undefined>;
     resolveWorkspaceSymbol?(symbol: SymbolInformation, token: CancellationToken): Thenable<SymbolInformation | undefined>
 }
 
 @injectable()
-export class MonacoLanguages implements LanguageService {
+export class MonacoLanguages extends LanguageService {
 
     readonly workspaceSymbolProviders: WorkspaceSymbolProvider[] = [];
 
     protected readonly markers = new Map<string, MonacoMarkerCollection>();
+    protected readonly icons = new Map<string, string>();
 
     @inject(ProblemManager) protected readonly problemManager: ProblemManager;
     @inject(ProtocolToMonacoConverter) protected readonly p2m: ProtocolToMonacoConverter;
@@ -73,18 +78,70 @@ export class MonacoLanguages implements LanguageService {
         });
     }
 
-    get languages(): Language[] {
+    override get languages(): Language[] {
         return [...this.mergeLanguages(monaco.languages.getLanguages()).values()];
     }
 
-    getLanguage(languageId: string): Language | undefined {
+    override getLanguage(languageId: string): Language | undefined {
         return this.mergeLanguages(monaco.languages.getLanguages().filter(language => language.id === languageId)).get(languageId);
     }
 
+    override detectLanguage(obj: unknown): Language | undefined {
+        if (obj === undefined) {
+            return undefined;
+        }
+        if (typeof obj === 'string') {
+            return this.detectLanguageByIdOrName(obj) ?? this.detectLanguageByURI(new URI(obj));
+        }
+        if (obj instanceof URI) {
+            return this.detectLanguageByURI(obj);
+        }
+        if (FileStat.is(obj)) {
+            return this.detectLanguageByURI(obj.resource);
+        }
+        if (FileStatNode.is(obj)) {
+            return this.detectLanguageByURI(obj.uri);
+        }
+        return undefined;
+    }
+
+    protected detectLanguageByIdOrName(obj: string): Language | undefined {
+        const languageById = this.getLanguage(obj);
+        if (languageById) {
+            return languageById;
+        }
+
+        const languageId = this.getLanguageIdByLanguageName(obj);
+        return languageId ? this.getLanguage(languageId) : undefined;
+    }
+
+    protected detectLanguageByURI(uri: URI): Language | undefined {
+        const languageId = StandaloneServices.get(ILanguageService).guessLanguageIdByFilepathOrFirstLine(uri['codeUri']);
+        return languageId ? this.getLanguage(languageId) : undefined;
+    }
+
     getExtension(languageId: string): string | undefined {
         return this.getLanguage(languageId)?.extensions.values().next().value;
     }
 
+    override registerIcon(languageId: string, iconClass: string): Disposable {
+        this.icons.set(languageId, iconClass);
+        this.onDidChangeIconEmitter.fire({ languageId });
+        return Disposable.create(() => {
+            this.icons.delete(languageId);
+            this.onDidChangeIconEmitter.fire({ languageId });
+        });
+    }
+
+    override getIcon(obj: unknown): string | undefined {
+        const language = this.detectLanguage(obj);
+        return language ? this.icons.get(language.id) : undefined;
+    }
+
+    getLanguageIdByLanguageName(languageName: string): string | undefined {
+        return monaco.languages.getLanguages().find(language => language.aliases?.includes(languageName))?.id;
+    }
+
     protected mergeLanguages(registered: monaco.languages.ILanguageExtensionPoint[]): Map<string, Mutable<Language>> {
         const languages = new Map<string, Mutable<Language>>();
         for (const { id, aliases, extensions, filenames } of registered) {

packages/plugin-ext/src/common/plugin-protocol.ts

@@ -308,6 +308,7 @@ export interface PluginPackageLanguageContribution {
     aliases?: string[];
     mimetypes?: string[];
     configuration?: string;
+    icon?: IconUrl;
 }
 
 export interface PluginPackageLanguageContributionConfiguration {
@@ -715,6 +716,10 @@ export interface LanguageContribution {
     aliases?: string[];
     mimetypes?: string[];
     configuration?: LanguageConfiguration;
+    /**
+     * @internal
+     */
+    icon?: IconUrl;
 }
 
 export interface RegExpOptions {

packages/plugin-ext/src/hosted/node/scanners/scanner-theia.ts

@@ -371,7 +371,7 @@ export class TheiaPluginScanner implements PluginScanner {
         }
 
         const [languagesResult, grammarsResult] = await Promise.allSettled([
-            rawPlugin.contributes.languages ? this.readLanguages(rawPlugin.contributes.languages, rawPlugin.packagePath) : undefined,
+            rawPlugin.contributes.languages ? this.readLanguages(rawPlugin.contributes.languages, rawPlugin) : undefined,
             rawPlugin.contributes.grammars ? this.grammarsReader.readGrammars(rawPlugin.contributes.grammars, rawPlugin.packagePath) : undefined
         ]);
 
@@ -723,8 +723,8 @@ export class TheiaPluginScanner implements PluginScanner {
         return result;
     }
 
-    private async readLanguages(rawLanguages: PluginPackageLanguageContribution[], pluginPath: string): Promise<LanguageContribution[]> {
-        return Promise.all(rawLanguages.map(language => this.readLanguage(language, pluginPath)));
+    private async readLanguages(rawLanguages: PluginPackageLanguageContribution[], plugin: PluginPackage): Promise<LanguageContribution[]> {
+        return Promise.all(rawLanguages.map(language => this.readLanguage(language, plugin)));
     }
 
     private readSubmenus(rawSubmenus: PluginPackageSubmenu[], plugin: PluginPackage): Submenu[] {
@@ -741,19 +741,21 @@ export class TheiaPluginScanner implements PluginScanner {
 
     }
 
-    private async readLanguage(rawLang: PluginPackageLanguageContribution, pluginPath: string): Promise<LanguageContribution> {
+    private async readLanguage(rawLang: PluginPackageLanguageContribution, plugin: PluginPackage): Promise<LanguageContribution> {
         // TODO: add validation to all parameters
+        const icon = this.transformIconUrl(plugin, rawLang.icon);
         const result: LanguageContribution = {
             id: rawLang.id,
             aliases: rawLang.aliases,
             extensions: rawLang.extensions,
             filenamePatterns: rawLang.filenamePatterns,
             filenames: rawLang.filenames,
             firstLine: rawLang.firstLine,
-            mimetypes: rawLang.mimetypes
+            mimetypes: rawLang.mimetypes,
+            icon: icon?.iconUrl ?? icon?.themeIcon
         };
         if (rawLang.configuration) {
-            const rawConfiguration = await this.readJson<PluginPackageLanguageContributionConfiguration>(path.resolve(pluginPath, rawLang.configuration));
+            const rawConfiguration = await this.readJson<PluginPackageLanguageContributionConfiguration>(path.resolve(plugin.packagePath, rawLang.configuration));
             if (rawConfiguration) {
                 const configuration: LanguageConfiguration = {
                     brackets: rawConfiguration.brackets,

packages/plugin-ext/src/main/browser/plugin-contribution-handler.ts

@@ -53,6 +53,7 @@ import { TerminalWidget } from '@theia/terminal/lib/browser/base/terminal-widget
 import { TerminalService } from '@theia/terminal/lib/browser/base/terminal-service';
 import { PluginTerminalRegistry } from './plugin-terminal-registry';
 import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
+import { LanguageService } from '@theia/core/lib/browser/language-service';
 
 @injectable()
 export class PluginContributionHandler {
@@ -89,6 +90,9 @@ export class PluginContributionHandler {
     @inject(CommandRegistry)
     protected readonly commands: CommandRegistry;
 
+    @inject(LanguageService)
+    protected readonly languageService: LanguageService;
+
     @inject(PluginSharedStyle)
     protected readonly style: PluginSharedStyle;
 
@@ -195,6 +199,11 @@ export class PluginContributionHandler {
                     firstLine: lang.firstLine,
                     mimetypes: lang.mimetypes
                 });
+                if (lang.icon) {
+                    const languageIcon = this.style.toFileIconClass(lang.icon);
+                    pushContribution(`language.${lang.id}.icon`, () => languageIcon);
+                    pushContribution(`language.${lang.id}.iconRegistration`, () => this.languageService.registerIcon(lang.id, languageIcon.object.iconClass));
+                }
                 const langConfiguration = lang.configuration;
                 if (langConfiguration) {
                     pushContribution(`language.${lang.id}.configuration`, () => monaco.languages.setLanguageConfiguration(lang.id, {