Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

After update to 72.0.1 Tabs are overwriting my Bookmark Toolbar

  • 17 replies
  • 2 have this problem
  • 22 views
  • Last reply by lips0309

more options

Hi I attached this to an already solved question and I'm afraid I won't get a response. After update to 72.0.1 Tabs merged with Bookmarks Toolbar. The solved solution of new text for the userChrome.css file doesn't work. 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!

Hi I attached this to an already solved question and I'm afraid I won't get a response. After update to 72.0.1 Tabs merged with Bookmarks Toolbar. The solved solution of new text for the userChrome.css file doesn't work. 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!

Chosen solution

Question which file/folder are you modifying??

Local or Roaming?

If local that's the issue do this in the roaming on and that should fix it. I had this issue with 71 was updating the local folder and it would not work until I thought to try it in roaming and that worked.

Also to make sure you are updating the right profile folder which is roaming do this

Goto HELP and select TROUBLESHOOTING INFO

this will open a new tab and a little bit down the list you will see profile this is your browsers curent profile. Click open folder this is best way to get to the correct folder then create CHROME folder if needed and put in the userchrome.css file

Also make sure the folders and files are correct in case

chrome userChrome.css

the middle C in userChrome.css has to be cap! The folder all lower case

Read this answer in context 👍 0

All Replies (17)

more options

yeap same problem here. Tabs are still on the bottom but they got pushed up so they now overlap the bookmark toolbar. We just need to get the code adjusted enough to push the tabs back down some.

I did try and adjust the various height and width dimension but nother changed the spot for the tabs bar.

This is the code I had been using up until the 72 update the other day.

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

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




/* Colored bookmark sidebar, toolbar, menu button containers */
  /* Standard folder */
  #bookmarks-view treechildren::-moz-tree-image(container),
  #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {
    fill: gold !important;
  }
  /* Live Bookmark (RSS Feed) */
  #bookmarks-view treechildren::-moz-tree-image(container, livemark),
  #PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {
    fill: orange !important;
  }
  /* Smart bookmark folder */
  #bookmarks-view treechildren::-moz-tree-image(container, query),
  #PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon {
    fill: dimtan !important;
  }
  /* These "containers" are SVG in the sidebar, not yet on the menu */
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
    fill: tan !important;
  }
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
    fill: tan !important;
  }
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
    fill: tan !important;
  }

Modified by scottish2

more options

Hey scottish2 ... I had the same text as you printed prior to update. Interesting (or not) fact. Even deleting the chrome file doesn't fix problem -- I would have expected the tabs back on the top and then the Bookmarks Toolbar unmolested. So neither the old text (pre-update to 0.1) or new text I tried this afternoon or NO chrome file have any effect.

Thanks for the help!

more options

JussAskin said

Hey scottish2 ... I had the same text as you printed prior to update. Interesting (or not) fact. Even deleting the chrome file doesn't fix problem -- I would have expected the tabs back on the top and then the Bookmarks Toolbar unmolested. So neither the old text (pre-update to 0.1) or new text I tried this afternoon or NO chrome file have any effect. Thanks for the help!

Yeah I posted this after the last time it broke after mixing some of the codes people were suggesting here so perhaps you copied the one I posted as a solution.

The code was working perfectly until 72 then it pushed the tabs up over the bookmark toolbar. It just feels like the height for the over all header areas needs to be either raised so the tabs have space to move down or for the tabs to just be pushed down by themselves .

more options

This might the cause of issues with Tabs userChrome.css in Firefox 72.0 and 72.0.1 .

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

Try commenting out that "@namespace" line using /* and */ like this:

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

If that works for you you're all set, at least until Firefox 73.0 ...

But if you are using other userChrome.css mods that fall below the "Tabs on Bottom" code, you'll need to do other similar, fixes.


The biggest problem that we contributors have trying to helping users is that there are so damn many variations that we see posted in this support forum; the variations often contain code that isn't directly related to the "Tabs on Bottom" and that can have problems of their own or cause problems with the "Tabs on Bottom" code.

the code that scottish2 posted here: https://support.mozilla.org/en-US/questions/1276915#answer-1279712

adds unrelated code starting with /* Colored bookmark sidebar, toolbar, menu button containers */ which still need the "@namespace ... line at the start of that passage. The @namespace line may be needed that the beginning of that passage.

more options

To the-edmeister Thanks, for the response, but this is confusing to me.

If I'm reading your instructions correctly, I change the top line of scottish2 by the * to the beginning and end of the line. That didn't change anything.

The only thing I need in the chrome file is tabs on bottom. I would be happy if I could get some cut and paste text that would be the only thing in the chrome file and fix this problem.

Still need help! Thanks!

more options

the-edmeister said

This might the cause of issues with Tabs userChrome.css in Firefox 72.0 and 72.0.1 .
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

Try commenting out that "@namespace" line using /* and */ like this:

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

If that works for you you're all set, at least until Firefox 73.0 ...

But if you are using other userChrome.css mods that fall below the "Tabs on Bottom" code, you'll need to do other similar, fixes.


The biggest problem that we contributors have trying to helping users is that there are so damn many variations that we see posted in this support forum; the variations often contain code that isn't directly related to the "Tabs on Bottom" and that can have problems of their own or cause problems with the "Tabs on Bottom" code.

the code that scottish2 posted here: https://support.mozilla.org/en-US/questions/1276915#answer-1279712

adds unrelated code starting with /* Colored bookmark sidebar, toolbar, menu button containers */ which still need the "@namespace ... line at the start of that passage. The @namespace line may be needed that the beginning of that passage.

This worked for me Thanks!

And by the way the tweak did not at all effect the coloring for my folders so apparently this also does not need that line apparently????

Modified by scottish2

more options

This is my full code with the one tweak suggested above and it worked fine for me tabs are again at the bottom and all my folder colors are as I want them!!

Just copy and past it all into your userchrome.css and save then reopen firefox.

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

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




/* Colored bookmark sidebar, toolbar, menu button containers */
  /* Standard folder */
  #bookmarks-view treechildren::-moz-tree-image(container),
  #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {
    fill: gold !important;
  }
  /* Live Bookmark (RSS Feed) */
  #bookmarks-view treechildren::-moz-tree-image(container, livemark),
  #PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {
    fill: orange !important;
  }
  /* Smart bookmark folder */
  #bookmarks-view treechildren::-moz-tree-image(container, query),
  #PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon {
    fill: dimtan !important;
  }
  /* These "containers" are SVG in the sidebar, not yet on the menu */
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
    fill: tan !important;
  }
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
    fill: tan !important;
  }
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
    fill: tan !important;
  }
more options

To: scottish2

I copied and pasted your entire file into the userChrome.css file (the only thing in the file) and it didn't work! Aargh! This is really stressing me out, Help!

more options

Chosen Solution

Question which file/folder are you modifying??

Local or Roaming?

If local that's the issue do this in the roaming on and that should fix it. I had this issue with 71 was updating the local folder and it would not work until I thought to try it in roaming and that worked.

Also to make sure you are updating the right profile folder which is roaming do this

Goto HELP and select TROUBLESHOOTING INFO

this will open a new tab and a little bit down the list you will see profile this is your browsers curent profile. Click open folder this is best way to get to the correct folder then create CHROME folder if needed and put in the userchrome.css file

Also make sure the folders and files are correct in case

chrome userChrome.css

the middle C in userChrome.css has to be cap! The folder all lower case

Modified by scottish2

more options

scottish2 ... Not sure what you mean with local or roaming ... I deleted the chrome file and started from scratch: go to profile and open the file. I right clicked, created the chrome file then opened the txt created the userChrome.css and pasted your text and saved. No luck, still overwritten! So much stress!

more options

Well there are two folders for Firefox one is a local folder and ones roaming folder.

But if you goto HELP/TROUBLESHOOTING INFORMATION in the firefox help menu this will open a new tab in the page there is a listing for profiles. Clicking on open folder will open the correct folder you need to be in the one for roaming.

Then simply make sure there is a chrome folder in there if not create it.

Then if needed create the userChrome.css file in there.

Make sure the file and folder names reflect what is below as one of the other users in here said they are case sensitive

chrome userChrome.css

As stated above the C in Chrome on the CSS file that is a cap the rest of the lettering is all lower case.

if it does not work will try and explain it a different way.

Just make sure that in Windows explorer that the address at the top looks something like this.

Both USER ID and PROFILE ID are unique to your firefox so both these will reflect what your computer has set for it which will be different then mine so where is says USER ID and PROFILE ID these will reflect your computers name and the unique profile number for you. Just make sure the link says ROAMING in it!!!

C:\Users\USER ID\AppData\Roaming\Mozilla\Firefox\Profiles\PROFILE ID\chrome

more options

scottish2 I'm sure I placed the crome folder in the right place, but now I really screwed up.

I thought I would reinstall firefox, since deleting the crome file didn't fix the problem (putting tabs back on top and bookmark toolbar below works).  It worked, tabs on top.  However, I had no bookmarks.  So after reading another article about profiles, (and honestly, I don't remember what I did)  I brought up the profile page and clicked the profile that was not the default to make it the default.   It restored my bookmarks (with no chrome file) but back to tabs on top of the bookmark toolbar.   put chrome file back in and no change.  Now I really am stuck and don't know what to do.  Can you help?
more options

Ohhh scottish2 ... I got it! Again, don't ask me how but I went back in to the profiles, deleted the chrome folder and redid the process ... Tabs under toolbar all working fine, it seems.

Thank you for working so hard on this for me. I really appreciate the help!

more options

OK let me check on this so you uninstalled and reinstalled Firefox? And you then reinstalled your bookmark bar?

But tabs are on top rather then bottom?

If this is correct then do the following.

In Firefox there should be a menu at top

File / Edit / View / History / Booksmarks / Tools / Help

Click on the HELP menu. In the help menu click on TROUBLESHOOTING INFORMATION. This will bring up a new tab that looks similar to the screen shot I attached to this post. See image after the code as the post put it at the very end

The RED text this will in fact be a unique link for YOUR profile folder which while similar will be unique for your firefox. There is a OPEN FOLDER button also shown inside yellow square. Click that which will then open up the proper profile folder in Windows Explorer.

In this look at the folders in the list do you see chrome?

If not then on the right just somewhere right click and select NEW from the small pop up menu and in new select FOLDER and type in

chrome

as the new folder name. ALL LOWER CASE LETTERS!!

then go into that folder and right click and create a NEW TEXT DOCUMENT. Name this new document

userChrome.css

confirm the file name extension change. Then open this new file and paste in the enter code below. Save it and reopen Firefox.

If this does not work then unsure what to suggest. It worked perfectly for me the second I opened firefox after editing the code

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

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




/* Colored bookmark sidebar, toolbar, menu button containers */
  /* Standard folder */
  #bookmarks-view treechildren::-moz-tree-image(container),
  #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {
    fill: gold !important;
  }
  /* Live Bookmark (RSS Feed) */
  #bookmarks-view treechildren::-moz-tree-image(container, livemark),
  #PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {
    fill: orange !important;
  }
  /* Smart bookmark folder */
  #bookmarks-view treechildren::-moz-tree-image(container, query),
  #PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon {
    fill: dimtan !important;
  }
  /* These "containers" are SVG in the sidebar, not yet on the menu */
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
    fill: tan !important;
  }
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
    fill: tan !important;
  }
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
    fill: tan !important;
  }

Modified by scottish2

more options

scottish2 ... Think we crossed messages ... I think I'm fine now, and again thank you for your help. I know you wouldn't have guessed, but I'm not that techno savoy ... Took me a while, but I figured out what you were trying to tell me (I'll bet you had to really dumb it down).

Thank you for bearing with me ... your help was invaluable Wish this "Tabs On Bottom" problem would go away ... Why can't they go back to making it a menu choice?

CHEERS!

more options

No problem just glad you got it worked out.

And agreed I mean there are enough users wanting it on the bottom I am surprised they just don't give us the option back. Some of these things they are adding into updates I personally never use and the one item I would use is this tabs on bottom.

You can always do what I did in the HELP menu select SEND FEEDBACK and complain maybe if they get enough complaints they will work on adding this back in!

more options

My tabs are over top of my bookmarks toolbar too. Here's my UserChrome.css - Please don't laugh, every time something breaks I add to the code. No idea what most of it means.

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

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}
/* Curve the background tabs at the upper left and right corners
   May not work on add-on themes. */
.tabbrowser-tab {
  border-radius: 10px 10px 0px 0px / 15px 15px 0px 0px !important;
}
/* Curve active tab and slightly overlap neighboring tabs */
.tabbrowser-tab .tab-background[selected="true"]  
background-color: red; /* this sets the color of the tab background */
}
  margin-left: -1px !important;
  margin-right: -1px !important;
  border-radius: 10px 10px 0px 0px / 15px 15px 0px 0px !important;
}
/* Shorten the tab line along the tops of tabs */
.tab-line {
  margin-left: 9px !important;
  margin-right: 9px !important;
}
/* Shorten the vertical lines between background tabs */
.tabbrowser-tab::before, .tabbrowser-tab::after {
  margin-top: 9px !important;
}

/** "Light" Theme (Dark Text) **/

/* Border the background tabs (30% gray) for greater visibility */
#main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab:not([selected="true"]) {
  border: 1px solid rgba(0,0,0,.1) !important;
  border-bottom-color: transparent !important;
  margin-right: -1px !important;
}
/* Remove short vertical lines between background tabs */
#main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::before, 
#main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::after {
  border: none !important;
}
#TabsToolbar {
 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: 33px !important; /* adjust to suit your needs */
}
: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;
}

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

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

Read this answer in context 10

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

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


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

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

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

#TabsToolbar #window-controls {
 display: none !important;
}

/

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

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




    /* Colored bookmark sidebar, toolbar, menu button containers */
      /* Standard folder */
      #bookmarks-view treechildren::-moz-tree-image(container),
      #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
      #PlacesToolbarItems menu[container="true"] .menu-iconic-left,
      #BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {
        fill: gold !important;
      }
      /* Live Bookmark (RSS Feed) */
      #bookmarks-view treechildren::-moz-tree-image(container, livemark),
      #PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
      #PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
      #BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {
        fill: orange !important;
      }
      /* Smart bookmark folder */
      #bookmarks-view treechildren::-moz-tree-image(container, query),
      #PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
      #PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
      #BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon {
        fill: dimtan !important;
      }
      /* These "containers" are SVG in the sidebar, not yet on the menu */
      #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
        fill: tan !important;
      }
      #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
        fill: tan !important;
      }
      #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
        fill: tan !important;
      }

Modified by cor-el