X
Tap here to go to the mobile version of the site.

Support Forum

Tabs on Bottom

Posted

Hi

Running Firefox 71.0 (64 bit)

Well seems Firefox has been messing this up again.

Anyone have the new work around solution to get my tabs back on the bottom again. They were fine this morning then shut down and went out to lunch and when I came back they were back on the top again after months of being where I wanted them below my bookmark bar.

Thoughts on this?

Thanks Dave

Hi Running Firefox 71.0 (64 bit) Well seems Firefox has been messing this up again. Anyone have the new work around solution to get my tabs back on the bottom again. They were fine this morning then shut down and went out to lunch and when I came back they were back on the top again after months of being where I wanted them below my bookmark bar. Thoughts on this? Thanks Dave

Chosen solution

Hi.

You can move the CSS code for tabs on bottom that works in Firefox71 to its own file (e.g. tabs-on-bottom.css). Do NOT place the default @namespace line at the top of this tabs-on-bottom.css file. Add a line above the @namespace line in userChrome.css to import this file. If you do not have other CSS code in userChrome.css then you can consider to keep the code in userChrome.css and only remove the @namespace line.

See also:

userChrome.css:

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

tabs-on-bottom.css working code for Firefox 71 posted in this thread.

UPDATE: This code works for me with the @namespace line, so you can place it in userChrome.css if necessary (I prefer separate files to make it easier to keep track of required changes).

/* TABS: bottom - Firefox 65 and newer; should for now work with XUL @namespace */

#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
  -moz-box-ordinal-group: 10 !important;
}

#TabsToolbar {
  -moz-box-ordinal-group: 1000 !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
}

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

*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*adjust*/
}

/* position Tab bar with Menu bar and Title bar hidden for Firefox 65-73 - omit in Firefox 74 (Nightly) */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #xTabsToolbar{
  bottom: var(--tab-min-height) !important;
  padding-top: calc(var(--tab-min-height) - 20px) !important; /*adjust*/
}

/* TABS: height */
*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;
  --tab-min-height: 25px !important; /*adjust to set height or omit to use density*/
  --tab-min-width:  80px !important; /*adjust to set width or omit to use default*/
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important; /*adjust*/
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*omit*/
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !important;
}

/* indicators - hide  */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

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

/* caption buttons - hide */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar
 .titlebar-buttonbox-container {display: none !important;}

If you want to have the caption buttons visible on the Tab bar with the Menu bar and Title bar hidden then use this code as a start to replace the above posted "caption buttons - hide" rule. The caption button are positioned absolutely via a top property, so this is affected by the Bookmarks Toolbar (PersonalToolbar) being visible or hidden. Use either of the two "--personal-toolbar-height" settings that apply to the state (collapsed/hidden) of the Bookmarks Toolbar.

/* caption buttons - PersonalToolbar hidden/visible */
*|*:root {
 --personal-toolbar-height: 0px !important;   /*PersonalToolbar hidden*/
 --personal-toolbar-height: 24px !important;  /*PersonalToolbar visible*/
 --caption-buttons-adjust: -12px !important;  /*caption buttons - vertical adjustment*/
}

*|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"]
 ~ #TabsToolbar .titlebar-buttonbox-container {
  position: fixed !important;
  display: block !important;
  right: 0 !important;
  top: calc(var(--tab-min-height) + var(--personal-toolbar-height) + var(--caption-buttons-adjust));
  visibility: visible !important;
  height: var(--tab-min-height) !important;
}

/* caption buttons - HEIGHT and WIDTH */
.titlebar-buttonbox-container toolbarbutton {
  height: var(--tab-min-height) !important;
  margin: 0px -5px 0px -5px !important;
  padding: 0 !important;
}

/* caption buttons - PADDING - reserve space on Tab bar */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~
  #TabsToolbar {
   padding-right: 100px !important; /*adjust*/
}
Read this answer in context 1

Additional System Details

Application

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0

More Information

the-edmeister
  • Top 25 Contributor
  • Moderator
5425 solutions 40502 answers

rosawood said

olds97_lss said
And now with 72... it's broken again.

You'd think that with being a continual irritant to so many people, this would be checked before a release. Does Mozilla do any integration testing? Or do the developers just figure eventually they'll wear us down? I just don't get why this has to be an issue with every release. ...

You would think that when "Tabs on Bottom" gets broken with every new version (recently) that users who insist on modifying Firefox via userChrome.css would learn to expect this to happen.

Mozilla is slowly rewriting XUL into XHTML for the the user interface in 'baby steps'; the developers manage to "break" the tab-strip code frequently.

Try using this reddit - https://www.reddit.com/r/FirefoxCSS/ - for the latest "fixes" for what ails your Firefox userChrome.css modifications.

''rosawood [[#answer-1279145|said]]'' <blockquote> ''olds97_lss [[#answer-1279068|said]]'' <blockquote> And now with 72... it's broken again. </blockquote> You'd think that with being a continual irritant to so many people, this would be checked before a release. Does Mozilla do any integration testing? Or do the developers just figure eventually they'll wear us down? I just don't get why this has to be an issue with every release. ... </blockquote> You would think that when "Tabs on Bottom" gets broken with every new version ''(recently)'' that users who insist on modifying Firefox via userChrome.css would learn to expect this to happen. Mozilla is slowly rewriting XUL into XHTML for the the user interface in 'baby steps'; the developers manage to "break" the tab-strip code frequently. Try using this reddit - https://www.reddit.com/r/FirefoxCSS/ - for the latest "fixes" for what ails your Firefox userChrome.css modifications.
cor-el
  • Top 10 Contributor
  • Moderator
17774 solutions 160764 answers

You only need to remove the @namespace that is at the top of userChrome.css or move it below the tabs on bottom code or move the tabs on bottom code to a separate file. At least that works for me.

See my reply in this thread on page one.

You only need to remove the @namespace that is at the top of userChrome.css or move it below the tabs on bottom code or move the tabs on bottom code to a separate file. At least that works for me. See my reply in this thread on page one. *https://support.mozilla.org/en-US/questions/1274416?page=1#answer-1279083
cor-el
  • Top 10 Contributor
  • Moderator
17774 solutions 160764 answers

I've updated the code in my reply on page one. After some testing I found that all that is needed to make the code work again is to replace :root in rules by *|*:root. I had other code that was broken as well and noticed some *|*:root selectors in the Browser Toolbox, so gave that a try for this code and it worked.

I've updated the code in my reply on page one. After some testing I found that all that is needed to make the code work again is to replace :root in rules by *|*:root. I had other code that was broken as well and noticed some *|*:root selectors in the Browser Toolbox, so gave that a try for this code and it worked.