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.

[vscode-triage-bot]

Pinging notebook topic followers: @claudiaregio @rchiodo @greazer @DonJayamanne @jilljac

[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

Details

{
    "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)