Migrate from PhosphorJS to Lumino #14320

sdirix · 2024-10-15T13:10:55Z

What it does

Migrate from PhosphorJS to Lumino

PhosphorJS is no longer actively maintained for a few years now. Lumino is an active fork, maintained by the JupyterLab community.

While PhosphorJS proved reliable for a long time, the cracks are starting to show. For example we need to patch PhosphorJS to support secondary windows.

The JupyterLab community is welcoming and is open to accept contributions.

Contributed on behalf of STMicroelectronics

Current state

The PR is split into separate logical commits to make the reviewing and maintenance work easier in case the PR takes longer to complete.

All known issues are now fixed

This is a huge breaking change.

Follow ups

Adapt and release a prerelease version of the Theia IDE for testing
Adapt the examples of the theia yeoman generator so they continue to work

For now we continue to use patching on Lumino to enable secondary window support. We also still use some workarounds and hacks for enriching Lumino usage. As the Lumino community is open for suggestions and contributions, we can start the process of getting rid of these workarounds and the patching in the long run.

How to test

Build and test the application(s)

Review checklist

As an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

As a reviewer, I agree to behave in accordance with the review guidelines

- switch to lumino packages - remove phosphorjs sharing Contributed on behalf of STMicroelectronics

Adapt all CSS and code to refer to lumino classes. Contributed on behalf of STMicroelectronics

- use 'iconClass' instead of 'class' in commands - only access shell handlers once they are initialized - use Lumino's host option for secondary window support - adapt tab bar handling - adapt to Iterable changes - adapt to Drag interface changes - adapt to Widget id changes Contributed on behalf of STMicroelectronics

Adds the patch for Lumino which achieves the following: - Make sure listeners are registered on the correct document. This is necessary for secondary window support. - Make sure empty menus can be opened. This is required as Theia fills menus right before they are shown, so they seem to be empty. Contributed on behalf of STMicroelectronics

Contributed on behalf of STMicroelectronics

'@lumino/dragdrop' consumes DragEvent already at loading time. Therefore the DragEvent mock must already be available before executing the tests. Adds a new private '@theia/test-setup' dev package which is consumed in the mocha config to mock 'DragEvent' before loading and compiling tests. Contributed on behalf of STMicroelectronics

Contributed on behalf of STMicroelectronics

After being attached, the search-in-workspace widget tries to focus its input field. However the input field is rendered via React and might not be created yet. Adjusts the focus mechanism to wait until the input is rendered before trying to focus it. Contributed on behalf of STMicroelectronics

Contributed on behalf of STMicroelectronics

Signed-off-by: Thomas Mäder <[email protected]>

To workaround Lumino's empty menu checks we now always return menus with at least one item. Contributed on behalf of STMicroelectronics

Adapts the current focus behavior for non-native menus to work properly again. However different to before they now keep their focus when closed. Therefore this is still wip. Adds a developer variable to enable/disable the new adaptations. Contributed on behalf of STMicroelectronics

Makes sure that the terminal widget id is set to the injected value. Fixes Terminal Playwright tests. Contributed on behalf of STMicroelectronics

packages/core/src/browser/menu/browser-menu-plugin.ts

Adjusts Lumino for second window usage Contributed on behalf of STMicroelectronics

- removes the debug variable - do not restore focus to menu elements Contributed on behalf of STMicroelectronics

Signed-off-by: Thomas Mäder <[email protected]>

sdirix · 2025-02-10T09:22:00Z

@tsmaeder Thanks for the fixes! I tested it a bit and it's significantly better than before. There is one behavioral change though: The title bar menus can no longer be closed by clicking them again which seems a bit weird.

Edit: master has the same behavior now, so that's fine.

Contributed on behalf of STMicroelectronics

sdirix · 2025-03-04T16:30:17Z

This PR is now ready for review. @msujew please have a look.

All previously found issues are fixed. I adapted the description of the PR and moved them into a collapsible details segment.
Note that I pinned the version for @lumino/widgets but not for the other packages. The reason is that our patch to enhance Lumino for secondary windows might not apply cleanly on future versions.

sdirix · 2025-03-13T14:03:43Z

@msujew ping ;)

sdirix · 2025-03-17T08:37:25Z

I merged in the latest master to solve the merge conflicts, no other changes done

msujew

I was able to find two regressions:

The menu CSS seems to have changed apparently. This affects all main menu and context menu rendering. Menu entries now have a focus outline. The outline is also visible in case the element is not :hover:

Current design for reference (with rounded corners):
Clicking on a top level menu element (such as File) brings it up correctly, but clicking the menu button again does nothing. I would expect it to close the menu again. This is the case in VS Code and current Theia.

Aside from that, this looks very good. I think after fixing those two issues, we should be good to go.

msujew · 2025-03-17T09:44:41Z

packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx

+    private refsAreSet: Promise<void> = new Promise(resolve => this.resolveRefsAreSet = resolve);
+    private resolveRefsAreSet: () => void;


Question/Suggestion: Why not use a Deferred here?

msujew · 2025-03-17T09:49:44Z

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

+    private setInitialized: () => void;
+    initialized: Promise<void> = new Promise(resolve => { this.setInitialized = resolve; });


Same as above, why not a Deferred?

tsmaeder · 2025-03-17T10:31:32Z

@msujew thanks for the review.

Clicking on a top level menu element (such as File) brings it up correctly, but clicking the menu button again does nothing. I would expect it to close the menu again. This is the case in VS Code and current Theia.

I'm not sure this is an actual bug: we used to have a bug that would close the menu on focus change which was fixed. It might be that this is actually the correct behaviour for Lumino menus. We should check. Anyway: I don't think we should block the merge for that one: you can simple hit "escape" or click anywhere outside the menu to make it disappear.

sdirix · 2025-03-17T10:34:43Z

@msujew thanks for the review.

Clicking on a top level menu element (such as File) brings it up correctly, but clicking the menu button again does nothing. I would expect it to close the menu again. This is the case in VS Code and current Theia.

I'm not sure this is an actual bug: we used to have a bug that would close the menu on focus change which was fixed. It might be that this is actually the correct behaviour for Lumino menus. We should check. Anyway: I don't think we should block the merge for that one: you can simple hit "escape" or click anywhere outside the menu to make it disappear.

Personally I would also prefer the menus to close again, however this is not a regression of this PR. The current Theia master already has this behavior in the Browser variant as well as when using title bar style "custom" instead of native in the Electron variant, including the Theia IDE.

tsmaeder · 2025-03-17T10:39:07Z

The current Theia master already has this behavior in the Browser variant as well as when using title bar style "custom"

Now I'm confused: in Theia IDE, the menu closes on second click in the native menus and stays open in the custom menus

sdirix · 2025-03-17T11:06:19Z

The current Theia master already has this behavior in the Browser variant as well as when using title bar style "custom"

Now I'm confused: in Theia IDE, the menu closes on second click in the native menus and stays open in the custom menus

Yes, that's because Electron native menus behave that way, and our changes on master regarding (PhosporJS) menus behave the other way. We should align them again in a follow up at some point.

Contributed on behalf of STMicroelectronics

sdirix · 2025-03-17T11:19:44Z

I pushed two commits addressing your review issues. As discussed above, the title menu's (non-native) behavior already changed on master and is therefore not a regression by this PR.

Contributed on behalf of STMicroelectronics

sdirix · 2025-03-17T11:29:07Z

I overlooked that we already had some CSS customization in menu.css. I moved the focus customization there as that is a better fit than index.css. No functional or CSS changes.

msujew · 2025-03-17T11:29:10Z

The current Theia master already has this behavior in the Browser variant as well as when using title bar style "custom" instead of native in the Electron variant, including the Theia IDE.

I can confirm. I was testing using the 1.58.100 build of the Theia IDE (where it works), but the 1.59.100 build actually also has this issue.

msujew

Alright, thank you for the swift reply. I could find no more regressions from master, and the code looks good to me 👍

package-lock.json

Contributed on behalf of STMicroelectronics

sdirix · 2025-03-17T12:15:01Z

@tsmaeder Can you do or trigger the prerelease?

sdirix added 5 commits October 15, 2024 16:10

[lumino] consume lumino packages

8a72f37

- switch to lumino packages - remove phosphorjs sharing Contributed on behalf of STMicroelectronics

[lumino] migrate to lumino styles

765afa3

Adapt all CSS and code to refer to lumino classes. Contributed on behalf of STMicroelectronics

[lumino] remove no longer needed underline adjustment

b3dddca

Contributed on behalf of STMicroelectronics

sdirix force-pushed the lumino-migration branch from 991a63f to b3dddca Compare October 15, 2024 14:11

sdirix added 2 commits November 28, 2024 16:21

Merge branch 'upstream/master' into lumino-migration

986a738

chore: replace mentions of Phosphor with Lumino

2e8a052

Contributed on behalf of STMicroelectronics

sdirix mentioned this pull request Nov 28, 2024

Allow empty menus to activate in menu bar jupyterlab/lumino#729

Open

sdirix force-pushed the lumino-migration branch from 1897faf to b074e61 Compare November 29, 2024 09:59

sdirix and others added 12 commits November 29, 2024 11:01

[lumino] further DragEvent adaptations

8844c4f

Contributed on behalf of STMicroelectronics

[lumino] remove check in 'MenuBar' subclass

5230998

Contributed on behalf of STMicroelectronics

Use widget document as context menu host.

d39fbbc

Signed-off-by: Thomas Mäder <[email protected]>

Fix scroll bar behavior on editor tab bar

45a3fb4

Signed-off-by: Thomas Mäder <[email protected]>

Fix sidebar ellipsis behavior

9092eb3

Signed-off-by: Thomas Mäder <[email protected]>

Merge remote-tracking branch 'origin/master' into lumino-migration

f4dc983

Signed-off-by: Thomas Mäder <[email protected]>

Fix compile error

e5629f3

Signed-off-by: Thomas Mäder <[email protected]>

Add "overflow: hidden" to preferences editor widget

09a94d4

Signed-off-by: Thomas Mäder <[email protected]>

[lumino] never return empty menus

cba31c9

To workaround Lumino's empty menu checks we now always return menus with at least one item. Contributed on behalf of STMicroelectronics

[lumino] fix terminal id

d9d3f91

Makes sure that the terminal widget id is set to the injected value. Fixes Terminal Playwright tests. Contributed on behalf of STMicroelectronics

tsmaeder reviewed Dec 23, 2024

View reviewed changes

packages/core/src/browser/menu/browser-menu-plugin.ts Outdated Show resolved Hide resolved

sdirix added 2 commits December 23, 2024 15:18

[lumino] update lumino patch

ba01608

Adjusts Lumino for second window usage Contributed on behalf of STMicroelectronics

[lumino] streamline menu focus

cbc68a9

- removes the debug variable - do not restore focus to menu elements Contributed on behalf of STMicroelectronics

sdirix mentioned this pull request Jan 8, 2025

Menu bar does not open on first click when certain sidebar elements have focus #14002

Closed

sdirix and others added 3 commits January 13, 2025 12:54

Merge remote-tracking branch 'upstream/master' into lumino-migration

e588806

Use fixedOverflowWidgets = false. Fixes overlay widgets in editor

e2df32d

Signed-off-by: Thomas Mäder <[email protected]>

Merge remote-tracking branch 'upstream/master' into lumino-migration

d9fa0e8

rschnekenbu mentioned this pull request Feb 18, 2025

Sometimes to open a menu, two clicks are needed #14944

Closed

sdirix added 2 commits March 4, 2025 15:58

Merge remote-tracking branch 'upstream/master' into lumino-migration

c387dce

[lumino] add changelog entry and adapt test package version

0983a4c

Contributed on behalf of STMicroelectronics

sdirix marked this pull request as ready for review March 4, 2025 16:27

sdirix requested a review from msujew March 4, 2025 16:30

Merge remote-tracking branch 'upstream/master' into lumino-migration

89ccb2a

msujew reviewed Mar 17, 2025

View reviewed changes

sdirix added 2 commits March 17, 2025 12:16

[lumino] remove focus border for (context) menus

7414625

Contributed on behalf of STMicroelectronics

[lumino] use deferred instead of manual promises

fc01337

Contributed on behalf of STMicroelectronics

sdirix requested review from msujew and tsmaeder March 17, 2025 11:19

[lumino] move menu css customization to menus.css

1572834

Contributed on behalf of STMicroelectronics

msujew approved these changes Mar 17, 2025

View reviewed changes

package-lock.json Show resolved Hide resolved

[lumino] update package-lock

9cdf922

Contributed on behalf of STMicroelectronics

sdirix merged commit cee979b into eclipse-theia:master Mar 17, 2025
10 of 11 checks passed

github-actions bot added this to the 1.60.0 milestone Mar 17, 2025

sdirix deleted the lumino-migration branch March 17, 2025 13:23

rschnekenbu mentioned this pull request Mar 18, 2025

Endgame Plan for release 1.60 #15216

Open

22 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate from PhosphorJS to Lumino #14320

Migrate from PhosphorJS to Lumino #14320

sdirix commented Oct 15, 2024 •

edited

Loading

sdirix commented Feb 10, 2025 •

edited

Loading

sdirix commented Mar 4, 2025

sdirix commented Mar 13, 2025

sdirix commented Mar 17, 2025

msujew left a comment •

edited

Loading

msujew Mar 17, 2025 •

edited

Loading

msujew Mar 17, 2025

tsmaeder commented Mar 17, 2025

sdirix commented Mar 17, 2025

tsmaeder commented Mar 17, 2025

sdirix commented Mar 17, 2025

sdirix commented Mar 17, 2025

sdirix commented Mar 17, 2025

msujew commented Mar 17, 2025 •

edited

Loading

msujew left a comment

sdirix commented Mar 17, 2025

		private refsAreSet: Promise<void> = new Promise(resolve => this.resolveRefsAreSet = resolve);
		private resolveRefsAreSet: () => void;

		private setInitialized: () => void;
		initialized: Promise<void> = new Promise(resolve => { this.setInitialized = resolve; });

Migrate from PhosphorJS to Lumino #14320

Migrate from PhosphorJS to Lumino #14320

Conversation

sdirix commented Oct 15, 2024 • edited Loading

What it does

Current state

Follow ups

How to test

Review checklist

Reminder for reviewers

sdirix commented Feb 10, 2025 • edited Loading

sdirix commented Mar 4, 2025

sdirix commented Mar 13, 2025

sdirix commented Mar 17, 2025

msujew left a comment • edited Loading

Choose a reason for hiding this comment

msujew Mar 17, 2025 • edited Loading

Choose a reason for hiding this comment

msujew Mar 17, 2025

Choose a reason for hiding this comment

tsmaeder commented Mar 17, 2025

sdirix commented Mar 17, 2025

tsmaeder commented Mar 17, 2025

sdirix commented Mar 17, 2025

sdirix commented Mar 17, 2025

sdirix commented Mar 17, 2025

msujew commented Mar 17, 2025 • edited Loading

msujew left a comment

Choose a reason for hiding this comment

sdirix commented Mar 17, 2025

sdirix commented Oct 15, 2024 •

edited

Loading

sdirix commented Feb 10, 2025 •

edited

Loading

msujew left a comment •

edited

Loading

msujew Mar 17, 2025 •

edited

Loading

msujew commented Mar 17, 2025 •

edited

Loading