Command palette overlaps the pull-down menus

[lmcbout]

Description

WE should close the opened pull-down menu when activating the command palette, so they do not overlap.

Reproduction Steps

-Open any pull-down menu (File, Debug, View ...

• Open the command palette from the command line :CTRL+SHIFT+P
  --> Both popup are open simultaneously
  -> After [editor] add misc toggle commands to the view menu #6843, the pulldown menu does not get refresh after selecting some toggling options.

OS and Theia version:
Ubuntu 16.04
Theia: latest master
Chrome

Diagnostics:

[garethwhittaker]

I can take a look at implementing this enhancement and provide an update later in the week.

[akosyakov]

After #6843, the pulldown menu does not get refresh after selecting some toggling options.

that sound quite bad, @vince-fugnitto did you notice it as well. Does it mean that for toggle menu items we don't show a proper state anymore in menus?

[vince-fugnitto]

I believe I mentioned in person that the menu should be dismissed if the quick-open is triggered.
I believe it is a similar behavior present in VS Code and will limit the problems we might encounter.

[garethwhittaker]

Hi there,

I've now spent some time looking around the menu and command palette related code.
The command palette keybindings and action are defined in QuickCommandFrontendContribution.

quick-command-contribution.ts

    registerCommands(commands: CommandRegistry): void {
        commands.registerCommand(quickCommand, {
            execute: () => this.quickOpenService.open('>')
        });

I'm not sure if modifying the action is actually the best approach here so I've not opened a pull request and thought it best to discuss. This is the change I've made in my fork, which does now close an active menu when opening the command palette.

my preliminary update

    @inject(BrowserMenuBarContribution)
    protected readonly browserMenuBarContribution: BrowserMenuBarContribution;

    registerCommands(commands: CommandRegistry): void {
        commands.registerCommand(quickCommand, {
            execute: () => {
                if (this.browserMenuBarContribution.menuBar) {
                    const activeMenu = this.browserMenuBarContribution.menuBar.activeMenu;
                    if (activeMenu) {
                        activeMenu.close();
                    }
                }


                return this.quickOpenService.open('>');
            }
        });

Any feedback / pointers would be greatly appreciated.

Thanks.