Please, please allow us to place the tabs at the bottom

[Sonoiooo]

Please, please allow us to place the tabs at the bottom

[drakejones]

Anyone remember back when Mozilla's design philosophy was "Your Browser Your Way"?  And, Firefox was or was close to the most popular browser out there?  The devs break our mods intentionally, claiming that are trying to "standardize" Firefox; i.e., the volunteer edgelords want Firefox to look and perform just like Chrome -so why bother with Firefox?  Chrome is already Chrome.  I blame upper management for destroying the brand and devs couldn't care less about the success of the browser or OUR opinions.  They have no skin in the game and it shows.  

From the web:

"There has been a lot of discussion lately about the decline of the Firefox browser and numerous articles about it losing 50 Million users in the last two years.

"But the real decline has been over 12 years with a total loss of half a Billion users and 75% of the market share it once held.

"It all started in 2009 Q3 with the fateful decision to force Tabs-On-Top.

As soon as this decision was made, Firefox starting losing market share. Every other program on a PC uses tabs against the active window. Proprietary software like MS Office and Adobe, FOSS software like Notepad++ and GIMP, 3D design, video editors, hex editors, you name it: It is the standard, logical design.

https://news.itsfoss.com/firefox-continuous-decline/ 

[BalloonPark]

Was forced to update to 118.0.2 by my bank, and WOW my tabs are messed up once again. Thank you so much for wasting more of my time to try and hunt down custom css!

[drakejones]

The devs don't care what we think or want.  Pure arrogance.

[GFVHUB]

I want to change the position of the tab bar

I don’t want to place the tab bar at the top. That would be really inconvenient, because this is a frequently used function, more commonly used than bookmarks, so it should be placed below the bookmark bar. Can you add an option to allow the tab bar to be placed Underneath the bookmarks bar?

[drakejones]

Does esr 115.4.0esr break tabs under? 

[dasco597]

a point in favor of built-in support for this is that having a userChrome.css (aside from getting broken every few updates) has the issue of not being able to access the address/tab bars in full-screen mode. with the title bar at the top, a user can hover their cursor at the top of the screen to reveal the address/tab bars, but this is impossible to do this on the bottom of the screen with userChrome.css.

I personally find tabs on bottom to be a lot more ergonomic as my focus is mostly on the webpage and I only glance down to do address/tab bar stuff. having the tabs on the bottom means less craning my neck, especially on a laptop. IMO this could be a big innovation to get ahead of other browsers!

in reality, it seems there's little to chance of this being supported natively, but regardless I want to say I'm very grateful to the firefox team for their continued efforts to maintain this amazing browser 🙂

[JIGSAW]

@dasco597you seem to want something completely different from us ... all we want is the tabs below the address bar and not on top of it.

[dasco597]

@JIGSAWoh right that makes sense lol

[Imanalien2020]

@JIGSAWmoving the tabs below the address bar is simple. We including me and dasco597 want the tabs at the bottom of our PC screens, not on top of the screen or under the address bar on top of the screen. I had a code to place the tabs completely on the bottom of my screen but alas once the browser got updated a new line of code broke it for me. We wish we could just click a setting button to automatically make it happen. That's customization which Firefox has minimal of. A few other browsers have mass customization abilities but there's just something about those browsers I don't like which is why I stick to Firefox as I've tried about 20 different browsers for PC. Lots of potential out there but it's not there yet for me. So, we wait for Mozilla to wake up. This logic is the same on my Android phone. I use a browser called Soul Browser and I can't place my address/URL bar and Tabs on the bottom of my screen. Which if you want user friendly that's it. Why do I want to continuously reach for the top of my phone back to the bottom and up down down up..lol silly. Keep it all down at the bottom by my thumbs.

[seasamin]

I just find I can not work effectively with Tab Bar above the Search and Bookmarks bar. Not everyone is the same - this is fundamental in life and also for software usage. Firefox power above other Browsers remains the ability for users to reconfigure its default layout. Where is that reality recognized if a simple capacity to move the Tabs bar is not available or can not be found?

[kdato]

When a new CEO gets appointed we hear nice words like "stronger focus on the customer". Empty words when it comes to browser users.

[bmazak]

All of you are in the same shoes as I was as far as tabs. Here is the latest I'v found still works with the curent 11-21-23 version. Below will give you multiple lines for the Bookmarks and tabs above content.

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/*******************************For FF74*************************************************/

/* NOTE ****** Multi Line Bookmark start ***********************************************/
/* Variables are set inside '.\config\' folders CSS files, if complete package is used! */

/* import old button/bookmark size code *************************************************/
@import "./../buttons/buttons_on_bookmarks_toolbar_old_size_and_appearance.css";
/* Bookmark lines and height */
:root {
--bookmark_items_height: 15px; /* <- bookmark items - line height */
--bookmark_items_lines: 4; /* <- maximum amount of lines */
}

#PersonalToolbar {
min-height: var(--bookmark_items_height) !important;
max-height: calc(var(--bookmark_items_height)*(var(--bookmark_items_lines))) !important;
}

#personal-bookmarks,
#PlacesToolbar > hbox {
display: block;
}

#PlacesToolbarItems {
display: flex;
flex-wrap: wrap;
overflow-x: visible;
overflow-y: auto;
}

#PlacesToolbarItems > .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
overflow-x: hidden !important;
overflow-y: visible !important;
max-height: calc(var(--bookmark_items_height)*(var(--bookmark_items_lines))) !important
}

#personal-bookmarks #PlacesToolbar {
display: block;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
max-height: calc( var(--bookmark_items_lines) * var(--bookmark_items_height) );
}

#personal-bookmarks #PlacesToolbar > hbox > hbox{
overflow-x: hidden;
overflow-y: hidden;
}

#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="false"],
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
display: none;
}

#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 2px !important;
margin-bottom: 2px !important;
vertical-align: middle;
}
/*
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="false"]),
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="false"] {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
*/
#personal-bookmarks #PlacesToolbar toolbarseparator{
-moz-appearance: none !important;
visibility: visible !important;
display: inline;
text-shadow: none !important;
border-left: 3px solid ThreeDShadow !important;
border-right: 3px solid ThreeDHighlight !important;
vertical-align: middle;
}

#personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{
-moz-appearance: toolbarbutton;
}

#navigator-toolbox #PersonalToolbar {
max-height: calc( var(--bookmark_items_lines) * var(--bookmark_items_height) ) !important;
}
/* Multi line Bookmark end */

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Modify to change window drag space width */
/*
Use tabs_on_bottom_menubar_on_top_patch.css if you
have menubar permanently enabled and want it on top
*/

/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css
*/

: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{
order: 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{ flex-direction: column; } }

/* 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 }

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patc... made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* 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);
height: 29px;
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 }

/* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; /*adjust to set height or omit to use density*/
--tab-min-width: 80px !important; /*adjust to set width or omit to use default*/

#tabbrowser-tabs {
width: 100vw !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;
}
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* IMPORTANT
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css

Use tabs_on_bottom_menubar_on_top_patch.css if you
have menubar permanently enabled and want it on top
*/

#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
top: 0px;
right:0;
height: 40px;
}
@media (-moz-gtk-csd-reversed-placement),
(-moz-platform: macos){
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}
@supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){
.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 }

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

#titlebar{
/* Fx <112 compatibility */
order: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
--uc-menubar-vertical-overlap: 19px; /* for hide_tabs_with_one_tab_w_window_controls.css compatibility */
}
/* Re-order window and tab notification boxes */
#navigator-toolbox > div{ display: contents }
.global-notificationbox,
#tab-notification-deck{
/* Fx <112 compatibility */
order: 2;
}

#TabsToolbar { -moz-box-ordinal-group: 4; /* added 5-18-23 tabs not on bottom fix not working /*
order: 4;}
#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{
/* Fx <112 compatibility */
flex-direction: column;
}
}

/* At Activated Menubar */
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container {
display: block !important;
}
#toolbar-menubar:not([autohide="true"]) > .titlebar-buttonbox-container {
visibility: hidden;
}

/* 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 }
#TabsToolbar > .titlebar-buttonbox-container{ visibility: visible }
#navigator-toolbox:not(:-moz-lwtheme){ background-color: -moz-dialog }

/* Uncomment the following if you want bookmarks toolbar to be below tabs */
/*
#PersonalToolbar{
order: 2;
}
*/
/* Start Tab-on-bottom.css /*

/* Tabs on bottom menu on top 5-19-23 /*
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Modify to change window drag space width */
/*
Use tabs_on_bottom_menubar_on_top_patch.css if you
have menubar permanently enabled and want it on top
*/
/* See https://www.codehaven.co.uk/firefox/firefox-113-2023-tabs-on-top-bottom-not-working-fixed-again/
for important fixed for ver 113
/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css
*/

: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{
order: 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{ flex-direction: column; } }

/* 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 }

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_
bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* 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);
height: 29px;
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 }

/* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; /*adjust to set height or omit to use density*/
--tab-min-width: 80px !important; /*adjust to set width or omit to use default*/

#tabbrowser-tabs {
width: 100vw !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;
}

/* ************* End Tabs-on-bottom ************************* /*

/* ****************************Start tabs on bottom patch *********** /*

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patc... made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

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

:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }

:root{
/* height if native titlebar is enabled, assumes empty menubar */
--uc-menubar-height: 20px;
}
:root[tabsintitlebar]{
/* height when native titlebar is disabled, more roomy so can fit buttons etc. */
--uc-menubar-height: 29px;
}
/* IS was in the Root command root:IS was red and removed /*
:root:is([sizemode="fullscreen"],[chromehidden~="menubar"]){
--uc-menubar-height: 0px;
}
/* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */
:root:not([sizemode="fullscreen"]) #nav-bar{ border-inline-width: 0 }

#navigator-toolbox{
-moz-window-dragging: drag;
padding-top: var(--uc-menubar-height) !important;
}

/* Remove window dragging from notification boxes */
#tab-notification-deck,
.global-notificationbox{
-moz-window-dragging: no-drag;
}

:root:not([chromehidden~="menubar"]) #toolbar-menubar{
position: fixed;
display: flex;
top: 0px;
height: var(--uc-menubar-height);
width: 100%;
overflow: hidden;
}

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

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

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

:root:not([sizemode="fullscreen"]) #toolbar-menubar.browser-toolbar > .titlebar-buttonbox-container{
visibility: visible;
}
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #TabsToolbar#TabsToolbar#TabsToolbar > .titlebar-buttonbox-container {
display: none !important;
}

end

commetns are marks if you don't want the multi line bookmarks so delete that part and Google the way to add this code.  Instructions are at the web site in the first comments.

[bmazak]

see cs code below on these post for BM

[atomicblb]

I want you to know I finished setting up my account to specifically make this request. Why on Earth can I not EASILY move my open tabs to the bottom of my windows Firefox browser bar? Where is the option to just casually have my Firefox have the tabs where *I* want them to be? It is really frustrating that every so often I am once again punished with updates that change long standing settings I specifically make for myself. I love you guys at Mozilla but this infrequent anti-consumer behavior is a big deal for me and obviously a lot of other users seeking the same resolution. Stop breaking things for your longterm customers. Just have the settings easily available and customizable ALWAYS and not broken every few updates. Every other customization is second rate and unimportant to me. I want my tabs where I always have put them.

[Locutus]

Since this seems to be a newer thread I simply agree with @atomicblb