@theia/plugin-ext 1.18.0-next.8e7f15b3 → 1.18.0-next.93

package/src/common/arrays.ts

@@ -44,3 +44,11 @@ export interface Splice<T> {
     readonly deleteCount: number;
     readonly toInsert: T[];
 }
+
+/**
+ * @returns 'true' if the 'arg' is a 'ReadonlyArray'.
+ */
+export function isReadonlyArray(arg: unknown): arg is readonly unknown[] {
+    // Since Typescript does not properly narrow down typings for 'ReadonlyArray' we need to help it.
+    return Array.isArray(arg);
+}

package/src/common/plugin-api-rpc-model.ts

@@ -523,6 +523,7 @@ export interface CallHierarchyDefinition {
     uri: UriComponents;
     range: Range;
     selectionRange: Range;
+    tags?: readonly SymbolTag[];
 }
 
 export interface CallHierarchyReference {
@@ -540,6 +541,7 @@ export interface CallHierarchyItem {
     uri: UriComponents;
     range: Range;
     selectionRange: Range;
+    tags?: readonly SymbolTag[];
 }
 
 export interface CallHierarchyIncomingCall {

package/src/common/plugin-api-rpc.ts

@@ -91,6 +91,7 @@ import type {
     TimelineProviderDescriptor
 } from '@theia/timeline/lib/common/timeline-model';
 import { SerializableEnvironmentVariableCollection } from '@theia/terminal/lib/common/base-terminal-protocol';
+// eslint-disable-next-line @theia/runtime-import-check
 import { ThemeType } from '@theia/core/lib/browser/theming';
 import { Disposable } from '@theia/core/lib/common/disposable';
 import { PickOptions, QuickInputButtonHandle, QuickPickItem } from '@theia/core/lib/browser';
@@ -554,7 +555,7 @@ export interface TransferQuickInputButton extends theia.QuickInputButton {
     handle?: number;
 }
 
-export type TransferQuickInput<T extends theia.QuickPickItem> = TransferQuickPick<T> | TransferInputBox;
+export type TransferQuickInput = TransferQuickPick | TransferInputBox;
 
 export interface BaseTransferQuickInput {
     [key: string]: any;
@@ -565,14 +566,14 @@ export interface BaseTransferQuickInput {
     visible?: boolean;
 }
 
-export interface TransferQuickPick<T extends theia.QuickPickItem> extends BaseTransferQuickInput {
+export interface TransferQuickPick extends BaseTransferQuickInput {
     type?: 'quickPick';
     value?: string;
     placeholder?: string;
     buttons?: TransferQuickInputButton[];
     items?: TransferQuickPickItems[];
-    activeItems?: ReadonlyArray<T>;
-    selectedItems?: ReadonlyArray<T>;
+    activeItems?: ReadonlyArray<theia.QuickPickItem>;
+    selectedItems?: ReadonlyArray<theia.QuickPickItem>;
     canSelectMany?: boolean;
     ignoreFocusOut?: boolean;
     matchOnDescription?: boolean;
@@ -604,12 +605,11 @@ export interface QuickOpenMain {
     $setItems(instance: number, items: TransferQuickPickItems[]): Promise<any>;
     $setError(instance: number, error: Error): Promise<void>;
     $input(options: theia.InputBoxOptions, validateInput: boolean, token: CancellationToken): Promise<string | undefined>;
-    $createOrUpdate<T extends theia.QuickPickItem>(params: TransferQuickInput<T>): Promise<void>;
+    $createOrUpdate<T extends theia.QuickPickItem>(params: TransferQuickInput): Promise<void>;
     $dispose(id: number): Promise<void>;
 
     $hide(): void;
     $showInputBox(options: TransferInputBox, validateInput: boolean): Promise<string | undefined>;
-    $showCustomQuickPick<T extends theia.QuickPickItem>(options: TransferQuickPick<T>): void;
 }
 
 export interface WorkspaceMain {
@@ -667,6 +667,7 @@ export interface TreeViewsMain {
     $reveal(treeViewId: string, elementParentChain: string[], options: TreeViewRevealOptions): Promise<any>;
     $setMessage(treeViewId: string, message: string): void;
     $setTitle(treeViewId: string, title: string): void;
+    $setDescription(treeViewId: string, description: string): void;
 }
 
 export interface TreeViewsExt {
@@ -1594,13 +1595,33 @@ export interface StorageExt {
     $updatePluginsWorkspaceData(data: KeysToKeysToAnyValue): void;
 }
 
+/**
+ * A DebugConfigurationProviderTriggerKind specifies when the `provideDebugConfigurations` method of a `DebugConfigurationProvider` should be called.
+ * Currently there are two situations:
+ *  (1) providing debug configurations to populate a newly created `launch.json`
+ *  (2) providing dynamically generated configurations when the user asks for them through the UI (e.g. via the "Select and Start Debugging" command).
+ * A trigger kind is used when registering a `DebugConfigurationProvider` with {@link debug.registerDebugConfigurationProvider}.
+ */
+export enum DebugConfigurationProviderTriggerKind {
+    /**
+     * `DebugConfigurationProvider.provideDebugConfigurations` is called to provide the initial debug
+     * configurations for a newly created launch.json.
+     */
+    Initial = 1,
+    /**
+     * `DebugConfigurationProvider.provideDebugConfigurations` is called to provide dynamically generated debug configurations when the user asks for them through the UI
+     * (e.g. via the "Select and Start Debugging" command).
+     */
+    Dynamic = 2
+}
+
 export interface DebugExt {
     $onSessionCustomEvent(sessionId: string, event: string, body?: any): void;
     $breakpointsDidChange(added: Breakpoint[], removed: string[], changed: Breakpoint[]): void;
     $sessionDidCreate(sessionId: string): void;
     $sessionDidDestroy(sessionId: string): void;
     $sessionDidChange(sessionId: string | undefined): void;
-    $provideDebugConfigurations(debugType: string, workspaceFolder: string | undefined): Promise<theia.DebugConfiguration[]>;
+    $provideDebugConfigurations(debugType: string, workspaceFolder: string | undefined, dynamic?: boolean): Promise<theia.DebugConfiguration[]>;
     $resolveDebugConfigurations(debugConfiguration: theia.DebugConfiguration, workspaceFolder: string | undefined): Promise<theia.DebugConfiguration | undefined>;
     $resolveDebugConfigurationWithSubstitutedVariables(debugConfiguration: theia.DebugConfiguration, workspaceFolder: string | undefined):
         Promise<theia.DebugConfiguration | undefined>;
@@ -1772,7 +1793,7 @@ export const MAIN_RPC_CONTEXT = {
 };
 
 export interface TasksExt {
-    $provideTasks(handle: number, token?: CancellationToken): Promise<TaskDto[] | undefined>;
+    $provideTasks(handle: number): Promise<TaskDto[] | undefined>;
     $resolveTask(handle: number, task: TaskDto, token?: CancellationToken): Promise<TaskDto | undefined>;
     $onDidStartTask(execution: TaskExecutionDto, terminalId: number): void;
     $onDidEndTask(id: number): void;

package/src/common/plugin-protocol.ts

@@ -23,6 +23,7 @@ import { IJSONSchema, IJSONSchemaSnippet } from '@theia/core/lib/common/json-sch
 import { RecursivePartial } from '@theia/core/lib/common/types';
 import { PreferenceSchema, PreferenceSchemaProperties } from '@theia/core/lib/common/preferences/preference-schema';
 import { ProblemMatcherContribution, ProblemPatternContribution, TaskDefinition } from '@theia/task/lib/common';
+// eslint-disable-next-line @theia/runtime-import-check
 import { ColorDefinition } from '@theia/core/lib/browser/color-registry';
 import { ResourceLabelFormatter } from '@theia/core/lib/common/label-protocol';
 

package/src/hosted/browser/hosted-plugin.ts

@@ -66,7 +66,7 @@ import { PluginCustomEditorRegistry } from '../../main/browser/custom-editors/pl
 import { CustomEditorWidget } from '../../main/browser/custom-editors/custom-editor-widget';
 
 export type PluginHost = 'frontend' | string;
-export type DebugActivationEvent = 'onDebugResolve' | 'onDebugInitialConfigurations' | 'onDebugAdapterProtocolTracker';
+export type DebugActivationEvent = 'onDebugResolve' | 'onDebugInitialConfigurations' | 'onDebugAdapterProtocolTracker' | 'onDebugDynamicConfigurations';
 
 export const PluginProgressLocation = 'plugin';
 
@@ -198,6 +198,8 @@ export class HostedPluginSupport {
         this.debugSessionManager.onWillStartDebugSession(event => this.ensureDebugActivation(event));
         this.debugSessionManager.onWillResolveDebugConfiguration(event => this.ensureDebugActivation(event, 'onDebugResolve', event.debugType));
         this.debugConfigurationManager.onWillProvideDebugConfiguration(event => this.ensureDebugActivation(event, 'onDebugInitialConfigurations'));
+        // Activate all providers of dynamic configurations, i.e. Let the user pick a configuration from all the available ones.
+        this.debugConfigurationManager.onWillProvideDynamicDebugConfiguration(event => this.ensureDebugActivation(event, 'onDebugDynamicConfigurations', '*'));
         this.viewRegistry.onDidExpandView(id => this.activateByView(id));
         this.taskProviderRegistry.onWillProvideTaskProvider(event => this.ensureTaskActivation(event));
         this.taskResolverRegistry.onWillProvideTaskResolver(event => this.ensureTaskActivation(event));
@@ -302,12 +304,15 @@ export class HostedPluginSupport {
      */
     protected async syncPlugins(): Promise<void> {
         let initialized = 0;
-        const syncPluginsMeasurement = this.createMeasurement('syncPlugins');
+        const waitPluginsMeasurement = this.createMeasurement('waitForDeployment');
+        let syncPluginsMeasurement: () => number;
 
         const toUnload = new Set(this.contributions.keys());
         try {
             const pluginIds: string[] = [];
             const deployedPluginIds = await this.server.getDeployedPluginIds();
+            this.logMeasurement('Waiting for backend deployment', waitPluginsMeasurement);
+            syncPluginsMeasurement = this.createMeasurement('syncPlugins');
             for (const pluginId of deployedPluginIds) {
                 toUnload.delete(pluginId);
                 if (!this.contributions.has(pluginId)) {
@@ -336,7 +341,7 @@ export class HostedPluginSupport {
             }
         }
 
-        this.logMeasurement('Sync', initialized, syncPluginsMeasurement);
+        this.logMeasurement(`Sync of ${this.getPluginCount(initialized)}`, syncPluginsMeasurement);
     }
 
     /**
@@ -374,7 +379,7 @@ export class HostedPluginSupport {
             }
         }
 
-        this.logMeasurement('Load contributions', loaded, loadPluginsMeasurement);
+        this.logMeasurement(`Load contributions of ${this.getPluginCount(loaded)}`, loadPluginsMeasurement);
 
         return hostContributions;
     }
@@ -444,7 +449,7 @@ export class HostedPluginSupport {
             return;
         }
 
-        this.logMeasurement('Start', started, startPluginsMeasurement);
+        this.logMeasurement(`Start of ${this.getPluginCount(started)}`, startPluginsMeasurement);
     }
 
     protected async obtainManager(host: string, hostContributions: PluginContributions[], toDisconnect: DisposableCollection): Promise<PluginManagerExt | undefined> {
@@ -712,15 +717,19 @@ export class HostedPluginSupport {
         };
     }
 
-    protected logMeasurement(prefix: string, count: number, measurement: () => number): void {
+    protected logMeasurement(measurementName: string, measurement: () => number): void {
         const duration = measurement();
         if (duration === Number.NaN) {
             // Measurement was prevented by native API, do not log NaN duration
             return;
         }
 
-        const pluginCount = `${count} plugin${count === 1 ? '' : 's'}`;
-        console.log(`[${this.clientId}] ${prefix} of ${pluginCount} took: ${duration.toFixed(1)} ms`);
+        const timeFromFrontendStart = `Finished ${(performance.now() / 1000).toFixed(3)} s after frontend start`;
+        console.log(`[${this.clientId}] ${measurementName} took: ${duration.toFixed(1)} ms [${timeFromFrontendStart}]`);
+    }
+
+    protected getPluginCount(plugins: number): string {
+        return `${plugins} plugin${plugins === 1 ? '' : 's'}`;
     }
 
     protected readonly webviewsToRestore = new Set<WebviewWidget>();

package/src/hosted/browser/worker/debug-stub.ts

@@ -14,6 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
+// eslint-disable-next-line @theia/runtime-import-check
 import { DebugExtImpl } from '../../../plugin/node/debug/debug';
 import { RPCProtocol } from '../../../common/rpc-protocol';
 

package/src/hosted/node/scanners/scanner-theia.ts

@@ -73,6 +73,7 @@ import {
     ProblemPatternContribution,
     TaskDefinition
 } from '@theia/task/lib/common/task-protocol';
+// eslint-disable-next-line @theia/runtime-import-check
 import { ColorDefinition } from '@theia/core/lib/browser/color-registry';
 import { ResourceLabelFormatter } from '@theia/core/lib/common/label-protocol';
 import { PluginUriFactory } from './plugin-uri-factory';
@@ -217,7 +218,7 @@ export class TheiaPluginScanner implements PluginScanner {
 
                 for (const location of Object.keys(viewsContainers)) {
                     const containers = this.readViewsContainers(viewsContainers[location], rawPlugin);
-                    const loc = location === 'activitybar' ? 'left' : location;
+                    const loc = location === 'activitybar' ? 'left' : location === 'panel' ? 'bottom' : location;
                     if (contributions.viewsContainers[loc]) {
                         contributions.viewsContainers[loc] = contributions.viewsContainers[loc].concat(containers);
                     } else {
@@ -698,7 +699,7 @@ export class TheiaPluginScanner implements PluginScanner {
             taskType: definitionContribution.type,
             source: pluginName,
             properties: {
-                required: definitionContribution.required,
+                required: definitionContribution.required || [],
                 all: propertyKeys,
                 schema: definitionContribution
             }

package/src/main/browser/callhierarchy/callhierarchy-type-converters.ts

@@ -151,7 +151,8 @@ export function toDefinition(definition: model.CallHierarchyDefinition | undefin
         selectionRange: toRange(definition.selectionRange),
         symbolName: definition.name,
         symbolKind: SymbolKindConverter.toSymbolKind(definition.kind),
-        containerName: undefined
+        containerName: undefined,
+        tags: definition.tags
     };
 }
 

package/src/main/browser/custom-editors/custom-editor-opener.tsx

@@ -37,10 +37,14 @@ export class CustomEditorOpener implements OpenHandler {
         @inject(ApplicationShell) protected readonly shell: ApplicationShell,
         @inject(WidgetManager) protected readonly widgetManager: WidgetManager
     ) {
-        this.id = `custom-editor-${this.editor.viewType}`;
+        this.id = CustomEditorOpener.toCustomEditorId(this.editor.viewType);
         this.label = this.editor.displayName;
     }
 
+    static toCustomEditorId(editorViewType: string): string {
+        return `custom-editor-${editorViewType}`;
+    }
+
     canHandle(uri: URI): number {
         if (this.matches(this.editor.selector, uri)) {
             return this.getPriority();
@@ -52,7 +56,8 @@ export class CustomEditorOpener implements OpenHandler {
         switch (this.editor.priority) {
             case CustomEditorPriority.default: return 500;
             case CustomEditorPriority.builtin: return 400;
-            case CustomEditorPriority.option: return 300;
+            /** `option` should not open the custom-editor by default. */
+            case CustomEditorPriority.option: return 1;
             default: return 200;
         }
     }

package/src/main/browser/debug/debug-main.ts

@@ -38,7 +38,7 @@ import { DebugProtocol } from 'vscode-debugprotocol';
 import { DebugConfigurationManager } from '@theia/debug/lib/browser/debug-configuration-manager';
 import { TerminalService } from '@theia/terminal/lib/browser/base/terminal-service';
 import { MessageClient } from '@theia/core/lib/common/message-service-protocol';
-import { OutputChannelManager } from '@theia/output/lib/common/output-channel';
+import { OutputChannelManager } from '@theia/output/lib/browser/output-channel';
 import { DebugPreferences } from '@theia/debug/lib/browser/debug-preferences';
 import { PluginDebugAdapterContribution } from './plugin-debug-adapter-contribution';
 import { PluginDebugSessionContributionRegistrator, PluginDebugSessionContributionRegistry } from './plugin-debug-session-contribution-registry';

package/src/main/browser/debug/plugin-debug-adapter-contribution.ts

@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { DebugExt, } from '../../../common/plugin-api-rpc';
+import { DebugExt } from '../../../common/plugin-api-rpc';
 import { DebugConfiguration } from '@theia/debug/lib/common/debug-configuration';
 import { MaybePromise } from '@theia/core/lib/common/types';
 import { DebuggerDescription } from '@theia/debug/lib/common/debug-service';
@@ -37,8 +37,8 @@ export class PluginDebugAdapterContribution {
         return this.description.label;
     }
 
-    async provideDebugConfigurations(workspaceFolderUri: string | undefined): Promise<DebugConfiguration[]> {
-        return this.debugExt.$provideDebugConfigurations(this.type, workspaceFolderUri);
+    async provideDebugConfigurations(workspaceFolderUri: string | undefined, dynamic: boolean = false): Promise<DebugConfiguration[]> {
+        return this.debugExt.$provideDebugConfigurations(this.type, workspaceFolderUri, dynamic);
     }
 
     async resolveDebugConfiguration(config: DebugConfiguration, workspaceFolderUri: string | undefined): Promise<DebugConfiguration | undefined> {

package/src/main/browser/debug/plugin-debug-service.ts

@@ -25,6 +25,7 @@ import { WorkspaceService } from '@theia/workspace/lib/browser';
 import { DebuggerContribution } from '../../../common/plugin-protocol';
 import { DebugRequestTypes } from '@theia/debug/lib/browser/debug-session-connection';
 import * as theia from '@theia/plugin';
+
 /**
  * Debug adapter contribution registrator.
  */
@@ -111,6 +112,28 @@ export class PluginDebugService implements DebugService, PluginDebugAdapterContr
         }
     }
 
+    async provideDynamicDebugConfigurations(): Promise<{ type: string, configurations: DebugConfiguration[] }[]> {
+        const result: Promise<{ type: string, configurations: theia.DebugConfiguration[] }>[] = [];
+
+        for (const [type, contributor] of this.contributors.entries()) {
+            const typeConfigurations = this.resolveDynamicConfigurationsForType(type, contributor);
+            result.push(typeConfigurations);
+        }
+
+        return Promise.all(result);
+    }
+
+    protected async resolveDynamicConfigurationsForType(
+        type: string,
+        contributor: PluginDebugAdapterContribution): Promise<{ type: string, configurations: DebugConfiguration[] }> {
+
+        const configurations = await contributor.provideDebugConfigurations(undefined, true);
+        for (const configuration of configurations) {
+            configuration.dynamic = true;
+        }
+        return { type, configurations };
+    }
+
     async resolveDebugConfiguration(config: DebugConfiguration, workspaceFolderUri: string | undefined): Promise<DebugConfiguration> {
         let resolved = config;
 

package/src/main/browser/debug/plugin-debug-session-factory.ts

@@ -20,7 +20,7 @@ import { EditorManager } from '@theia/editor/lib/browser/editor-manager';
 import { BreakpointManager } from '@theia/debug/lib/browser/breakpoint/breakpoint-manager';
 import { LabelProvider } from '@theia/core/lib/browser/label-provider';
 import { MessageClient } from '@theia/core/lib/common/message-service-protocol';
-import { OutputChannelManager } from '@theia/output/lib/common/output-channel';
+import { OutputChannelManager } from '@theia/output/lib/browser/output-channel';
 import { DebugPreferences } from '@theia/debug/lib/browser/debug-preferences';
 import { DebugSessionOptions } from '@theia/debug/lib/browser/debug-session-options';
 import { DebugSession } from '@theia/debug/lib/browser/debug-session';
@@ -30,7 +30,7 @@ import { TerminalWidgetOptions, TerminalWidget } from '@theia/terminal/lib/brows
 import { TerminalOptionsExt } from '../../../common/plugin-api-rpc';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
 import { DebugContribution } from '@theia/debug/lib/browser/debug-contribution';
-import { ContributionProvider } from '@theia/core';
+import { ContributionProvider } from '@theia/core/lib/common/contribution-provider';
 
 export class PluginDebugSession extends DebugSession {
     constructor(

package/src/main/browser/dialogs/modal-notification.ts

@@ -15,7 +15,7 @@
  ********************************************************************************/
 import { injectable } from '@theia/core/shared/inversify';
 import { Message } from '@theia/core/shared/@phosphor/messaging';
-import { Key } from '@theia/core/lib/browser';
+import { codiconArray, Key } from '@theia/core/lib/browser';
 import { AbstractDialog } from '@theia/core/lib/browser/dialogs';
 import '../../../../src/main/browser/dialogs/style/modal-notification.css';
 import { MainMessageItem } from '../../../common/plugin-api-rpc';
@@ -60,7 +60,7 @@ export class ModalNotification extends AbstractDialog<string | undefined> {
         const iconContainer = messageNode.appendChild(document.createElement('div'));
         iconContainer.classList.add(ICON);
         const iconElement = iconContainer.appendChild(document.createElement('i'));
-        iconElement.classList.add('fa', this.toIconClass(messageType), 'fa-fw', messageType.toString());
+        iconElement.classList.add(...this.toIconClass(messageType), messageType.toString());
 
         const textContainer = messageNode.appendChild(document.createElement('div'));
         textContainer.classList.add(TEXT);
@@ -86,13 +86,13 @@ export class ModalNotification extends AbstractDialog<string | undefined> {
         return messageNode;
     }
 
-    protected toIconClass(icon: MessageType): string {
+    protected toIconClass(icon: MessageType): string[] {
         if (icon === MessageType.Error) {
-            return 'fa-times-circle';
+            return codiconArray('error');
         }
         if (icon === MessageType.Warning) {
-            return 'fa-warning';
+            return codiconArray('warning');
         }
-        return 'fa-info-circle';
+        return codiconArray('info');
     }
 }

package/src/main/browser/plugin-ext-frontend-module.ts

@@ -21,7 +21,7 @@ import '../../../src/main/browser/style/comments.css';
 import { ContainerModule } from '@theia/core/shared/inversify';
 import {
     FrontendApplicationContribution, WidgetFactory, bindViewContribution,
-    ViewContainerIdentifier, ViewContainer, createTreeContainer, TreeImpl, TreeWidget, TreeModelImpl, LabelProviderContribution, TreeProps
+    ViewContainerIdentifier, ViewContainer, createTreeContainer, TreeImpl, TreeWidget, TreeModelImpl, LabelProviderContribution
 } from '@theia/core/lib/browser';
 import { MaybePromise, CommandContribution, ResourceResolver, bindContributionProvider } from '@theia/core/lib/common';
 import { WebSocketConnectionProvider } from '@theia/core/lib/browser/messaging';
@@ -147,10 +147,12 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
         createWidget: (identifier: TreeViewWidgetIdentifier) => {
             const child = createTreeContainer(container, {
                 contextMenuPath: VIEW_ITEM_CONTEXT_MENU,
-                search: true,
-                globalSelection: true
+                expandOnlyOnExpansionToggleClick: true,
+                expansionTogglePadding: 22,
+                globalSelection: true,
+                leftPadding: 8,
+                search: true
             });
-            child.rebind(TreeProps).toConstantValue({ leftPadding: 8, expansionTogglePadding: 22, expandOnlyOnExpansionToggleClick: true, });
             child.bind(TreeViewWidgetIdentifier).toConstantValue(identifier);
             child.bind(PluginTree).toSelf();
             child.rebind(TreeImpl).toService(PluginTree);

package/src/main/browser/plugin-ext-widget.tsx

@@ -23,6 +23,7 @@ import { AlertMessage } from '@theia/core/lib/browser/widgets/alert-message';
 import { HostedPluginSupport, PluginProgressLocation } from '../../hosted/browser/hosted-plugin';
 import { ProgressBarFactory } from '@theia/core/lib/browser/progress-bar-factory';
 import { DisposableCollection } from '@theia/core/lib/common/disposable';
+import { codicon } from '@theia/core/lib/browser';
 
 @injectable()
 export class PluginWidget extends ReactWidget {
@@ -38,7 +39,7 @@ export class PluginWidget extends ReactWidget {
         this.id = 'plugins';
         this.title.label = 'Plugins';
         this.title.caption = 'Plugins';
-        this.title.iconClass = 'fa plugins-tab-icon';
+        this.title.iconClass = codicon('diff-added');
         this.title.closable = true;
         this.node.tabIndex = 0;
         this.addClass('theia-plugins');
@@ -86,7 +87,7 @@ export class PluginWidget extends ReactWidget {
         return <div key={plugin.model.name} className={this.createPluginClassName(plugin)}>
             <div className='column flexcontainer pluginInformationContainer'>
                 <div className='row flexcontainer'>
-                    <div className='fa fa-puzzle-piece fa-2x fa-fw'></div>
+                    <div className={codicon('list-selection')}></div>
                     <div title={plugin.model.name} className='pluginName noWrapInfo'>{plugin.model.name}</div>
                 </div>
                 <div className='row flexcontainer'>

package/src/main/browser/plugin-icon-theme-service.ts

@@ -36,6 +36,7 @@ import { WorkspaceRootNode } from '@theia/navigator/lib/browser/navigator-tree';
 import { Endpoint } from '@theia/core/lib/browser/endpoint';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
 import { FileStat, FileChangeType } from '@theia/filesystem/lib/common/files';
+import { WorkspaceService } from '@theia/workspace/lib/browser';
 
 export interface PluginIconDefinition {
     iconPath: string;
@@ -107,6 +108,9 @@ export class PluginIconTheme extends PluginIconThemeDefinition implements IconTh
     @inject(PluginIconThemeDefinition)
     protected readonly definition: PluginIconThemeDefinition;
 
+    @inject(WorkspaceService)
+    protected readonly workspaceService: WorkspaceService;
+
     protected readonly onDidChangeEmitter = new Emitter<DidChangeLabelEvent>();
     readonly onDidChange = this.onDidChangeEmitter.event;
 
@@ -508,9 +512,15 @@ export class PluginIconTheme extends PluginIconThemeDefinition implements IconTh
         const name = this.labelProvider.getName(element);
         const classNames = this.fileNameIcon(name);
         if (uri) {
-            const language = monaco.services.StaticServices.modeService.get().createByFilepathOrFirstLine(monaco.Uri.parse(uri));
+            const parsedURI = new URI(uri);
+            const isRoot = this.workspaceService.getWorkspaceRootUri(new URI(uri))?.isEqual(parsedURI);
+            if (isRoot) {
+                classNames.unshift(this.rootFolderIcon);
+            } else {
+                classNames.unshift(this.fileIcon);
+            }
+            const language = monaco.services.StaticServices.modeService.get().createByFilepathOrFirstLine(parsedURI['codeUri']);
             classNames.push(this.languageIcon(language.languageIdentifier.language));
-            classNames.unshift(this.fileIcon);
         }
         return classNames;
     }

package/src/main/browser/plugin-shared-style.ts

@@ -111,7 +111,7 @@ export class PluginSharedStyle {
                 background-position: 2px;
                 width: ${size}px;
                 height: ${size}px;
-                background: no-repeat url("${theme.type === 'light' ? lightIconUrl : darkIconUrl}");
+                background: center no-repeat url("${theme.type === 'light' ? lightIconUrl : darkIconUrl}");
                 background-size: ${size}px;
             `));
         return {