FF78: Get me back to tabs on the bottom, please,

[Flycaster]

Just updated from 68 to 72 hoping I wasn't going to be in for "update frustration." But, alas, wrong again. Do love the fact that FF is always "improving," but improvement appears to be in the eyes of the beholder...either that, or I have to get new glasses. Anyway, using css for past updates, I've been able to have my tabs at the bottom, below the bookmark bar. Unfortunately, my tabs are now on the same line as the bookmark bar. As I am not good at figuring the css code, but can follow directions, I would most appreciate someone giving me the code that will get the tab bar to be just below the bookmark bar. Here's what has been working for me...I know it must be a mess with a lot of unnecessary code, but at least it does what I want it to do. So, hopefully someone will be able to show where to modify the code so that tabs will be on the bottom. Thanks.


/* .mozilla/firefox/~user~/chrome/userChrome.css */
/* firefox quantum 65+ */
/* note: '--tab-min-height' under 'height' - set both values to default:33px; compact:29px; touch:43px */

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

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

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

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

/* TABS: height */
:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 27px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
--tab-min-height: 27px !important; /* needs to be the same as above under :root */
--tab-min-width: 80px !important;
}

#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}

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

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
width: 40px;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
padding-bottom: unset !important;
margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
margin-top: unset !important;
}

/*Inactive tab text color*/
.tabbrowser-tab:not[selected] .tab-content{
color: black !important;
}



/* text color */
.tabbrowser-tab[selected] .tab-label {
color: white !important;
}



/*bold*//*
.tabbrowser-tab[selected] .tab-label {
font-weight: 900 !important;
}
/* italic *//*
.tabbrowser-tab[selected] .tab-label {
font-style: italic !important;
}



/* Rounded Tabs*/

.tabbrowser-tab {
box-sizing: border-box;
margin: 0 1px 0 1px !important;
border-radius: 10px 10px 0 0 !important;
}


.tabbrowser-tab .tab-text.tab-label {
color: black !important; /* tab text color - customizable */
}


.tabbrowser-tab[selected="true"] .tab-text.tab-label {
color: white !important; /* tab text color - customizable */
}


.tabbrowser-tab[selected="true"] .tab-background {
border: 1px solid gray !important; /* color is customizable */
border-bottom: none !important;
opacity: 1;
}


.tab-background {
border: none !important;
border-radius: 10px 10px 0 0 !important;
background: black;
opacity: .1;
}


.tab-line { /* = light top line in selected tab in Quantum default */
display: none !important;
}


.tabbrowser-tab:hover,
.tabbrowser-tab .tab-text.tab-label:hover {
cursor: pointer !important;
}


.tabbrowser-tab:hover {
border: 1px solid grey !important;
}


.tabbrowser-tab[selected="true"]:hover {
border: none !important;
}


[tabsintitlebar]:root:not([extradragspace]) .tabbrowser-tab::after,
.tabbrowser-tab:hover::after,
#tabbrowser-tabs:not([movingtab])>.tabbrowser-tab[beforehovered]::after {
border: none !important; /* leave as is; affects the New Tab icon (the plus) */
}


.tabbrowser-tab .tab-label {
font-weight: 900 !important;
}



.tabbrowser-tab:not([selected]) .tab-close-button {
visibility: hidden !important
}

.tabbrowser-tab:not([selected]):hover .tab-close-button {
visibility: visible !important
}

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

[DanRaisch]

Just so we’re all clear, you mean version 72, not 78. Right?

[dickvl]

Try to remove the @namespace line to see if that makes all code working.
Some elements have moved to HTML space as the result of getting rid of XUL and in some cases shadow DOM is used that may require simple selector in case you are crossing a shadow DOM boundary.

Remove this line:

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

[Flycaster]

Just so we’re all clear, you mean version 72, not 78. Right?

72, my bad.

[Flycaster]

Try to remove the @namespace line to see if that makes all code working.
Some elements have moved to HTML space as the result of getting rid of XUL and in some cases shadow DOM is used that may require simple selector in case you are crossing a shadow DOM boundary.

Remove this line:

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

Thanks Dick, you hit the nail on the head. However, FF72 on my desktop has the same css configuration as does the MS Surface that was just experiencing the tab bar problem, but the desktop doesn't have the tab bar problem even though it has the same @namespace... at the head of the codes??? Interesting?