"Out-of-frame" fully-renderer-backed menu support


#1

There’s a certain type of control that I keep wanting to reach for in my Electron projects, but which seems like a whole lot of work (and fancy IPC interaction) to create in pure Javascript. The control is basically a kind of context menu—it should be positioned relative to a DOM element in another window, be on top of the entire other renderer window, and be able to poke “outside” of the bounds of the frame, all like context menus do. But, unlike a context menu, I want this thing to be a full webview.

Basically, I’m picturing the pop-up bubbles OSX uses in various places, like the LookUpViewService control, or the character-picker control.

This would be hard to create in pure Javascript: you’d have to create a frameless window, style it with a custom frame that matches the style of the current OS, associate that window in your app’s internal logic as a child of another window, make its position track the viewport position of a DOM element in the parent window (a piece of text being shifted by the app while a pop-up bubble is open also moves the pop-up bubble around to follow it), write some IPC code to get events passing back and forth between the two windows, etc. It’d be like implementing OS tooltips or an Input Method Editor control in Javascript: kind of nonsensical, and really something better left to the browser rendering layer.

Right now, Electron apps all have a very particular MDI window style, that has to do with the difficulty of using BrowserWindows as if they were native custom-window-class child-window controls. Making this easier to do—even in limited cases—would open up a lot of possibilities.