Allow an output to go into full-screen mode

[rebornix]

Some jupyter notebook renderers support opening output in full screen, we will explore what that means in VS Code environment.

[rebornix]

After playing with it a bit, I found interesting inconsistency with Electron webview, iframe and iframe in Web.

How to reproduce

Open an ipynb file which has a HTML output and that HTML output can call requestFullScreen. For example, install .NET Interactive Notebook and then open following file

{
    "cells": [
        {
            "source": [
                "!pip install nglview"
            ],
            "metadata": {
                "language_info": {
                    "name": "python"
                }
            },
            "cell_type": "code",
            "outputs": [
                {
                    "output_type": "stream",
                    "text": "DEPRECATION: Python 2.7 reached the end of its life on January 1st, 2020. Please upgrade your Python as Python 2.7 is no longer maintained. pip 21.0 will drop support for Python 2.7 in January 2021. More details about Python 2 support in pip can be found at https://pip.pypa.io/en/latest/development/release-process/#python-2-support\nWARNING: You are using pip version 20.2.1; however, version 20.3.3 is available.\nYou should consider upgrading via the 'c:\\users\\rebor\\.windows-build-tools\\python27\\python.exe -m pip install --upgrade pip' command.\n"
                }
            ],
            "execution_count": 1
        },
        {
            "source": [
                "import nglview\n",
                "\n",
                "view = nglview.show_pdbid(\"3pqr\")\n",
                "\n",
                "view"
            ],
            "metadata": {
                "language_info": {
                    "name": "python"
                }
            },
            "cell_type": "code",
            "outputs": [
                {
                    "output_type": "display_data",
                    "data": {
                        "text/html": [
                            "<script src=\"vscode-webview-resource:/c%3A/Users/rebor/.vscode-web-dev/extensions/vscode.notebook-test-1.0.0/dist/ipywidgets.js\"></script>\n"
                        ]
                    }
                },
                {
                    "output_type": "display_data",
                    "data": {
                        "text/html": [
                            "<div id=\"test\">Hello!</div>",
                            "<button onclick=\"document.getElementById('test').requestFullscreen()\">Click Here</button>"
                        ],
                        "text/plain": [
                            "NGLWidget()"
                        ]
                    }
                }
            ],
            "execution_count": 2
        },
        {
            "source": [
                ""
            ],
            "metadata": {
                "language_info": {
                    "name": "python"
                }
            },
            "cell_type": "code",
            "outputs": [],
            "execution_count": 3
        }
    ],
    "metadata": {
        "kernelspec": {
            "display_name": "Python 2",
            "language": "python",
            "name": "python2"
        },
        "language_info": {
            "codemirror_mode": {
                "name": "ipython",
                "version": 2
            },
            "file_extension": ".py",
            "mimetype": "text/x-python",
            "name": "python",
            "nbconvert_exporter": "python",
            "pygments_lexer": "ipython2",
            "version": "2.7.15"
        }
    },
    "nbformat": 4,
    "nbformat_minor": 4
}

and then click the button in the output

Behaviors

• VS Code Desktop, webview

  • VS Code goes fullscreen, the webview goes fullscreen as well (you can tell from its black background). However the DOM elements in the main frame is still visible
    

• VS Code Desktop, iframe

  • Nothing happens as requestFullScreen is not allowed

• VS Code Web

  • Nothing happens as requestFullScreen is not allowed

Behaviors if we set allowFullScreen on iframes

• VS Code Desktop, iframe

  • Still nothing happens, but without any error

• VS Code Web

  • It works as expected like below screenshot

  

Expected behavior

It's questionable if we want to allow fullscreen request from the webview but either way we should align the experience and here are what we need to archive that

• Allow fullscreen
  • Add allowFullscreen property on iframes
  • Fix the problem that iframe doesn't go full screen @deepak1556
  • Fix the problem that main frame DOM elements are still visible when Webview element goes fullscreen @deepak1556
• Disallow fullscreen
  • We need to disallow fullscreen request from the Webview, not sure what we need to add to the webview element @deepak1556

I would love to seek help from @deepak1556 about if Electron is misbehaving somehow and what we can do to improve (I put your name after those items which I need your deep insight into Electron webview, they are not assignments).

[rebornix]

FYI @mjbvz as you might see similar behaviors in Webview #110766 (comment)

[rzhao271]

The current goal is to get webviews working in full-screen mode.
Made a minimal repro today which demonstrated that full-screen mode works for an iframe inside another iframe, but not for an iframe inside of a webview.

[rebornix]

We now moved to iframe on desktop, this is now a feature request as we don't support this at all in all platforms.

[dmalan]

Hi @rebornix @deepak1556 @rzhao271, just to chime in with another use case for full-screen mode, now that VS Code includes a number of audio and video codecs, per #156558 and #118275 (thanks to @isidorn @mjbvz), it'd be great if videos could be full-screened as well. Currently, if you embed a YouTube video in a webview (e.g., in a previewed README.md), a la

<iframe allow="fullscreen" allowfullscreen src="https://www.youtube.com/embed/B-s71n0dHUk" ></iframe>

YouTube's full-screen icon remains disabled, presumably because that iframe is nested in VS Code's own (which don't have the same):

In our use case, the intent is to embed instructional videos for @cs50 within rendered Markdown files (in the primary sidebar), and on small screen sizes, it'd indeed be ideal if students could pop out and full-screen the videos.

Thank you!

CC @rongxin-liu

[rajkundu]

+1: When I try to view a local .mp4 file, the fullscreen button is disabled.

[matthewjamesadam]

Our extension has a webview that displays videos, and we would also like to be able to full-screen them. Webview size can be quite constrained depending on the editor layout the user has selected, and our videos can be fairly large, so allowing the user to pop open a video full-screen would make a large difference in the usability of our extension.

[deepak1556]

@rebornix do you want to pursue this issue for notebooks ? For video the issue is tracked under #194433

[rebornix]

@deepak1556 that would be lovely to allow this, at least some of the mimetypes, for example video.

[zhouxinghong]

+1