Firefox CSS to move tabs and adress bar to bottom of window. Use with userChrome.css (works with Firefox 57+)

tabs_to_bottom.css

/*
1. Navigate to `%APPDATA%\Mozilla\Firefox\Profiles ...` or locate the exact directory at `about:profiles`
2. Create a folder named `chrome` then create a file named userChrome.css inside it and paste this code
3. If userChrome.css doesn’t seem to work, open `about:config` and set `toolkit.legacyUserProfileCustomizations.stylesheets=true`
*/

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

/* tabs to bottom */
#navigator-toolbox {
  -moz-box-ordinal-group: 2;
}

#main-window[sizemode="maximized"] {
	padding-top: 7px !important;
}

/* hide tab toolbar when fullscreen */
#nav-bar[inFullscreen],
#TabsToolbar[inFullscreen] {
	display: none;
}

#TabsToolbar {
	margin-top: -10px !important;
}

/* hide window controls, updated for Firefox 64 */
#TabsToolbar > .titlebar-buttonbox-container {
	display: none!important;
}

/* put suggestions popup on top */
#PopupAutoCompleteRichResult {
	opacity: 0.9;
	margin-top: -332px;
	margin-left: 10px;
	height: 300px;
}

#PopupAutoCompleteRichResult .autocomplete-richlistbox > scrollbox {
	overflow-y: auto !important;
}

/* or hide suggestions completely */
#PopupAutoCompleteRichResult { display: none; }

Hello, Arty!

I really want to say thank you very much for this amazing add-on for firefox 57! I’m using a 23” size touch monitor, so tabs and address/url bar now on bottom of the screen help me so much in controlling firefox with extreme comfort. I thought I would never found an extension like this one. It’s exactly what I was looking for.

Again a thousand of thanks!

@FirefoxSurvivor I'm glad it's been of use, after many-many hours spent on undocumented areas for the making of this :)
Recently, FF 59 seems to break it, but I've updated the code with the alternative solution.

Dear Arty,

Thanks for the message! I’m currently running Firefox 59.0.1 and your extension is back to work after updating the code. I love it!

Thanks again for your great work!

Thanks for sharing! This lessens the pain a little after Mozilla killed all our awesome plugins ;)

Thank you so much! It makes a big difference in my browsing!

Wonderful stuff you did there, firefox looks sparkly fresh now.
One question though.
I wanted to have close,maximize,minimize buttons displayed so I deleted this part of the code from the css file:
/* hide titlebar */ #titlebar { display: none !important;
The problem is buttons are still on the top of the window in their default position.
Is there a way to put them in the bottom of the window?

@cebzab Not sure if that would work, but you could try different values of -moz-box-ordinal-group for #titlebar, eg:

#tillebar { -moz-box-ordinal-group:  2; }

@Arty2 that last code actually worked having the titlebar in the bottom, looks sweet! I have 1 bug (i just discovered while logging inhere) and 2 questions:
Bug: LastPass, being at the bottom , when I click it, the pop up loads downwards (meaning I cannot see it) instead of up. Odd because most other things pop upwards.

Is it possible to have just the tabs at the bottom, while keeping address bar at top? This was the code I found when trying to bring my tabs back to the bottom, not sure how I feel about address bar. I tried hiding the address bar code, or changing the number, but it brings the tabs with it.

Also, if you have a theme, the theme doesnt "come with it" to the bottom either. Do you know what code I would put to move the theme to the bottom as well? I dont know the # for the theme. thank you

How would one move only the tab bar to the bottom of the window? The following code worked up to Firefox v60. Haven't found a code block that works in 61 or 62 yet? All help would be greatly appreciated.
`
{
:root:not([tabsintitlebar]) #navigator-toolbox {
display: contents !important;
}

:root:not([tabsintitlebar]) #toolbar-menubar          { -moz-box-ordinal-group: 1 !important; }
:root:not([tabsintitlebar]) #nav-bar                  { -moz-box-ordinal-group: 2 !important; }
:root:not([tabsintitlebar]) #PersonalToolbar          { -moz-box-ordinal-group: 3 !important; }
:root:not([tabsintitlebar]) #navigator-toolbox::after { -moz-box-ordinal-group: 4 !important; }
:root:not([tabsintitlebar]) #content-deck             { -moz-box-ordinal-group: 5 !important; }
:root:not([tabsintitlebar]) #TabsToolbar              { -moz-box-ordinal-group: 6 !important; }

}

#TabsToolbar {
position: fixed;
bottom: -0.5em;
width: 100%;

}
#tabbrowser-tabs { width: 96%; }
#content-deck { margin-bottom: 2.5em; }
`

I just found this and it works great, after a little tweaking to get the min,max and x back. What I was hoping is that someone could help me put the menu bar back on the top. Everything I've tried doesn't seem to work.

Hello Arty,

There are troubles with Firefox 65 that brokes your great extension. At the moment I went back to the 64 version. Please help!

Thank you so much in advance, as always

@FirefoxSurvivor Could you confirm whether your edits are still in userChrome.css?

Somehow, I never noticed any change / break on the Developer Edition which I use daily, but on a second computer where I have a “plain” Firefox installed, this exact code block surprisingly disappeared from userChrome.css, leaving other custom code intact. Just confirmed that it works on Nightly, so it wasn’t any browser change that triggered it.

Hello Arty,

Sorry for the late answer. I confirm that the edits are still in the userChrome.css file.

Today I was forced to move to Firefox 66.0.4 because they messed up almost every extension. Unfortunately I confirm that something is wrong: the address bar is still on bottom but the tabs bar disappeared and I can't figure out how to get it back… So at the moment I don't know how to open other tabs. Please, help!

Thank you so much in advance

@FirefoxSurvivor Removing all code from userChrome.css should reset any modifications to Firefox UI and return your tabs. I’m afraid I can't replicate that issue to look into it :/

Dear Arty,

I am happy to inform you that your extension is back in action almost perfectly.
I really don´t know how the story is, but after deleting and adding a few times the code into the css file, tabs and tabs bar reappeared.

For some reason, when the tablet mode is enabled (I'm on Widows 10) the tabs are higher than their bar; when I skip to desktop mode they are the same size ...

EDIT
I'm now in tablet mode and both tabs and bar size are just perfect... who knows what's happening?!

All the best! :)