Firefox 89 Moves My Tabs To The Bottom - HELP!

[medievil]

I use, well used the old tabs below navigation bar fx65 css stuff... had to change it somewhat... first made my own css with the code posted above for mint

Code: Select all

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

But kept the original import it used...... mine(import) is tweaked and I use no bookmark bar so I simple set it to 1px

the import file, if anyone is interested

Code: Select all

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


:root {

 
  --colored_menubar_background_image: linear-gradient(#f9f9fa,#f9f9fa);
  --general_toolbar_color_toolbars: linear-gradient(#f9f9fa,#f9f9fa);
  --general_toolbar_color_navbar: linear-gradient(#f9f9fa,#f9f9fa);
  --tabs_toolbar_color_tabs_not_on_top: linear-gradient(#f9f9fa,#f9f9fa);
  --tabs_toolbar_border-tnot_normal_mode_size: 1px;
  --tabs_toolbar_border-tnot_normal_mode: var(--tabs-border-color);
  --classic_squared_tabs_tab_text_color: black;
  --classic_squared_tabs_new_tab_icon_color: black;
  --classic_squared_tabs_tab_text_shadow: transparent;
  --tab-min-height_tnot: 32px;
}

:root[uidensity=compact]  {
  --tab-min-height_tnot: 28px;
}

:root[uidensity=touch] {
  --tab-min-height_tnot: 40px;
}

/* tabs toolbar adjustment */
#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, 
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#TabsToolbar {
  -moz-padding-start: 2px !important;
}

#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme, 
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme,
#main-window[uidensity=compact][tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme,
#TabsToolbar:-moz-lwtheme,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[sizemode="maximized"] #TabsToolbar,
#main-window[tabsintitlebar]:not([style*='--lwt-header-image']):-moz-lwtheme #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, 
#main-window[tabsintitlebar][sizemode="maximized"]:not([style*='--lwt-header-image']):-moz-lwtheme #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar]:not([style*='--lwt-header-image']):-moz-lwtheme #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"]:not([style*='--lwt-header-image']):-moz-lwtheme #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar]:not([style*='--lwt-header-image']):-moz-lwtheme #TabsToolbar {
  -moz-padding-start: 0px !important;
}

#main-window[tabsintitlebar][sizemode="normal"]:not([sizemode="fullscreen"]) #TabsToolbar {
  margin-top: 0px !important;
}

#main-window[tabsintitlebar][sizemode="normal"][chromehidden~="menubar"] #TabsToolbar,
#main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"][chromehidden~="menubar"] #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar {
  padding-top: 0px !important;
}

#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window[tabsintitlebar] #toolbar-menubar[autohide="false"] ~ #TabsToolbar{
  margin-top: 0px !important;
}

/* tab title in titlebar support */
#main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="normal"] #navigator-toolbox #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #navigator-toolbox #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #navigator-toolbox #TabsToolbar,
#main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="normal"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar{
  margin-top: 0px !important;
}

/* titlebar button support */
#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar{
  margin-top: 2px !important;
}

/* fix for application/hamburger button in titlebar */
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar #PanelUI-button {
  visibility: collapse !important;
}

#main-window[inDOMFullscreen="true"] #TabsToolbar {
  opacity: 0 !important;
}

/* tab height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height_tnot) !important;
}

/* toolbar order (start) ************************************/
#print-preview-toolbar,
#printedit-toolbar,
#titlebar {
  -moz-box-ordinal-group: 0 !important;
}
#navigator-toolbox #toolbar-menubar {
  -moz-box-ordinal-group: 1 !important;
}
/* navigation toolbar */
#navigator-toolbox #nav-bar {
  -moz-box-ordinal-group: 2 !important;
}
/* bookmarks toolbar */
#navigator-toolbox #PersonalToolbar {
  -moz-box-ordinal-group: 3 !important;
}
/* 3rd party toolbars */
#navigator-toolbox toolbar {
  -moz-box-ordinal-group: 10 !important;
}
/* tabs toolbar */
#navigator-toolbox #TabsToolbar {
  -moz-box-ordinal-group: 100 !important;
}
/* toolbar order (end) **************************************/

/* toolbar colors */
#main-window:not([tabsintitlebar]) #toolbar-menubar:not(:-moz-lwtheme) {
  background-image: var(--colored_menubar_background_image) !important;
  border: 0px !important;
  margin-bottom: -1px !important;
}

#nav-bar:not(:-moz-lwtheme) {
  -moz-appearance: none !important;
  background: var(--general_toolbar_color_navbar, inherit) !important;
}

toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar):not(:-moz-lwtheme) {
  -moz-appearance: none !important;
  background: var(--general_toolbar_color_toolbars, inherit) !important;
}
#TabsToolbar:not(:-moz-lwtheme){
  -moz-appearance: none !important;
  background-image: var(--tabs_toolbar_color_tabs_not_on_top) !important;
}

/* remove color overlay for lw-themes */
#main-window[style*='--lwt-header-image'] :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme{
  background: unset !important;
}

/* adjust compact themes background color */
#main-window:not([style*='--lwt-header-image']) #TabsToolbar:-moz-lwtheme {
  -moz-appearance: none !important;
  background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important;
}

#main-window:not(:-moz-lwtheme) #TabsToolbar :-moz-any(.tabs-newtab-button,.scrollbutton-up,.scrollbutton-down),
#main-window:not(:-moz-lwtheme) #TabsToolbar > toolbarbutton,
#main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar :-moz-any(.tabs-newtab-button,.scrollbutton-up,.scrollbutton-down),
#main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar > toolbarbutton {
  fill: var(--classic_squared_tabs_new_tab_icon_color) !important;
  color: var(--classic_squared_tabs_new_tab_icon_color) !important;
}

/* toolbar borders */
#main-window #navigator-toolbox::after {
  opacity: 0 !important;
}

#TabsToolbar{
  margin-bottom: 0px !important;
  border-bottom: 1px solid #5f7181 !important;
}

#main-window[sizemode="normal"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar) {
  border-left: var(--tabs_toolbar_border-tnot_normal_mode_size) solid var(--tabs_toolbar_border-tnot_normal_mode) !important;
  border-right: var(--tabs_toolbar_border-tnot_normal_mode_size) solid var(--tabs_toolbar_border-tnot_normal_mode) !important;
  background-clip: padding-box !important;
}

#main-window[sizemode="maximized"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar) {
  border-left: 0px !important;
  border-right: 0px !important;
}

#main-window[style*='--lwt-header-image'][sizemode="normal"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme,
#main-window[style*='--lwt-header-image'][sizemode="maximized"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme {
  border-top: 0px !important;
  border-left: 0px !important;
  border-right: 0px !important;
}

#main-window:not([style*='--lwt-header-image']):-moz-lwtheme-brighttext #TabsToolbar:-moz-lwtheme {
  border-bottom: 1px solid #323234 !important;
}

#main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-brighttext #TabsToolbar:-moz-lwtheme {
  border-bottom: 1px solid #323234 !important;
}

#main-window:not([sizemode="fullscreen"])[tabsintitlebar] #TabsToolbar{
  -moz-margin-end: 0px !important;
}

#main-window[tabsintitlebar] #TabsToolbar .titlebar-placeholder{
  visibility: collapse !important;
}

#main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive="true"] {
  margin-top: 21px !important;
}
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] {
  margin-top: 20px !important;
}

#tabbrowser-tabs .tab-drop-indicator {
  margin-bottom: 0px !important;
}

#PersonalToolbar:-moz-lwtheme,
#nav-bar:-moz-lwtheme {
  background-image: none !important;
  box-shadow: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* remove tab fog */
#TabsToolbar:not(:-moz-lwtheme),
#TabsToolbar:not(:-moz-lwtheme)::before,
#TabsToolbar:not(:-moz-lwtheme)::after {
  box-shadow: unset !important;
}

/* remove 'dragging tab' margin/padding nonsense */
#TabsToolbar[movingtab] {
  padding-bottom: unset !important;
}

#TabsToolbar[movingtab] > .tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}

#TabsToolbar[movingtab] + #nav-bar {
  margin-top: unset !important;
}

/* scroll buttons */
#TabsToolbar:not(:-moz-lwtheme) #alltabs-button,
#TabsToolbar:not(:-moz-lwtheme) .tabbrowser-arrowscrollbox > .scrollbutton-up,
#TabsToolbar:not(:-moz-lwtheme) .tabbrowser-arrowscrollbox > .scrollbutton-down {
  fill: black !important;
}

/* Fx58+ titlebar placeholders */
#TabsToolbar *[type="pre-tabs"],
#TabsToolbar *[type="post-tabs"] {
  display: none !important;
}

@media (-moz-os-version: windows-win10) {
	#main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive="true"] {
	  margin-top: 30px !important;
	}
	#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] {
	  margin-top: 30px !important;
	}
}

@media (-moz-windows-classic) {

	/* tweaks for Windows Classic theme */
	#nav-bar:not(:-moz-lwtheme),
	#PersonalToolbar:not(:-moz-lwtheme),
	#main-window:not([tabsintitlebar])  #TabsToolbar:not(:-moz-lwtheme) {
	  border-left: unset !important;
	  border-right: unset !important;
	  background: unset !important;
	}

	#main-window[sizemode="normal"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar) {
	  border-left: 0px !important;
	  border-right: 0px !important;
	}

	#main-window:not([tabsintitlebar]) #toolbar-menubar:not(:-moz-lwtheme) {
	  background: unset !important;
	  box-shadow: unset !important;
	  border-bottom: unset !important;
	}

	#main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #navigator-toolbox,
	#main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #nav-bar,
	#main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #navigator-toolbox::before,
	#main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #nav-bar::before,
	#main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #navigator-toolbox::after,
	#main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #nav-bar::after {
	  background: unset !important;
	  box-shadow: unset !important;
	  border: unset !important;
	  border-image: unset !important;
	}

	#main-window:not([tabsintitlebar]) toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar):not(:-moz-lwtheme) {
	  background: unset !important;
	}

}

/* tab text colors */
#TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab {
  color: var(--classic_squared_tabs_tab_text_color) !important;
  text-shadow: 1px 1px 1px var(--classic_squared_tabs_tab_text_shadow) !important;
}

/* fix Windows 7s default tab background (remove dark purple bg color)*/
@media (-moz-os-version: windows-win7) {
  @media (-moz-windows-default-theme) {
    .tabbrowser-tab:not([selected]):not(:hover):not(:-moz-lwtheme) {
      background-color: #e3e4e6 !important;
    }
	.tabbrowser-tab:not([selected]):hover:not(:-moz-lwtheme) {
      background-color: #cccdcf !important;
    }

  }
}

/* Simple Close Tab button */
#TabsToolbar:not(:-moz-lwtheme) #_fe8cab45-aaee-45f8-8765-781e0ebea300_-browser-action {
  --webextension-toolbar-image-light: url("moz-extension://7904448c-2319-4f6f-aac9-a1f701258098/icons/Close-dark.svg") !important;
}

/* close tab button */
#TabsToolbar:not(:-moz-lwtheme) #closetab_fmarin_com-browser-action {
  --webextension-toolbar-image-light: url("moz-extension://31006e48-8e00-476f-8ea9-697e40934b02/icons/icon.svg") !important;
  --webextension-toolbar-image-2x-light: url("moz-extension://31006e48-8e00-476f-8ea9-697e40934b02/icons/icon.svg") !important;
}

/* close window button */
#TabsToolbar:not(:-moz-lwtheme) #close-window-button_nanpuyue_com-browser-action {
  --webextension-toolbar-image-light: url("moz-extension://c914bd13-793f-4a2d-ab66-c655a3d75c52/icons/icon.svg") !important;
  --webextension-toolbar-image-2x-light: url("moz-extension://c914bd13-793f-4a2d-ab66-c655a3d75c52/icons/icon.svg") !important;
}

what mine looks like, opened a bunch of tabs for reference


except for reload in address bar addon the rest is just customization (right click empty space and customize toolbar)

and of course https://github.com/Aris-t2/CustomCSSforFx has fixes for proton....brought to us by Aris (of the old defunct FF customization addon)

[elrich]

My tabs are still at the top, but I don't like how borderless they seem. It feels like I'm looking at an inactive window, but it's the active one. Is there any way to bring the definition back to the edges of the tabs?

[bob c]

[quote="dickvl"]Try this code for the full "TABS on bottom" section:

Thanks dickvl--Tabs back on bottom under BookMarks, from your code, where they should be, w/o proton look which I hated--

> http://i.imgur.com/RwHVpGe.png

[P38Usul]

I wonder if the "mint" mod will work on Kubuntu?

[MKEBrew]

Registered to thank you guys! What an unbelievable waste of an hour when I got to work this morning. All of my tabs were hidden except some floating button for the tab I was on - and all at the bottom. I felt lost, confused, and angry. Of course it was because of the changes I have been making to keep the look and feel somewhere around FF65 maybe? ha.

Anyway, I renamed my css file and used only what IdanT posted, but had to change the one line from "+ 8px" to "- 8px". This resulted in something usable. Need to tweak colors and such, but I can at least start my day.

Really glad this community is here, and really appreciate everyone in this thread! Thank you!

[wizard353]

Would someone be kind enough to post the complete code for the tabs on bottom without the Proton borderlines look?

With all the different mods in the past 22 posts, it's difficult to figure out which collection of mods did the job.

Also, please remind me of the name and location of the CSS file. I remember creating and modifying this file, but it's been several years since I last worked on it.

I am most certainly not a CSS guru, and all of this is quite foreign to me.

Thanks,

Dave

[Hans L]

Thank you so much, guys and gals. Great job. I am a happy camper, as I am sure you are.

Hans L

[Grumpus]

Something tried with the previous code posted which worked in LinuxMint20.1.
It may be some of the various code tried also included this gate keeper statement in the beginning:

Code: Select all

import url(tabs-on-bottom.css);
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

I tried both removing the gatekeeper statement from the original 88 version, prior to the 89 update, to see the result and . . .
. . . tried adding the gatekeeper statement to the new code ( the previous code posted ) and found it moved the tabs but improperly.
The code posted works without the gatekeeper statement properly for Liniux Mint 20.1.
This was done on two systems.
If I remember there was something over a year ago which concerned the removal or deprecation of Xul.

P.S: Note the previous tabs and the close "x" in the tabs show or don't show depending on the theme used.
Also works with Linux Mint 19.3

[kronckew]

Would someone be kind enough to post the complete code for the tabs on bottom without the Proton borderlines look? ...
Thanks,

Dave

Still Protony, but a work in progress. I'm tired and want to go to bed.

put medieval's first code block starting with "/* 4. TABS: on bottom */" in a blank text file, followed by the second code block. Save to a file named userChrome.css. save it to C:\Users\admin\AppData\Roaming\Mozilla\Firefox\Profiles\okrdqxeh.Default User\chrome\userChrome.css (replace the okrdqxeh with your system's profile name. Create the chrome folder inside the default profile if it doesn't exist.

You can also just put the second code block in a file along with the first, saved as "tabs_below_navigation_toolbar.css" and unremark the @import line if it's remarked out like mine.

This seems to work for me if I always display the Bookmarks toolbar, which wastes space. It needs code to move the tabs toolbar up just under the address bar NOT the bookmarks bar if the bookmarks bar isn't shown.

May fiddle with it again tomorrow. It'll do for the moment.

Code: Select all

    /* Firefox Quantum userChrome.css tweaks ************************************************/
    /* Github: https://github.com/aris-t2/customcssforfx ************************************/
    /****************************************************************************************/
/* 4. 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: 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;}

    :root {

     
      --colored_menubar_background_image: linear-gradient(#f9f9fa,#f9f9fa);
      --general_toolbar_color_toolbars: linear-gradient(#f9f9fa,#f9f9fa);
      --general_toolbar_color_navbar: linear-gradient(#f9f9fa,#f9f9fa);
      --tabs_toolbar_color_tabs_not_on_top: linear-gradient(#f9f9fa,#f9f9fa);
      --tabs_toolbar_border-tnot_normal_mode_size: 1px;
      --tabs_toolbar_border-tnot_normal_mode: var(--tabs-border-color);
      --classic_squared_tabs_tab_text_color: black;
      --classic_squared_tabs_new_tab_icon_color: black;
      --classic_squared_tabs_tab_text_shadow: transparent;
      --tab-min-height_tnot: 32px;
    }

    :root[uidensity=compact]  {
      --tab-min-height_tnot: 28px;
    }

    :root[uidensity=touch] {
      --tab-min-height_tnot: 40px;
    }

    /* tabs toolbar adjustment */
    #main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
    #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
    #main-window[uidensity=compact][tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
    #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
    #TabsToolbar {
      -moz-padding-start: 2px !important;
    }

    #main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme,
    #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme,
    #main-window[uidensity=compact][tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme,
    #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme,
    #TabsToolbar:-moz-lwtheme,
    #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
    #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
    #main-window[sizemode="maximized"] #TabsToolbar,
    #main-window[tabsintitlebar]:not([style*='--lwt-header-image']):-moz-lwtheme #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
    #main-window[tabsintitlebar][sizemode="maximized"]:not([style*='--lwt-header-image']):-moz-lwtheme #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
    #main-window[uidensity=compact][tabsintitlebar]:not([style*='--lwt-header-image']):-moz-lwtheme #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
    #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"]:not([style*='--lwt-header-image']):-moz-lwtheme #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
    #main-window[tabsintitlebar]:not([style*='--lwt-header-image']):-moz-lwtheme #TabsToolbar {
      -moz-padding-start: 0px !important;
    }

    #main-window[tabsintitlebar][sizemode="normal"]:not([sizemode="fullscreen"]) #TabsToolbar {
      margin-top: 0px !important;
    }

    #main-window[tabsintitlebar][sizemode="normal"][chromehidden~="menubar"] #TabsToolbar,
    #main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar,
    #main-window[tabsintitlebar][sizemode="maximized"][chromehidden~="menubar"] #TabsToolbar,
    #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar {
      padding-top: 0px !important;
    }

    #main-window[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
    #main-window[tabsintitlebar] #toolbar-menubar[autohide="false"] ~ #TabsToolbar{
      margin-top: 0px !important;
    }

    /* tab title in titlebar support */
    #main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox #TabsToolbar,
    #main-window[uidensity=compact][tabsintitlebar][sizemode="normal"] #navigator-toolbox #TabsToolbar,
    #main-window[tabsintitlebar][sizemode="maximized"] #navigator-toolbox #TabsToolbar,
    #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #navigator-toolbox #TabsToolbar,
    #main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
    #main-window[uidensity=compact][tabsintitlebar][sizemode="normal"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
    #main-window[tabsintitlebar][sizemode="maximized"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
    #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar{
      margin-top: 0px !important;
    }

    /* titlebar button support */
    #main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar{
      margin-top: 2px !important;
    }

    /* fix for application/hamburger button in titlebar */
    #main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar #PanelUI-button {
      visibility: collapse !important;
    }

    #main-window[inDOMFullscreen="true"] #TabsToolbar {
      opacity: 0 !important;
    }

    /* tab height */
    #tabbrowser-tabs,
    #tabbrowser-tabs > .tabbrowser-arrowscrollbox,
    .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
      min-height: var(--tab-min-height_tnot) !important;
    }

    /* toolbar order (start) ************************************/
    #print-preview-toolbar,
    #printedit-toolbar,
    #titlebar {
      -moz-box-ordinal-group: 0 !important;
    }
    #navigator-toolbox #toolbar-menubar {
      -moz-box-ordinal-group: 1 !important;
    }
    /* navigation toolbar */
    #navigator-toolbox #nav-bar {
      -moz-box-ordinal-group: 2 !important;
    }
    /* bookmarks toolbar */
    #navigator-toolbox #PersonalToolbar {
      -moz-box-ordinal-group: 3 !important;
    }
    /* 3rd party toolbars */
    #navigator-toolbox toolbar {
      -moz-box-ordinal-group: 10 !important;
    }
    /* tabs toolbar */
    #navigator-toolbox #TabsToolbar {
      -moz-box-ordinal-group: 100 !important;
    }
    /* toolbar order (end) **************************************/

    /* toolbar colors */
    #main-window:not([tabsintitlebar]) #toolbar-menubar:not(:-moz-lwtheme) {
      background-image: var(--colored_menubar_background_image) !important;
      border: 0px !important;
      margin-bottom: -1px !important;
    }

    #nav-bar:not(:-moz-lwtheme) {
      -moz-appearance: none !important;
      background: var(--general_toolbar_color_navbar, inherit) !important;
    }

    toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar):not(:-moz-lwtheme) {
      -moz-appearance: none !important;
      background: var(--general_toolbar_color_toolbars, inherit) !important;
    }
    #TabsToolbar:not(:-moz-lwtheme){
      -moz-appearance: none !important;
      background-image: var(--tabs_toolbar_color_tabs_not_on_top) !important;
    }

    /* remove color overlay for lw-themes */
    #main-window[style*='--lwt-header-image'] :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme{
      background: unset !important;
    }

    /* adjust compact themes background color */
    #main-window:not([style*='--lwt-header-image']) #TabsToolbar:-moz-lwtheme {
      -moz-appearance: none !important;
      background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important;
    }

    #main-window:not(:-moz-lwtheme) #TabsToolbar :-moz-any(.tabs-newtab-button,.scrollbutton-up,.scrollbutton-down),
    #main-window:not(:-moz-lwtheme) #TabsToolbar > toolbarbutton,
    #main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar :-moz-any(.tabs-newtab-button,.scrollbutton-up,.scrollbutton-down),
    #main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar > toolbarbutton {
      fill: var(--classic_squared_tabs_new_tab_icon_color) !important;
      color: var(--classic_squared_tabs_new_tab_icon_color) !important;
    }

    /* toolbar borders */
    #main-window #navigator-toolbox::after {
      opacity: 0 !important;
    }

    #TabsToolbar{
      margin-bottom: 0px !important;
      border-bottom: 1px solid #5f7181 !important;
    }

    #main-window[sizemode="normal"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar) {
      border-left: var(--tabs_toolbar_border-tnot_normal_mode_size) solid var(--tabs_toolbar_border-tnot_normal_mode) !important;
      border-right: var(--tabs_toolbar_border-tnot_normal_mode_size) solid var(--tabs_toolbar_border-tnot_normal_mode) !important;
      background-clip: padding-box !important;
    }

    #main-window[sizemode="maximized"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar) {
      border-left: 0px !important;
      border-right: 0px !important;
    }

    #main-window[style*='--lwt-header-image'][sizemode="normal"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme,
    #main-window[style*='--lwt-header-image'][sizemode="maximized"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme {
      border-top: 0px !important;
      border-left: 0px !important;
      border-right: 0px !important;
    }

    #main-window:not([style*='--lwt-header-image']):-moz-lwtheme-brighttext #TabsToolbar:-moz-lwtheme {
      border-bottom: 1px solid #323234 !important;
    }

    #main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-brighttext #TabsToolbar:-moz-lwtheme {
      border-bottom: 1px solid #323234 !important;
    }

    #main-window:not([sizemode="fullscreen"])[tabsintitlebar] #TabsToolbar{
      -moz-margin-end: 0px !important;
    }

    #main-window[tabsintitlebar] #TabsToolbar .titlebar-placeholder{
      visibility: collapse !important;
    }

    #main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive="true"] {
      margin-top: 21px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] {
      margin-top: 20px !important;
    }

    #tabbrowser-tabs .tab-drop-indicator {
      margin-bottom: 0px !important;
    }

    #PersonalToolbar:-moz-lwtheme,
    #nav-bar:-moz-lwtheme {
      background-image: none !important;
      box-shadow: none !important;
      border-top: none !important;
      border-bottom: none !important;
    }

    /* remove tab fog */
    #TabsToolbar:not(:-moz-lwtheme),
    #TabsToolbar:not(:-moz-lwtheme)::before,
    #TabsToolbar:not(:-moz-lwtheme)::after {
      box-shadow: unset !important;
    }

    /* remove 'dragging tab' margin/padding nonsense */
    #TabsToolbar[movingtab] {
      padding-bottom: unset !important;
    }

    #TabsToolbar[movingtab] > .tabbrowser-tabs {
      padding-bottom: unset !important;
      margin-bottom: unset !important;
    }

    #TabsToolbar[movingtab] + #nav-bar {
      margin-top: unset !important;
    }

    /* scroll buttons */
    #TabsToolbar:not(:-moz-lwtheme) #alltabs-button,
    #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-arrowscrollbox > .scrollbutton-up,
    #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-arrowscrollbox > .scrollbutton-down {
      fill: black !important;
    }

    /* Fx58+ titlebar placeholders */
    #TabsToolbar *[type="pre-tabs"],
    #TabsToolbar *[type="post-tabs"] {
      display: none !important;
    }

    @media (-moz-os-version: windows-win10) {
       #main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive="true"] {
         margin-top: 30px !important;
       }
       #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] {
         margin-top: 30px !important;
       }
    }

    @media (-moz-windows-classic) {

       /* tweaks for Windows Classic theme */
       #nav-bar:not(:-moz-lwtheme),
       #PersonalToolbar:not(:-moz-lwtheme),
       #main-window:not([tabsintitlebar])  #TabsToolbar:not(:-moz-lwtheme) {
         border-left: unset !important;
         border-right: unset !important;
         background: unset !important;
       }

       #main-window[sizemode="normal"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar) {
         border-left: 0px !important;
         border-right: 0px !important;
       }

       #main-window:not([tabsintitlebar]) #toolbar-menubar:not(:-moz-lwtheme) {
         background: unset !important;
         box-shadow: unset !important;
         border-bottom: unset !important;
       }

       #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #navigator-toolbox,
       #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #nav-bar,
       #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #navigator-toolbox::before,
       #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #nav-bar::before,
       #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #navigator-toolbox::after,
       #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #nav-bar::after {
         background: unset !important;
         box-shadow: unset !important;
         border: unset !important;
         border-image: unset !important;
       }

       #main-window:not([tabsintitlebar]) toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar):not(:-moz-lwtheme) {
         background: unset !important;
       }

    }

    /* tab text colors */
    #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab {
      color: var(--classic_squared_tabs_tab_text_color) !important;
      text-shadow: 1px 1px 1px var(--classic_squared_tabs_tab_text_shadow) !important;
    }

    /* fix Windows 7s default tab background (remove dark purple bg color)*/
    @media (-moz-os-version: windows-win7) {
      @media (-moz-windows-default-theme) {
        .tabbrowser-tab:not([selected]):not(:hover):not(:-moz-lwtheme) {
          background-color: #e3e4e6 !important;
        }
       .tabbrowser-tab:not([selected]):hover:not(:-moz-lwtheme) {
          background-color: #cccdcf !important;
        }

      }
    }

    /* Simple Close Tab button */
    #TabsToolbar:not(:-moz-lwtheme) #_fe8cab45-aaee-45f8-8765-781e0ebea300_-browser-action {
      --webextension-toolbar-image-light: url("moz-extension://7904448c-2319-4f6f-aac9-a1f701258098/icons/Close-dark.svg") !important;
    }

    /* close tab button */
    #TabsToolbar:not(:-moz-lwtheme) #closetab_fmarin_com-browser-action {
      --webextension-toolbar-image-light: url("moz-extension://31006e48-8e00-476f-8ea9-697e40934b02/icons/icon.svg") !important;
      --webextension-toolbar-image-2x-light: url("moz-extension://31006e48-8e00-476f-8ea9-697e40934b02/icons/icon.svg") !important;
    }

    /* close window button */
    #TabsToolbar:not(:-moz-lwtheme) #close-window-button_nanpuyue_com-browser-action {
      --webextension-toolbar-image-light: url("moz-extension://c914bd13-793f-4a2d-ab66-c655a3d75c52/icons/icon.svg") !important;
      --webextension-toolbar-image-2x-light: url("moz-extension://c914bd13-793f-4a2d-ab66-c655a3d75c52/icons/icon.svg") !important;
    }
	

[Rickkins]

Yea, I'll be holding at 88 for the foreseeable future. Eventually the bugs will be worked out, then perhaps...

[ArniVidar]

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!

Having no clue how any of this CSS stuff works, but taking your cue of the 18.3, I needed to change the number to 0px for the tabs to show up properly. Anything higher would send the tabs further and further down, to eventually disappear into the active window.

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!

[richchad]

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.

Old code:

Code: Select all

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

New code:

Code: Select all

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

You can adjust the "9px" value to fine tune the position.
You can use the Browser Toolbox to get the height of each toolbar.
https://developer.mozilla.org/en-US/doc ... er_Toolbox

I did as above and yes it moved the tabs to under the address bar, thanks dickvl, however I need to increase the height of the tab toolbar as the icons look a bit cropped, I looked at the browser toolbox option but didn't fancy messing up anything.
Has anyone got a simple asnswer that I can add or adjust in the css file to increase tab toolbar height?

[P38Usul]

Wish there was a way to go back to version 88

[kronckew]

Code: Select all

    /*  TABS: on bottom, no bookmarks bar, ever */
    *|*:root {
    --menubar-height: 18px;
    --bookmarkbar-height: 0px;
    --tabbar-top: calc(var(--menubar-height) + var(--bookmarkbar-height) + var(--tab-min-height) + 2px); /*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;}

Wound up wit just this code in the userChrome.css file

[luckycrazyhorse]

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!

This worked for me. Thanks!

I wish Firefox would quit screwing around with things. Nothing like having to waste an hour researching and fixing to access all my tabs I needed to do my work.