I use macOS spaces (virtual desktops) to arrange the various apps I frequently use. I have one space setup with two Firefox windows, in fullscreen Split View mode. But by default, Firefox windows are not really “full screen” for me, in that the tabs, toolbar and bookmarks bar will still be displayed. Here is my workaround to force the browser to full screen.

Problem Statement

To clarify, fullscreen split view looks like this, and what I'm trying to achieve, I mocked up these images.

What I want to do is get rid of the tabs and toolbar in the left browser:

To be left with:

Left image from Introducing WhatsApp's desktop app

There may be browser extensions to do this, but my default “do not trust” position precludes me from using them! :P

So, I wanted to run a bit of code in the Developer Tools console and trigger the FullScreen API that many browsers support.

Issue

Simply calling the API document.documentElement.requestFullscreen(), directly from the console, does not work. In Firefox I get this error, though in Safari, it just fails quietly.

Request for fullscreen was denied because Element.requestFullscreen() 
was not called from inside a short running user-generated event handler

The solution is to call the API from an onClick event instead.

Solution

First off, setup fullscreen Split View with two brower windows as shown above.

Next, for the browser that needs to be in full screen, open the developer tools console, via:

• Option-Command-I which is consistent across Firefox, Chrome and Safari, or
• Right-click > Inspect or Inspect Element, or
• via the appropriate menu item.

For Firefox and Chrome, chuck in this code in the console:

var b = document.createElement("button");
b.onclick = function() { document.documentElement.requestFullscreen(); b.remove() };
b.style = "all:reset;position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;background-color:lightpink";
b.innerText = "Full Screen";
document.body.appendChild(b);

The style overrides other CSS and simply creates a large Light Pink button filling the entire browser window. Click it, and the browser will finally be real in fullscreen mode.

To exit full screen, hit the Escape key.

Or run:

document.exitFullscreen()

Safari

For the odd-duck known as Safari, use webkitRequestFullScreen() instead:

var b = document.createElement("button");
b.onclick = function() { document.documentElement.webkitRequestFullScreen(); b.remove() };
b.style = "all:reset;position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;background-color:lightpink";
b.innerText = "Full Screen";
document.body.appendChild(b);

I can’t be bothered, but if you want the code to check for both, then replace the second line with b.onclick = function() { var e = document.documentElement; e.webkitRequestFullScreen ? e.webkitRequestFullScreen() : e.requestFullscreen(); b.remove() }

And, similarly, to exit:

document.webkitExitFullScreen()

For me Safari always leaves a bank space where the Developer Tools Console use to be. So I have to re-open the console and then close it for the page to render again.

BONUS:

Want to quickly do this without the manual steps? Create a bookmarklet.

Create a new bookmark - I called mine “FS” - and instead of a Location URL, put this code instead (all in one line):

javascript:(function(){var b=document.createElement("button");b.onclick=function(){document.documentElement.requestFullscreen();b.remove()};b.style="all:reset;position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;background-color:lightpink";b.innerText="Full Screen";document.body.appendChild(b);})();

In many browsers, simply select the enitre line above, and drag it into the bookmarks toolbar. That’s it!