Internet Browsers: What are YOU using? (And why?) (1 Viewer)

[jcroy]

I've never understood why Mozilla seems so focused on making Firefox work just like Chrome. If we wanted to be using Chrome, we'd be using it. Why doesn't Firefox play to its own strengths instead?

What exactly are those strengths in recent times?

Back in the day, I thought the primary strength of Mozilla was its provenance did not include Microsoft's Internet Explorer. In those days, IE was a giant security hole.

 

[Mike Frezon]

My FF updated to 92.0.

Everything looks great. Better, actually, as the tabs (which are located in the proper place--just above the browser window) are now all a light color rather than black for the inactive tabs. When they were black I couldn't ever see the "X" to close them out. This is an improvement.

 

[questrider]

Here's what I was able to pull together to mostly fix the stuff the FF devs broke with the last update. It puts tabs back on bottom with a top menu bar, disables the scrolling tab overflow junk, black close tab "X", and prevents the URL bar from expanding in size when you click in it.

I also attached the css as a zip file.

Spoiler

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


/* Source file https://github.com/MrOtherGuy/firef...hrome/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:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }

#navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }
:root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 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 }


.tab-close-button {
color: black!important;
}

/*** Disable tabs scrolling on overflow ***/

.tabbrowser-tab {
min-width: initial !important;
}
.tab-content {
overflow: hidden !important;
}

/*** Disable tabs scrolling on overflow end ***/

/*** BEGIN Firefox 77 (June 2, 2020) Override URL bar enlargement ***/

/* Compute new position, width, and padding */

#urlbar[breakout][breakout-extend] {
top: 5px !important;
left: 0px !important;
width: 100% !important;
padding: 0px !important;
}
/* for alternate Density settings */
[uidensity="compact"] #urlbar[breakout][breakout-extend] {
top: 3px !important;
}
[uidensity="touch"] #urlbar[breakout][breakout-extend] {
top: 4px !important;
}

/* Prevent shift of URL bar contents */

#urlbar[breakout][breakout-extend] > #urlbar-input-container {
height: var(--urlbar-height) !important;
padding: 0 !important;
}

/* Do not animate */

#urlbar[breakout][breakout-extend] > #urlbar-background {
animation: none !important;;
}

/* Remove shadows */

#urlbar[breakout][breakout-extend] > #urlbar-background {
box-shadow: none !important;
}

/*** END Firefox 77 (June 2, 2020) Override URL bar enlargement ***/

Firefox 91.0 broke tabs and menu spacing again. They apparently disabled a couple of about:config settings to turn off the horrible "Proton" UI.

BUT - here's some code to put in your userchrome.css file to fix that... again...

Spoiler

/*** Disable Proton UI changes, and tighten menu spacing ***/

.tab-background{
border-radius: 0px 0px !important;
margin-bottom: 0px !important;
}
.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background{
background-color: color-mix(in srgb, currentColor 5%, transparent);
}
menupopup > menu, menupopup > menuitem{
padding-block: 2px !important;
}
:root{
--arrowpanel-menuitem-padding: 2px !important;
}

/*** END Disable Proton UI changes, and tighten menu spacing ***/

This seems to work best if it's above any other settings that make tab/UI changes.

I'm late to this update, so thanks, Bob, for these chrome.css updates to get the tabs on the bottom again. I'm with the others in this thread that just thinks it's ridiculous all of these hoops need to be jumped through just to get the tabs where they should be! It's absolutely bewildering that Mozilla can't simply provide a toggle option in the Settings for "Tabs on Top/Bottom".

So everything tab-related looks good; however, I now have a 29 px in height empty bar at the top above the URL bar that appears to be a placeholder for the "Menu Bar" that I have turned off since these days I've become accustomed to using the hamburger menu on the far right for these options. Anyone know any way of getting rid of this space for the menu bar?

 

[kalm_traveler]

late to the party here but I use Chrome, Chromium, Firefox and most recently Brave.
From a professional standpoint it seems Brave is probably what I'd recommend but as for why I use several... various browsing cases where I may not want for example school research to overlap with home theater searches but I'm ok with some cookies existing separately.

 

[questrider]

Here's what I was able to pull together to mostly fix the stuff the FF devs broke with the last update. It puts tabs back on bottom with a top menu bar, disables the scrolling tab overflow junk, black close tab "X", and prevents the URL bar from expanding in size when you click in it.

I also attached the css as a zip file.

Spoiler

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


/* Source file https://github.com/MrOtherGuy/firef...hrome/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:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }

#navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }
:root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 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 }


.tab-close-button {
color: black!important;
}

/*** Disable tabs scrolling on overflow ***/

.tabbrowser-tab {
min-width: initial !important;
}
.tab-content {
overflow: hidden !important;
}

/*** Disable tabs scrolling on overflow end ***/

/*** BEGIN Firefox 77 (June 2, 2020) Override URL bar enlargement ***/

/* Compute new position, width, and padding */

#urlbar[breakout][breakout-extend] {
top: 5px !important;
left: 0px !important;
width: 100% !important;
padding: 0px !important;
}
/* for alternate Density settings */
[uidensity="compact"] #urlbar[breakout][breakout-extend] {
top: 3px !important;
}
[uidensity="touch"] #urlbar[breakout][breakout-extend] {
top: 4px !important;
}

/* Prevent shift of URL bar contents */

#urlbar[breakout][breakout-extend] > #urlbar-input-container {
height: var(--urlbar-height) !important;
padding: 0 !important;
}

/* Do not animate */

#urlbar[breakout][breakout-extend] > #urlbar-background {
animation: none !important;;
}

/* Remove shadows */

#urlbar[breakout][breakout-extend] > #urlbar-background {
box-shadow: none !important;
}

/*** END Firefox 77 (June 2, 2020) Override URL bar enlargement ***/

Firefox 91.0 broke tabs and menu spacing again. They apparently disabled a couple of about:config settings to turn off the horrible "Proton" UI.

BUT - here's some code to put in your userchrome.css file to fix that... again...

Spoiler

/*** Disable Proton UI changes, and tighten menu spacing ***/

.tab-background{
border-radius: 0px 0px !important;
margin-bottom: 0px !important;
}
.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background{
background-color: color-mix(in srgb, currentColor 5%, transparent);
}
menupopup > menu, menupopup > menuitem{
padding-block: 2px !important;
}
:root{
--arrowpanel-menuitem-padding: 2px !important;
}

/*** END Disable Proton UI changes, and tighten menu spacing ***/

This seems to work best if it's above any other settings that make tab/UI changes.

I'm late to this update, so thanks, Bob, for these chrome.css updates to get the tabs on the bottom again. I'm with the others in this thread that just thinks it's ridiculous all of these hoops need to be jumped through just to get the tabs where they should be! It's absolutely bewildering that Mozilla can't simply provide a toggle option in the Settings for "Tabs on Top/Bottom".

So everything tab-related looks good; however, I now have a 29 px in height empty bar at the top above the URL bar that appears to be a placeholder for the "Menu Bar" that I have turned off since these days I've become accustomed to using the hamburger menu on the far right for these options. Anyone know any way of getting rid of this space for the menu bar?

Just a follow-up that I solved this myself but wanted to document it in case anyone else reads this thread and needs to remove the placeholder space for the Menubar.

There are three places in the first .css code from Bob quoted above where a "29px" height appears for the Menubar. Change "29px" to "0px" and the placeholder space disappears. Perfect!

Spoiler

#navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }
:root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 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; }

Before:

After:

 

[BobO'Link]

I'm getting very tired and fed up with the constant game of "Whack a Mole" in Firefox to keep older preferences THAT WORK AND WORK WELL in place. Update 97 removed the about:config option:

print.tab_modal.enabled = False

To always present the UI print dialog and *not* the horrible Chrome print as a PDF from the Browser version implemented several versions back.

Right now - there's no known work around (though the option is still there and now requires an extra click to get what you wanted to start).

At least they've left the main UI alone for a few updates - or maybe I should say they've not messed up CSS processing so changes to to the UI made in that file still work.

 

[theJman]

There's no about:config? How is it customized then?

 

[BobO'Link]

It's not - at least with that print option. No customization possible. They've been depricating lots of the about:config settings with the past few updates... And they wonder why people stop using Firefox. If I can't make it look/work the way *I* want then I might as well be using Chrome/Edge/Chromium-flavor-of-the-month browser - which seems to be the direction the Firefox devs are taking Firefox.

 

[jcroy]

The configuration flags are a weird hit-or-miss project to figure out for chromium/chrome. I mostly look at what the brave browser does in terms of command line flags to suppress various junk. (Brave is based on chromium).

Much easier in Firefox with about:config at suppressing junk.

 

[theJman]

I've changed a number of settings over the years using about:config. That would be a huge loss.

 

[Wardog555]

I use Firefox as Google Chrome constantly freezes and crashes. And yes this is on a decent computer

 

[BobO'Link]

More junk added with the 106x version of Firefox... something called "View" and a "Tab manager" - both of which I found completely useless.

All "View" does is add a "pinned tab" which serves the exact same function as "History/Recently Closed Tabs" - yeah... another crap space hog for a function that's in the menu they think you don't need. So let's put it in that way rather than turn the menu back on by default like should be done.

I already have disabled their horrid scrolling tab junk so my tabs just get smaller and smaller as I add more and don't scroll off the page. I know what's there and don't need a fake tab that shows me a menu of what's in the others.

So... I disabled them...

about:config

Type firefox-view in Search filter box to get this:

Set the bolded line to "false"
If you've clicked on the "View" tab after upgrading, the view-count will show how many times - set it to 0. Otherwise it may not be there at all.
Set the "services.sync.prefs.sync.browser.firefox-view.feature-tour" to "false" if it's there.

THEN for the "Tab Manager":
type tabmanager in Search filter box:
Set the "browser.tabs.tabmanager.enabled" value to false.

You'll have to restart the browser to remove that fake tab after making that change.

I got both of those fixes from this site:

https://www.askvg.com/tip-disable-or-remove-firefox-view-tab-icon-from-toolbar/

And they *still* haven't fixed the forced use of the Firefox print dialog... I'm growing extremely tired of that crap every time...

 

[John Dirk]

Hmm... I was actually considering a return to Firefox after learning yesterday of Google's embracing Manifest 3.0, which will severely cripple traditional Ad Blockers.

 

[BobO'Link]

Even with all its "issues" - Firefox is far more configurable than Chrome or any of its offspring. I use a portable version to make it easy to copy my customizations between systems.

 

[questrider]

More junk added with the 106x version of Firefox... something called "View" and a "Tab manager" - both of which I found completely useless.

All "View" does is add a "pinned tab" which serves the exact same function as "History/Recently Closed Tabs" - yeah... another crap space hog for a function that's in the menu they think you don't need. So let's put it in the way rather than turn the menu back on like should be done.

I already have disabled their horrid scrolling tab junk so my tabs just get smaller and smaller as I add more and don't scroll off the page. I know what's there and don't need a fake tab that shows me a menu of what's in the others.

So... I disabled them...

about:config

Type firefox-view in Search filter box to get this:

View attachment 159271
Set the bolded line to "false"
If you've clicked on the "View" tab after upgrading, the view-count will show how many times - set it to 0. Otherwise it may not be there at all.
Set the "services.sync.prefs.sync.browser.firefox-view.feature-tour" to "false" if it's there.

THEN for the "Tab Manager":
type tabmanager in Search filter box:
Set the "browser.tabs.tabmanager.enabled" value to false.

You'll have to restart the browser to remove that fake tab after making that change.

I got both of those fixes from this site:

https://www.askvg.com/tip-disable-or-remove-firefox-view-tab-icon-from-toolbar/

And they *still* haven't fixed the forced use of the Firefox print dialog... I'm growing extremely tired of that crap every time...

I agree wholeheartedly on those two new 106.0.1 update "features" of View and Tab Search. Why does anyone need to have the ability to search their tabs? Baffling the things they want to keep adding that have no value. Luckily with Firefox you can disable most of this garbage whereas as you said with Chrome you're stuck with these unwanted "features" cluttering the interface.

Thanks, Bob, as always, for the hacks. I had found the one for the Tab Search yesterday on my work laptop but didn't bookmark the about:config variable value so having it here was nice and convenient! And I think the mini View tab can be disabled by right-clicking it and choosing "Remove from Menubar"?

 

[theJman]

Hmm... I was actually considering a return to Firefox after learning yesterday of Google's embracing Manifest 3.0, which will severely cripple traditional Ad Blockers.

Google has been working on that for maybe 2 years now so it's a while in the making. Guess they've seen their ad review - aka the goose that laid the golden egg - dwindling so the number of millionaires they mint is probably diminishing with it. There are some browsers that have imbedded ad blocking into their code, but I'm not sure if that's impacted by manifest 3.0. If so they'll be effected as well.

Hopefully if/when Google implements manifest 3.0 someone will fork the code and start a whole new platform to build from. If that happens Google might be the only one using their version, ad blocking is that essential to many of us. I tried turning off the blockers I have enabled just to see how bad browsing becomes and was shocked by what I found.

Even with all its "issues" - Firefox is far more configurable than Chrome or any of its offspring. I use a portable version to make it easy to copy my customizations between systems.

Vivaldi's configurations make all other browsers seem like they're standing still, including FireFox. It's based on Chromium, same as Chrome. For the person who wants to configure their browser in minute detail Vivaldi is definitely the one to use.

Why does anyone need to have the ability to search their tabs?

For a casual user the need to search tabs is probably limited but for power users that's actually a very beneficial capability. I often have numerous tabs open, searching for me is imperative.

 

[BobO'Link]

I agree wholeheartedly on those two new 106.0.1 update "features" of View and Tab Search. Why does anyone need to have the ability to search their tabs? Baffling the things they want to keep adding that have no value. Luckily with Firefox you can disable most of this garbage whereas as you said with Chrome you're stuck with these unwanted "features" cluttering the interface.

Thanks, Bob, as always, for the hacks. I had found the one for the Tab Search yesterday on my work laptop but didn't bookmark the about:config variable value so having it here was nice and convenient! And I think the mini View tab can be disabled by right-clicking it and choosing "Remove from Menubar"?

Don't know - I was already on the about:config page and saw the entry for disabling it that way so just did it there instead. It's likely that it can be done that way - View can. Supposedly the about:config settings completely remove it from FF - at least they remove those options from the "Customize Toolbar" items. If you simply right click remove them they'll supposedly still be in that list as options. BUT I don't know and really don't care as they're worthless additions. If they keep on going the way they seem to be headed, we'll eventually see most, if not all, of the "Menu" items as space wasting icons with a new name on a toolbar somewhere. Pure stupidity.

I have their "Data collection" junk disabled - maybe I need to enable it so they get data from someone who *doesn't* use and fully disables all this useless crap they keep foisting on users, most of whom do not know enough to disable these changes and likely don't know they're mostly nothing but duplication of Menu items that are hidden by default being returned in the disguise of a "new feature."

Google has been working on that for maybe 2 years now so it's a while in the making. Guess they've seen their ad review - aka the goose that laid the golden egg - dwindling so the number of millionaires they mint is probably diminishing with it. There are some browsers that have imbedded ad blocking into their code, but I'm not sure if that's impacted by manifest 3.0. If so they'll be effected as well.

Hopefully if/when Google implements manifest 3.0 someone will fork the code and start a whole new platform to build from. If that happens Google might be the only one using their version, ad blocking is that essential to many of us. I tried turning of the blockers I have enabled just to see how bad browsing becomes and was shocked by what I found.




Vivaldi's configurations make all other browsers seem like they're standing still, including FireFox. It's based on Chromium, same as is Chrome. For the person who wants to configure their browser in minute detail Vivaldi is definitely the one to use.



For a casual user the need to search tabs is probably limited but for power users that's actually a very beneficial capability. I often have numerous tabs open, searching for me is imperative.

I tried Vivaldi - it's absolutely not as customizable as FF and comes off as a slightly better version of Chrome.

I'm a power user - normally have 20+ tabs open regularly (my work systems *start* with 20 tabs and go up from there). I have *zero* need to search tabs. I know what I have open and in which order and where they are.

 

[theJman]

I tried Vivaldi - it's absolutely not as customizable as FF and comes off as a slightly better version of Chrome.

The configurations page probably has 20 different categories, I wouldn't be surprised if there's not 100 different items you can adjust. And that's if you install the Essentials version, opting for the Fully Loaded variant - that also includes email and calendar - increases the number of options significantly. As far as customizations there's really no other browser like it.

 

[Mike Frezon]

At least I didn't need new code to keep tabs at the top of the page (just under the bookmark toolbar)!

I also kinda like the new color options (which were presented to me on a splash page when I opened 106.0 for the first time). But I'll be damned if I can easily find where to modify them now...

 

[BobO'Link]

And.... with Firefox 113.x they've screwed up the css processing. Apparently deprecating some old, "non standard," commands and forcing a move to a newer process. OK... that means you need to change your css file *again* to get tabs back on bottom where they belong.

Here's the code to put in your userChrome.css file:

Spoiler

/* 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{
-moz-box-ordinal-group: 2; /* 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{
-moz-box-ordinal-group: 2; /* Fx <112 compatibility */
order: 2;
}

#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; /* 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{
-moz-box-ordinal-group: 2;
order: 2;
}
*/

/* Source file https://github.com/MrOtherGuy/firef...hrome/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: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;
}
: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;
}

If you'd rather have more done - here's my version that has other changes done (don't recall just what but it's in this thread somewhere - mostly stuff to do with colors, tab spacing, etc. It's also somewhat documented in the file with section headers) with that new "tabs on bottom" code instead:

Spoiler

/* 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{
-moz-box-ordinal-group: 2; /* 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{
-moz-box-ordinal-group: 2; /* Fx <112 compatibility */
order: 2;
}

#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; /* 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{
-moz-box-ordinal-group: 2;
order: 2;
}
*/

/* Source file https://github.com/MrOtherGuy/firef...hrome/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: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;
}
: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;
}


/*** Disable Proton UI changes, tighten menu spacing, and restore colors in title bar ***/

.tab-background{
border-radius: 0px 0px !important;
margin-bottom: 0px !important;
}
.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background{
background-color: color-mix(in srgb, currentColor 5%, transparent);
}
menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
padding-block: 1px !important; /* reduce to 3px, 2px, 1px or 0px as needed */
min-height: unset !important; /* v92.0 - for padding below 4px */
}
:root{
--arrowpanel-menuitem-padding: 2px !important;
}

/*** END Disable Proton UI changes, tighten menu spacing, and restore colors in title bar ***/


/*** Disable tabs scrolling on overflow ***/

.tabbrowser-tab {
min-width: initial !important;
}
.tab-content {
overflow: hidden !important;
}

/*** Disable tabs scrolling on overflow end ***/

/*** BEGIN Firefox 77 (June 2, 2020) Override URL bar enlargement ***/

/* Compute new position, width, and padding */

#urlbar[breakout][breakout-extend] {
top: 5px !important;
left: 0px !important;
width: 100% !important;
padding: 0px !important;
}
/* for alternate Density settings */
[uidensity="compact"] #urlbar[breakout][breakout-extend] {
top: 3px !important;
}
[uidensity="touch"] #urlbar[breakout][breakout-extend] {
top: 4px !important;
}

/* Prevent shift of URL bar contents */

#urlbar[breakout][breakout-extend] > #urlbar-input-container {
height: var(--urlbar-height) !important;
padding: 0 !important;
}

/* Do not animate */

#urlbar[breakout][breakout-extend] > #urlbar-background {
animation: none !important;;
}

/* Remove shadows */

#urlbar[breakout][breakout-extend] > #urlbar-background {
box-shadow: none !important;
}

/*** END Firefox 77 (June 2, 2020) Override URL bar enlargement ***/


/*** BEGIN tab modification section ***/
/*** https://www.userchrome.org/firefox-89-styling-proton-ui.html ***/

/*** Tighten up drop-down/context/popup menu spacing ***/
menupopup > menuitem, menupopup > menu {
padding-block: 3px !important;
}
:root {
--arrowpanel-menuitem-padding: 3px 8px !important;
}

/*** Proton Tabs Tweaks ***/

/* Adjust tab corner shape, optionally remove space below tabs */

#tabbrowser-tabs {
--user-tab-rounding: 0px;
}
@media (-moz-proton) {
.tab-background {
border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important;
margin-block: 1px 0 !important;
}
}

/* Inactive tabs: Separator line style */

@media (-moz-proton) {
.tab-background:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) {
border-right: 1px solid rgba(0, 0, 0, .20) !important;
}
/* For dark backgrounds */
[brighttext="true"] .tab-background:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) {
border-right: 1px solid var(--lwt-selected-tab-background-color, rgba(255, 255, 255, .20)) !important;
}
.tab-background:not([selected=true]):not([multiselected=true]) {
border-radius: 0 !important;
}
/* Remove padding between tabs */
.tabbrowser-tab {
padding-left: 0 !important;
padding-right: 0 !important;
}
}

/* Change color of tab background */

.tab-background {
background: #C8C3CD;

/*** END tab modification section ***/