Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate from PhosphorJS to Lumino #14320

Merged
merged 34 commits into from
Mar 17, 2025

Conversation

sdirix
Copy link
Member

@sdirix sdirix commented Oct 15, 2024

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
  • Tab bars currently have double the width than they should have (@tsmaeder)
  • The "..." bar actions do not work (@tsmaeder)
  • When shrinking the left view tab bar, the content is not adjusted (normally, we get a "..." when not all view tabs can be shown (@tsmaeder)
  • When opening a diff editor (from the git changes view), the height of the editor tab bar is too big. When switching between editors before and after the diff editor tab, the height becomes correct sometimes (when switching from the one after the diff editor)
  • The preferences tree does not react on selections (@tsmaeder)
  • The preferences content does not scroll (@tsmaeder)
  • Existing import and style changes update to latest code base (@sdirix)
  • Fix CI checks (@sdirix)
  • Optional as already broken in current master: linux-only: context menu of terminal and chat view in secondary windows are opened in main window. editor context menus however do work.
  • non-native title menu behavior (@tsmaeder)
    • selecting a title menu (which opens the sub menu popup) and clicking again in the title menu brings the clicked on menu into a focus state. An additional click is now necessary to lose the focus before another menu can be opened.
    • Optional as already broken in current master: Selecting an element in a different pane (e.g. file explorer, or market place) and then interacting with the title menu is completely broken. Cause seems to be menu-dirty-changes, triggered by the focus change in parts.
  • Editor autocomplete popup is misaligned (rendered too far away) (@tsmaeder)

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

Reminder for reviewers

- 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
sdirix and others added 12 commits November 29, 2024 11:01
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]>
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
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
@sdirix
Copy link
Member Author

sdirix commented Feb 10, 2025

@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.

@sdirix sdirix marked this pull request as ready for review March 4, 2025 16:27
@sdirix
Copy link
Member Author

sdirix commented Mar 4, 2025

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 sdirix requested a review from msujew March 4, 2025 16:30
@sdirix
Copy link
Member Author

sdirix commented Mar 13, 2025

@msujew ping ;)

@sdirix
Copy link
Member Author

sdirix commented Mar 17, 2025

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

Copy link
Member

@msujew msujew left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was able to find two regressions:

  1. 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:
    image
    image
    Current design for reference (with rounded corners):
    image
  2. 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.

Comment on lines 74 to 75
private refsAreSet: Promise<void> = new Promise(resolve => this.resolveRefsAreSet = resolve);
private resolveRefsAreSet: () => void;
Copy link
Member

@msujew msujew Mar 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question/Suggestion: Why not use a Deferred here?

Comment on lines 267 to 268
private setInitialized: () => void;
initialized: Promise<void> = new Promise(resolve => { this.setInitialized = resolve; });
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above, why not a Deferred?

@tsmaeder
Copy link
Contributor

@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
Copy link
Member Author

sdirix commented Mar 17, 2025

@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
Copy link
Contributor

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
Copy link
Member Author

sdirix commented Mar 17, 2025

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.

sdirix added 2 commits March 17, 2025 12:16
Contributed on behalf of STMicroelectronics
Contributed on behalf of STMicroelectronics
@sdirix
Copy link
Member Author

sdirix commented Mar 17, 2025

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.

@sdirix sdirix requested review from msujew and tsmaeder March 17, 2025 11:19
Contributed on behalf of STMicroelectronics
@sdirix
Copy link
Member Author

sdirix commented Mar 17, 2025

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
Copy link
Member

msujew commented Mar 17, 2025

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.

Copy link
Member

@msujew msujew left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Contributed on behalf of STMicroelectronics
@sdirix sdirix merged commit cee979b into eclipse-theia:master Mar 17, 2025
10 of 11 checks passed
@github-actions github-actions bot added this to the 1.60.0 milestone Mar 17, 2025
@sdirix
Copy link
Member Author

sdirix commented Mar 17, 2025

@tsmaeder Can you do or trigger the prerelease?

@sdirix sdirix deleted the lumino-migration branch March 17, 2025 13:23
@rschnekenbu rschnekenbu mentioned this pull request Mar 18, 2025
22 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

3 participants