@theia/core 1.32.0-next.8 → 1.32.0

package/src/browser/shell/sidebar-menu-widget.tsx

@@ -19,19 +19,20 @@ import * as React from 'react';
 import { ReactWidget } from '../widgets';
 import { ContextMenuRenderer } from '../context-menu-renderer';
 import { MenuPath } from '../../common/menu';
+import { HoverService } from '../hover-service';
 
 export const SidebarTopMenuWidgetFactory = Symbol('SidebarTopMenuWidgetFactory');
 export const SidebarBottomMenuWidgetFactory = Symbol('SidebarBottomMenuWidgetFactory');
 
 export interface SidebarMenu {
-  id: string;
-  iconClass: string;
-  title: string;
-  menuPath: MenuPath;
-  /*
-   * Used to sort menus. The lower the value the lower they are placed in the sidebar.
-   */
-  order: number;
+    id: string;
+    iconClass: string;
+    title: string;
+    menuPath: MenuPath;
+    /*
+     * Used to sort menus. The lower the value the lower they are placed in the sidebar.
+     */
+    order: number;
 }
 
 /**
@@ -39,88 +40,101 @@ export interface SidebarMenu {
  */
 @injectable()
 export class SidebarMenuWidget extends ReactWidget {
-  protected readonly menus: SidebarMenu[];
-  /**
-   * The element that had focus when a menu rendered by this widget was activated.
-   */
-  protected preservedContext: HTMLElement | undefined;
-  /**
-   * Flag indicating whether a context menu is open. While a context menu is open, the `preservedContext` should not be cleared.
-   */
-  protected preservingContext = false;
+    protected readonly menus: SidebarMenu[];
+    /**
+     * The element that had focus when a menu rendered by this widget was activated.
+     */
+    protected preservedContext: HTMLElement | undefined;
+    /**
+     * Flag indicating whether a context menu is open. While a context menu is open, the `preservedContext` should not be cleared.
+     */
+    protected preservingContext = false;
 
-  @inject(ContextMenuRenderer)
-  protected readonly contextMenuRenderer: ContextMenuRenderer;
+    @inject(ContextMenuRenderer)
+    protected readonly contextMenuRenderer: ContextMenuRenderer;
 
-  constructor() {
-    super();
-    this.menus = [];
-  }
+    @inject(HoverService)
+    protected readonly hoverService: HoverService;
 
-  addMenu(menu: SidebarMenu): void {
-    const exists = this.menus.find(m => m.id === menu.id);
-    if (exists) {
-      return;
+    constructor() {
+        super();
+        this.menus = [];
     }
-    this.menus.push(menu);
-    this.menus.sort((a, b) => a.order - b.order);
-    this.update();
-  }
 
-  removeMenu(menuId: string): void {
-    const menu = this.menus.find(m => m.id === menuId);
-    if (menu) {
-      const index = this.menus.indexOf(menu);
-      if (index !== -1) {
-        this.menus.splice(index, 1);
+    addMenu(menu: SidebarMenu): void {
+        const exists = this.menus.find(m => m.id === menu.id);
+        if (exists) {
+            return;
+        }
+        this.menus.push(menu);
+        this.menus.sort((a, b) => a.order - b.order);
         this.update();
-      }
     }
-  }
 
-  protected readonly onMouseDown = () => {
-    const { activeElement } = document;
-    if (activeElement instanceof HTMLElement && !this.node.contains(activeElement)) {
-      this.preservedContext = activeElement;
+    removeMenu(menuId: string): void {
+        const menu = this.menus.find(m => m.id === menuId);
+        if (menu) {
+            const index = this.menus.indexOf(menu);
+            if (index !== -1) {
+                this.menus.splice(index, 1);
+                this.update();
+            }
+        }
     }
-  };
 
-  protected readonly onMouseOut = () => {
-    if (!this.preservingContext) {
-      this.preservedContext = undefined;
-    }
-  };
+    protected readonly onMouseDown = () => {
+        const { activeElement } = document;
+        if (activeElement instanceof HTMLElement && !this.node.contains(activeElement)) {
+            this.preservedContext = activeElement;
+        }
+    };
 
-  protected onClick(e: React.MouseEvent<HTMLElement, MouseEvent>, menuPath: MenuPath): void {
-    this.preservingContext = true;
-    const button = e.currentTarget.getBoundingClientRect();
-    this.contextMenuRenderer.render({
-      menuPath,
-      includeAnchorArg: false,
-      anchor: {
-        x: button.left + button.width,
-        y: button.top,
-      },
-      onHide: () => {
-        this.preservingContext = false;
-        if (this.preservedContext) {
-          this.preservedContext.focus({ preventScroll: true });
-          this.preservedContext = undefined;
+    protected readonly onMouseOut = () => {
+        if (!this.preservingContext) {
+            this.preservedContext = undefined;
         }
-      }
-    });
-  }
+    };
 
-  protected render(): React.ReactNode {
-    return <React.Fragment>
-      {this.menus.map(menu => <i
-        key={menu.id}
-        className={menu.iconClass}
-        title={menu.title}
-        onClick={e => this.onClick(e, menu.menuPath)}
-        onMouseDown={this.onMouseDown}
-        onMouseOut={this.onMouseOut}
-      />)}
-    </React.Fragment>;
-  }
+    protected readonly onMouseEnter = (event: React.MouseEvent<HTMLElement, MouseEvent>, title: string) => {
+        if (title && event.nativeEvent.currentTarget) {
+            this.hoverService.requestHover({
+                content: title,
+                target: event.currentTarget,
+                position: 'right'
+            });
+        }
+    };
+
+    protected onClick(e: React.MouseEvent<HTMLElement, MouseEvent>, menuPath: MenuPath): void {
+        this.preservingContext = true;
+        const button = e.currentTarget.getBoundingClientRect();
+        this.contextMenuRenderer.render({
+            menuPath,
+            includeAnchorArg: false,
+            anchor: {
+                x: button.left + button.width,
+                y: button.top,
+            },
+            onHide: () => {
+                this.preservingContext = false;
+                if (this.preservedContext) {
+                    this.preservedContext.focus({ preventScroll: true });
+                    this.preservedContext = undefined;
+                }
+            }
+        });
+    }
+
+    protected render(): React.ReactNode {
+        return <React.Fragment>
+            {this.menus.map(menu => <i
+                key={menu.id}
+                className={menu.iconClass}
+                onClick={e => this.onClick(e, menu.menuPath)}
+                onMouseDown={this.onMouseDown}
+                onMouseEnter={e => this.onMouseEnter(e, menu.title)}
+                onMouseLeave={this.onMouseOut}
+            />)}
+        </React.Fragment>;
+    }
 }

package/src/browser/shell/tab-bars.ts

@@ -33,6 +33,7 @@ import { NavigatableWidget } from '../navigatable-types';
 import { IDragEvent } from '@phosphor/dragdrop';
 import { PINNED_CLASS } from '../widgets/widget';
 import { CorePreferences } from '../core-preferences';
+import { HoverService } from '../hover-service';
 
 /** The class name added to hidden content nodes, which are required to render vertical side bars. */
 const HIDDEN_CONTENT_CLASS = 'theia-TabBar-hidden-content';
@@ -90,7 +91,8 @@ export class TabBarRenderer extends TabBar.Renderer {
         protected readonly iconThemeService?: IconThemeService,
         protected readonly selectionService?: SelectionService,
         protected readonly commandService?: CommandService,
-        protected readonly corePreferences?: CorePreferences
+        protected readonly corePreferences?: CorePreferences,
+        protected readonly hoverService?: HoverService
     ) {
         super();
         if (this.decoratorService) {
@@ -146,7 +148,7 @@ export class TabBarRenderer extends TabBar.Renderer {
      */
     override renderTab(data: SideBarRenderData, isInSidePanel?: boolean, isPartOfHiddenTabBar?: boolean): VirtualElement {
         const title = data.title;
-        const id = this.createTabId(data.title, isPartOfHiddenTabBar);
+        const id = this.createTabId(title, isPartOfHiddenTabBar);
         const key = this.createTabKey(data);
         const style = this.createTabStyle(data);
         const className = this.createTabClass(data);
@@ -154,9 +156,17 @@ export class TabBarRenderer extends TabBar.Renderer {
         const closeIconTitle = data.title.className.includes(PINNED_CLASS)
             ? nls.localizeByDefault('Unpin')
             : nls.localizeByDefault('Close');
+
+        const hover = this.tabBar && this.tabBar.orientation === 'horizontal' ? {
+            title: title.caption
+        } : {
+            onmouseenter: this.handleMouseEnterEvent
+        };
+
         return h.li(
             {
-                key, className, id, title: title.caption, style, dataset,
+                ...hover,
+                key, className, id, style, dataset,
                 oncontextmenu: this.handleContextMenuEvent,
                 ondblclick: this.handleDblClickEvent,
                 onauxclick: (e: MouseEvent) => {
@@ -457,6 +467,20 @@ export class TabBarRenderer extends TabBar.Renderer {
         return h.div({ className: baseClassName, style }, data.title.iconLabel);
     }
 
+    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'
+                });
+            }
+        }
+    };
+
     protected handleContextMenuEvent = (event: MouseEvent) => {
         if (this.contextMenuRenderer && this.contextMenuPath && event.currentTarget instanceof HTMLElement) {
             event.stopPropagation();
@@ -501,9 +525,8 @@ export class TabBarRenderer extends TabBar.Renderer {
         }
         if (this.tabBar && event.currentTarget instanceof HTMLElement) {
             const id = event.currentTarget.id;
-            // eslint-disable-next-line no-null/no-null
-            const title = this.tabBar.titles.find(t => this.createTabId(t) === id) || null;
-            const area = title && title.owner.parent;
+            const title = this.tabBar.titles.find(t => this.createTabId(t) === id);
+            const area = title?.owner.parent;
             if (area instanceof TheiaDockPanel && (area.id === BOTTOM_AREA_ID || area.id === MAIN_AREA_ID)) {
                 area.toggleMaximized();
             }

package/src/browser/status-bar/index.ts

@@ -16,17 +16,14 @@
 
 import { interfaces } from 'inversify';
 import { StatusBarImpl } from './status-bar';
-import { StatusBarHoverManager } from './status-bar-hover-manager';
 import { StatusBar } from './status-bar-types';
 import { StatusBarViewModel } from './status-bar-view-model';
 export * from './status-bar';
 export * from './status-bar-types';
 export * from './status-bar-view-model';
-export * from './status-bar-hover-manager';
 
 export function bindStatusBar(bind: interfaces.Bind): void {
     bind(StatusBarImpl).toSelf().inSingletonScope();
     bind(StatusBar).to(StatusBarImpl).inSingletonScope();
     bind(StatusBarViewModel).toSelf().inSingletonScope();
-    bind(StatusBarHoverManager).toSelf().inSingletonScope();
 }

package/src/browser/status-bar/status-bar.tsx

@@ -24,7 +24,7 @@ import { LabelParser, LabelIcon } from '../label-parser';
 import { PreferenceService } from '../preferences';
 import { StatusBar, StatusBarEntry, StatusBarAlignment, StatusBarViewEntry } from './status-bar-types';
 import { StatusBarViewModel } from './status-bar-view-model';
-import { StatusBarHoverManager } from './status-bar-hover-manager';
+import { HoverService } from '../hover-service';
 import { codicon } from '../widgets';
 export { StatusBar, StatusBarAlignment, StatusBarEntry };
 
@@ -40,7 +40,7 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
         @inject(FrontendApplicationStateService) protected readonly applicationStateService: FrontendApplicationStateService,
         @inject(PreferenceService) protected readonly preferences: PreferenceService,
         @inject(StatusBarViewModel) protected readonly viewModel: StatusBarViewModel,
-        @inject(StatusBarHoverManager) protected readonly hoverManager: StatusBarHoverManager,
+        @inject(HoverService) protected readonly hoverService: HoverService,
     ) {
         super();
         delete this.scrollOptions;
@@ -136,7 +136,11 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
         }
 
         if (entry.tooltip) {
-            attrs.onMouseEnter = e => this.hoverManager.requestHover(entry.tooltip!, e.currentTarget);
+            attrs.onMouseEnter = e => this.hoverService.requestHover({
+                content: entry.tooltip!,
+                target: e.currentTarget,
+                position: 'top'
+            });
         }
         if (entry.className) {
             attrs.className += ' ' + entry.className;

package/src/browser/style/hover-service.css

@@ -0,0 +1,95 @@
+/********************************************************************************
+ * Copyright (C) 2022 TypeFox and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+/* Adapted from https://github.com/microsoft/vscode/blob/7d9b1c37f8e5ae3772782ba3b09d827eb3fdd833/src/vs/workbench/services/hover/browser/hoverService.ts */
+
+:root {
+    --theia-hover-max-width: 500px;
+}
+
+.theia-hover {
+    font-family: var(--theia-ui-font-family);
+    font-size: var(--theia-ui-font-size1);
+    color: var(--theia-editorHoverWidget-foreground);
+    background-color: var(--theia-editorHoverWidget-background);
+    border: 1px solid var(--theia-editorHoverWidget-border);
+    padding: var(--theia-ui-padding);
+    max-width: var(--theia-hover-max-width);
+}
+
+.theia-hover .hover-row:not(:first-child):not(:empty) {
+    border-top: 1px solid var(--theia-editorHoverWidgetInternalBorder);
+}
+
+.theia-hover hr {
+    border-top: 1px solid var(--theia-editorHoverWidgetInternalBorder);
+    border-bottom: 0px solid var(--theia-editorHoverWidgetInternalBorder);
+    margin: var(--theia-ui-padding) calc(var(--theia-ui-padding) * -1);
+}
+
+.theia-hover a {
+    color: var(--theia-textLink-foreground);
+}
+
+.theia-hover a:hover {
+    color: var(--theia-textLink-active-foreground);
+}
+
+.theia-hover .hover-row .actions {
+    background-color: var(--theia-editorHoverWidget-statusBarBackground);
+}
+
+.theia-hover code {
+    background-color: var(--theia-textCodeBlock-background);
+    font-family: var(--theia-code-font-family);
+}
+
+.theia-hover::before {
+    content: '';
+    position: absolute;
+}
+
+.theia-hover.top::before {
+    left: var(--theia-hover-before-position);
+    bottom: -5px;
+    border-top: 5px solid var(--theia-editorHoverWidget-border);
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+}
+
+.theia-hover.bottom::before {
+    left: var(--theia-hover-before-position);
+    top: -5px;
+    border-bottom: 5px solid var(--theia-editorHoverWidget-border);
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+}
+
+.theia-hover.left::before {
+    top: var(--theia-hover-before-position);
+    right: -5px;
+    border-left: 5px solid var(--theia-editorHoverWidget-border);
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+}
+
+.theia-hover.right::before {
+    top: var(--theia-hover-before-position);
+    left: -5px;
+    border-right: 5px solid var(--theia-editorHoverWidget-border);
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+}

package/src/browser/style/status-bar.css

@@ -116,52 +116,3 @@ body.theia-no-open-workspace #theia-statusBar {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
-
-/* Adapted from https://github.com/microsoft/vscode/blob/7d9b1c37f8e5ae3772782ba3b09d827eb3fdd833/src/vs/workbench/services/hover/browser/hoverService.ts */
-
-.theia-status-bar-hover {
-    font-family: var(--theia-ui-font-family);
-    font-size: var(--theia-ui-font-size1);
-    color: var(--theia-editorHoverWidget-foreground);
-    background-color: var(--theia-editorHoverWidget-background);
-    border: 1px solid var(--theia-editorHoverWidget-border);
-    padding: var(--theia-ui-padding);
-
-}
-
-.theia-status-bar-hover .hover-row:not(:first-child):not(:empty) {
-    border-top: 1px solid var(--theia-editorHoverWidgetInternalBorder);
-}
-
-.theia-status-bar-hover hr {
-    border-top: 1px solid var(--theia-editorHoverWidgetInternalBorder);
-    border-bottom: 0px solid var(--theia-editorHoverWidgetInternalBorder);
-}
-
-.theia-status-bar-hover a {
-    color: var(--theia-textLink-foreground);
-}
-
-.theia-status-bar-hover a:hover {
-    color: var(--theia-textLink-active-foreground);
-}
-
-.theia-status-bar-hover .hover-row .actions {
-    background-color: var(--theia-editorHoverWidget-statusBarBackground);
-}
-
-.theia-status-bar-hover code {
-    background-color: var(--theia-textCodeBlock-background);
-    font-family: var(--theia-code-font-family);
-}
-
-.theia-status-bar-hover::before {
-    content: '';
-    position: absolute;
-    /* Set by the StatusBarHoverManager */
-    left: var(--theia-status-bar-hover-before-left);
-    bottom: -5px;
-    border-top: 5px solid var(--theia-editorHoverWidget-border);
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-}

package/src/browser/view-container.ts

@@ -175,7 +175,7 @@ export class ViewContainer extends BaseWidget implements StatefulWidget, Applica
             }),
             menuRegistry.registerMenuAction([...this.contextMenuPath, '0_global'], {
                 commandId: this.globalHideCommandId,
-                label: nls.localize('theia/core/hideViewContainer', 'Hide')
+                label: nls.localizeByDefault('Hide')
             }),
             this.onDidChangeTrackableWidgetsEmitter,
             this.onDidChangeTrackableWidgets(() => this.decoratorService.fireDidChangeDecorations())