@theia/core 1.59.0 → 1.60.0-next.47

package/src/browser/menu/browser-menu-plugin.ts

@@ -15,9 +15,8 @@
 // *****************************************************************************
 
 import { injectable, inject } from 'inversify';
-import { Menu, MenuBar, Menu as MenuWidget, Widget } from '@phosphor/widgets';
-import { CommandRegistry as PhosphorCommandRegistry } from '@phosphor/commands';
-import { ElementExt } from '@phosphor/domutils';
+import { Menu, MenuBar, Menu as MenuWidget, Widget } from '@lumino/widgets';
+import { CommandRegistry as LuminoCommandRegistry } from '@lumino/commands';
 import {
     CommandRegistry, environment, DisposableCollection, Disposable,
     MenuModelRegistry, MAIN_MENU_BAR, MenuPath, MenuNode, MenuCommandExecutor, CompoundMenuNode, CompoundMenuNodeRole, CommandMenuNode,
@@ -32,6 +31,7 @@ import { Message, waitForRevealed } from '../widgets';
 import { ApplicationShell } from '../shell';
 import { CorePreferences } from '../core-preferences';
 import { PreferenceService } from '../preferences/preference-service';
+import { ElementExt } from '@lumino/domutils';
 
 export abstract class MenuBarWidget extends MenuBar {
     abstract activateMenu(label: string, ...labels: string[]): Promise<MenuWidget>;
@@ -161,7 +161,7 @@ export class BrowserMainMenuFactory implements MenuWidgetFactory {
 }
 
 export function isMenuElement(element: HTMLElement | null): boolean {
-    return !!element && element.className.includes('p-Menu');
+    return !!element && element.className.includes('lm-Menu');
 }
 
 export class DynamicMenuBarWidget extends MenuBarWidget {
@@ -181,7 +181,8 @@ export class DynamicMenuBarWidget extends MenuBarWidget {
                 // We want to save the focus object for the former case only.
                 if (!this.childMenu) {
                     const { activeElement } = document;
-                    if (activeElement instanceof HTMLElement) {
+                    // we do not want to restore focus to menus
+                    if (activeElement instanceof HTMLElement && !isMenuElement(activeElement)) {
                         this.previousFocusedElement = activeElement;
                     }
                 }
@@ -322,14 +323,14 @@ export class DynamicMenuWidget extends MenuWidget {
         });
     }
 
-    public override open(x: number, y: number, options?: MenuWidget.IOpenOptions, anchor?: HTMLElement): void {
+    public override open(x: number, y: number, options?: MenuWidget.IOpenOptions): void {
         const cb = () => {
             this.restoreFocusedElement();
             this.aboutToClose.disconnect(cb);
         };
         this.aboutToClose.connect(cb);
         this.preserveFocusedElement();
-        super.open(x, y, options, anchor);
+        super.open(x, y, options);
     }
 
     protected updateSubMenus(parent: MenuWidget, menu: CompoundMenuNode, commands: MenuCommandRegistry): void {
@@ -337,6 +338,13 @@ export class DynamicMenuWidget extends MenuWidget {
         while (items[items.length - 1]?.type === 'separator') {
             items.pop();
         }
+        // Add at least one entry to avoid empty menus.
+        // This is needed as Lumino does all kind of checks whether a menu is empty and for example prevents activating it
+        // This item will be cleared once the menu is opened via the next update as we don't have empty main menus
+        // See https://github.com/jupyterlab/lumino/issues/729
+        if (items.length === 0) {
+            items.push({ type: 'separator' });
+        }
         for (const item of items) {
             parent.addItem(item);
         }
@@ -382,7 +390,7 @@ export class DynamicMenuWidget extends MenuWidget {
     }
 
     protected preserveFocusedElement(previousFocusedElement: Element | null = document.activeElement): boolean {
-        if (!this.previousFocusedElement && previousFocusedElement instanceof HTMLElement) {
+        if (!this.previousFocusedElement && previousFocusedElement instanceof HTMLElement && !isMenuElement(previousFocusedElement)) {
             this.previousFocusedElement = previousFocusedElement;
             return true;
         }
@@ -401,14 +409,16 @@ export class DynamicMenuWidget extends MenuWidget {
     protected runWithPreservedFocusContext(what: () => void): void {
         let focusToRestore: HTMLElement | undefined = undefined;
         const { activeElement } = document;
-        if (this.previousFocusedElement && activeElement instanceof HTMLElement && this.previousFocusedElement !== activeElement) {
+        if (this.previousFocusedElement &&
+            activeElement instanceof HTMLElement &&
+            this.previousFocusedElement !== activeElement) {
             focusToRestore = activeElement;
             this.previousFocusedElement.focus({ preventScroll: true });
         }
         try {
             what();
         } finally {
-            if (focusToRestore) {
+            if (focusToRestore && !isMenuElement(focusToRestore)) {
                 focusToRestore.focus({ preventScroll: true });
             }
         }
@@ -465,9 +475,9 @@ export class BrowserMenuBarContribution implements FrontendApplicationContributi
 }
 
 /**
- * Stores Theia-specific action menu nodes instead of PhosphorJS commands with their handlers.
+ * Stores Theia-specific action menu nodes instead of Lumino commands with their handlers.
  */
-export class MenuCommandRegistry extends PhosphorCommandRegistry {
+export class MenuCommandRegistry extends LuminoCommandRegistry {
 
     protected actions = new Map<string, [MenuNode & CommandMenuNode, unknown[]]>();
     protected toDispose = new DisposableCollection();
@@ -516,7 +526,7 @@ export class MenuCommandRegistry extends PhosphorCommandRegistry {
         const unregisterCommand = this.addCommand(id, {
             execute: () => commandExecutor.executeCommand(menuPath, id, ...args),
             label: menu.label,
-            icon: menu.icon,
+            iconClass: menu.icon,
             isEnabled: () => enabled,
             isVisible: () => visible,
             isToggled: () => toggled
@@ -532,7 +542,7 @@ export class MenuCommandRegistry extends PhosphorCommandRegistry {
             this.addKeyBinding({
                 command: id,
                 keys,
-                selector: '.p-Widget' // We have the PhosphorJS dependency anyway.
+                selector: '.lm-Widget' // We have the Lumino dependency anyway.
             });
         }
         return Disposable.create(() => unregisterCommand.dispose());

package/src/browser/preferences/injectable-preference-proxy.ts

@@ -19,7 +19,7 @@ import { PreferenceSchema } from '../../common/preferences/preference-schema';
 import { Disposable, DisposableCollection, Emitter, Event, isObject, MaybePromise } from '../../common';
 import { PreferenceChangeEvent, PreferenceEventEmitter, PreferenceProxy, PreferenceProxyOptions, PreferenceRetrieval } from './preference-proxy';
 import { PreferenceChange, PreferenceChangeImpl, PreferenceChanges, PreferenceScope, PreferenceService } from './preference-service';
-import { JSONValue } from '@phosphor/coreutils';
+import { JSONValue } from '@lumino/coreutils';
 import { PreferenceProviderDataChange } from './preference-provider';
 import { OverridePreferenceName } from './preference-language-override-service';
 

package/src/browser/preferences/preference-contribution.ts

@@ -28,7 +28,7 @@ import { bindPreferenceConfigurations, PreferenceConfigurations } from './prefer
 export { PreferenceSchema, PreferenceSchemaProperties, PreferenceDataSchema, PreferenceItem, PreferenceSchemaProperty, PreferenceDataProperty };
 import { isObject, Mutable } from '../../common/types';
 import { PreferenceLanguageOverrideService } from './preference-language-override-service';
-import { JSONValue } from '@phosphor/coreutils';
+import { JSONValue } from '@lumino/coreutils';
 
 /* eslint-disable guard-for-in, @typescript-eslint/no-explicit-any */
 

package/src/browser/preferences/preference-provider.ts

@@ -18,7 +18,7 @@
 
 import debounce = require('p-debounce');
 import { injectable, inject } from 'inversify';
-import { JSONExt, JSONValue } from '@phosphor/coreutils';
+import { JSONExt, JSONValue } from '@lumino/coreutils';
 import URI from '../../common/uri';
 import { Disposable, DisposableCollection, Emitter, Event, isObject } from '../../common';
 import { Deferred } from '../../common/promise-util';

package/src/browser/preferences/preference-service.ts

@@ -24,7 +24,7 @@ import { PreferenceSchemaProvider } from './preference-contribution';
 import URI from '../../common/uri';
 import { PreferenceScope } from './preference-scope';
 import { PreferenceConfigurations } from './preference-configurations';
-import { JSONExt, JSONValue } from '@phosphor/coreutils/lib/json';
+import { JSONExt, JSONValue } from '@lumino/coreutils';
 import { OverridePreferenceName, PreferenceLanguageOverrideService } from './preference-language-override-service';
 
 export { PreferenceScope };

package/src/browser/preferences/preference-validation-service.spec.ts

@@ -19,7 +19,7 @@ import { PreferenceValidationService } from './preference-validation-service';
 import { PreferenceItem, PreferenceSchemaProvider } from './preference-contribution';
 import { PreferenceLanguageOverrideService } from './preference-language-override-service';
 import * as assert from 'assert';
-import { JSONValue } from '@phosphor/coreutils';
+import { JSONValue } from '@lumino/coreutils';
 import { IJSONSchema, JsonType } from '../../common/json-schema';
 
 /* eslint-disable no-null/no-null */

package/src/browser/preferences/preference-validation-service.ts

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import { PreferenceItem } from '../../common/preferences/preference-schema';
-import { JSONObject, JSONValue } from '../../../shared/@phosphor/coreutils';
+import { JSONObject, JSONValue } from '../../../shared/@lumino/coreutils';
 import { PreferenceSchemaProvider } from './preference-contribution';
 import { PreferenceLanguageOverrideService } from './preference-language-override-service';
 import { inject, injectable } from '../../../shared/inversify';

package/src/browser/saveable.ts

@@ -14,14 +14,14 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { Widget } from '@phosphor/widgets';
-import { Message } from '@phosphor/messaging';
+import { Widget } from '@lumino/widgets';
+import { Message } from '@lumino/messaging';
 import { Emitter, Event } from '../common/event';
 import { MaybePromise } from '../common/types';
 import { Key } from './keyboard/keys';
 import { AbstractDialog } from './dialogs';
 import { nls } from '../common/nls';
-import { Disposable, DisposableCollection, isObject } from '../common';
+import { Disposable, DisposableCollection, isObject, URI } from '../common';
 import { BinaryBuffer } from '../common/buffer';
 
 export type AutoSaveMode = 'off' | 'afterDelay' | 'onFocusChange' | 'onWindowChange';
@@ -44,6 +44,10 @@ export interface Saveable {
      * Saves dirty changes.
      */
     save(options?: SaveOptions): MaybePromise<void>;
+    /**
+     * Performs the save operation with a new file name.
+     */
+    saveAs?(options: SaveAsOptions): MaybePromise<void>;
     /**
      * Reverts dirty changes.
      */
@@ -87,6 +91,7 @@ export class DelegatingSaveable implements Saveable {
     createSnapshot?(): Saveable.Snapshot;
     applySnapshot?(snapshot: object): void;
     serialize?(): Promise<BinaryBuffer>;
+    saveAs?(options: SaveAsOptions): MaybePromise<void>;
 
     protected _delegate?: Saveable;
     protected toDispose = new DisposableCollection();
@@ -110,6 +115,7 @@ export class DelegatingSaveable implements Saveable {
         this.createSnapshot = delegate.createSnapshot?.bind(delegate);
         this.applySnapshot = delegate.applySnapshot?.bind(delegate);
         this.serialize = delegate.serialize?.bind(delegate);
+        this.saveAs = delegate.saveAs?.bind(delegate);
     }
 
 }
@@ -341,6 +347,10 @@ export interface SaveOptions {
     readonly saveReason?: SaveReason;
 }
 
+export interface SaveAsOptions extends SaveOptions {
+    readonly target: URI;
+}
+
 /**
  * The class name added to the dirty widget's title.
  */

package/src/browser/shell/application-shell-mouse-tracker.ts

@@ -19,7 +19,7 @@ import { ApplicationShell } from './application-shell';
 import { injectable, inject } from 'inversify';
 import { DisposableCollection, Disposable } from '../../common/disposable';
 import { Emitter, Event } from '../../common/event';
-import { FocusTracker, PanelLayout, SplitPanel } from '@phosphor/widgets';
+import { FocusTracker, PanelLayout, SplitPanel } from '@lumino/widgets';
 import { addEventListener, Widget } from '../widgets';
 /**
  * Contribution that tracks `mouseup` and `mousedown` events.
@@ -44,7 +44,7 @@ export class ApplicationShellMouseTracker implements FrontendApplicationContribu
     protected readonly mousedownListener: (e: MouseEvent) => void = e => this.mousedownEmitter.fire(e);
 
     onStart(): void {
-        // Here we need to attach a `mousedown` listener to the `TabBar`s, `DockPanel`s and the `SidePanel`s. Otherwise, Phosphor handles the event and stops the propagation.
+        // Here we need to attach a `mousedown` listener to the `TabBar`s, `DockPanel`s and the `SidePanel`s. Otherwise, Lumino handles the event and stops the propagation.
         // Track the `mousedown` on the `TabBar` for the currently active widget.
         this.applicationShell.onDidChangeActiveWidget((args: FocusTracker.IChangedArgs<Widget>) => {
             this.toDisposeOnActiveChange.dispose();
@@ -68,7 +68,7 @@ export class ApplicationShellMouseTracker implements FrontendApplicationContribu
         this.toDispose.pushAll([mainPanel, bottomPanel, leftPanelHandler.dockPanel, rightPanelHandler.dockPanel]
             .map(panel => addEventListener(panel.node, 'mousedown', this.mousedownListener, true)));
 
-        // The `mouseup` event has to be tracked on the `document`. Phosphor attaches to there.
+        // The `mouseup` event has to be tracked on the `document`. Lumino attaches to there.
         document.addEventListener('mouseup', this.mouseupListener, true);
 
         // Make sure it is disposed in the end.

package/src/browser/shell/application-shell.ts

@@ -15,13 +15,13 @@
 // *****************************************************************************
 
 import { injectable, inject, optional, postConstruct } from 'inversify';
-import { ArrayExt, find, toArray, each } from '@phosphor/algorithm';
+import { ArrayExt, find, toArray, each } from '@lumino/algorithm';
 import {
     BoxLayout, BoxPanel, DockLayout, DockPanel, FocusTracker, Layout, Panel, SplitLayout,
     SplitPanel, TabBar, Widget, Title
-} from '@phosphor/widgets';
-import { Message } from '@phosphor/messaging';
-import { IDragEvent } from '@phosphor/dragdrop';
+} from '@lumino/widgets';
+import { Message } from '@lumino/messaging';
+import { Drag } from '@lumino/dragdrop';
 import { RecursivePartial, Event as CommonEvent, DisposableCollection, Disposable, environment, isObject, UntitledResourceResolver, UNTITLED_SCHEME } from '../../common';
 import { animationFrame } from '../browser';
 import { Saveable, SaveableWidget, SaveOptions } from '../saveable';
@@ -169,7 +169,7 @@ interface WidgetDragState {
     leftExpanded: boolean;
     rightExpanded: boolean;
     bottomExpanded: boolean;
-    lastDragOver?: IDragEvent;
+    lastDragOver?: Drag.Event;
     leaveTimeout?: number;
 }
 
@@ -264,6 +264,9 @@ export class ApplicationShell extends Widget {
         return this._mainPanelRenderer;
     }
 
+    protected initializedDeferred = new Deferred<void>();
+    initialized = this.initializedDeferred.promise;
+
     /**
      * Construct a new application shell.
      */
@@ -322,6 +325,7 @@ export class ApplicationShell extends Widget {
                 });
             }
         });
+        this.initializedDeferred.resolve();
     }
 
     protected initializeShell(): void {
@@ -386,39 +390,39 @@ export class ApplicationShell extends Widget {
     }
 
     protected override onBeforeAttach(msg: Message): void {
-        document.addEventListener('p-dragenter', this, true);
-        document.addEventListener('p-dragover', this, true);
-        document.addEventListener('p-dragleave', this, true);
-        document.addEventListener('p-drop', this, true);
+        document.addEventListener('lm-dragenter', this, true);
+        document.addEventListener('lm-dragover', this, true);
+        document.addEventListener('lm-dragleave', this, true);
+        document.addEventListener('lm-drop', this, true);
     }
 
     protected override onAfterDetach(msg: Message): void {
-        document.removeEventListener('p-dragenter', this, true);
-        document.removeEventListener('p-dragover', this, true);
-        document.removeEventListener('p-dragleave', this, true);
-        document.removeEventListener('p-drop', this, true);
+        document.removeEventListener('lm-dragenter', this, true);
+        document.removeEventListener('lm-dragover', this, true);
+        document.removeEventListener('lm-dragleave', this, true);
+        document.removeEventListener('lm-drop', this, true);
     }
 
     handleEvent(event: Event): void {
         switch (event.type) {
-            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-drop':
-                this.onDrop(event as IDragEvent);
+            case 'lm-drop':
+                this.onDrop(event as Drag.Event);
                 break;
-            case 'p-dragleave':
-                this.onDragLeave(event as IDragEvent);
+            case 'lm-dragleave':
+                this.onDragLeave(event as Drag.Event);
                 break;
         }
     }
 
-    protected onDragEnter({ mimeData }: IDragEvent): void {
+    protected onDragEnter({ mimeData }: Drag.Event): void {
         if (!this.dragState) {
-            if (mimeData && mimeData.hasData('application/vnd.phosphor.widget-factory')) {
+            if (mimeData && mimeData.hasData('application/vnd.lumino.widget-factory')) {
                 // The drag contains a widget, so we'll track it and expand side panels as needed
                 this.dragState = {
                     startTime: performance.now(),
@@ -430,7 +434,7 @@ export class ApplicationShell extends Widget {
         }
     }
 
-    protected onDragOver(event: IDragEvent): void {
+    protected onDragOver(event: Drag.Event): void {
         const state = this.dragState;
         if (state) {
             state.lastDragOver = event;
@@ -499,7 +503,7 @@ export class ApplicationShell extends Widget {
         }
     }
 
-    protected onDrop(event: IDragEvent): void {
+    protected onDrop(event: Drag.Event): void {
         const state = this.dragState;
         if (state) {
             if (state.leaveTimeout) {
@@ -521,7 +525,7 @@ export class ApplicationShell extends Widget {
         }
     }
 
-    protected onDragLeave(event: IDragEvent): void {
+    protected onDragLeave(event: Drag.Event): void {
         const state = this.dragState;
         if (state) {
             state.lastDragOver = undefined;
@@ -606,7 +610,7 @@ export class ApplicationShell extends Widget {
 
         dockPanel.node.addEventListener('dblclick', event => {
             const el = event.target as Element;
-            if (el.id === MAIN_AREA_ID || el.classList.contains('p-TabBar-content')) {
+            if (el.id === MAIN_AREA_ID || el.classList.contains('lm-TabBar-content')) {
                 this.onDidDoubleClickMainAreaEmitter.fire();
             }
         });
@@ -663,7 +667,7 @@ export class ApplicationShell extends Widget {
             }
             this.refreshBottomPanelToggleButton();
         }, this);
-        dockPanel.node.addEventListener('p-dragenter', event => {
+        dockPanel.node.addEventListener('lm-dragenter', event => {
             // Make sure that the main panel hides its overlay when the bottom panel is expanded
             this.mainPanel.overlay.hide(0);
         });
@@ -796,7 +800,7 @@ export class ApplicationShell extends Widget {
             const index = parent.widgets.indexOf(this.bottomPanel) - 1;
             if (index >= 0) {
                 const handle = parent.handles[index];
-                if (!handle.classList.contains('p-mod-hidden')) {
+                if (!handle.classList.contains('lm-mod-hidden')) {
                     const parentHeight = parent.node.clientHeight;
                     return parentHeight - handle.offsetTop;
                 }
@@ -1037,7 +1041,7 @@ export class ApplicationShell extends Widget {
      */
     findWidgetForElement(element: HTMLElement): Widget | undefined {
         let widgetNode: HTMLElement | null = element;
-        while (widgetNode && !widgetNode.classList.contains('p-Widget')) {
+        while (widgetNode && !widgetNode.classList.contains('lm-Widget')) {
             widgetNode = widgetNode.parentElement;
         }
         if (widgetNode) {
@@ -1067,7 +1071,7 @@ export class ApplicationShell extends Widget {
         if (event?.target instanceof HTMLElement) {
             const tabNode = event.target;
 
-            const titleIndex = Array.from(tabBar.contentNode.getElementsByClassName('p-TabBar-tab'))
+            const titleIndex = Array.from(tabBar.contentNode.getElementsByClassName('lm-TabBar-tab'))
                 .findIndex(node => node.contains(tabNode));
 
             if (titleIndex !== -1) {
@@ -1198,7 +1202,7 @@ export class ApplicationShell extends Widget {
                 panel.markAsCurrent(widget!.title);
             }
             // Add checks to ensure that the 'sash' for left panel is displayed correctly
-            if (newValue.node.className === 'p-Widget theia-view-container p-DockPanel-widget') {
+            if (newValue.node.className === 'lm-Widget theia-view-container lm-DockPanel-widget') {
                 // Set the z-index so elements with `position: fixed` contained in the active widget are displayed correctly
                 this.setZIndex(newValue.node, '1');
             }

package/src/browser/shell/shell-layout-restorer.ts

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import { injectable, inject, named } from 'inversify';
-import { Widget } from '@phosphor/widgets';
+import { Widget } from '@lumino/widgets';
 import { FrontendApplication } from '../frontend-application';
 import { WidgetManager, WidgetConstructionOptions } from '../widget-manager';
 import { StorageService } from '../storage-service';

package/src/browser/shell/side-panel-handler.ts

@@ -15,11 +15,11 @@
 // *****************************************************************************
 
 import { injectable, inject } from 'inversify';
-import { find, map, toArray, some } from '@phosphor/algorithm';
-import { TabBar, Widget, DockPanel, Title, Panel, BoxPanel, BoxLayout, SplitPanel, PanelLayout } from '@phosphor/widgets';
-import { MimeData } from '@phosphor/coreutils';
-import { Drag } from '@phosphor/dragdrop';
-import { AttachedProperty } from '@phosphor/properties';
+import { find, map, toArray, some } from '@lumino/algorithm';
+import { TabBar, Widget, DockPanel, Title, Panel, BoxPanel, BoxLayout, SplitPanel, PanelLayout } from '@lumino/widgets';
+import { MimeData } from '@lumino/coreutils';
+import { Drag } from '@lumino/dragdrop';
+import { AttachedProperty } from '@lumino/properties';
 import { TabBarRendererFactory, TabBarRenderer, SHELL_TABBAR_CONTEXT_MENU, SideTabBar } from './tab-bars';
 import { SidebarMenuWidget, SidebarMenu, SidebarBottomMenuWidgetFactory, SidebarTopMenuWidgetFactory } from './sidebar-menu-widget';
 import { SplitPositionHandler, SplitPositionOptions } from './split-panels';
@@ -557,12 +557,12 @@ export class SidePanelHandler {
             const index = parent.widgets.indexOf(this.container);
             if (this.side === 'left') {
                 const handle = parent.handles[index];
-                if (!handle.classList.contains('p-mod-hidden')) {
+                if (!handle.classList.contains('lm-mod-hidden')) {
                     return handle.offsetLeft;
                 }
             } else if (this.side === 'right') {
                 const handle = parent.handles[index - 1];
-                if (!handle.classList.contains('p-mod-hidden')) {
+                if (!handle.classList.contains('lm-mod-hidden')) {
                     const parentWidth = parent.node.clientWidth;
                     return parentWidth - handle.offsetLeft;
                 }
@@ -633,13 +633,13 @@ export class SidePanelHandler {
         const clonedTab = tab.cloneNode(true) as HTMLElement;
         clonedTab.style.width = '';
         clonedTab.style.height = '';
-        const label = clonedTab.getElementsByClassName('p-TabBar-tabLabel')[0] as HTMLElement;
+        const label = clonedTab.getElementsByClassName('lm-TabBar-tabLabel')[0] as HTMLElement;
         label.style.width = '';
         label.style.height = '';
 
         // Create and start a drag to move the selected tab to another panel
         const mimeData = new MimeData();
-        mimeData.setData('application/vnd.phosphor.widget-factory', () => title.owner);
+        mimeData.setData('application/vnd.lumino.widget-factory', () => title.owner);
         const drag = new Drag({
             mimeData,
             dragImage: clonedTab,
@@ -647,10 +647,10 @@ export class SidePanelHandler {
             supportedActions: 'move',
         });
 
-        tab.classList.add('p-mod-hidden');
+        tab.classList.add('lm-mod-hidden');
         drag.start(clientX, clientY).then(() => {
             // The promise is resolved when the drag has ended
-            tab.classList.remove('p-mod-hidden');
+            tab.classList.remove('lm-mod-hidden');
         });
     }
 

package/src/browser/shell/side-panel-toolbar.ts

@@ -14,9 +14,9 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { Widget, Title } from '@phosphor/widgets';
+import { Widget, Title } from '@lumino/widgets';
 import { TabBarToolbar, TabBarToolbarRegistry, TabBarToolbarFactory } from './tab-bar-toolbar';
-import { Message } from '@phosphor/messaging';
+import { Message } from '@lumino/messaging';
 import { BaseWidget } from '../widgets';
 import { Emitter } from '../../common/event';
 import { ContextMenuAccess, Anchor } from '../context-menu-renderer';

package/src/browser/shell/split-panels.ts

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import { injectable } from 'inversify';
-import { SplitPanel, SplitLayout, Widget } from '@phosphor/widgets';
+import { SplitPanel, SplitLayout, Widget } from '@lumino/widgets';
 
 export interface SplitPositionOptions {
     /** The side of the side panel that shall be resized. */

package/src/browser/shell/tab-bar-decorator.ts

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import debounce = require('lodash.debounce');
-import { Title, Widget } from '@phosphor/widgets';
+import { Title, Widget } from '@lumino/widgets';
 import { inject, injectable, named } from 'inversify';
 import { ContributionProvider, Emitter, Event } from '../../common';
 import { ColorRegistry } from '../color-registry';

package/src/browser/shell/tab-bar-toolbar/tab-bar-toolbar.tsx

@@ -436,7 +436,7 @@ export namespace TabBarToolbar {
 
     export namespace Styles {
 
-        export const TAB_BAR_TOOLBAR = 'p-TabBar-toolbar';
+        export const TAB_BAR_TOOLBAR = 'lm-TabBar-toolbar';
         export const TAB_BAR_TOOLBAR_ITEM = 'item';
 
     }

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

@@ -18,7 +18,7 @@ import { enableJSDOM } from '../test/jsdom';
 let disableJSDOM = enableJSDOM();
 import { expect } from 'chai';
 
-import { Title, Widget } from '@phosphor/widgets';
+import { Title, Widget } from '@lumino/widgets';
 import { TabBarRenderer } from './tab-bars';
 
 disableJSDOM();