Firefox hide everything except content area of the browser

The easiest way is to install relevant add-ons in Firefox.

For any of the following setup, install the respective add-ons. Firefox may need to restart, but often unnecessary for Firefox Quantum. The shortcut key, if available, can be changed from Add-ons Manager > Extensions for respective add-on.

Firefox has a redesigned keyboard shortcuts section to manage all shortcuts in one place, which has been made available since Firefox 66.

For Firefox Legacy

Setup A uses the following add-ons:

• Hide Navigation Bar, last tested 1.41.1-signed
• Hide Tabbar, last tested 2.1.0.1-signed
• HideScrollbars, last tested 0.2.1-signed

For example, I have used separate keys F3 and F4 to toggle the navigation menu and tab bar (via Hide Navigation Bar and Hide Tabbar) respectively. To hide the bars, press the assigned keys one by one. This will give Firefox with visible title bar or window decoration only.

Limitation: Assigning the same key does not work well, because of some delay in between. The result is similar even if the separate keys were pressed at the same time. Either way, one of the bars will not hide and play hide-and-seek with the user.

Works with Firefox 56 and earlier (Deprecated), but no longer available from Firefox Add-ons. Tested altogether with Firefox 41.0 on Linux. No screenshot.

For Firefox Quantum

Setup B uses the following add-ons:

• New window without toolbar by tkrkt

Go to a web page on HTTP, HTTPS, or localhost, then use the keyboard shortcut or click the corresponding icon on toolbar or "New window without toolbar" in context menu. The web page will additionally open in a new window with visible title bar and vertical scroll bar only.

Keyboard shortcut: Shift+Alt+N (default in 1.3.0)

Limitation: This add-on does not open any page on local filesystem (file:///) and built-in pages (about:*) at all.

Works with Firefox 42 and later. Tested 1.3.0 with Firefox 69.0 on Linux.

Setup C uses the following add-ons:

• Popup window by Ett Chung

Go to a web page, then click the corresponding icon on toolbar or either "Move current tab to pop-up window" or "popup/merge current page" in context menu. The web page will move to a new window with visible title bar and vertical scroll bar only. To revert the new window to a normal tab, click again on "popup/merge current page" in the context menu.

Keyboard shortcut: Not assigned (default in 0.0.8)

Limitation: The pop-up window will always stay on top of original window of Firefox, which can not be changed.

Works with Firefox 53 and later. Tested 0.0.8 with Firefox 69.0 on Linux.

For Firefox without add-on

I have posted a separate answer at below (click or scroll down) that works for any release of Firefox, but not the easiest way and has no keyboard shortcuts.

The native way is to use the custom stylesheet in Firefox: userChrome.css

Firefox does not load userChrome.css by default in Firefox 69 and later. To make the custom stylesheet effective again, open about:config in Firefox and set the preference toolkit.legacyUserProfileCustomizations.stylesheets to true

Before this answer was updated, Mike G wrote a follow-up answer earlier.

How it works

The following code block is the content of userChrome.css that will hide the tab bar, navigation bar and scrollbars in Firefox. Ensure to use valid element names and IDs.

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

/*
 * Hide tab bar, navigation bar and scrollbars
 * !important may be added to force override, but not necessary
 * #content is not necessary to hide scroll bars
 */
#TabsToolbar {visibility: collapse;}
#navigator-toolbox {visibility: collapse;}
browser {margin-right: -14px; margin-bottom: -14px;}

Limitation: No keyboard shortcuts. Tedious to enable or disable on-demand.

• To restore the default interface, rename userChrome.css to other name like userChrome.tmp and restart Firefox to take effect.

• To use side by side with another instance of Firefox with default interface, use a separate profile.

All profiles are stored in the profile folder, which can be located from Firefox using menu bar or toolbar, then navigate to Help > Troubleshooting Information.

How to setup and use

The following are generic steps regardless of system platform.

1. Run Profile Manager of Firefox, then create a new profile named 'hidebars' (any name of choice) and close the Profile Manager.

2. Run a file manager and open the profile folder that was created in step 1.

3. Under the new profile folder, create new files chrome/userChrome.css including the parent folder chrome if does not exist.

4. Copy and paste the content of userChrome.css from above into the created file in step 3.

5. Finally, save and close the file.

To start using, run an instance of Firefox with the new profile.

The following screenshot combo shows Firefox Legacy (left) and Firefox Quantum on Linux, each browsing in small window size when the custom stylesheet is used.

Works with all releases of Firefox, except Firefox 69 and later now disregard userChrome.css by default. Tested with Firefox 10, 20, 50 (Firefox Legacy) and 60, 63, 69 (Firefox Quantum) on Linux and all seemed to work as expected.

References

• This answer by by user1929 on Firefox Support Forum mentioned #TabToolbar element name and ID for modifying tab bar.

• This custom file by Timvde on GitHub mentioned #navigator-toolbox element name and ID for modifying navigation bar.

• This answer by by cor-el on Firefox Support Forum mentioned #content browser element name and ID for modifying scrollbars.

• CSS overflow on w3schools to understand overflow is not necessary.

• CSS visibility Property on w3schools to understand value for visibility.

• What are the implications of using “!important” in CSS? on Stack Overflow to understand !important is not necessary.

• Firefox 60 broke hide scrollbar css and Hide Scrollbar Firefox 60 : FirefoxCSS on reddit.com both suggested to remove #content and leave only browser to properly hide the scollbar.

• Firefox 69: userChrome.css and userContent.css disabled by default on ghacks.net and PSA: Firefox v69 users will have to set a pref to enable userChrome.css and userContent.css on reddit.com both have noted a new preference toolkit.legacyUserProfileCustomizations.stylesheets in about:config.

---

Answerer's note: This answer was written two years later, only after I had suggested using add-ons in the first answer. Since then, several more answers based on userChrome.css were written instead of improving this answer. Hence this answer is now a community wiki, so that anyone with minimum reputation can improve this post to keep up with latest changes in Firefox.

I know this is super late, but I made a bookmarklet for this, it requires no add ons, and no downloads :)

Save the following JavaScript code as a bookmarklet, and click on it on the page which you want to view in a new minimal window:

javascript:void%20function(){window.open(window.location.href,Math.random(),%22menubar=1,resizable=0%22)}();

Click here to make the process easier! | JSfiddle

Note: This should work in all browsers