monaco: adjust where the monaco menu appears

[vince-fugnitto]

What it does

Fixes: #10907

The pull-request adjusts the monaco menu (quick-input) to appear after the main-menu and not overlay it.

monaco-menu-improvement.mp4

How to test

1. start the browser application
2. ensure that the different menus work well (quick-file open, quick-commands, etc.)
3. start the electron application with the native titlebar style
4. repeat step 2
5. start the electron application with the custom titlebar style
6. repeat step 2
7. the change should also work nicely with the toolbar toggled

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

Signed-off-by: vince-fugnitto [email protected]

[msujew]

While the solution is quite clean, I'm wondering whether this is the right approach. When attaching the div to the main panel of Theia, it will be offset from the center of the app. See this:

[msujew]

I'm wondering whether we need this change. It doesn't seem to do anything, and removing it doesn't change the behavior.

[vince-fugnitto]

While the solution is quite clean, I'm wondering whether this is the right approach. When attaching the div to the main panel of Theia, it will be offset from the center of the app. See this:

@msujew ahh you're right, I see the odd behavior when I modify the layout. I'm not checking what might be a better choice to append to, but I'm also worried if downstream they modify their shell or layout. Do you have any suggestions?

[msujew]

Yeah, the downstream issue is difficult. I have two ideas:

1. Disregard downstream apps that modify their layout and simply append to the html element with the #theia-left-right-split-panel id. That way we always stay in the center of the app with the quick input.
2. Keep the quick input attached to the body of the document and simply change the top style attribute to consider the top-panel height. I assume we would need to change the --theia-private-menubar-height css variable to 0px if we hide the top panel in any way (electron native mode/compact menu bar mode). It's probably a more complicated approach.
3. The same as 2. but use add class for the quick input container if the top-panel is visible, which sets top to var(--theia-private-menubar-height) and keeps it at 0 otherwise.

[vince-fugnitto]

@msujew I modified the code slightly to use a fixed position and it seems to have resolved the issue, is there an issue with this approach?

[msujew]

Alright, that approach looks good!

[colin-grant-work]

LGTM. The quick input no longer obscures the menu bar.

[colin-grant-work]

It looks like appending the QP container to the main area has negative side effects when side panels are expanded:

Perhaps we should revert to attaching the QP to the body, but calculate its top value to match the top of main when showing the quick pick?