feat: migrate from PhosphorJS to Lumino (#14320)

Migrate from the deprecated @phosphor packages to the actively
maintained @Lumino fork across the entire codebase.

- Replace all @phosphor package imports with @Lumino equivalents
- Share Lumino packages instead of PhosphorJS packages
- Update CSS selectors from .p- to .lm- class prefixes
- Adapt code to Lumino's API changes (e.g. using iconClass instead of
  class in commands)
- Adapt code to Lumino's behavior and CSS changes (e.g. empty menu
  behavior and focus CSS)
- Add Lumino patch for secondary window support
- Introduce a testing package to setup tests for Lumino codebase

Adopters will need to update their imports to use @Lumino instead,
update any custom CSS selectors and potentially adapt their code base.

Contributed on behalf of STMicroelectronics

Co-authored-by: Thomas Mäder <[email protected]>

Author: sdirix

CHANGELOG.md

@@ -4,11 +4,13 @@
 
 - [Previous Changelogs](https://github.com/eclipse-theia/theia/tree/master/doc/changelogs/)
 
-## 1.60.0
+## 1.60.0 - not yet released
 
 <a name="breaking_changes_1.60.0">[Breaking Changes:](#breaking_changes_1.60.0)</a>
 
 - [core] fixed version `@types/express` to `^4.17.21` and `@types/express-serve-static-core` to `5.0.4`. This might be required for adopters as well if they run into typing issues. [#15147](https://github.com/eclipse-theia/theia/pull/15147)
+- [core] migration from deprecated `phosphorJs` to actively maintained fork `Lumino` [#14320](https://github.com/eclipse-theia/theia/pull/14320) - Contributed on behalf of STMicroelectronics
+  Adopters importing `@phosphor` packages now need to import from `@lumino`. CSS selectors refering to `.p-` classes now need to refer to `.lm-` classes. There are also minor code adaptations, for example now using `iconClass` instead of `icon` in Lumino commands.
 
 ## 1.59.0 - 02/27/2025
 

configs/mocharc.yml

@@ -1,6 +1,7 @@
 require:
   - 'ignore-styles'
   - 'reflect-metadata/Reflect'
+  - '@theia/test-setup'
 reporter: 'spec'
 watch-files:
     - '**/*.js'

dev-packages/cli/patches/@lumino+widgets+2.5.0.patch

@@ -49,7 +49,7 @@ export default async function runTest(options: TestOptions): Promise<void> {
             // When launching in non-headless mode (with a UI and dev-tools open), make sure
             // the app has focus, to avoid failures of tests that query the UI's state.
             if (launch && launch.devtools) {
-                promises.push(testPage.waitForSelector('#theia-app-shell.p-Widget.theia-ApplicationShell')
+                promises.push(testPage.waitForSelector('#theia-app-shell.lm-Widget.theia-ApplicationShell')
                     .then(e => {
                         // eslint-disable-next-line no-null/no-null
                         if (e !== null) {

dev-packages/cli/patches/@phosphor+widgets+1.9.3.patch

@@ -0,0 +1,32 @@
+<div align='center'>
+
+<br />
+
+<img src='https://raw.githubusercontent.com/eclipse-theia/theia/master/logo/theia.svg?sanitize=true' alt='theia-ext-logo' width='100px' />
+
+<h2>ECLIPSE THEIA - TEST SETUP</h2>
+
+<hr />
+
+</div>
+
+## Description
+
+The `@theia/test-setup` contributes a setup script for mocha executed tests in Theia.
+This setup script is executed before any test file is loaded or compiled.
+This is for example useful for globals which must exist before dependencies are loaded.
+
+## Additional Information
+
+- [Theia - GitHub](https://github.com/eclipse-theia/theia)
+- [Theia - Website](https://theia-ide.org/)
+
+## License
+
+-   [Eclipse Public License 2.0](http://www.eclipse.org/legal/epl-2.0/)
+-   [一 (Secondary) GNU General Public License, version 2 with the GNU Classpath Exception](https://projects.eclipse.org/license/secondary-gpl-2.0-cp)
+
+## Trademark
+
+"Theia" is a trademark of the Eclipse Foundation
+https://www.eclipse.org/theia

dev-packages/cli/src/run-test.ts

@@ -0,0 +1,7 @@
+{
+  "private": true,
+  "name": "@theia/test-setup",
+  "version": "1.59.0",
+  "description": "Custom setup for mocha tests",
+  "main": "test-setup.js"
+}

dev-packages/private-test-setup/README.md

@@ -0,0 +1,18 @@
+// *****************************************************************************
+// Copyright (C) 2024 STMicroelectronics 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-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+// Mock DragEvent as '@lumino/dragdrop' already requires it at require time
+global.DragEvent = class DragEvent { };

dev-packages/private-test-setup/package.json

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import { injectable, ContainerModule } from '@theia/core/shared/inversify';
-import { Menu as MenuWidget } from '@theia/core/shared/@phosphor/widgets';
+import { Menu as MenuWidget } from '@theia/core/shared/@lumino/widgets';
 import { Disposable } from '@theia/core/lib/common/disposable';
 import { MenuNode, CompoundMenuNode, MenuPath } from '@theia/core/lib/common/menu';
 import { BrowserMainMenuFactory, MenuCommandRegistry, DynamicMenuWidget, BrowserMenuOptions } from '@theia/core/lib/browser/menu/browser-menu-plugin';
@@ -74,7 +74,7 @@ class SampleMenuCommandRegistry extends MenuCommandRegistry {
         return this.addCommand(id, {
             execute: () => { /* NOOP */ },
             label: menu.label,
-            icon: menu.icon,
+            iconClass: menu.icon,
             isEnabled: () => false,
             isVisible: () => true
         });

dev-packages/private-test-setup/test-setup.js

@@ -29,7 +29,7 @@ import { inject, injectable, interfaces } from '@theia/core/shared/inversify';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
 import { WorkspaceService } from '@theia/workspace/lib/browser';
 import { PreferenceItem, PreferenceValidationService } from '@theia/core/lib/browser';
-import { JSONValue } from '@theia/core/shared/@phosphor/coreutils';
+import { JSONValue } from '@theia/core/shared/@lumino/coreutils';
 import { JsonType } from '@theia/core/lib/common/json-schema';
 import { editorOptionsRegistry } from '@theia/monaco-editor-core/esm/vs/editor/common/config/editorOptions';
 import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';

examples/api-samples/src/browser/menu/sample-browser-menu-module.ts

@@ -176,7 +176,7 @@ export class TheiaApp {
     }
 
     protected async visibleTabIds(): Promise<string[]> {
-        const tabs = await this.page.$$('.p-TabBar-tab');
+        const tabs = await this.page.$$('.lm-TabBar-tab');
         const tabIds = (await Promise.all(tabs.map(tab => tab.getAttribute('id')))).filter(id => !!id);
         return tabIds as string[];
     }

examples/api-samples/src/browser/monaco-editor-preferences/monaco-editor-preference-extractor.ts

@@ -21,7 +21,7 @@ import { TheiaPageObject } from './theia-page-object';
 import { normalizeId, toTextContentArray } from './util';
 
 export class TheiaMainMenu extends TheiaMenu {
-    override selector = '.p-Menu.p-MenuBar-menu';
+    override selector = '.lm-Menu.lm-MenuBar-menu';
 }
 
 export class TheiaMenuBar extends TheiaPageObject {
@@ -48,7 +48,7 @@ export class TheiaMenuBar extends TheiaPageObject {
     }
 
     protected menuBarItemSelector(label = ''): string {
-        return `${normalizeId('#theia:menubar')} .p-MenuBar-itemLabel >> text=${label}`;
+        return `${normalizeId('#theia:menubar')} .lm-MenuBar-itemLabel >> text=${label}`;
     }
 
 }

examples/playwright/src/theia-app.ts

@@ -23,15 +23,15 @@ export class TheiaMenuItem {
     constructor(protected element: ElementHandle<SVGElement | HTMLElement>) { }
 
     protected labelElementHandle(): Promise<ElementHandle<SVGElement | HTMLElement>> {
-        return this.element.waitForSelector('.p-Menu-itemLabel');
+        return this.element.waitForSelector('.lm-Menu-itemLabel');
     }
 
     protected shortCutElementHandle(): Promise<ElementHandle<SVGElement | HTMLElement>> {
-        return this.element.waitForSelector('.p-Menu-itemShortcut');
+        return this.element.waitForSelector('.lm-Menu-itemShortcut');
     }
 
     protected isHidden(): Promise<boolean> {
-        return elementContainsClass(this.element, 'p-mod-collapsed');
+        return elementContainsClass(this.element, 'lm-mod-collapsed');
     }
 
     async label(): Promise<string | undefined> {
@@ -60,11 +60,11 @@ export class TheiaMenuItem {
         if (classAttribute === undefined || classAttribute === null) {
             return false;
         }
-        return !classAttribute.includes('p-mod-disabled') && !classAttribute.includes('p-mod-collapsed');
+        return !classAttribute.includes('lm-mod-disabled') && !classAttribute.includes('lm-mod-collapsed');
     }
 
     async click(): Promise<void> {
-        return this.element.waitForSelector('.p-Menu-itemLabel')
+        return this.element.waitForSelector('.lm-Menu-itemLabel')
             .then(labelElement => labelElement.click({ position: { x: 10, y: 10 } }));
     }
 

examples/playwright/src/theia-main-menu.ts

@@ -22,7 +22,7 @@ import { isDefined } from './util';
 
 export class TheiaMenu extends TheiaPageObject {
 
-    selector = '.p-Menu';
+    selector = '.lm-Menu';
 
     protected async menuElementHandle(): Promise<ElementHandle<SVGElement | HTMLElement> | null> {
         return this.page.$(this.selector);
@@ -50,7 +50,7 @@ export class TheiaMenu extends TheiaPageObject {
         if (!menuHandle) {
             return [];
         }
-        const items = await menuHandle.$$('.p-Menu-content .p-Menu-item');
+        const items = await menuHandle.$$('.lm-Menu-content .lm-Menu-item');
         return items.map(element => new TheiaMenuItem(element));
     }
 
@@ -84,7 +84,7 @@ export class TheiaMenu extends TheiaPageObject {
     }
 
     protected menuItemSelector(label = ''): string {
-        return `.p-Menu-content .p-Menu-itemLabel >> text=${label}`;
+        return `.lm-Menu-content .lm-Menu-itemLabel >> text=${label}`;
     }
 
     async visibleMenuItems(): Promise<string[]> {

examples/playwright/src/theia-menu-item.ts

@@ -47,7 +47,7 @@ export class TheiaOutputView extends TheiaView {
         await this.activate();
         const channel = new TheiaOutputViewChannel(
             {
-                viewSelector: 'div.p-Widget.theia-editor.p-DockPanel-widget > div.monaco-editor',
+                viewSelector: 'div.lm-Widget.theia-editor.lm-DockPanel-widget > div.monaco-editor',
                 dataUri: normalizeId(`output:/${encodeURIComponent(outputChannelName)}`),
                 channelName: outputChannelName
             },

examples/playwright/src/theia-menu.ts

@@ -106,7 +106,7 @@ export class TheiaPreferenceView extends TheiaView {
     }
 
     protected getScopeSelector(scope: TheiaPreferenceScope): string {
-        return `li.preferences-scope-tab div.p-TabBar-tabLabel:has-text("${scope}")`;
+        return `li.preferences-scope-tab div.lm-TabBar-tabLabel:has-text("${scope}")`;
     }
 
     async openPreferenceScope(scope: TheiaPreferenceScope): Promise<void> {

examples/playwright/src/theia-output-view.ts

@@ -19,7 +19,7 @@ import { TheiaPageObject } from './theia-page-object';
 import { TheiaToolbarItem } from './theia-toolbar-item';
 
 export class TheiaToolbar extends TheiaPageObject {
-    selector = 'div#main-toolbar.p-TabBar-toolbar';
+    selector = 'div#main-toolbar.lm-TabBar-toolbar';
 
     protected async toolbarElementHandle(): Promise<ElementHandle<SVGElement | HTMLElement> | null> {
         return this.page.$(this.selector);