64

Is there a possibility to hide all borders and bars in firefox like address bar, navigation bar, window title and tabs, so the remaining area is just the content area of the browser?

I would like to make a movie of a web application I wrote, but have to film it in a bigger resolution than the app itself. I simply want to show the app on a background without all the browser stuff.

The best method would be via keyboard shortcut, so that I can reenable all the stuff again.

3
  • 1
    Is pressing F11 not enough? Sep 25, 2015 at 5:58
  • 9
    Pressing F11 would hide other windows, which is especially problematic with tiling window managers. Nov 28, 2017 at 11:43
  • OBS can solve this without modding firefox by cropping
    – Jonathan
    Jun 10, 2019 at 17:09

11 Answers 11

35

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:

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.

New window without toolbar by tkrkt

Setup C uses the following add-ons:

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.

Popup window by Ett Chung

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.

2
  • 3
    It would be great if there were a single extension that does what the OP asks for instead of having to turn bars on and off individually. And toggles by turning back on what was showing when the extension hid all the bars. Apr 16, 2016 at 14:23
  • 2
    Note: the solution for tabs doesn't work on newest Firefox versions anymore. I wrote a tab-targeted QA here: superuser.com/questions/1268732/… Nov 15, 2017 at 21:12
24

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

5
  • 3
    This is the best solution imho, it's an actual new "window". The trade-off being that the url bar is still there but that's good enough for me. Thank you.
    – sirfz
    Sep 19, 2019 at 15:23
  • @sirfz Glad I could help :)
    – undo
    Sep 19, 2019 at 21:03
  • 2
    Works great! How do I hide the address bar also? Oct 24, 2020 at 12:20
  • Thanks, works perfectly in Chrome too. As other users have mentioned, the address bar remains visible, but its height decreases. The height of the title bar plus the address bar will be roughly equal to half of the total height of the tab bar, address bar and bookmark bar in the default look. BTW, the jshell link is dead.
    – saastn
    Sep 9, 2022 at 14:34
  • You can replace menubar=1,resizable=0 with just popup=1, and it gives the desired result in Firefox. (Still no way to remove the address bar however.)
    – daviewales
    Aug 17, 2023 at 23:30
24

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.

Firefox Legacy and Firefox Quantum with no bars

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


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.

4
  • 1
    you might want to mention that the profile folder is under ~/.mozilla/firefox/ on linux
    – hansaplast
    Jan 16, 2018 at 16:04
  • 1
    Updated answer. The cross-platform way is preferred, which is to locate from Firefox itself: Help > Troubleshooting Information, under Application Basics, click "Open Directory".
    – user109256
    Jan 19, 2018 at 9:45
  • how to do this in selenium usage (jave) because they also have firefoxoption too...?
    – gumuruh
    May 20, 2022 at 1:35
  • i wish i could implement this on selenium + firefox driver programatically.....
    – gumuruh
    May 20, 2022 at 2:13
9

I know it's late, but maybe someone will like.

If you just want to hide the Firefox UI elements until they are needed then maybe my userChrome.css is for you. (working on FF 70.0.1)

  • Entire navigation toolbox is hidden until focused with Ctrl-L, F6, and the like

To hide the tab-bar you'll need to use Firefox's customize (just right-click on the tab-bar) to pull the newtab (+) button off the tab-bar, and make sure you're using the system's Titlebar (so that the window min, max, and close buttons aren't on the tab-bar). Otherwise, those buttons will hinder the hiding.

Instructions on where to put the userChrome.css file and how to active it can be found in this excellent post: https://superuser.com/a/1269912/1107142

My quick summary:

  • on about:config page toggle toolkit.legacyUserProfileCustomizations.stylesheets to true
  • get Profile Directory from about:support page
  • create a directory called chrome in your Profile Directory
  • put userChrome.css file in that chrome directory

My userChrome.css, copy and paste at will:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#navigator-toolbox {
    height: 0px !important;
    min-height: 0px !important;
    overflow: hidden !important;
}

#navigator-toolbox:focus,
#navigator-toolbox:focus-within,
#navigator-toolbox:active {
    height: auto !important;
    overflow: visible !important;
}
2
  • This works, thank you! Now I can use i3 for browser tabs, and enjoy a minimal UI with decent window and tab management. I edited the answer so that we can see drop-down suggestions from the URL bar when it is selected. Hope that's okay. :) Apr 16, 2023 at 21:31
  • Love this. Now my browser chrome is minimal until I actually hover or focus it (by adding #navigator-toolbox:hover, and setting the size to 15px instead of 0). Sep 1, 2023 at 23:31
4

I love Firefox and Vivaldi. One of the best features of Vivaldi (me being a user of mouse gestures) is that it has so many options (sidebars, bookmarks, addressbar, status bar etc) that can be adjusted and moved...

One shortcut says 'Hide UI'. Everything disappears... so when you don't need to see tabs/addy bar etc then I just do a mouse squiggle and am left with the page and the window.

Magic.

Even better, the window colour takes hints from the webpage and works very well - blends in nicely.

3
  • 2
    Welcome to Super User. The question was how to do this in Firefox, so describing the feature in a different browser isn't really an answer to the question. With a little more rep, you could add helpful information like that as a comment.
    – fixer1234
    Mar 16, 2018 at 3:25
  • Moar bloat in Vivaldi, though, but right idea! (Even with the fastest of rigs sometimes you don't want to waste so many cycles on a browser) Vivaldi inspired me to look for this for FF, too.
    – Benjamin R
    Jan 17, 2019 at 16:18
  • Thank you your answer may not pinpoint the question but it's definitely useful for someone just came from a search result. Nov 7, 2021 at 14:55
2

you should try new command param --kiosk from new Firefox v.71

https://www.mozilla.org/en-US/firefox/71.0a1/releasenotes/

1
1

The best option I know of is the full-screen mode, which is toggled using F11 in all modern browsers. That will hide your desktop background and other apps, though, which may not be what you want. It will simply fill the space around the web application's content with white (or whatever the background color / image in the web app's stylesheet is).

1
  • 1
    Fullscreen mode makes my app go across the whole screen, because it is based on a fluid container. I simply want the browser to turn off everything and stay in the same size as it is, like 320x680px, and my desktop background should shine through around.
    – uloco
    Sep 25, 2015 at 7:47
1

You can run your app window from the command line

"c:\Program Files\Mozilla Firefox"\firefox.exe -chrome "http://www.example.com"

and place on an extended desktop with a background of your choice.

1
  • I think this is a good answer. In Gnu/Linux distros you can skip most of that and just do: firefox -chrome . This didn't hide the tab bar for me though.
    – adantj
    Sep 4, 2019 at 16:29
1

Note that the answer from clearkimura above, which suggests using a stylesheet, needs a little tweak in later versions of Firefox. The solution worked for me once I did this. From the this web page:

Set Firefox to look for userChrome.css at startup (updated 5/24/2019)

To make startup faster for most users, Firefox 69 will no longer look for this file automatically. You need to tell it to look. Here's how:

  1. In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
  2. In the search box above the list, type or paste userprof and pause while the list is filtered. If you do not see anything on the list, please ignore the rest of these instructions. You can close this tab now.
  3. Double-click the toolkit.legacyUserProfileCustomizations.stylesheets preference to switch the value from false to true.

That change should take effect on your next startup.

0

The questions on how to do this in Firefox Quantum (>=57) maybe answers this question (Firefox Quantum (>=57) How to toggle all toolbars? (with a keyboard shortcut, like F11 but in a window, not fullscreen))

F11/Fullscreen is sometimes impractical.
If you just want to toggle the toolbars in Firefox versions previous to 57 it is possible with the addon "Dorando keyconfig":

1. specify a script in the Dorando "Key Editor":

var s = document.getElementById('status-bar');
s.hidden = !s.hidden;
var b = document.getElementById('PersonalToolbar');
b.collapsed = !b.collapsed;
var nb = document.getElementById('nav-bar');
nb.collapsed =!nb.collapsed
var tb = document.getElementById('TabsToolbar');
tb.collapsed =!tb.collapsed

2. map it to a keyboard shortcut via the Dorando addon-interface

2
  • 1
    From Mash: Dorando "Key Editor" v2017.3 doesn't work anymore for the recent FF 57/58. Quote from GitHub: Note that this add-on is not compatible with Firefox 57 and newer, since it uses old add-on APIs that are no longer supported as of Firefox 57. However, it remains compatible with current versions of Thunderbird and SeaMonkey.
    – fixer1234
    Jan 25, 2018 at 19:37
  • 1
    thanks for your comment, maybe I should have highlighted the statement "If you just want to toggle the toolbars in Firefox versions previous to 57 it is possible with the addon "Dorando keyconfig" " to make that clear
    – MacMartin
    Jan 26, 2018 at 8:12
0

Here's a way to remove Firefox's tab list and nav bar only in full screen mode, similar to Chrome's behavior. It borrows heavily from the other excellent answers here, and was tested on Firefox v112 & macOS Ventura.

  1. Open up about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to true.
  2. Create chrome/userChrome.css inside your Fireox profile folder.
  3. Paste the following CSS snippet into that file and then restart Firefox:
@-moz-document url(chrome://browser/content/browser.xul),
               url(chrome://browser/content/browser.xhtml) {
  :root[inFullscreen] #TabsToolbar,
  :root[inFullscreen] #navigator-toolbox {
    visibility: collapse;
  }
}

Some notes:

  • You don't need the @namespace line in the accepted answer.
  • You don't need the browser {margin-right: -14px; margin-bottom: -14px;} line. In fact, I've found that that line does nothing other than to mess with the rendering of the Developer Tools.
  • Personally, I'm going to be using a slight tweak of the solution I've provided here to always hide tabs in favor of the Tree Style Tab plugin.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .