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.
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, in Preferences for respective add-on.
Setup A uses the following add-ons:
Usage: 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 in turn i.e. press F3 then F4. This will give Firefox with visible title bar (window decoration) only.
Limitation: Assigning the same key does not work well, likely because of some delay exists to hide either bar. The result is similar 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.
Available for Firefox 56 and older (Deprecated, no longer available from Firefox Add-ons). Tested using Firefox 41.0 on Linux. No screenshot.
Setup B uses the following add-ons:
Usage: Go to a web page on HTTP, HTTPS, or localhost, then click "New window without toolbar" on the toolbar or context menu. The web page will additionally open in a new window with visible title bar and vertical scroll bar only.
Limitation: No keyboard shortcut. No configuration at all. This add-on does not open any page on local filesystem (file:///) and built-in pages (about:*) at all.
Available for Firefox 42 and newer. Tested using Firefox 50.0 and 63.0 on Linux.
Setup C uses the following add-ons:
Usage: Go to a web page, then click "Move current tab to pop-up window" on the toolbar or "popup/merge current page" in the 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 normal tab, click again on "popup/merge current page" in the context menu.
Limitation: No keyboard shortcut. Some configuration is possible. The pop-up window will always stay on top of original window of Firefox, which can not be changed.
Available for Firefox 53 and newer. Tested using Firefox 63.0 on Linux.
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 next easiest way is to use the custom stylesheet: userChrome.css
The following code block is the content of userChrome.css that is created to 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.
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.
The following are generic steps regardless of system platform.
Run Profile Manager of Firefox, then create a new profile named 'hidebars' (any name of choice) and close the Profile Manager.
Run a file manager and open the profile folder that was created in step 1.
Under the new profile folder, create new files chrome/userChrome.css including the parent folder chrome if does not exist.
Copy and paste the content of userChrome.css from above into the created file in step 3.
Finally, save and close the file.
Simply 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.
Applicable to all releases of Firefox. Tested using Firefox 10, 20, 50 (Firefox Legacy) and 60, 63 (Firefox Quantum) on Linux and all seemed to work as expected.
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.
~/.mozilla/firefox/ on linux
– hansaplast
Jan 16 '18 at 16:04
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).
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.
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
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.
only press F11 and it gonna hide url/tab and all. no need to install any addon
it work on google chrome and mozilla
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
