Support z-ordering for BrowserView

[Tim91084]

Is your feature request related to a problem? Please describe.
Maybe? If the goal is to get people to move away from <webview>, it would be nice to be able to layer things on top of a BrowserView.

Describe the solution you'd like
A BrowserWindow hosting a BrowserView should be able to position an html element above (on top of) the BrowserView

Describe alternatives you've considered
I'm mainly using the <webview> because of this.

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[jdfwarrior]

I'd like to vote this as well. I'm currently kicking around the idea of an app with multiple BrowserViews. A primary view (loaded as a plugin) and then a mini view in the bottom right but it would need to overlay the first one, requiring an ability to set z-index

[Xylobol]

Sorry for necromancing this thread, but I'd like to bring this issue back to life, as we can now add multiple BrowserViews to BrowserWindows (without any apparent way to layer) - this would be a huge help to many projects I can think of.

[ramanamatya]

Any update on this ?

[headfire94]

Any ideas about how to achieve this behavior until we wait for electron support?

[sentialx]

It would be great if we could call something like win.addBrowserView(browserView, zIndex).

[johndevor]

Or win.setBrowserViewZIndex(browserView, zIndex);

[ianwieds]

Sorry to revive this but I noticed that Beaker uses BrowserView and it is able to get a context menu to display above the BrowserView (click the icon to the right of the nav bar in Beaker to see). I have been exploring the source but I cannot really figure out how they are doing this, as the code is a little advanced for me. If anyone wants to explore it there might be a solution living somewhere in there. I believe it's in this file but, again, I'm not sure: https://github.com/beakerbrowser/beaker/blob/master/app/shell-menus.js

[pfrazee]

We just control the order in which browserviews are added to the window. Later additions go in top

…

On Jan 12, 2020, at 3:54 AM, Ian ***@***.***> wrote:  Sorry to revive this but I noticed that Beaker uses BrowserView and it is able to get a context menu to display above the BrowserView. I have been exploring the source but I cannot really figure out how they are doing this, as the code is a little advanced for me. If anyone wants to explore it there might be a solution living somewhere in there. I believe it's in this file but, again, I'm not sure: https://github.com/beakerbrowser/beaker/blob/master/app/shell-menus.js — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[MystWalkerOfficial]

Any updates about this? i don't know if webview tag is practical for usage of normal users

[zcbenz]

I see there are actually 2 things requested in this issue:

1. Support putting an HTML element of the BrowserWindow above BrowserView.
2. Support changing the z-order of multiple BrowserView.

The first one is unfortunately impossible, and I'll try to add a few APIs to implement the second request.

[redhat]

I see there are actually 2 things requested in this issue:

1. Support putting an HTML element of the BrowserWindow above BrowserView.
2. Support changing the z-order of multiple BrowserView.

The first one is unfortunately impossible, and I'll try to add a few APIs to implement the second request.

any news about this?

[chenzhutian]

I see there are actually 2 things requested in this issue:

1. Support putting an HTML element of the BrowserWindow above BrowserView.
2. Support changing the z-order of multiple BrowserView.

The first one is unfortunately impossible, and I'll try to add a few APIs to implement the second request.

Any possible workaround for the first one without using webview and iframe?

[mckravchyk]

@chenzhutian Create a new BrowserView to contain the element and display it over underlying BrowserView. Since z-ordering of BrowserViews is not yet implemented, you have to ensure that the overlaying BrowserView is created after the underlaying view so it's on top as @pfrazee suggested.

[fermion-boson]

Guys, I have a solution. Maybe you can try it.
Put the content of the main page in a BrowserView and put it on top through setTopBrowserView()

[wslp12]

@fermion-boson
That's a good idea.
However, if there are more things to display on the screen, we need to use a lot of addBrowserView and the memory occupancy increases, so I wonder how you solved this problem.

[victorzhrn]

I would very much vote for this ftr

[pie6k]

Guys, I have a solution. Maybe you can try it. Put the content of the main page in a BrowserView and put it on top through setTopBrowserView()

@fermion-boson oh my. I just wanted to let you know I was fighting this issue for a few days and now I feel like total idiot.

Let me (for fun) tell you how I solved it:

I created new window called 'overlay window' with window.open with bunch of custom handling. Custom handling = overlay window is following main window size and position, managing and releasing focus, then managing setIgnoreMouseEvents when you hover over any clickable element inside overlay window, managing vibrancy effect to avoid flicker when main window blurs/focuses, managing main window shadow when it is blurred/focused. Then having that window via window.open - I was using react portal to render content from main window to this overlay window having nice, declarative react component <OverlayWindow>Stuff</OverlayWindow>. After tons of struggle I managed to make it feel like it is the same window (with exclusion of shadow flicker of focus switching from main <> overlay window.

Why did I not think about soultion you mentioned - I have no idea and I would really really want to know.

Thank you!

[asd281533890]

Sorry to revive this but I noticed that Beaker uses BrowserView and it is able to get a context menu to display above the BrowserView (click the icon to the right of the nav bar in Beaker to see). I have been exploring the source but I cannot really figure out how they are doing this, as the code is a little advanced for me. If anyone wants to explore it there might be a solution living somewhere in there. I believe it's in this file but, again, I'm not sure: https://github.com/beakerbrowser/beaker/blob/master/app/shell-menus.js

Beaker is most likely to be implemented with webview.

[anonmate]

Will this get a solution @ckerr @zcbenz? Currently the only solution are child windows, which are pretty clunky to have to load and not very responsive for things like context menus over web content.

Really it's a defining feature that may force our project to move to something like CEF which would cost us a tonne of resources to rebuild

[tildahl]

You can do this for context menus, but not a general solution. You have to use the electron Menu class.

viewWebContents.on("context-menu", (event, params) => {
	const template: MenuItemConstructorOptions[] = [
		{label: "Menu Item 1"},
		{ type: "separator" },
		{ label: "Menu Item 2" },
	];
	const menu = Menu.buildFromTemplate(template);
	menu.popup();
});

[RitvarsZ]

any news about this?

[kankanai]

any news about this?

,i need z-index set , setTopBrowserView is not good work

[ayushete02]

any update about z-index of window??

[astrarudra]

Yea, we need this!