Use responsive design for the main notebook toolbar

[jonah-iden]

What it does

When the notebook editor widget in not wide enough to contain all main toolbar items it will now add a ... menu containing all overflowing items

How to test

Open a notebook and adjust the widget size. You should see groups being added and removed again from the context menu.

Follow-ups

Currently only the top level groups are added to context menu instead of singular MenuActions like in vscode

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

[msujew]

Works pretty well in general, but we have a reference/memory leak due to ResizeObserver in there.

[msujew]

That's better, but I've noticed that with this change there is a minor regression: When resizing the window to be "too small" for anything to be displayed in the widget, the widget just renders as empty:

2024-04-29.16-56-35.mp4

I'm also getting this error in the console:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

[jonah-iden]

Oh overlooked that. good chatch im gonna take another look

[jonah-iden]

@msujew not rendering when too small and the maximum update deapth should be fixed now.

[msujew]

@jonah-iden Linting fails in the CI.

[jonah-iden]

fixed now

[msujew]

With the newest change it looks like the amount of displayed groups can only increase/decrease by one. However, this isn't the expected behavior when minimizing/maximizing the application:

2024-04-30.15-13-04.mp4

[jonah-iden]

weird. It worked fine for me. I'll take another look thanks for testing

[jonah-iden]

@msujew are you sure you build it correctly?

Aufzeichnung.2024-04-30.154816-theia-notebook-toolbar-resize.mp4

For me it looks like this

[msujew]

@jonah-iden slowly resizing the app works for me as well. The issue comes up when the resizing is happening in a single discrete step, like when maximizing the window (as shown in my video). In this case this code will only trigger once and unhide a single group in the toolbar.

[jonah-iden]

oh ok

[jonah-iden]

now it should finally work fine

[msujew]

Thank you, everything works well now 👍