Firefox Quantum (Firefox 69) uses tabs on top
How to place tabs on bottom
Taming the dragon: enabling the CSS
This article shows you how to change Firefox’s appearance from tabs on top (where the tabs appear above the URL address bar) to display the tabs below the URL address bar.
Before the release of Firefox v57, it was possible to change the location of the tabs by changing a browser parameter setting. The setting was
FF still retains that setting but its functionality has been disabled; browser tabs remain on top (above the URL address bar) regardless of this parameter’s value. We will see how it’s possible to change the location of the tabs.My earlier articles—Firefox: tabs on bottom and Firefox: tabs on bottom (again)—discuss Firefox before v69. This article updates that advice following the release of FF69.
Tabs on top vs. on bottom
The following image shows the difference between tabs on top, which is the new behaviour for FF (shown on the left), and tabs on the bottom (shown on the right). It is a matter of personal choice whether people prefer one style over the other.
To change the behaviour so that the tabs appear on the bottom we will need to write a small piece of CSS and store the file on your computer as well as make one small change to Firefox‘s “secret” settings.
Creating the CSS file
Locating your Firefox browser profile
Press the keyboard characters ⊞ Win + R to bring up the Run dialog.
Type %APPDATA%\Mozilla\Firefox\Profiles in the text box and press OK. This will open Windows Explorer (see the image on the right; click to enlarge it).
You should see a folder with the name xxxxxxxx.default (or possibly xxxxxxxx.default-nnnnnnnnnnnnn) where xxxxxxxx are randomly-generated characters and nnnnnnnnnnnnn is the epoch timestamp representing the date/time when the folder was created.
The next thing to do is to navigate within this just-named, folder. Look for a sub-folder named /chrome (see the image on the right for more information). Navigate into that folder.
It is highly probable that there will be no files within the chrome folder. The next thing we will do is create a new file named userChrome.css. Open an instance of Windows Notepad, select the code segment below and paste this text into Notepad.
#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;
}
hbox tab {
background-color: #eee !important;
color: hsl(210, 77%, 47%) !important;
}
hbox tab:hover, hbox tab:active, hbox tab:focus {
color: #191970 !important;
}
.tab-content[selected="true"] {
color: #191970 !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;}
Save the file with the name userChrome.css.
“Enabling” the CSS
There’s a new “feature” built into FF since v69https://www.ghacks.net/2019/05/24/firefox-69-userchrome-css-and-usercontent-css-disabled-by-default/. Before you are able to use the file userChrome.css you will need to tame another one of the “Firefox dragons”. The additional setting that you will need to change is
Make the changes, close all existing instances of Firefox—i.e. close all windows that are running FF—and then open a new instance; effectively “restart” Firefox. You should now see the tabs on the bottom.
This applies to Firefox 71.0 for tabs on bottom.
www.reddit.com/r/FirefoxCSS/comments/e5o5uq/found_a_fix_for_userchromecss_to_get_the_tabs/