Never mind. I found the fix elsewhere. Here is the code for anyone else looking.

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
 position: absolute !important; 
 bottom: 0 !important;
 width: 100vw !important;
 display: block !important;
}

#tabbrowser-tabs {
  top: 300 !important;
  width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
	padding-bottom: calc(1px + var(--tab-min-height_tnot)) !important;
}

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important;
 --tab-min-height: 33px !important; /* adjust to suit your needs */
 --tab-min-height_tnot: 32px;
}
:root #tabbrowser-tabs {
 --tab-min-height: 33px !important; /* needs to be the same as above under :root */
 --tab-min-width: 80px !important;
}

#TabsToolbar {
	height: var(--tab-min-height) !important;
	margin-bottom: 1px !important;
	box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
	background-color: var(--toolbar-bgcolor) !important;
}
/* hide windows-controls */
#TabsToolbar #window-controls {display:none!important;}

/* move caption buttons to right of Tab bar */
#main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
	position: fixed !important;
	right: 0 !important;
	top: calc(6px + var(--tab-min-height)) !important;
	display: block !important;
	visibility: visible !important;
}
#toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;}

None of the fixes posted here or on other threads has worked for me. So, what would be the code starting from scratch with a new userChrome.css file?

Look here for Fx72 compatible code: https://old.reddit.com/r/FirefoxCSS/

Hi ... The userChrome.css text jdevlin supplied does not work on my Firefox. I had to create a new chrome folder as this update seems to have deleted it. I pasted the text into the userChrome.css but there was no change. What am I doing wrong?

Really need help on this, Firefox is practically unusable like this.

Thanks!

The CSS code jdevlin posted above was broken due to some txt being interpreted by the forum software as formatting code (a leading '#' generates a list tag).

The problem I have found in in all the relevant forums is that none of the solutions provided indicates where the suggested code goes in the userChrome.css file and what is to be deleted from from the file. The assumption of the providers is that the readers know what to do. I don't know.

It would be most helpful, therefore, if someone would post the complete code you would use if you were creating a brand new file to place the tabs at the bottom in release 72.01.

Here is how it works on my system. In the chrome directory in the file userchrome .css insert these lines. Only the last line is important. The first three are just comments.

/************************************************************/ /* TABS: on bottom */ /***********************************************************/ @import url(./config/tabs_bottom.css);

then in the chrome sub directory "config" create the file tabs_bottom.css Replace the code in the "tabs_bottom.css" file with the new code.

Every time the tabs code change replace the tabs_bottom file with the new code.

I put jdevlin's lengthy code in a new userChrome.css file and made it the only code there. Nothing happened.

To be clear. It is NOT my code. I copied it from somewhere else. I don't want credit for some else's work.

Be sure you are using the correct chrome folder in the correct profile. To get there click help, then troubleshooting information, then you can see what your profile folder is and go directly to if you like.

This appears to be the minimum code required to get "Tabs on Bottom" working:

https://support.mozilla.org/en-US/questions/1274416#answer-1279083

With the release of Firefox 72.0.1, the XUL namespace statement is causing problems. Some people have had success simply putting (or importing) the "Tabs on Bottom" code before the namespace statement, but, unless you need it for something else in your userChrome.css file, you can simply eliminate the XUL namespace statement, altogether.

The reason that the "Tabs on Bottom" code keeps breaking is that Mozilla is making incremental changes to move away from XUL as it makes the interface pure HTML. Eventually, anything requiring XUL is not going to work so that you might get ahead of things, now, by finding out what other tweaks in your userChrome.css depend upon it.

I'm sorry, but I'm confused. Are you saying if I type the line: @import url("tabs-on-bottom.css");

at the top above the (now top) line: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

the tabs on bottom problem occurring with updates will not happen? If not, can you provide me with a copy and paste file that I will put into the userChrome.css file?

I only need the userChrome.css file to move my tabs to the bottom. This used to be a menu choice, and I wish it were again. Are you saying that when the interface is pure HTML that "Tabs on Bottom" will no longer be possible?

Sorry I'm so dense, but I'm not really much of a techie!

If your userChrome.css file contains only the following, it should put your tabs on the bottom (as of Firefox 72.0.1, January 10, 2020):

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

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
 display: block !important; /*required for 71+*/
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}

*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

/* TABS: height */
*|*:root {
 --tab-toolbar-navbar-overlap: 0px !important;
 --tab-min-height: 27px !important; /* adjust to suit your needs */
 --tab-min-width: 80px !important;
 --tabstoolbar-adjust: 0px; /* menubar and titlebar hidden */
}

#TabsToolbar {
 height: var(--tab-min-height) !important;
 margin-bottom: 1px !important;
 box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

/* TabsToolbar with menubar and titlebar hidden */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
  bottom: var(--tab-min-height) !important;
  padding-top: calc(var(--tab-min-height) + var(--tabstoolbar-adjust)) !important; /*adjust var*/
}

*|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"]
 ~ #TabsToolbar .titlebar-buttonbox-container {
  visibility: hidden !important;
 }

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 40px;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* hide indicators */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

There are a lot of versions of this code depending upon whether or not you want colours on your tabs, prefer a different colour for the empty tab area and various other tweaks, but this is pretty standard, from what I can tell.

The last two lines, the "hide indicators" section, helps with compatibility with Private Browsing mode, although it turns off the indicators, obviously. You can leave those lines out if the rest of the code works for you without them.

No-one can guarantee that the developers' next XUL / HTML change will not break any of this code. The idea about putting the "Tabs on Bottom" code into its own file is to keep it separate from anything else that you have in userChrome.css, but, if this is the only code that you have in userChrome.css, that is an unnecessary step.

Thank you so much ... I really appreciate the help. I made this text my css file and it works great! Sorry for my ignorance. Thank you for your patience!

You are welcome.

Hopefully, others will find one of the many threads with these solutions and save themselves a few hours' work.

Peter, your code worked. Thank you.

I am glad to have been of help, and, of course, the code is a compilation of many contributors' work.

It looks that it is possible to modify the current code and replace :root with *|*:root through out the tabs on bottom CSS code.

Here is a new question related to tabs on the bottom. If it's too far off this topic, I can repost it as a separate question.

For some time, my Firefox profile has had a userChrome.css file containing tabs on the bottom code, which worked. I don't know what other code was in the file. However, after a while, as Firefox updated before version 71, Firefox's tabs began to crash unpredictably and with increasing frequency when connected to the web. Nearly every time, after a few tab crashes, other programs open on my Windows 10 computer would freeze and/or I would get a black screen or both. Restarting Firefox and/or the computer did not help for long. Creating a new profile and copying the bookmarks and other existing personalized data files to the new profile also did not help.

After I installed version 71, I made the needed changes in userChrome.css to keep tabs on the bottom working, and the crashes stopped. When 72 arrived, tabs on the bottom stopped. I was unable to get them working again until after 72.01 installed and I installed tabs on the bottom code only. However, the freeze, etc. problems have started again. Are a file or files in my Firefox profile the culprit(s)?

Hi MFL100

Code in userChrome.css to move the tabs to a lower position shouldn't cause freezes, so this is likely another problem ,so best would be to create a new thread.

Could be an extension or hardware acceleration related or caused by external software or drivers on your computer.

• https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode
• https://support.mozilla.org/en-US/kb/troubleshoot-extensions-themes-to-fix-problems

I have tried all of the codes posted in this thread. They all move the tabs to below the address bar BUT the tabs now overlay the bookmarks bar. This is not a usable solution as you can imagine. Looking at the comments this doesn't seem to be a problem with anybody else. What the frak is going on?

74.0.1 Win 10 (1909)