Skip to content

Calling setBounds on a BrowserView before it's associated with a window results in nothing happening #20064

@koralcem

Description

@koralcem

Preflight Checklist

  • I have read the Contributing Guidelines for this project.
  • I agree to follow the Code of Conduct that this project adheres to.
  • I have searched the issue tracker for an issue that matches the one I want to file, without success.

Issue Details

  • Electron Version:
    • 6.0.6
  • Operating System:
    • macOS 10.14.6 and Windows 10
    • Didn't have a Linux environment to test
  • Last Known Working Electron version:
    • Unknown

To Reproduce

When I run the sample code given in the BrowserView docs in the main process, everything works as expected; I get a 300 x 300 view inside an 800 x 600 window, and the Electron site loaded in it.

But then I flip the ordering of the win.setBrowserView() and view.setBounds() calls (and keep everything else the same). In other words I'm running the following code:

// In the main process.
const { BrowserView, BrowserWindow } = require('electron')

let win = new BrowserWindow({ width: 800, height: 600 })
win.on('closed', () => {
  win = null
})

let view = new BrowserView()
view.setBounds({ x: 0, y: 0, width: 300, height: 300 })  // <-- this line moved up
win.setBrowserView(view)
view.webContents.loadURL('https://electronjs.org')

Expected Behavior

I expected the same output as the previous run; a 300 x 300 view embedded in the window, showing the Electron site. But part of this issue is also a question as to whether that expectation is even correct (see below).

Actual Behavior

Nothing happens. I simply see a blank white window, the Electron site doesn't show, and I see no errors in the console for my main process. I'm not clear if the view didn't get appended to the window at all, or if it did but has no content.

Additional Information

Honestly, I'm mainly opening this issue to ask a question. I didn't find a way to be able to do that besides an issue. If there is a way, please let me know and we can move the discussion there.

My question is: Is it valid to call setBounds on a BrowserView before it's associated with a BrowserWindow? The documentation mentions that setBounds "Resizes and moves [...] relative to the window." So is it not valid to do so without the view being added to a BrowserWindow first?

If so, is there another way to set the size of a BrowserView before associating it with a BrowserWindow? I noticed its constructor doesn't take width & height arguments...

Let me also take a step back and explain the use case. We'd like to have a couple different views with content loaded ahead of time, such that by the time we show them to the user they don't have to wait for any "Loading..." screens/animations. We were thinking of accomplishing this by having a handful of BrowserViews and just swapping them in & out of our BrowserWindow at appropriate times. As it stands right now, we have to set the bounds of a BrowserView after associating it with the window, which causes some charts we have on the page to redraw since they are being resized. They don't draw super fast though, which means the user sees the artifacts we were trying to avoid in the first place.

If anyone has ideas on how to approach this challenge (even outside of swapping BrowserViews) I would greatly appreciate it.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions