Theia: Menu not collapsed when clicking on webviews

[DoroNahari]

Bug Description:

Menu not collapsed when clicking on webviews

Steps to Reproduce:

1. Open some webview.
2. Click on the 'file' top menu item
3. Click somewhere on the webview and see the the menu is not collapsed.

screen recording from my local Theia:

Additional Information

• Operating System: Mac Os Catalina
• Theia Version: master 1.1.0

[vince-fugnitto]

@DoroNahari is it something you'd like to work on?

[akosyakov]

I guess it is related to how phosphor deals with iframes. Maybe it does not care at all.

[EstherPerelman]

This issue happens also for sidebar-bottom-menu-widget (the settings menu on the bottom left),

@akosyakov @vince-fugnitto Can you advice me please What is the better solution:

1. Fix on the webview page -> listen to node focus (a focus listener already exists) -> dispatching 'mousedown' event (solves this issue also for the settings-menu on the bottom left).

2. Fix on browser-menu-plugin -> listen to focus iframe event and close menu (It will be available for any other iframe, but still not resolves the settings-menu on the bottom left and any future menus...), It's blocked by #8572 (I opened it because it stuck this solution)

[vince-fugnitto]

This issue happens also for sidebar-bottom-menu-widget (the settings menu on the bottom left),

@EstherPerelman I did not have time to look at the issue myself, but the solution should fix the menu dismissal for all menus when focusing a webview (main-menu, context-menus of editors, widgets, sidepanels). For the first solution, how are you dismissing the menus (I don't believe that webviews should know or be responsible of explicitly closing menus).

[EstherPerelman]

@vince-fugnitto For the first solution - dispatching a 'mousedown' event solved it because 'phosphor' listening to 'mousedown' event and close the menu - all the other widgets dispatching 'mousedown' automatically on user click but on iframe click - we need to do it manually..

[vince-fugnitto]

@vince-fugnitto For the first solution - dispatching a 'mousedown' event solved it because 'phosphor' listening to 'mousedown' event and close the menu - all the other widgets dispatching 'mousedown' automatically on user click but on iframe click - we need to do it manually..

@EstherPerelman thank you for clarifying, please feel free to submit a pull-request with these changes so we can review :+1: