fix: BrowserViews not painting their WebContents

[codebytere]

Description of Change

Closes #29859.

Fixes an issue where BrowserViews would appear not to load their webContents. Further investigation showed that it was in fact not that the webContents weren't being loaded, but that they weren't being painted properly. If I tried to open devTools on the webContents or called setBounds after the initial URL load it would work - this tracked back to Layout in inspectable_web_contents_view_views.h and to a hierarchy change in https://chromium-review.googlesource.com/c/chromium/src/+/2780032. Essentially, the change meant that Layout was no longer called by Chromium in some of the places it was before.

To fix this, I added an override for RenderViewReady and called into Layout() so that paints would happen properly again when they were supposed to.

To verify:

const { BrowserView, BrowserWindow, app } = require('electron')

app.whenReady().then(async () => {
  let win = new BrowserWindow({ width: 800, height: 600 })
  win.on('closed', () => {
    win = null
  })
  const view = new BrowserView({
    webPreferences: {
      nodeIntegration: false
    }
  })
  win.setBrowserView(view)
  view.setBounds({ x: 0, y: 0, width: 800, height: 600 })
  await view.webContents.loadURL('https://electronjs.org')
})

Checklist

• PR description included and stakeholders cc'd
• npm test passes
• PR release notes describe the change in a way relevant to app developers, and are capitalized, punctuated, and past tense.

Release Notes

Notes: Fixed an issue where BrowserView webContents would appear not to load in some circumstances.

[nornagon]

I'm skeptical that DidFinishNavigation is the right place to hook into to call Layout() from. What lead you to that conclusion?

Should we be calling this instead when the view is added to the hierarchy?

[codebytere]

@nornagon i was seeking something I could guarantee would be after the webContents finished loading - i also tried RenderFrameCreated to no success. What were you envisioning? Happy to try something else!

[zcbenz]

#29607 also looks similar.

Can you check if the contents_web_view_ in InspectableWebContentsViewViews has a proper size? My first instinct is that contents_web_view_ somehow did not get sized after before loading URL.

[codebytere]

@zcbenz looks like the bounds are correct in both cases, unfortunately.

[zcbenz]

It seems that changing the size of views::WebView no longer changes the size of WebContents if RenderWidget is not ready, this behavior makes sense to me but I don't know why resizing used to work.

Calling Layout() in DidFirstVisuallyNonEmptyPaint or RenderViewReady should be able to work around the problem.

BrowserWindow has this code so it is probably why it does not suffer from this problem:

electron/shell/browser/api/electron_api_browser_window.cc

Lines 156 to 165 in 385d0f5

	void BrowserWindow::DidFirstVisuallyNonEmptyPaint() {
	if (window()->IsClosed() || window()->IsVisible())
	return;
	// When there is a non-empty first paint, resize the RenderWidget to force
	// Chromium to draw.
	auto* const view = web_contents()->GetRenderWidgetHostView();
	view->Show();
	view->SetSize(window()->GetContentSize());
	}

Also note that the above code came from #6026, and since the implementation of ready-to-show event has changed we should probably remove it, or update its comments if it is still needed.

[codebytere]

Using RenderViewReady works! Updated.

[release-clerk]

Release Notes Persisted

Fixed an issue where BrowserView webContents would appear not to load in some circumstances.

[trop]

I have automatically backported this PR to "14-x-y", please check out #30335

[trop]

I have automatically backported this PR to "15-x-y", please check out #30336

[codebytere]

/trop run backport-to 13-x-y

[trop]

The backport process for this PR has been manually initiated - sending your PR to 13-x-y!

[trop]

I have automatically backported this PR to "13-x-y", please check out #31047

[TianbinTobin]

win.setBrowserView(view)
await view.webContents.loadURL('https://electronjs.org')
view.setBounds({ x: 0, y: 0, width: 800, height: 600 })

I tried it better this way