Can I test the API using local files?

jjeff commented 3 years ago

I'm excited about these features for an Electron app that I'm building which is aimed at a dual screen workflow very similar to PowerPoint, but is aimed at people displaying visuals for live performances.

Apologies if I'm posting in the wrong place here. Please feel free to send me elsewhere.

I've been testing and although I can enable the flags and get the API to show up in Chrome/ium 87 (e.g. window.getScreens() works). However, when I actually send something similar to

(async (i) => { document.documentElement.requestFullscreen({ screen: (await window.getScreens())[i] }) })(1)

it will only ever fullscreen on the current screen. Upon further testing, I can this script to target other screens in the JS console for the Glitch Demo page, so I'm guessing that I need an origin-trial token in order to actually get the content to fullscreen. Is that true?

If so, is there a way that I can get it working in Electron where my URLs are file://? It seems that you can't get a key without a public origin.

I realize that all of this is perhaps not quite ready for primetime and maybe I'll just need to wait, but it's going to solve a lot of problems for me, so I'm really excited!

tomayac commented 3 years ago

Not an Electron.js expert, but apparently you can enable experimental web platform features (the Chrome flag that would enable this API) as outlined here:

new BrowserWindow({ webPreferences: { experimentalFeatures: true } })

jjeff commented 3 years ago

Yes, I have experimentalFeatures enabled in Electron… and I'm able to see the API. For instance, window.getScreens() works. But I'm seeing the same behavior in Chrome as well, so I don't think this is an Electron issue.

If I open a local file in Chrome and try to run this code in the console, it will not open on the 2nd screen. It will only open on the current screen:

(async (i) => { document.documentElement.requestFullscreen({ screen: (await window.getScreens())[i] }) })(1)

It seems like Chromium currently ONLY allows the use of el.requestFullscreen({ screen: screenObj }) if there's an origin-trial token, regardless of using a secure origin such as file://.

jjeff commented 3 years ago

Here's a test page if anyone wants to try it out for themselves. It will generate a button for each screen. However, pressing any button will aways target the current screen.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fullscreen Test</title>
    <link rel="stylesheet" href="">
  </head>
  <body>

    <h1>Fullscreen Test</h1>

    <div>Fullscreen on:</div>

    <div id="buttons"></div>

    <script>
      async function permission () {
        let granted = false;
        try {
          const { state } = await navigator.permissions.query({ name: "window-placement" });
          granted = state === "granted";
        } catch {
          // Nothing.
        }
        return granted
      }

      permission().then((result) => console.log(result))

      async function makeButtons() {
        document.getElementById('buttons').innerHTML = ''
        const screens = await window.getScreens()
        screens.forEach((scr) => {
          let btn = document.createElement('button')
          btn.innerHTML = `Screen ${scr.id}`
          btn.onclick = async (e) => { 
            document.documentElement.requestFullscreen({screen: scr})
            console.log(scr.id, scr)
          }
          document.getElementById('buttons').appendChild(btn)
        })
      }

      window.addEventListener('screenschange', (event) => {
        makeButtons()
      });

      makeButtons()

    </script>
  </body>
</html>

tomayac commented 3 years ago

I have just remixed the official demo and removed the OT token, so it runs based on the experimental web platform features flag. If you click on any of the popups, it goes fullscreen on the opposite screen (note the hole where the popup was):

I determine the other screen like so:

    const screens = await getScreensInfo();
    let otherScreen = screens.filter(
      screen => screen.id !== e.view.screenId
    )[0];
    if (!otherScreen) {
      otherScreen = screens[0];
    }
    await body.requestFullscreen({
      screen: otherScreen
    });

michaelwasserman commented 2 years ago

Thanks for testing the API in Electron and raising this feedback. This seems like an Electron implementation bug, rather than an API spec issue, so I think the Electron issue you filed is the most appropriate venue for following up on this topic: https://github.com/electron/electron/issues/31103

michaelwasserman commented 2 years ago

FWIW, I have been able to test API usage with local development files by running a local python server; e.g. python -m SimpleHTTPServer and navigating to the localhost url in Chromium

w3c / window-management

Can I test the API using local files? #46