Add padding and handle root folders

Signed-off-by: Colin Grant <colin.grant@ericsson.com>

packages/core/src/browser/breadcrumbs/breadcrumbs-constants.ts

@@ -30,19 +30,22 @@ export namespace Styles {
 export interface Breadcrumb {
 
     /** An ID of this breadcrumb that should be unique in the breadcrumbs bar. */
-    readonly id: string
+    readonly id: string;
 
     /** The breadcrumb type. Should be the same as the contribution type `BreadcrumbsContribution#type`. */
-    readonly type: symbol
+    readonly type: symbol;
 
     /** The text that will be rendered as label. */
-    readonly label: string
+    readonly label: string;
 
     /** A longer text that will be used as tooltip text. */
-    readonly longLabel: string
+    readonly longLabel: string;
 
     /** A CSS class for the icon. */
-    readonly iconClass?: string
+    readonly iconClass?: string;
+
+    /** CSS classes for the container */
+    readonly containerClass?: string;
 }
 
 export const BreadcrumbsContribution = Symbol('BreadcrumbsContribution');

packages/core/src/browser/style/breadcrumbs.css

@@ -68,6 +68,18 @@
     padding-left: 4px;
 }
 
+.theia-breadcrumbs .theia-breadcrumb-item::before {
+    width: 16px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.theia-breadcrumbs .theia-breadcrumb-item:first-of-type::before {
+    content: " ";
+}
+
 .theia-breadcrumb-item-haspopup:hover {
     background: var(--theia-accent-color3);
     cursor: pointer;

packages/filesystem/src/browser/breadcrumbs/filepath-breadcrumb.ts

@@ -23,7 +23,8 @@ export class FilepathBreadcrumb implements Breadcrumb {
         readonly uri: URI,
         readonly label: string,
         readonly longLabel: string,
-        readonly iconClass: string
+        readonly iconClass: string,
+        readonly containerClass: string,
     ) { }
 
     get id(): string {

packages/filesystem/src/browser/breadcrumbs/filepath-breadcrumbs-contribution.ts

@@ -26,6 +26,10 @@ import { FileStat } from '../../common/files';
 
 export const FilepathBreadcrumbType = Symbol('FilepathBreadcrumb');
 
+export interface FilepathBreadccrumbClassNameFactory {
+    (location: URI, index: number): string;
+}
+
 @injectable()
 export class FilepathBreadcrumbsContribution implements BreadcrumbsContribution {
 
@@ -50,17 +54,32 @@ export class FilepathBreadcrumbsContribution implements BreadcrumbsContribution
         if (uri.scheme !== 'file') {
             return [];
         }
+        const getContainerClass = this.getContainerClassCreator(uri);
+        const getIconClass = this.getIconClassCreator(uri);
         return uri.allLocations
-            .map((location, index) => new FilepathBreadcrumb(
-                location,
-                this.labelProvider.getName(location),
-                this.labelProvider.getLongName(location),
-                index === 0 ? this.labelProvider.getIcon(location) + ' file-icon' : ''
-            ))
+            .map((location, index) => {
+                const icon = getIconClass(location, index);
+                const containerClass = getContainerClass(location, index);
+                return new FilepathBreadcrumb(
+                    location,
+                    this.labelProvider.getName(location),
+                    this.labelProvider.getLongName(location),
+                    icon,
+                    containerClass,
+                );
+            })
             .filter(b => this.filterBreadcrumbs(uri, b))
             .reverse();
     }
 
+    protected getContainerClassCreator(fileURI: URI): FilepathBreadccrumbClassNameFactory {
+        return (location, index) => location.isEqual(fileURI) ? 'file' : 'folder';
+    }
+
+    protected getIconClassCreator(fileURI: URI): FilepathBreadccrumbClassNameFactory {
+        return (location, index) => location.isEqual(fileURI) ? this.labelProvider.getIcon(location) + ' file-icon' : '';
+    }
+
     protected filterBreadcrumbs(_: URI, breadcrumb: FilepathBreadcrumb): boolean {
         return !breadcrumb.uri.path.isRoot;
     }

packages/outline-view/src/browser/outline-breadcrumbs-contribution.tsx

@@ -25,6 +25,7 @@ import { UriSelection } from '@theia/core/lib/common';
 
 export const OutlineBreadcrumbType = Symbol('OutlineBreadcrumb');
 export const BreadcrumbPopupOutlineViewFactory = Symbol('BreadcrumbPopupOutlineViewFactory');
+export const OUTLINE_BREADCRUMB_CONTAINER_CLASS = 'outline-element';
 export interface BreadcrumbPopupOutlineViewFactory {
     (): BreadcrumbPopupOutlineView;
 }
@@ -103,16 +104,36 @@ export class OutlineBreadcrumbsContribution implements BreadcrumbsContribution {
         const outlinePath = this.toOutlinePath(selectedNode);
         if (outlinePath && selectedNode) {
             this.currentBreadcrumbs = outlinePath.map((node, index) =>
-                new OutlineBreadcrumb(node, uri, index.toString(), this.labelProvider.getName(node), 'symbol-icon symbol-icon-center ' + node.iconClass)
+                new OutlineBreadcrumb(
+                    node,
+                    uri,
+                    index.toString(),
+                    this.labelProvider.getName(node),
+                    'symbol-icon symbol-icon-center ' + node.iconClass,
+                    OUTLINE_BREADCRUMB_CONTAINER_CLASS,
+                )
             );
             if (selectedNode.children && selectedNode.children.length > 0) {
-                this.currentBreadcrumbs.push(new OutlineBreadcrumb(selectedNode.children as OutlineSymbolInformationNode[],
-                    uri, this.currentBreadcrumbs.length.toString(), '…', ''));
+                this.currentBreadcrumbs.push(new OutlineBreadcrumb(
+                    selectedNode.children as OutlineSymbolInformationNode[],
+                    uri,
+                    this.currentBreadcrumbs.length.toString(),
+                    '…',
+                    '',
+                    OUTLINE_BREADCRUMB_CONTAINER_CLASS,
+                ));
             }
         } else {
             this.currentBreadcrumbs = [];
             if (this.roots) {
-                this.currentBreadcrumbs.push(new OutlineBreadcrumb(this.roots, uri, this.currentBreadcrumbs.length.toString(), '…', ''));
+                this.currentBreadcrumbs.push(new OutlineBreadcrumb(
+                    this.roots,
+                    uri,
+                    this.currentBreadcrumbs.length.toString(),
+                    '…',
+                    '',
+                    OUTLINE_BREADCRUMB_CONTAINER_CLASS
+                ));
             }
         }
         this.onDidChangeBreadcrumbsEmitter.fire(uri);
@@ -187,7 +208,8 @@ export class OutlineBreadcrumb implements Breadcrumb {
         readonly uri: URI,
         readonly index: string,
         readonly label: string,
-        readonly iconClass: string
+        readonly iconClass: string,
+        readonly containerClass: string,
     ) { }
 
     get id(): string {

packages/plugin-ext/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;
     }

packages/workspace/src/browser/workspace-breadcrumbs-contribution.ts

@@ -15,7 +15,7 @@
  ********************************************************************************/
 
 import { FilepathBreadcrumb } from '@theia/filesystem/lib/browser/breadcrumbs/filepath-breadcrumb';
-import { FilepathBreadcrumbsContribution } from '@theia/filesystem/lib/browser/breadcrumbs/filepath-breadcrumbs-contribution';
+import { FilepathBreadccrumbClassNameFactory, FilepathBreadcrumbsContribution } from '@theia/filesystem/lib/browser/breadcrumbs/filepath-breadcrumbs-contribution';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { WorkspaceService } from './workspace-service';
 import URI from '@theia/core/lib/common/uri';
@@ -26,6 +26,28 @@ export class WorkspaceBreadcrumbsContribution extends FilepathBreadcrumbsContrib
     @inject(WorkspaceService)
     protected readonly workspaceService: WorkspaceService;
 
+    getContainerClassCreator(fileURI: URI): FilepathBreadccrumbClassNameFactory {
+        const workspaceRoot = this.workspaceService.getWorkspaceRootUri(fileURI);
+        return (location, index) => {
+            if (location.isEqual(fileURI)) {
+                return 'file';
+            } else if (workspaceRoot?.isEqual(location)) {
+                return 'root_folder';
+            }
+            return 'folder';
+        };
+    }
+
+    getIconClassCreator(fileURI: URI): FilepathBreadccrumbClassNameFactory {
+        const workspaceRoot = this.workspaceService.getWorkspaceRootUri(fileURI);
+        return (location, index) => {
+            if (location.isEqual(fileURI) || workspaceRoot?.isEqual(location)) {
+                return this.labelProvider.getIcon(location) + ' file-icon';
+            }
+            return '';
+        };
+    }
+
     protected filterBreadcrumbs(uri: URI, breadcrumb: FilepathBreadcrumb): boolean {
         const workspaceRootUri = this.workspaceService.getWorkspaceRootUri(uri);
         const firstCrumbToHide = this.workspaceService.isMultiRootWorkspaceOpened ? workspaceRootUri?.parent : workspaceRootUri;

packages/workspace/src/browser/workspace-uri-contribution.ts

@@ -39,6 +39,10 @@ export class WorkspaceUriLabelProviderContribution extends DefaultUriLabelProvid
     }
 
     getIcon(element: URI | URIIconReference | FileStat): string {
+        const uri = this.getUri(element);
+        if (uri && this.workspaceVariable.getWorkspaceRootUri(uri)?.isEqual(uri)) {
+            return 'rootfolder-icon';
+        }
         return super.getIcon(this.asURIIconReference(element));
     }