[preferences] fix the display of file icons

Fixes eclipse-theia#6990
Fixes eclipse-theia#7010

- fixes an issue where the file icon was not properly displayed
- fixes an issue where the file icon was not properly updated
based on the current file icon theme. This problem is solved by
programmatically getting the icon based on the `file-icon` using
the `labelProvider#getIcon` method.

Signed-off-by: vince-fugnitto <vincent.fugnitto@ericsson.com>

packages/preferences/src/browser/preferences-tree-widget.ts

@@ -35,7 +35,8 @@ import {
     TreeProps,
     TreeWidget,
     WidgetManager,
-    PreferenceProvider
+    PreferenceProvider,
+    LabelProvider
 } from '@theia/core/lib/browser';
 import { UserPreferenceProvider } from './user-preference-provider';
 import { WorkspacePreferenceProvider } from './workspace-preference-provider';
@@ -254,6 +255,9 @@ export class PreferencesEditorsContainer extends DockPanel {
     @inject(EditorManager)
     protected readonly editorManager: EditorManager;
 
+    @inject(LabelProvider)
+    protected readonly labelProvider: LabelProvider;
+
     @inject(PreferenceProvider) @named(PreferenceScope.User)
     protected readonly userPreferenceProvider: UserPreferenceProvider;
 
@@ -278,6 +282,8 @@ export class PreferencesEditorsContainer extends DockPanel {
         this.onInitEmitter
     );
 
+    protected readonly toDisposeOnDetach = new DisposableCollection();
+
     constructor(
         @inject(WorkspaceService) protected readonly workspaceService: WorkspaceService,
         @inject(FileSystem) protected readonly fileSystem: FileSystem,
@@ -305,6 +311,10 @@ export class PreferencesEditorsContainer extends DockPanel {
         super.onUpdateRequest(msg);
     }
 
+    onBeforeDetach(): void {
+        this.toDisposeOnDetach.dispose();
+    }
+
     protected async onAfterAttach(msg: Message): Promise<void> {
         this.userPreferenceEditorWidget = await this.getUserPreferenceEditorWidget();
         this.addWidget(this.userPreferenceEditorWidget);
@@ -313,12 +323,25 @@ export class PreferencesEditorsContainer extends DockPanel {
 
         super.onAfterAttach(msg);
         this.onInitEmitter.fire(undefined);
+        this.toDisposeOnDetach.push(
+            this.labelProvider.onDidChange(() => {
+                // Listen to changes made by the label provider and apply updates to the preference editors.
+                const icon = this.labelProvider.getIcon(new URI('settings.json'));
+                this.userPreferenceEditorWidget.title.iconClass = icon;
+                if (this.workspacePreferenceEditorWidget) {
+                    // Explicitly update the workspace preference title to `Workspace` for single and multi-root workspaces.
+                    this.workspacePreferenceEditorWidget.title.label = 'Workspace';
+                    this.workspacePreferenceEditorWidget.title.iconClass = icon;
+                }
+            })
+        );
     }
 
     protected async getUserPreferenceEditorWidget(): Promise<PreferencesEditorWidget> {
         const userPreferenceUri = this.userPreferenceProvider.getConfigUri();
         const userPreferences = await this.editorManager.getOrCreateByUri(userPreferenceUri) as PreferencesEditorWidget;
         userPreferences.title.label = 'User';
+        userPreferences.title.iconClass = this.labelProvider.getIcon(new URI('settings.json'));
         userPreferences.title.caption = `User Preferences: ${await this.getPreferenceEditorCaption(userPreferenceUri)}`;
         userPreferences.scope = PreferenceScope.User;
         return userPreferences;
@@ -344,7 +367,7 @@ export class PreferencesEditorsContainer extends DockPanel {
         if (workspacePreferences) {
             workspacePreferences.title.label = 'Workspace';
             workspacePreferences.title.caption = `Workspace Preferences: ${await this.getPreferenceEditorCaption(workspacePreferenceUri!)}`;
-            workspacePreferences.title.iconClass = 'database-icon medium-yellow file-icon';
+            workspacePreferences.title.iconClass = this.labelProvider.getIcon(new URI('settings.json'));
             workspacePreferences.editor.setLanguage('jsonc');
             workspacePreferences.scope = PreferenceScope.Workspace;
         }

packages/preferences/src/browser/style/index.css

@@ -17,3 +17,9 @@
 #preferences_container_widget .p-SplitPanel-handle {
     border-right: var(--theia-border-width) solid var(--theia-editorGroup-border);
 }
+
+#preferences_container_widget .p-TabBar-tabIcon {
+    align-items: center;
+    display: flex;
+    line-height: var(--theia-content-line-height) !important;
+}