Firefox 89 Moves My Tabs To The Bottom - HELP!

[richchad]

In the end I went into about:config found browser.proton.enabled and switched it to false and all back as it was including tab dividing lines.

Not sure what the downside is but read others have done this...

Will see how it goes.

[Mudder]

Was just updated to Proton and all my tabs were at the bottom of the browser window, but all the tabs were invisible except when I was CTRL-TAB'in between them. Got right furious at FF for mucking up the browser yet again, but you wonderful people have saved my sanity! Thank you all!

So this is my entire userChrome at the moment. At least I have my tabs back below the bookmarks and above the active pages again. At least I can use Firefox again.

Code: Select all

/* 4. TABS: on bottom */
*|*:root {
--menubar-height: 36px;
--bookmarkbar-height: 0px;
--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 I did this from a Reddit post: (https://www.reddit.com/r/firefox/commen ... _is_awful/)

browser.proton.enabled = false
browser.proton.contextmenus.enabled = false
browser.uidensity = 1
browser.compactmode.show = true

Will have to experiment more over the weekend. Looking forward to seeing what else you guys come up with Thanks again!

Yeah, I'm old and hate change, my old tabs are invisible also until I do the Ctrl-Tab thing, it irritates me to no end. This has got to stop or I'm moving all my passwords/logins to K-Meleon, because I hear Pale Moon is also affected. I've only ever played with K-M, haven't considered it to be a serious browser but it does have adblock and javascript blocking at least. Will have to experiment on weekend as well.

[Mudder]

Still going invisible on me, with a thick bar below address/search bar.


Can't find browser.compact.whatzit

See? short term memory frelled

Did the others to false, no change.


Chrissake!!! shouldn't have to learn this all overagain, had it fixed on 88 and earlier, missing my shows right now.

TinyPic is out of business, anywhere else I can free upload a screen shot, so I can get more help both browser and userChrome.css?

[bo elam]

This is what I ended up doing. I took chunks of the previous code that I was using and put it together with code posted by dick, stella and medevil (thanks to you all). And came up with 2 sets of code that gives me exactly the same and what I want. In both cases I had to adjust the values that were originally written in the code otherwise I would end up with large blank spaces between the URL bar and the tabs. Also, the tabs were way down low going out of the UI. And there was no close button for the bookmark sidebar,

After playing with the values, I ended up with what I wanted.

FWIW, I use the Menu bar and don't use the Bookmarks toolbar. And have not disable any Proton setting in about:config.

This is what my Firefox 89 looks like.

https://i.imgur.com/vYAXig7.jpg

Code 1


/* TABS: on bottom */

@import "./tabs_below_navigation_toolbar.css";

*|*:root {
--menubar-height: 36px;
--bookmarkbar-height: 1px;
--tabbar-top: calc(var(--menubar-height) + var(--bookmarkbar-height) + var(--tab-min-height) + 8px); /*89+*/
}

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

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


Code 2


/* TABS: on bottom */

@import "./tabs_below_navigation_toolbar.css";

*|*:root {
--menubar-height: 32px;
--bookmarkbar-height: 1px;
--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;}

}

Bo

[Fire_chicken]

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![/quote]



- Fantastic,awesome - Edited by replacing the Chrome.css file and it worked Perfectly as you said. Thanks much.

[P38Usul]

Thank You smart person Chrome CSS fixer !

[doofenshmirtz]

Hello,

is there a possibility to randomly display the tabs in different colours for better visual differentiation?
Add-ons like colorful-tabs and similar unfortunately also change parts of the firefox header.

Thanks

[kukla]

After adjusting bookmarks-bar height to negative value --bookmarkbar-height: -14px, which positions tabs properly in tab bar, this works perfectly for me, after copying 78esr profile over to the new 89 - Mac, btw (not sure who the OP was for this code, but many thanks):

Code: Select all

    /* TABS: on bottom */
   *|*:root {
    --menubar-height: 36px;
    --bookmarkbar-height: -14px;
    --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;}

https://i.postimg.cc/zv1CycD0/Screen-Sh ... -32-AM.jpg

[JBenal]

This has been a rough couple of days since FF updated to 89. I know nothing about CSS. I've just grabbed some code here and there and restarted FF to see the result. Many times the look was wrong. So I've got a situation where it looks pretty good with one exception - the big fat bar below the tabs. If someone could advise me how to get rid of that I would be very grateful. Thank you! Here's what it looks like.



I don't remember who posted this code, but someone here will likely recognize it.

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

Finally, I've made these changes in about:config

browser.proton.enabled false
browser.proton.contextmenus.enabled false

[ArniVidar]

Still going invisible on me, with a thick bar below address/search bar.

It stayed invisible for me until I deleted the entire userChrome file and restarted Firefox. One of the old 65-88 mods apparently ruined everything, and I didn't really want to bother with fixing it all. So with an empty file, I just added this one new bit to move them below the bookmarks, and that's worked.

Funnily enough, when I disable Proton at work, the browser reverts mostly to how it looked before. At home, however, it stays mostly Proton looking. No clue what the difference is, aside from IT having a stranglehold on most software at work.

[NZOC]

Found this thread after googling "easy way to get tabs on bottom on firefox". And have found there is absolutely no easy way to do this other than all this 'coding' and 'css' crap! I'm completely useless at all this stuff and all I want to do is have my tabs below the address bar, or even better, the bookmarks bar. Preferably I just want to install an extension to do this or just click a check box to make it happen. I don't know where to start to do all this css code crap and definitely don't have the patience, energy or time to muck around figuring it all out. To be honest I would rather use chrome but it doesn't allow for opening multiple tabs on startup so will put up firefox for a while longer I guess.

Unless of course someone can explain in simple step by step, click by click dumb-downed instructions.

To be honest I don't get why they ever moved the tabs to the top. It just doesn't make sense at all. For example you have old fashioned paper files and the tab is connected directly (actually is a part of) the page it refers to, logic really. So, why the hell are tabs here completely detached from the page they refer too?!?!?! Just dumb.

[bigbunny]

I am having trouble finding what to do with the CSS code on my Mac (Big Sur). Where is the chrome folder? Thanks in advance for any help.

(The advice I found on the web did NOT work — or do anything actually. I have tried!)

I, too, am getting to the point of just giving up with Firefox — and I've been a Firefox user since the early years.

[Mudder]

imgur won;t let me see any of your screenshots, the object just keeps on spinning any thing out there that compares to the old TinyPic?

I'm frelling upset. I need to post my screen shots, so somebody can tell me where I screwed up. Should have mentioned, that thick bar is blank and tabs show up in the window.

[Mudder]

Bo

imgur won't let me see, damn I miss TinyPic!

[bigbunny]

I created a 'chrome' folder and put the CSS code into it ... and it's done bugger all.

NOTHING.

I've tried 5 different versions of CSS code.

Any advice?

Any Mac users?

Thanks.