New origin trial for fullscreen popup windows

Imagine you want to open a popup window in fullscreen mode. Until now, opening a
fullscreen popup window consisted of two steps:

From the main app window, calling the
window.open()
method that requires a user gesture like the click on an Open popup
window button.
From the popup window, calling the
Element.requestFullscreen()
method, which likewise requires a user gesture like the click on an Enter
fullscreen mode button.

There’s now a new
origin trial
available running from Chrome 119 (stable date): October 31, 2023 to Chrome
122 (stable date): February 20, 2024 for opening popup windows in fullscreen
mode with just one step. Click Register on the
Open popups as fullscreen windows
origin trial landing page to sign up.
Apart from the origin trial, you can also test locally
by setting the chrome://flags/#fullscreen-popup-windows flag to Enabled.

This new feature is gated behind the
window-management
permission. Once the user has granted the permission, you can open a fullscreen
popup window as in the following example.

document.querySelector('.fullscreen-popoup-button').addEventListener('click', async (e) => {
if ((await navigator.permissions.query({name: 'window-management'})).state !== 'granted') {
// Permission not granted. Call `window.getScreenDetails()` to prompt.
await window.getScreenDetails();
}
// Permission granted. Open the fullscreen popup window.
  window.open('https://example.com/popup.html', '_blank', 'popup,fullscreen');
});

In the last line of the code sample, the first parameter is the
url to
open in the popup window. The second parameter is the
target,
with the special value of
_blank.
The third parameter is for the
windowFeatures,
a comma-separated string with the value
popup for
opening a popup window and the new value fullscreen for opening the popup
window in fullscreen mode. This works with just one user gesture, therefore can
be activated with a single click on a button.

This feature really shines in combination with the
Window Management API
which lets you obtain information about all the screens the user has connected
to their computer. For example, to open a fullscreen popup window on another
screen than the user’s current screen, you need to first
find the other screen
and then pass its availLeft, availTop, availWidth, and availHeight
values to the corresponding left, top, width, and height values of the
windowFeatures string.

document.querySelector('.fullscreen-popoup-button-other-screen').addEventListener('click', async (e) => {
const screenDetails = await window.getScreenDetails();
  const otherScreen = screenDetails.screens.find(s => s !== screenDetails.currentScreen);
  window.open('https://example.com/popup.html', '_blank', `left=${otherScreen.availLeft},` +
`top=${otherScreen.availTop},` +
`width=${otherScreen.availWidth},` +
`height=${otherScreen.availHeight},` +
`fullscreen`);
});

It’s not required to add popup in the windowFeatures strings here, as it’s
implicitly assumed when any of left, top, width, or height is defined.

Demo

Try fullscreen popup windows in the
demo and
view the source code.
Be sure to check the fullscreen checkbox and the Fullscreen popup button, and,
if you have the opportunity, play with the demo with multiple screens attached to
your device.