Add extended tab bar preview option (#12350)

* Add extended tab bar preview option

Add functionality to render more information on tab bar hover.
Also makes sure the feedback is styled be using the hoverService.
This currently applies to horizontal tab bars.
Right now the title and the caption will be rendered.
To not remove the old behavior this feature is enabled via the setting
`window.extendedTabBarPreview`.
Also added possibility to specify cssClasses to be added to a hover,
when requesting it from the HoverService.
This way special hovers, like the extended tab bar preview, can easily
be styled with CSS.

Contributed on behalf of STMicroelectronics

* Localize preference and address review feedback

Remove css classes after hover is disposed.
Update tab bars after preference has been changed.

Contributed on behalf of STMicroelectronics

* Rename setting to `window.tabbar.enhancedPreview`

Also fix potential unnecessary remove class for cssClasses.

Contributed on behalf of STMicroelectronics

packages/core/src/browser/core-preferences.ts

@@ -80,6 +80,11 @@ export const corePreferenceSchema: PreferenceSchema = {
             default: 'code',
             markdownDescription: nls.localizeByDefault('Controls the dispatching logic for key presses to use either `code` (recommended) or `keyCode`.')
         },
+        'window.tabbar.enhancedPreview': {
+            type: 'boolean',
+            default: false,
+            description: nls.localize('theia/core/enhancedPreview', 'Controls whether more information about the tab should be displayed in horizontal tab bars.')
+        },
         'window.menuBarVisibility': {
             type: 'string',
             enum: ['classic', 'visible', 'hidden', 'compact'],
@@ -258,6 +263,7 @@ export interface CoreConfiguration {
     'breadcrumbs.enabled': boolean;
     'files.encoding': string;
     'keyboard.dispatch': 'code' | 'keyCode';
+    'window.tabbar.enhancedPreview': boolean;
     'window.menuBarVisibility': 'classic' | 'visible' | 'hidden' | 'compact';
     'window.title': string;
     'window.titleSeparator': string;

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

@@ -57,6 +57,11 @@ export interface HoverRequest {
      * if the specified content does not fit in the window next to the target element
      */
     position: HoverPosition
+    /**
+     * Additional css classes that should be added to the hover box.
+     * Used to style certain boxes different e.g. for the extended tab preview.
+     */
+    cssClasses?: string []
 }
 
 @injectable()
@@ -101,7 +106,10 @@ export class HoverService {
 
     protected async renderHover(request: HoverRequest): Promise<void> {
         const host = this.hoverHost;
-        const { target, content, position } = request;
+        const { target, content, position, cssClasses } = request;
+        if (cssClasses) {
+            host.classList.add(...cssClasses);
+        }
         this.hoverTarget = target;
         if (content instanceof HTMLElement) {
             host.appendChild(content);
@@ -124,6 +132,9 @@ export class HoverService {
             dispose: () => {
                 this.lastHidHover = Date.now();
                 host.classList.remove(updatedPosition);
+                if (cssClasses) {
+                    host.classList.remove(...cssClasses);
+                }
             }
         });
 

packages/core/src/browser/shell/application-shell.ts

@@ -286,6 +286,14 @@ export class ApplicationShell extends Widget {
                 }
             });
         }
+
+        this.corePreferences.onPreferenceChanged(preference => {
+            if (preference.preferenceName === 'window.tabbar.enhancedPreview') {
+                this.allTabBars.forEach(tabBar => {
+                    tabBar.update();
+                });
+            }
+        });
     }
 
     protected initializeShell(): void {

packages/core/src/browser/shell/tab-bars.ts

@@ -161,9 +161,7 @@ export class TabBarRenderer extends TabBar.Renderer {
             ? nls.localizeByDefault('Unpin')
             : nls.localizeByDefault('Close');
 
-        const hover = this.tabBar && this.tabBar.orientation === 'horizontal' ? {
-            title: title.caption
-        } : {
+        const hover = this.tabBar && (this.tabBar.orientation === 'horizontal' && !this.corePreferences?.['window.tabbar.enhancedPreview']) ? { title: title.caption } : {
             onmouseenter: this.handleMouseEnterEvent
         };
 
@@ -484,16 +482,41 @@ export class TabBarRenderer extends TabBar.Renderer {
         return h.div({ className: baseClassName, style }, data.title.iconLabel);
     }
 
+    protected renderEnhancedPreview = (title: Title<Widget>) => {
+        const hoverBox = document.createElement('div');
+        hoverBox.classList.add('theia-horizontal-tabBar-hover-div');
+        const labelElement = document.createElement('p');
+        labelElement.classList.add('theia-horizontal-tabBar-hover-title');
+        labelElement.textContent = title.label;
+        hoverBox.append(labelElement);
+        if (title.caption) {
+            const captionElement = document.createElement('p');
+            captionElement.classList.add('theia-horizontal-tabBar-hover-caption');
+            captionElement.textContent = title.caption;
+            hoverBox.appendChild(captionElement);
+        }
+        return hoverBox;
+    };
+
     protected handleMouseEnterEvent = (event: MouseEvent) => {
         if (this.tabBar && this.hoverService && event.currentTarget instanceof HTMLElement) {
             const id = event.currentTarget.id;
             const title = this.tabBar.titles.find(t => this.createTabId(t) === id);
             if (title) {
-                this.hoverService.requestHover({
-                    content: title.caption,
-                    target: event.currentTarget,
-                    position: 'right'
-                });
+                if (this.tabBar.orientation === 'horizontal') {
+                    this.hoverService.requestHover({
+                        content: this.renderEnhancedPreview(title),
+                        target: event.currentTarget,
+                        position: 'bottom',
+                        cssClasses: ['extended-tab-preview']
+                    });
+                } else {
+                    this.hoverService.requestHover({
+                        content: title.caption,
+                        target: event.currentTarget,
+                        position: 'right'
+                    });
+                }
             }
         }
     };

packages/core/src/browser/style/hover-service.css

@@ -93,3 +93,7 @@
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
 }
+
+.theia-hover.extended-tab-preview {
+    border-radius: 10px;
+}

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

@@ -419,3 +419,19 @@
 .p-TabBar[data-orientation='horizontal'] .p-TabBar-tab.p-mod-current .theia-tab-icon-label {
   overflow: hidden;
 }
+
+.theia-horizontal-tabBar-hover-div {
+  margin: 0px 4px;
+}
+
+.theia-horizontal-tabBar-hover-title {
+  font-weight: bolder;
+  font-size: medium;
+  margin: 0px 0px;
+}
+
+.theia-horizontal-tabBar-hover-caption {
+  font-size: small;
+  margin: 0px 0px;
+  margin-top: 4px;
+}