The problem#

Web browser UIs have a lot more than just displaying the web page, which is useful when using them as a browser, but clutters the screen if all we want is to define what is displayed on part of the screen using HTML. So, can we get Firefox into a mode where it really does show just the website and nothing else? Firefox does have a fullscreen mode that does that, but it covers an entire monitor.

The solution#

To hide all of the Firefox menus and toolbars, put the following in the chrome/userChrome.css file under your Firefox profile directory (you will likely want to create a separate profile from the one you use for web browsing):

#TabsToolbar, #TabsToolbar-customization-target,
#nav-bar, #urlbar-container, #searchbar {
  visibility: collapse !important;
}

To hide the window border and titlebar, compile toggle-decorations.c and run

firefox &
./toggle-decorations $(xdotool selectwindow)

and then click on the Firefox window once it opens. It may be easier to bind it to a hotkey with xdotool getactivewindow or use some other way to identify the window.

The details#

<iframe>#

My first idea was to simply have a single browser window using Firefox's built-in support for fullscreen which hides all of the toolbars by default, and define the parts of the screen using HTML. The problem is that modern browsers have security features blocking arbitrary websites from being embedded in an <iframe>, so such a solution would be limited to displaying websites that I controlled. I considered workarounds like running a proxy or downloading websites and rehosting them locally, but have not yet attempted either.

Fake fullscreen#

My previous blog post discussed my research into tricking applications into being "fullscreen" on only part of the screen, so then I could still use Firefox's fullscreen mode. As that didn't result in a particularly useable solution, I decided to look into other options.

userChrome.css#

Firefox's chrome (not to be confused with the Google Chrome browser, which is named after the concept) is customizable via the userChrome.css. Explanations of how to do so and examples can be found at userChrome.org. The above was the result of experimentation and finding help on removing different parts of the UI like the tabbar.

Removing window decorations#

I actually posted a different method of removing window decorations in an earlier blog post, but it uses an old version of GTK so it doesn't work anymore. I spent a long time trying different things with the current version of GTK/GDK and other APIs for manipulating X state from Python or shell tools like xprop, but I could not figure out how to get any of them to work.

To not worry about calling the tool multiple times, the remove-decorations.c variant may be easier to use.

Selecting the right window#

toggle-decorations requires a window ID, which you can get from xdotool or wmctrl in various ways:

• Next window clicked on: xdotool selectwindow
• Currently active window: xdotool getactivewindow (note that if run at a command line, this is probably your terminal)
• Search by title: xdotool search --name Firefox
• Search by PID

Depending on the use case, it might make sense to watch for new windows and remove decorations from them if they match the PID of the Firefox process. Perhaps this code for watching for changing to focus could be modified to watch for new windows. But that's probably overkill as you likely know when new windows are created because you presumably opened then intentionally.