@theia/core 1.59.0 → 1.60.0-next.43

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

@@ -15,14 +15,14 @@
 // *****************************************************************************
 
 import PerfectScrollbar from 'perfect-scrollbar';
-import { TabBar, Title, Widget } from '@phosphor/widgets';
-import { VirtualElement, h, VirtualDOM, ElementInlineStyle } from '@phosphor/virtualdom';
+import { TabBar, Title, Widget } from '@lumino/widgets';
+import { VirtualElement, h, VirtualDOM, ElementInlineStyle } from '@lumino/virtualdom';
 import { Disposable, DisposableCollection, MenuPath, notEmpty, SelectionService, CommandService, nls, ArrayUtils } from '../../common';
 import { ContextMenuRenderer } from '../context-menu-renderer';
-import { Signal, Slot } from '@phosphor/signaling';
-import { Message, MessageLoop } from '@phosphor/messaging';
-import { ArrayExt } from '@phosphor/algorithm';
-import { ElementExt } from '@phosphor/domutils';
+import { Signal, Slot } from '@lumino/signaling';
+import { Message, MessageLoop } from '@lumino/messaging';
+import { ArrayExt } from '@lumino/algorithm';
+import { ElementExt } from '@lumino/domutils';
 import { TabBarToolbarRegistry, TabBarToolbar } from './tab-bar-toolbar';
 import { TheiaDockPanel, MAIN_AREA_ID, BOTTOM_AREA_ID } from './theia-dock-panel';
 import { WidgetDecoration } from '../widget-decoration';
@@ -30,7 +30,7 @@ import { TabBarDecoratorService } from './tab-bar-decorator';
 import { IconThemeService } from '../icon-theme-service';
 import { BreadcrumbsRenderer, BreadcrumbsRendererFactory } from '../breadcrumbs/breadcrumbs-renderer';
 import { NavigatableWidget } from '../navigatable-types';
-import { IDragEvent } from '@phosphor/dragdrop';
+import { Drag } from '@lumino/dragdrop';
 import { LOCKED_CLASS, PINNED_CLASS } from '../widgets/widget';
 import { CorePreferences } from '../core-preferences';
 import { HoverService } from '../hover-service';
@@ -39,6 +39,7 @@ import { SelectComponent } from '../widgets/select-component';
 import { createElement } from 'react';
 import { PreviewableWidget } from '../widgets/previewable-widget';
 import { EnhancedPreviewWidget } from '../widgets/enhanced-preview-widget';
+import { isContextMenuEvent } from '../browser';
 import { ContextKeyService } from '../context-key-service';
 
 /** The class name added to hidden content nodes, which are required to render vertical side bars. */
@@ -195,7 +196,7 @@ export class TabBarRenderer extends TabBar.Renderer {
                 this.renderLock(data, isInSidePanel)
             ),
             h.div({
-                className: 'p-TabBar-tabCloseIcon action-label',
+                className: 'lm-TabBar-tabCloseIcon action-label',
                 title: closeIconTitle,
                 onclick: this.handleCloseClickEvent
             })
@@ -205,7 +206,7 @@ export class TabBarRenderer extends TabBar.Renderer {
     override createTabClass(data: SideBarRenderData): string {
         let tabClass = super.createTabClass(data);
         if (!(data.visible ?? true)) {
-            tabClass += ' p-mod-invisible';
+            tabClass += ' lm-mod-invisible';
         }
         return tabClass;
     }
@@ -280,16 +281,16 @@ export class TabBarRenderer extends TabBar.Renderer {
         // No need to check for duplicate labels if the tab is rendered in the side panel (title is not displayed),
         // or if there are less than two files in the tab bar.
         if (isInSidePanel || (this.tabBar && this.tabBar.titles.length < 2)) {
-            return h.div({ className: 'p-TabBar-tabLabel', style }, data.title.label);
+            return h.div({ className: 'lm-TabBar-tabLabel', style }, data.title.label);
         }
         const originalToDisplayedMap = this.findDuplicateLabels([...this.tabBar!.titles]);
         const labelDetails: string | undefined = originalToDisplayedMap.get(data.title.caption);
         if (labelDetails) {
-            return h.div({ className: 'p-TabBar-tabLabelWrapper' },
-                h.div({ className: 'p-TabBar-tabLabel', style }, data.title.label),
-                h.div({ className: 'p-TabBar-tabLabelDetails', style }, labelDetails));
+            return h.div({ className: 'lm-TabBar-tabLabelWrapper' },
+                h.div({ className: 'lm-TabBar-tabLabel', style }, data.title.label),
+                h.div({ className: 'lm-TabBar-tabLabelDetails', style }, labelDetails));
         }
-        return h.div({ className: 'p-TabBar-tabLabel', style }, data.title.label);
+        return h.div({ className: 'lm-TabBar-tabLabel', style }, data.title.label);
     }
 
     protected renderTailDecorations(renderData: SideBarRenderData, isInSidePanel?: boolean): VirtualElement[] {
@@ -314,7 +315,7 @@ export class TabBarRenderer extends TabBar.Renderer {
         return decorationsToRender.map((decoration, index) => {
             const { tooltip, data, fontData, color, icon, iconClass } = decoration;
             const iconToRender = icon ?? iconClass;
-            const className = ['p-TabBar-tail', 'flex'].join(' ');
+            const className = ['lm-TabBar-tail', 'flex'].join(' ');
             const style = fontData ? fontData : color ? { color } : undefined;
             const content = (data ? data : iconToRender
                 ? h.span({ className: this.getIconClass(iconToRender, iconToRender === 'circle' ? [WidgetDecoration.Styles.DECORATOR_SIZE_CLASS] : []) })
@@ -336,7 +337,7 @@ export class TabBarRenderer extends TabBar.Renderer {
 
     renderLock(data: SideBarRenderData, isInSidePanel?: boolean): VirtualElement {
         return !isInSidePanel && data.title.className.includes(LOCKED_CLASS)
-            ? h.div({ className: 'p-TabBar-tabLock' })
+            ? h.div({ className: 'lm-TabBar-tabLock' })
             : h.div({});
     }
 
@@ -569,7 +570,7 @@ export class TabBarRenderer extends TabBar.Renderer {
                     visualPreviewDiv.append(clonedNode);
                     const visualPreview = visualPreviewDiv.children.item(visualPreviewDiv.children.length - 1);
                     if (visualPreview instanceof HTMLElement) {
-                        visualPreview.classList.remove('p-mod-hidden');
+                        visualPreview.classList.remove('lm-mod-hidden');
                         visualPreview.classList.add('enhanced-preview');
                         visualPreview.id = `preview:${widget.id}`;
 
@@ -636,7 +637,7 @@ export class TabBarRenderer extends TabBar.Renderer {
             event.preventDefault();
             let widget: Widget | undefined = undefined;
             if (this.tabBar) {
-                const titleIndex = Array.from(this.tabBar.contentNode.getElementsByClassName('p-TabBar-tab'))
+                const titleIndex = Array.from(this.tabBar.contentNode.getElementsByClassName('lm-TabBar-tab'))
                     .findIndex(node => node.contains(event.currentTarget as HTMLElement));
                 if (titleIndex !== -1) {
                     widget = this.tabBar.titles[titleIndex].owner;
@@ -687,6 +688,10 @@ export class TabBarRenderer extends TabBar.Renderer {
 
 }
 
+export interface TabBarPrivateMethods {
+    _releaseMouse(): void;
+}
+
 /**
  * A specialized tab bar for the main and bottom areas.
  */
@@ -731,8 +736,25 @@ export class ScrollableTabBar extends TabBar<Widget> {
         this.toDispose.dispose();
     }
 
+    protected override onBeforeAttach(msg: Message): void {
+        this.contentNode.addEventListener('pointerdown', this);
+        this.contentNode.addEventListener('dblclick', this);
+        this.contentNode.addEventListener('keydown', this);
+    }
+
+    protected override onAfterDetach(msg: Message): void {
+        this.contentNode.removeEventListener('pointerdown', this);
+        this.contentNode.removeEventListener('dblclick', this);
+        this.contentNode.removeEventListener('keydown', this);
+        this.doReleaseMouse();
+    }
+
+    protected doReleaseMouse(): void {
+        (this as unknown as TabBarPrivateMethods)._releaseMouse();
+    }
+
     /**
-     * Restructures the DOM defined in PhosphorJS.
+     * Restructures the DOM defined in Lumino.
      *
      * By default the tabs (`li`) are contained in the `this.contentNode` (`ul`) which is wrapped in a `div` (`this.node`).
      * Instead of this structure, we add a container for the `this.contentNode` and for the toolbar.
@@ -741,7 +763,7 @@ export class ScrollableTabBar extends TabBar<Widget> {
     protected rewireDOM(): void {
         const contentNode = this.node.getElementsByClassName(ScrollableTabBar.Styles.TAB_BAR_CONTENT)[0];
         if (!contentNode) {
-            throw new Error("'this.node' does not have the content as a direct child with class name 'p-TabBar-content'.");
+            throw new Error(`'this.node' does not have the content as a direct child with class name '${ScrollableTabBar.Styles.TAB_BAR_CONTENT}'.`);
         }
         this.node.removeChild(contentNode);
         this.contentContainer = document.createElement('div');
@@ -806,14 +828,14 @@ export class ScrollableTabBar extends TabBar<Widget> {
                 if (this.orientation === 'horizontal') {
                     let availableWidth = this.scrollbarHost.clientWidth;
                     let effectiveWidth = availableWidth;
-                    if (!this.openTabsContainer.classList.contains('p-mod-hidden')) {
+                    if (!this.openTabsContainer.classList.contains('lm-mod-hidden')) {
                         availableWidth += this.openTabsContainer.getBoundingClientRect().width;
                     }
                     if (this.dynamicTabOptions.minimumTabSize * this.titles.length <= availableWidth) {
                         effectiveWidth += this.openTabsContainer.getBoundingClientRect().width;
-                        this.openTabsContainer.classList.add('p-mod-hidden');
+                        this.openTabsContainer.classList.add('lm-mod-hidden');
                     } else {
-                        this.openTabsContainer.classList.remove('p-mod-hidden');
+                        this.openTabsContainer.classList.remove('lm-mod-hidden');
                     }
                     this.tabSize = Math.max(Math.min(effectiveWidth / this.titles.length,
                         this.dynamicTabOptions.defaultTabSize), this.dynamicTabOptions.minimumTabSize);
@@ -821,7 +843,7 @@ export class ScrollableTabBar extends TabBar<Widget> {
             }
             this.node.classList.add('dynamic-tabs');
         } else {
-            this.openTabsContainer.classList.add('p-mod-hidden');
+            this.openTabsContainer.classList.add('lm-mod-hidden');
             this.node.classList.remove('dynamic-tabs');
         }
         for (let i = 0, n = this.titles.length; i < n; ++i) {
@@ -904,11 +926,11 @@ export class ScrollableTabBar extends TabBar<Widget> {
     }
 
     /**
-     * Overrides the `contentNode` property getter in PhosphorJS' TabBar.
+     * Overrides the `contentNode` property getter in LuminoJS' TabBar.
      */
     // @ts-expect-error TS2611 `TabBar<T>.contentNode` is declared as `readonly contentNode` but is implemented as a getter.
     get contentNode(): HTMLUListElement {
-        return this.tabBarContainer.getElementsByClassName(ToolbarAwareTabBar.Styles.TAB_BAR_CONTENT)[0] as HTMLUListElement;
+        return this.node.getElementsByClassName(ToolbarAwareTabBar.Styles.TAB_BAR_CONTENT)[0] as HTMLUListElement;
     }
 
     /**
@@ -931,8 +953,8 @@ export namespace ScrollableTabBar {
     }
     export namespace Styles {
 
-        export const TAB_BAR_CONTENT = 'p-TabBar-content';
-        export const TAB_BAR_CONTENT_CONTAINER = 'p-TabBar-content-container';
+        export const TAB_BAR_CONTENT = 'lm-TabBar-content';
+        export const TAB_BAR_CONTENT_CONTAINER = 'lm-TabBar-content-container';
 
     }
 }
@@ -1025,6 +1047,10 @@ export class ToolbarAwareTabBar extends ScrollableTabBar {
 
     override handleEvent(event: Event): void {
         if (event instanceof MouseEvent) {
+            if (isContextMenuEvent(event)) {
+                // Let this bubble up to handle the context menu
+                return;
+            }
             if (this.toolbar && this.toolbar.shouldHandleMouseEvent(event) || this.isOver(event, this.openTabsContainer)) {
                 // if the mouse event is over the toolbar part don't handle it.
                 return;
@@ -1038,7 +1064,7 @@ export class ToolbarAwareTabBar extends ScrollableTabBar {
     }
 
     /**
-     * Restructures the DOM defined in PhosphorJS.
+     * Restructures the DOM defined in Lumino.
      *
      * By default the tabs (`li`) are contained in the `this.contentNode` (`ul`) which is wrapped in a `div` (`this.node`).
      * Instead of this structure, we add a container for the `this.contentNode` and for the toolbar.
@@ -1116,18 +1142,18 @@ export class SideTabBar extends ScrollableTabBar {
 
     protected override onAfterAttach(msg: Message): void {
         this.updateTabs();
-        this.node.addEventListener('p-dragenter', this);
-        this.node.addEventListener('p-dragover', this);
-        this.node.addEventListener('p-dragleave', this);
-        document.addEventListener('p-drop', this);
+        this.node.addEventListener('lm-dragenter', this);
+        this.node.addEventListener('lm-dragover', this);
+        this.node.addEventListener('lm-dragleave', this);
+        document.addEventListener('lm-drop', this);
     }
 
     protected override onAfterDetach(msg: Message): void {
         super.onAfterDetach(msg);
-        this.node.removeEventListener('p-dragenter', this);
-        this.node.removeEventListener('p-dragover', this);
-        this.node.removeEventListener('p-dragleave', this);
-        document.removeEventListener('p-drop', this);
+        this.node.removeEventListener('lm-dragenter', this);
+        this.node.removeEventListener('lm-dragover', this);
+        this.node.removeEventListener('lm-dragleave', this);
+        document.removeEventListener('lm-drop', this);
     }
 
     protected override onUpdateRequest(msg: Message): void {
@@ -1190,13 +1216,13 @@ export class SideTabBar extends ScrollableTabBar {
                         paddingBottom: parseFloat(tabStyle.paddingBottom!)
                     };
                     // Extract label size from the DOM
-                    const labelElements = hiddenTab.getElementsByClassName('p-TabBar-tabLabel');
+                    const labelElements = hiddenTab.getElementsByClassName('lm-TabBar-tabLabel');
                     if (labelElements.length === 1) {
                         const label = labelElements[0];
                         rd.labelSize = { width: label.clientWidth, height: label.clientHeight };
                     }
                     // Extract icon size from the DOM
-                    const iconElements = hiddenTab.getElementsByClassName('p-TabBar-tabIcon');
+                    const iconElements = hiddenTab.getElementsByClassName('lm-TabBar-tabIcon');
                     if (iconElements.length === 1) {
                         const icon = iconElements[0];
                         rd.iconSize = { width: icon.clientWidth, height: icon.clientHeight };
@@ -1243,7 +1269,7 @@ export class SideTabBar extends ScrollableTabBar {
      */
     protected hideOverflowingTabs(): number {
         const availableHeight = this.node.clientHeight;
-        const invisibleClass = 'p-mod-invisible';
+        const invisibleClass = 'lm-mod-invisible';
         let startIndex = -1;
         const n = this.contentNode.children.length;
         for (let i = 0; i < n; i++) {
@@ -1306,27 +1332,36 @@ export class SideTabBar extends ScrollableTabBar {
      */
     override handleEvent(event: Event): void {
         switch (event.type) {
-            case 'mousedown':
-                this.onMouseDown(event as MouseEvent);
-                super.handleEvent(event);
+            case 'pointerdown':
+                if (!isContextMenuEvent(event as PointerEvent)) {
+                    this.onMouseDown(event as PointerEvent);
+                    super.handleEvent(event);
+                }
                 break;
-            case 'mouseup':
-                super.handleEvent(event);
-                this.onMouseUp(event as MouseEvent);
+            case 'pointerup':
+                if (!isContextMenuEvent(event as PointerEvent)) {
+                    super.handleEvent(event);
+                    this.onMouseUp(event as PointerEvent);
+                }
                 break;
             case 'mousemove':
-                this.onMouseMove(event as MouseEvent);
-                super.handleEvent(event);
+                if (!isContextMenuEvent(event as PointerEvent)) {
+                    this.onMouseMove(event as PointerEvent);
+                    super.handleEvent(event);
+                }
                 break;
-            case 'p-dragenter':
-                this.onDragEnter(event as IDragEvent);
+            case 'lm-dragenter':
+                this.onDragEnter(event as Drag.Event);
                 break;
-            case 'p-dragover':
-                this.onDragOver(event as IDragEvent);
+            case 'lm-dragover':
+                this.onDragOver(event as Drag.Event);
                 break;
-            case 'p-dragleave': case 'p-drop':
+            case 'lm-dragleave': case 'lm-drop':
                 this.cancelViewContainerDND();
                 break;
+            case 'contextmenu':
+                // Let the event bubble up instead of quashing it in the superclass
+                break;
             default:
                 super.handleEvent(event);
         }
@@ -1400,9 +1435,9 @@ export class SideTabBar extends ScrollableTabBar {
     /**
      * Handles `viewContainerPart` drag enter.
      */
-    protected onDragEnter = (event: IDragEvent) => {
+    protected onDragEnter = (event: Drag.Event) => {
         this.cancelViewContainerDND();
-        if (event.mimeData.getData('application/vnd.phosphor.view-container-factory')) {
+        if (event.mimeData.getData('application/vnd.lumino.view-container-factory')) {
             event.preventDefault();
             event.stopPropagation();
         }
@@ -1412,8 +1447,8 @@ export class SideTabBar extends ScrollableTabBar {
      * Handle `viewContainerPart` drag over,
      * Defines the appropriate `dropAction` and opens the tab on which the mouse stands on for more than 800 ms.
      */
-    protected onDragOver = (event: IDragEvent) => {
-        const factory = event.mimeData.getData('application/vnd.phosphor.view-container-factory');
+    protected onDragOver = (event: Drag.Event) => {
+        const factory = event.mimeData.getData('application/vnd.lumino.view-container-factory');
         const widget = factory && factory();
         if (!widget) {
             event.dropAction = 'none';

package/src/browser/shell/theia-dock-panel.ts

@@ -14,9 +14,9 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { find, toArray } from '@phosphor/algorithm';
-import { TabBar, Widget, DockPanel, Title, DockLayout } from '@phosphor/widgets';
-import { Signal } from '@phosphor/signaling';
+import { find, toArray } from '@lumino/algorithm';
+import { TabBar, Widget, DockPanel, Title, DockLayout } from '@lumino/widgets';
+import { Signal } from '@lumino/signaling';
 import { Disposable, DisposableCollection } from '../../common/disposable';
 import { UnsafeWidgetUtilities } from '../widgets';
 import { CorePreferences } from '../core-preferences';

package/src/browser/shell/view-column-service.ts

@@ -17,8 +17,8 @@
 import { injectable, inject } from 'inversify';
 import { Emitter, Event } from '../../common/event';
 import { ApplicationShell } from './application-shell';
-import { toArray } from '@phosphor/algorithm';
-import { TabBar, Widget } from '@phosphor/widgets';
+import { toArray } from '@lumino/algorithm';
+import { TabBar, Widget } from '@lumino/widgets';
 
 @injectable()
 export class ViewColumnService {

package/src/browser/shell/view-contribution.ts

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import { injectable, inject, interfaces, optional, unmanaged } from 'inversify';
-import { Widget } from '@phosphor/widgets';
+import { Widget } from '@lumino/widgets';
 import {
     MenuModelRegistry, Command, CommandContribution,
     MenuContribution, CommandRegistry, nls

package/src/browser/source-tree/source-tree.ts

@@ -49,9 +49,10 @@ export class SourceTree extends TreeImpl {
         const existing = this.getNode(id);
         const updated = existing && <TreeElementNode>Object.assign(existing, { element, parent });
         if (CompositeTreeElement.hasElements(element)) {
+            const expand = element.expandByDefault ? element.expandByDefault() : false;
             if (updated) {
                 if (!ExpandableTreeNode.is(updated)) {
-                    Object.assign(updated, { expanded: false });
+                    Object.assign(updated, { expanded: expand });
                 }
                 if (!CompositeTreeNode.is(updated)) {
                     Object.assign(updated, { children: [] });
@@ -64,7 +65,7 @@ export class SourceTree extends TreeImpl {
                 id,
                 name,
                 selected: false,
-                expanded: false,
+                expanded: expand,
                 children: []
             } as TreeElementNode;
         }

package/src/browser/source-tree/tree-source.ts

@@ -34,6 +34,7 @@ export interface CompositeTreeElement extends TreeElement {
     /** default: true */
     readonly hasElements?: boolean
     getElements(): MaybePromise<IterableIterator<TreeElement>>
+    expandByDefault?(): boolean
 }
 export namespace CompositeTreeElement {
     export function is(element: unknown): element is CompositeTreeElement {

package/src/browser/style/dialog.css

@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
  ********************************************************************************/
 
-.p-Widget.dialogOverlay {
+.lm-Widget.dialogOverlay {
   z-index: 5000;
   display: flex;
   flex-direction: column;
@@ -29,7 +29,7 @@
   font-size: var(--theia-ui-font-size1);
   padding: 2px;
 }
-.p-Widget.dialogOverlay .dialogBlock {
+.lm-Widget.dialogOverlay .dialogBlock {
   display: flex;
   flex-direction: column;
   min-width: 400px;
@@ -40,7 +40,7 @@
   overflow: hidden;
   box-shadow: 0 0px 8px var(--theia-widget-shadow);
 }
-.p-Widget.dialogOverlay .dialogTitle {
+.lm-Widget.dialogOverlay .dialogTitle {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -54,11 +54,11 @@
   min-height: 24px;
 }
 
-.p-Widget.dialogOverlay .dialogTitle i.closeButton {
+.lm-Widget.dialogOverlay .dialogTitle i.closeButton {
   cursor: pointer;
 }
 
-.p-Widget.dialogOverlay .dialogContent {
+.lm-Widget.dialogOverlay .dialogContent {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -69,7 +69,7 @@
   overflow-y: auto;
 }
 
-.p-Widget.dialogOverlay .dialogControl {
+.lm-Widget.dialogOverlay .dialogControl {
   padding: calc(var(--theia-ui-padding) * 2);
   display: flex;
   flex-direction: row;
@@ -79,24 +79,24 @@
   min-height: 21px;
 }
 
-.p-Widget.dialogOverlay.hidden {
+.lm-Widget.dialogOverlay.hidden {
   display: none;
 }
-.p-Widget.dialogOverlay.dialogErrorMessage {
+.lm-Widget.dialogOverlay.dialogErrorMessage {
   display: none;
 }
-.p-Widget.dialogOverlay .error {
+.lm-Widget.dialogOverlay .error {
   color: var(--theia-inputValidation-errorForeground);
 }
-.p-Widget.dialogOverlay .error.main {
+.lm-Widget.dialogOverlay .error.main {
   color: var(--theia-inputValidation-errorForeground);
   border-color: var(--theia-inputValidation-errorBorder);
 }
-.p-Widget.dialogOverlay .error > .theia-button.main {
+.lm-Widget.dialogOverlay .error > .theia-button.main {
   background-color: var(--theia-inputValidation-errorBackground);
   color: var(--theia-inputValidation-errorForeground);
 }
-.p-Widget.dialogOverlay .error > .dialogErrorMessage {
+.lm-Widget.dialogOverlay .error > .dialogErrorMessage {
   margin-top: calc(var(--theia-ui-padding) * 3);
   font-size: var(--theia-ui-font-size1);
   display: block;

package/src/browser/style/dockpanel.css

@@ -15,57 +15,57 @@
  ********************************************************************************/
 
 /*
- * phosphor.js sets the z-index of its panels to 0, which causes overlay issues
+ * Lumino sets the z-index of its panels to 0, which causes overlay issues
  * See also https://github.com/eclipse-theia/theia/issues/14290
  */
-.p-SplitPanel-child,
-.p-DockPanel,
-.p-DockPanel-widget {
+.lm-SplitPanel-child,
+.lm-DockPanel,
+.lm-DockPanel-widget {
   z-index: initial;
 }
 
-.p-DockPanel.p-SplitPanel-child {
+.lm-DockPanel.lm-SplitPanel-child {
   padding: 0px;
 }
 
-.p-DockPanel-widget {
+.lm-DockPanel-widget {
   min-width: 100px;
   min-height: 100px;
 }
 
-.p-DockPanel-handle[data-orientation="vertical"] {
+.lm-DockPanel-handle[data-orientation="vertical"] {
   min-height: var(--theia-border-width);
   z-index: 3;
 }
 
-.p-DockPanel-handle[data-orientation="horizontal"] {
+.lm-DockPanel-handle[data-orientation="horizontal"] {
   min-width: var(--theia-border-width);
 }
 
-.p-DockPanel-handle[data-orientation="horizontal"]::after {
+.lm-DockPanel-handle[data-orientation="horizontal"]::after {
   min-width: var(--theia-sash-width);
   transform: translateX(0%);
   left: calc(-1 * var(--theia-sash-width) / 2);
 }
 
-.p-DockPanel-handle[data-orientation="vertical"]::after {
+.lm-DockPanel-handle[data-orientation="vertical"]::after {
   min-height: var(--theia-sash-width);
   width: 100%;
   transform: translateY(0%);
   top: calc(-1 * var(--theia-sash-width) / 2);
 }
 
-.p-DockPanel-handle:hover::after {
+.lm-DockPanel-handle:hover::after {
   background-color: var(--theia-sash-hoverBorder);
   transition-delay: var(--theia-sash-hoverDelay);
 }
 
-.p-DockPanel-handle:active::after {
+.lm-DockPanel-handle:active::after {
   background-color: var(--theia-sash-activeBorder);
   transition-delay: 0s !important;
 }
 
-.p-DockPanel-overlay {
+.lm-DockPanel-overlay {
   background: var(--theia-editorGroup-dropBackground);
   border: var(--theia-border-width) dashed var(--theia-contrastActiveBorder);
   transition-property: top, left, right, bottom;
@@ -73,14 +73,14 @@
   transition-timing-function: ease;
 }
 
-.p-DockPanel-overlay.p-mod-root-top,
-.p-DockPanel-overlay.p-mod-root-left,
-.p-DockPanel-overlay.p-mod-root-right,
-.p-DockPanel-overlay.p-mod-root-bottom,
-.p-DockPanel-overlay.p-mod-root-center {
+.lm-DockPanel-overlay.lm-mod-root-top,
+.lm-DockPanel-overlay.lm-mod-root-left,
+.lm-DockPanel-overlay.lm-mod-root-right,
+.lm-DockPanel-overlay.lm-mod-root-bottom,
+.lm-DockPanel-overlay.lm-mod-root-center {
   border-width: 2px;
 }
 
-.p-DockPanel-overlay.p-mod-root-bottom {
+.lm-DockPanel-overlay.lm-mod-root-bottom {
   background: var(--theia-panel-dropBackground);
 }

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

@@ -29,6 +29,7 @@
   border: 1px solid var(--theia-editorHoverWidget-border);
   padding: var(--theia-ui-padding);
   max-width: var(--theia-hover-max-width);
+  z-index: 1000;
 }
 
 .theia-hover .hover-row:not(:first-child):not(:empty) {

package/src/browser/style/index.css

@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
  ********************************************************************************/
 
-@import url("~@phosphor/widgets/style/index.css");
+@import url("~@lumino/widgets/style/index.css");
 @import url("~font-awesome/css/font-awesome.min.css");
 
 /*-----------------------------------------------------------------------------
@@ -219,11 +219,11 @@ blockquote {
     font-weight: 700;
 }
 
-.p-Widget {
+.lm-Widget {
     font-size: var(--theia-ui-font-size1);
 }
 
-.p-Widget.p-mod-hidden {
+.lm-Widget.lm-mod-hidden {
     display: none !important;
 }