Add 'title' for widgets in the sidebar

- added `title` to widgets present in the sidebar by using the widget's caption.
- adjusted the `explorer` to display the workpace uri path when hovering over
the widget's title.

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

packages/core/src/browser/shell/side-panel-toolbar.ts

@@ -97,6 +97,7 @@ export class SidePanelToolbar extends BaseWidget {
         if (this.titleContainer && title) {
             this._toolbarTitle = title;
             this.titleContainer.innerHTML = this._toolbarTitle.label;
+            this.titleContainer.title = this._toolbarTitle.caption || this._toolbarTitle.label;
             this.update();
         }
     }

packages/navigator/src/browser/navigator-widget.tsx

@@ -18,7 +18,7 @@ import { injectable, inject, postConstruct } from 'inversify';
 import { Message } from '@phosphor/messaging';
 import URI from '@theia/core/lib/common/uri';
 import { CommandService, SelectionService } from '@theia/core/lib/common';
-import { CommonCommands, CorePreferences } from '@theia/core/lib/browser';
+import { CommonCommands, CorePreferences, LabelProvider } from '@theia/core/lib/browser';
 import {
     ContextMenuRenderer, ExpandableTreeNode,
     TreeProps, TreeModel, TreeNode,
@@ -44,6 +44,8 @@ export class FileNavigatorWidget extends FileTreeWidget {
 
     @inject(CorePreferences) protected readonly corePreferences: CorePreferences;
 
+    @inject(LabelProvider) protected readonly labelProvider: LabelProvider;
+
     @inject(NavigatorContextKeyService)
     protected readonly contextKeyService: NavigatorContextKeyService;
 
@@ -106,12 +108,15 @@ export class FileNavigatorWidget extends FileTreeWidget {
                 const rootNode = this.model.root.children[0];
                 if (WorkspaceRootNode.is(rootNode)) {
                     this.title.label = rootNode.name;
+                    this.title.caption = this.labelProvider.getLongName(rootNode.uri);
                 }
             } else {
                 this.title.label = this.model.root.name;
+                this.title.caption = this.title.label;
             }
+        } else {
+            this.title.caption = this.title.label;
         }
-        this.title.caption = this.title.label;
     }
 
     protected enableDndOnMainPanel(): void {