{kun´ēzē}
(Reading time: 5 - 9 minutes)
02Jun2021

Firefox 89: tabs on bottom

Information
2877 hits Updated: 03 June 2021 Blog
You have already read 0%

Firefox Proton (Firefox 89) 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 with CSS and a small browser tweak.Before the release of Firefox v57, it was possible to change the location of the tabs by changing a browser parameter setting.  FF89 does not have this setting.

We will see how it’s possible to change the location of the tabs.My earlier articles—Firefox: tabs on bottom, Firefox: tabs on bottom (again) and Firefox: tabs on bottom (third time around)—discuss Firefox before v89.  This article updates that advice following the release of FF89.

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.  Unquestionably, a lot of people don’t like the default behaviour with the tabs displayed above the URL address.

ff89 tabs

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.

FF profiles windowsType %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.

ff profile chromeThe 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.

//* TABS: on bottom */

:root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win10){
:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
}
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
top: var(--uc-titlebar-padding,0px);
right:0;
height: 40px;
}
/* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{
-moz-box-ordinal-group: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
}

.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }

/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }

/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */

:root{ --uc-window-control-width: 0px !important; }

#navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }

#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
margin-top: 8px !important;
height: 29px !important;
width: 100%;
overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}

#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px !important; vertical-align: middle !important;
}

/* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important;
--tab-min-width: 80px !important; --bookmark-block-padding: 0 4px !important;

#tabbrowser-tabs {
width: 100vw !important; vertical-align: middle !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important; }

.tab-background {
border-radius: 8px 8px 0px 0px !important; border-image: none !important;
}
.tab-line {
display: none;
}

.tab-close-button {
color: red !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

toolkit.legacyUserProfileCustomizations.stylesheets = true

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.

About the author:

is a website hobbyist specialising in Joomla, a former member of the Kunena project for more than 8 years, and an active contributor on The Joomla Forum™. The opinions expressed in this article are entirely those of the author. View his profile here.


4 thoughts on “Firefox 89: tabs on bottom”

  1. Wednesday, 21 July 2021 23:11
    THANKS!!! I've been looking all over for an update to the old fix. You're a life saver!
  2. Thursday, 22 July 2021 00:06
    Many thanks. Works great.
  3. Sunday, 25 July 2021 02:11

    Work like a charm. Maybe just add a line

    about:config

    before

    toolkit.legacyUserProfileCustomizations.stylesheets = true

    Thank you.

  4. Sunday, 25 July 2021 10:57

    thanks a lot!!!!

    it's works for win7, and the title bar is not cut in half

User Rating: 5 / 5

Star ActiveStar ActiveStar ActiveStar ActiveStar Active
 
Trending now