Firefox 89 Moves My Tabs To The Bottom - HELP!

[darkrats]

I just updated to FF89 and my tabs have moved to the bottom obscuring my status bar. The tabs used to be at the top just under the address bar. Where they used to be there's a blue bar but it's empty. For years now I've customized my FF using CSS. Obviously, the latest update to FF89 ignores my current CSS settings. Is there any way to get my tabs back to where they were? Here are my current CSS settings. Any help would be much appreciated.

UPDATE: I deleted my CSS file and found the tabs are back at the top but above the address bar. I'd like to start from scratch and make only a couple of changes. First, I would sure like my tabs to be at the top but below the address bar; and second, I'd like a status bar at the bottom that shows addresses when you hover over a link.

--------------------------------------------------------------------------------

@-moz-document url(chrome://browser/content/browser.xul), url(chrome://browser/content/browser.xhtml) {

@namespace url("http://www.mozilla.org/keymaster/gateke ... s.only.xul"); /* only needed once */

#urlbar-results { display:none!important; }

/* 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;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}

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

/* TABS: height */
:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 32px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
--tab-min-height: 32px !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;
}

#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;
}

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

/* Status-bar */
#browser-bottombox { height: 20px; border-top: solid 0px #505050; }
.browserContainer>statuspanel { left: 4px !important; bottom: 0px; transition-duration: 0s !important; transition-delay: 0s !important; }
.browserContainer>statuspanel>.statuspanel-inner>.statuspanel-label { margin-left: 0px !important; border: none !important; padding: 0px !important; }

window[inFullscreen="true"] #browser-bottombox { display:none !important; }
window[inFullscreen="true"] .browserContainer>statuspanel[type="overLink"] .statuspanel-label { display:none !important; }

#statuspanel #statuspanel-label {
-moz-appearance: none !important;
background-color: transparent !important;
border: 0px solid black !important;
}

#statuspanel {
background-color: transparent !important;
border: none !important;
bottom: 18px !important; /* adjust*/
height: 18px !important; /* adjust */
max-width: 30% !important; /* Change the value to suite your needs */
transition: none !important;
}

#PopupAutoCompleteRichResult {

display: none!important;

}}

[bob c]

mine did the same

[darkrats]

I deleted my CSS file and that put me back to the default UI with the tabs on top, above the address bar. I then used the 'status bar' portion of my CSS file (see my post above) to make a new CSS file. That restored my status bar back to the way it was. Now all I need to do is find a way to move the tabs below the address bar.

[dickvl]

You need to use #navigator-toolbox { position: relative; }
https://github.com/Aris-t2/CustomCSSfor ... r_fx89.css

New code:

Code: Select all

/* navigator-toolbox - space for TabsToolbar */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  position: relative !important; /*89+*/
  padding-bottom: calc(var(--tab-min-height) + 1px) !important;
  background-color: var(--toolbar-bgcolor) !important;
}

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

[darkrats]

I replaced the old code with the new code (thanks, dickvl) and the tabs did move to below the address bar. however the address bar itself has vanished. There's a blank toolbar where it should be!

[dickvl]

Try this code for the full "TABS on bottom" section.
I've edited the code to simplify it.

Code: Select all

/* TABS: below nav-bar - updated for 89+ | 108+ | 113+ */

*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;

  --tab-min-height: 32px !important; /* adjust */
  --tab-min-width:  80px !important; /* adjust */
}

#navigator-toolbox #TabsToolbar {
/*  display: block !important; *//*not needed in 113+: display: flex*/
  position: absolute !important;
  bottom: 0;
  width: 100vw !important;
}

/* for 65-107, not needed in 108 and newer *//*
#tabbrowser-tabs {
  width: 100vw !important;
}
*/

/* navigator-toolbox - padding */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  position: relative !important; /*89+*/
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*adjust*/
  background-color: var(--toolbar-bgcolor) !important;
}

/* TABS: HEIGHT */
#tabbrowser-tabs,
#tabbrowser-arrowscrollbox,
#tabbrowser-tabs .tabbrowser-tab {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

.tab-stack {
  height: var(--tab-min-height) !important;
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*optional*/
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !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 and caption buttons */
#TabsToolbar .private-browsing-indicator   {display: none !important;}
#TabsToolbar .accessibility-indicator      {display: none !important;}

#TabsToolbar .titlebar-buttonbox-container {display: none !important;}
#TabsToolbar #window-controls              {display: none !important;}

[bo elam]

Hi dickvl, I tried both suggestions you posted earlier but neither one works for me.

This is what I was using in Firefox 88, perhaps you can come up with another suggestion. I would appreciate it.

}
/* 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;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}

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

Bo

[darkrats]

Hi 'dickvl', I tried your second CSS script and it did move the tabs to just below the address bar, but there were other problems; where the tabs used to be there remains a huge blue and blank toolbar; the bottom edge of the tabs in their new location is missing. it appears briefly when you left click the tab and choose to create a new tab; when you do create a new tab, all of the previous tabs just disappear; finally there is no new tabe button anywhere that i can see.

Update: I know that CSS scripts might not work for all people (depends on how they have FF set up), but every time there's a major UI update I have to go through all the hoops to get back to my favored look. I've never understood why Mozilla doesn't include tweaks that allow folks to move the toolbars around however they want. I've been thinking for some time about moving to a different browser (after decades of FF use). Opera and PaleMoon are on my list of alternatives. Perhaps that time has arrived. Oh well, guess I'll tinker with my CSS settings for a while longer. But can't keep doing this over and over. It's wearing me down!

[bob c]

Hi 'dickvl', I tried your second CSS script and it did move the tabs to just below the address bar, but there were other problems; where the tabs used to be there remains a huge blue and blank toolbar; the bottom edge of the tabs in their new location is missing. it appears briefly when you left click the tab and choose to create a new tab; when you do create a new tab, all of the previous tabs just disappear; finally there is no new tabe button anywhere that i can see.

Update: I know that CSS scripts might not work for all people (depends on how they have FF set up), but every time there's a major UI update I have to go through all the hoops to get back to my favored look. I've never understood why Mozilla doesn't include tweaks that allow folks to move the toolbars around however they want. I've been thinking for some time about moving to a different browser (after decades of FF use). Opera and PaleMoon are on my list of alternatives. Perhaps that time has arrived. Oh well, guess I'll tinker with my CSS settings for a while longer. But can't keep doing this over and over. It's wearing me down!

This is the best I have been able to get mine--with proton off in about:config, some other config entries changed, some of my original .css, and some .css added. Tabs used to be under my Bookmarks text line, where I wanted them, can't do it now with FF89 and get it to act right. You can see the Tabs are thin, different color for whats open, and background is all same color, even when no tabs are showing, no line across page, which is what would be there when they were below the BM's text. Could not get rid of it, the line. No tab shows with just one open, and I have to use a middle click after that to have multiple tabs showing as I go along. Didn't have that back in the day with FF ESR(number ?).

[Hans L]

I will follow this, as I have the same problem, and want the tab bar below the bookmark bar.

Hans L

[arturox]

I'm also following this discussion as I have the Tabs problem again.

I've tried various bits of .css posted in various places, but while some sort of work but not very well, others don't do anything useful at all.

If the developers/coders took their heads out of their A**** and put back the Tab positioning that was once part of Firefox, so many of us would be happy.

Ax

[123stella124]

+1 for the same "tabs on bottom" that occur every time...Also, this interface just look like Chrome...If i wanted it, i'd use chrome instead but well (/end ranting)

@bo elam, i fixed those aligment problems using the second code provided by dickvl and adjusting the "top" value here:

#TabsToolbar {
display: block !important;
position: absolute !important;
top: 97px !important;
width: 100vw !important;
}

[IdanT]

You need to replace bottom: 0 !important; to top: ##px; with ## being the position of the Tab bar from the top as it looks that position: absolute is working differently in 89+.
Note that you can possibly use properties like calc(var(--bokmarkstoolbar-height) + var(--menubar-height)) to make it easier to adjust for cases where you want to hide or show a specific toolbar.

Just registered to say thank you!

That was my old "TABS: on bottom" code

/* 4. TABS: on bottom */
#TabsToolbar {
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}

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

And this is after I used your code:

/* 4. TABS: on bottom */
*|*:root {
--menubar-height: 36px;
--bookmarkbar-height: 18.3px;
--tabbar-top: calc(var(--menubar-height) + var(--bookmarkbar-height) + var(--tab-min-height) + 8px); /*89+*/
}

#TabsToolbar {
display: block !important;
position: absolute !important;
top: var(--tabbar-top) !important;
width: 100vw !important;
}

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

And now it's back to normal, I only modified the "--bookmarkbar-height: 18.3px;" part from your original 30px to 18.3px, and now it's perfect.

So thanks again!

[Grumpus]

This worked in Linux Mint 20.1 for just the Tab relocation.
Had the same issue with tabs blocking information for search, status bar and Customize settings, OK now
There is a black bar behind the tabs and the (x) for individual tabs is invisible.

Code: Select all

/* TABS: on bottom - 89+ */

*|*:root {
 --tab-toolbar-navbar-overlap: 0px !important;

 --tab-min-height:      32px !important; /* adjust to suit your needs */
 --tab-min-width:       80px !important; /* adjust to suit your needs */

 --menubar-height: 34px;
 --bookmarkbar-height: 32px;
 --tabbar-top: calc(var(--menubar-height) + var(--bookmarkbar-height) + var(--tab-min-height) + 9px); /*89+*/
}

#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;
position: absolute !important;
top: var(--tabbar-top) !important;
width: 100vw !important;
}

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

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

/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs .tabbrowser-tab {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /* omit */
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !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 and caption buttons */
#TabsToolbar .private-browsing-indicator   {display: none !important;}
#TabsToolbar .accessibility-indicator      {display: none !important;}
#TabsToolbar .titlebar-buttonbox-container {display: none !important;}

[Majim]

I just found this thread and being a noob I am slightly confused about the results.
I, too, want my tabs back just under the bookmarks bar where they should be.
I was using the chrome.css code to accomplish this before this last Firefox clusterfrack.

Is the last code posted by Grumpus on June 02 the code I need to copynpaste into my chrome to get back to normal? Do I replace the entire old code with it or just part of the old code?
Last time I renamed the existing chrome file to "old..." and created a new one.
Is that preferable?
Thanks for your help and a pox on Firefox for their refusal to provide a simpler way to accomplish what we users want & need.