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

Support Forum

tabs on bottom release 72.0.1

Posted

New release has put the tabs over top of the bookmarks toolbar. Is there an updated .css file for this.

New release has put the tabs over top of the bookmarks toolbar. Is there an updated .css file for this.

Chosen solution

Never mind. I found the fix elsewhere. Here is the code for anyone else looking.

/* 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;
 display: block !important;
}

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

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important;
 --tab-min-height: 33px !important; /* adjust to suit your needs */
 --tab-min-height_tnot: 32px;
}
:root #tabbrowser-tabs {
 --tab-min-height: 33px !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;
	background-color: var(--toolbar-bgcolor) !important;
}
/* hide windows-controls */
#TabsToolbar #window-controls {display:none!important;}

/* move caption buttons to right of Tab bar */
#main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
	position: fixed !important;
	right: 0 !important;
	top: calc(6px + var(--tab-min-height)) !important;
	display: block !important;
	visibility: visible !important;
}
#toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;}
Read this answer in context 0
Quote

Additional System Details

Installed Plug-ins

  • Shockwave Flash 32.0 r0

Application

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

More Information

Chosen Solution

Never mind. I found the fix elsewhere. Here is the code for anyone else looking.

/* 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;
 display: block !important;
}

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

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important;
 --tab-min-height: 33px !important; /* adjust to suit your needs */
 --tab-min-height_tnot: 32px;
}
:root #tabbrowser-tabs {
 --tab-min-height: 33px !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;
	background-color: var(--toolbar-bgcolor) !important;
}
/* hide windows-controls */
#TabsToolbar #window-controls {display:none!important;}

/* move caption buttons to right of Tab bar */
#main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
	position: fixed !important;
	right: 0 !important;
	top: calc(6px + var(--tab-min-height)) !important;
	display: block !important;
	visibility: visible !important;
}
#toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;}
Never mind. I found the fix elsewhere. Here is the code for anyone else looking. <pre><nowiki>/* 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; display: block !important; } #tabbrowser-tabs { top: 300 !important; width: 100vw !important; } #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox { padding-bottom: calc(1px + var(--tab-min-height_tnot)) !important; } /* TABS: height */ :root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 33px !important; /* adjust to suit your needs */ --tab-min-height_tnot: 32px; } :root #tabbrowser-tabs { --tab-min-height: 33px !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; background-color: var(--toolbar-bgcolor) !important; } /* hide windows-controls */ #TabsToolbar #window-controls {display:none!important;} /* move caption buttons to right of Tab bar */ #main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container { position: fixed !important; right: 0 !important; top: calc(6px + var(--tab-min-height)) !important; display: block !important; visibility: visible !important; } #toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;}</nowiki></pre>

Modified by cor-el

Was this helpful to you?
Quote
MFL100 0 solutions 9 answers

None of the fixes posted here or on other threads has worked for me. So, what would be the code starting from scratch with a new userChrome.css file?

None of the fixes posted here or on other threads has worked for me. So, what would be the code starting from scratch with a new userChrome.css file?
Was this helpful to you?
Quote
the-edmeister
  • Top 25 Contributor
  • Moderator
5425 solutions 40491 answers

Look here for Fx72 compatible code: https://old.reddit.com/r/FirefoxCSS/

Look here for Fx72 compatible code: https://old.reddit.com/r/FirefoxCSS/
Was this helpful to you?
Quote
JussAskin 3 solutions 37 answers

Hi ... The userChrome.css text jdevlin supplied does not work on my Firefox. I had to create a new chrome folder as this update seems to have deleted it. I pasted the text into the userChrome.css but there was no change. What am I doing wrong?

Really need help on this, Firefox is practically unusable like this.

Thanks!

Hi ... The userChrome.css text jdevlin supplied does not work on my Firefox. I had to create a new chrome folder as this update seems to have deleted it. I pasted the text into the userChrome.css but there was no change. What am I doing wrong? Really need help on this, Firefox is practically unusable like this. Thanks!
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17764 solutions 160655 answers

The CSS code jdevlin posted above was broken due to some txt being interpreted by the forum software as formatting code (a leading '#' generates a list tag).

The CSS code jdevlin posted above was broken due to some txt being interpreted by the forum software as formatting code (a leading '#' generates a list tag).
Was this helpful to you?
Quote
MFL100 0 solutions 9 answers

The problem I have found in in all the relevant forums is that none of the solutions provided indicates where the suggested code goes in the userChrome.css file and what is to be deleted from from the file. The assumption of the providers is that the readers know what to do. I don't know.

It would be most helpful, therefore, if someone would post the complete code you would use if you were creating a brand new file to place the tabs at the bottom in release 72.01.

The problem I have found in in all the relevant forums is that none of the solutions provided indicates where the suggested code goes in the userChrome.css file and what is to be deleted from from the file. The assumption of the providers is that the readers know what to do. I don't know. It would be most helpful, therefore, if someone would post the complete code you would use if you were creating a brand new file to place the tabs at the bottom in release 72.01.
Was this helpful to you?
Quote

Question owner

Here is how it works on my system. In the chrome directory in the file userchrome .css insert these lines. Only the last line is important. The first three are just comments.

/************************************************************/ /* TABS: on bottom */ /***********************************************************/ @import url(./config/tabs_bottom.css);

then in the chrome sub directory "config" create the file tabs_bottom.css Replace the code in the "tabs_bottom.css" file with the new code.

Every time the tabs code change replace the tabs_bottom file with the new code.

Here is how it works on my system. In the chrome directory in the file userchrome .css insert these lines. Only the last line is important. The first three are just comments. /************************************************************/ /* TABS: on bottom */ /***********************************************************/ @import url(./config/tabs_bottom.css); then in the chrome sub directory "config" create the file tabs_bottom.css Replace the code in the "tabs_bottom.css" file with the new code. Every time the tabs code change replace the tabs_bottom file with the new code.
Was this helpful to you? 0
Quote
MFL100 0 solutions 9 answers

I put jdevlin's lengthy code in a new userChrome.css file and made it the only code there. Nothing happened.

I put jdevlin's lengthy code in a new userChrome.css file and made it the only code there. Nothing happened.
Was this helpful to you?
Quote

Question owner

To be clear. It is NOT my code. I copied it from somewhere else. I don't want credit for some else's work.

Be sure you are using the correct chrome folder in the correct profile. To get there click help, then troubleshooting information, then you can see what your profile folder is and go directly to if you like.

To be clear. It is NOT my code. I copied it from somewhere else. I don't want credit for some else's work. Be sure you are using the correct chrome folder in the correct profile. To get there click help, then troubleshooting information, then you can see what your profile folder is and go directly to if you like.

Modified by jdevlin

Was this helpful to you?
Quote
Peter Humphries 2 solutions 33 answers

This appears to be the minimum code required to get "Tabs on Bottom" working:

https://support.mozilla.org/en-US/questions/1274416#answer-1279083

With the release of Firefox 72.0.1, the XUL namespace statement is causing problems. Some people have had success simply putting (or importing) the "Tabs on Bottom" code before the namespace statement, but, unless you need it for something else in your userChrome.css file, you can simply eliminate the XUL namespace statement, altogether.

The reason that the "Tabs on Bottom" code keeps breaking is that Mozilla is making incremental changes to move away from XUL as it makes the interface pure HTML. Eventually, anything requiring XUL is not going to work so that you might get ahead of things, now, by finding out what other tweaks in your userChrome.css depend upon it.

This appears to be the minimum code required to get "Tabs on Bottom" working: https://support.mozilla.org/en-US/questions/1274416#answer-1279083 With the release of Firefox 72.0.1, the XUL namespace statement is causing problems. Some people have had success simply putting (or importing) the "Tabs on Bottom" code before the namespace statement, but, unless you need it for something else in your userChrome.css file, you can simply eliminate the XUL namespace statement, altogether. The reason that the "Tabs on Bottom" code keeps breaking is that Mozilla is making incremental changes to move away from XUL as it makes the interface pure HTML. Eventually, anything requiring XUL is not going to work so that you might get ahead of things, now, by finding out what other tweaks in your userChrome.css depend upon it.
Was this helpful to you?
Quote
JussAskin 3 solutions 37 answers

I'm sorry, but I'm confused. Are you saying if I type the line: @import url("tabs-on-bottom.css");

at the top above the (now top) line: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

the tabs on bottom problem occurring with updates will not happen? If not, can you provide me with a copy and paste file that I will put into the userChrome.css file?

I only need the userChrome.css file to move my tabs to the bottom. This used to be a menu choice, and I wish it were again. Are you saying that when the interface is pure HTML that "Tabs on Bottom" will no longer be possible?

Sorry I'm so dense, but I'm not really much of a techie!

I'm sorry, but I'm confused. Are you saying if I type the line: @import url("tabs-on-bottom.css"); at the top above the (now top) line: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ the tabs on bottom problem occurring with updates will not happen? If not, can you provide me with a copy and paste file that I will put into the userChrome.css file? I only need the userChrome.css file to move my tabs to the bottom. This used to be a menu choice, and I wish it were again. Are you saying that when the interface is pure HTML that "Tabs on Bottom" will no longer be possible? Sorry I'm so dense, but I'm not really much of a techie!
Was this helpful to you?
Quote
Peter Humphries 2 solutions 33 answers

Helpful Reply

If your userChrome.css file contains only the following, it should put your tabs on the bottom (as of Firefox 72.0.1, January 10, 2020):


/* 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 {
 display: block !important; /*required for 71+*/
 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;
}

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

There are a lot of versions of this code depending upon whether or not you want colours on your tabs, prefer a different colour for the empty tab area and various other tweaks, but this is pretty standard, from what I can tell.

The last two lines, the "hide indicators" section, helps with compatibility with Private Browsing mode, although it turns off the indicators, obviously. You can leave those lines out if the rest of the code works for you without them.

No-one can guarantee that the developers' next XUL / HTML change will not break any of this code. The idea about putting the "Tabs on Bottom" code into its own file is to keep it separate from anything else that you have in userChrome.css, but, if this is the only code that you have in userChrome.css, that is an unnecessary step.

If your userChrome.css file contains only the following, it should put your tabs on the bottom (as of Firefox 72.0.1, January 10, 2020): <hr> <pre> /* 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 { display: block !important; /*required for 71+*/ 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; } /* hide indicators */ .private-browsing-indicator {display: none !important;} .accessibility-indicator {display: none !important;} </pre> <hr> There are a lot of versions of this code depending upon whether or not you want colours on your tabs, prefer a different colour for the empty tab area and various other tweaks, but this is pretty standard, from what I can tell. The last two lines, the "hide indicators" section, helps with compatibility with Private Browsing mode, although it turns off the indicators, obviously. You can leave those lines out if the rest of the code works for you without them. No-one can guarantee that the developers' next XUL / HTML change will not break any of this code. The idea about putting the "Tabs on Bottom" code into its own file is to keep it separate from anything else that you have in userChrome.css, but, if this is the only code that you have in userChrome.css, that is an unnecessary step.
Was this helpful to you? 1
Quote
JussAskin 3 solutions 37 answers

Thank you so much ... I really appreciate the help. I made this text my css file and it works great! Sorry for my ignorance. Thank you for your patience!

Thank you so much ... I really appreciate the help. I made this text my css file and it works great! Sorry for my ignorance. Thank you for your patience!
Was this helpful to you?
Quote
Peter Humphries 2 solutions 33 answers

You are welcome.

Hopefully, others will find one of the many threads with these solutions and save themselves a few hours' work.

You are welcome. Hopefully, others will find one of the ''many'' threads with these solutions and save themselves a few hours' work.
Was this helpful to you?
Quote
MFL100 0 solutions 9 answers

Peter, your code worked. Thank you.

Peter, your code worked. Thank you.
Was this helpful to you?
Quote
Peter Humphries 2 solutions 33 answers

I am glad to have been of help, and, of course, the code is a compilation of many contributors' work.

I am glad to have been of help, and, of course, the code is a compilation of many contributors' work.
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17764 solutions 160655 answers

It looks that it is possible to modify the current code and replace :root with *|*:root through out the tabs on bottom CSS code.

It looks that it is possible to modify the current code and replace :root with *|*:root through out the tabs on bottom CSS code.
Was this helpful to you?
Quote
MFL100 0 solutions 9 answers

Here is a new question related to tabs on the bottom. If it's too far off this topic, I can repost it as a separate question.

For some time, my Firefox profile has had a userChrome.css file containing tabs on the bottom code, which worked. I don't know what other code was in the file. However, after a while, as Firefox updated before version 71, Firefox's tabs began to crash unpredictably and with increasing frequency when connected to the web. Nearly every time, after a few tab crashes, other programs open on my Windows 10 computer would freeze and/or I would get a black screen or both. Restarting Firefox and/or the computer did not help for long. Creating a new profile and copying the bookmarks and other existing personalized data files to the new profile also did not help.

After I installed version 71, I made the needed changes in userChrome.css to keep tabs on the bottom working, and the crashes stopped. When 72 arrived, tabs on the bottom stopped. I was unable to get them working again until after 72.01 installed and I installed tabs on the bottom code only. However, the freeze, etc. problems have started again. Are a file or files in my Firefox profile the culprit(s)?

Here is a new question related to tabs on the bottom. If it's too far off this topic, I can repost it as a separate question. For some time, my Firefox profile has had a userChrome.css file containing tabs on the bottom code, which worked. I don't know what other code was in the file. However, after a while, as Firefox updated before version 71, Firefox's tabs began to crash unpredictably and with increasing frequency when connected to the web. Nearly every time, after a few tab crashes, other programs open on my Windows 10 computer would freeze and/or I would get a black screen or both. Restarting Firefox and/or the computer did not help for long. Creating a new profile and copying the bookmarks and other existing personalized data files to the new profile also did not help. After I installed version 71, I made the needed changes in userChrome.css to keep tabs on the bottom working, and the crashes stopped. When 72 arrived, tabs on the bottom stopped. I was unable to get them working again until after 72.01 installed and I installed tabs on the bottom code only. However, the freeze, etc. problems have started again. Are a file or files in my Firefox profile the culprit(s)?
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17764 solutions 160655 answers

Hi MFL100

Code in userChrome.css to move the tabs to a lower position shouldn't cause freezes, so this is likely another problem ,so best would be to create a new thread.

Could be an extension or hardware acceleration related or caused by external software or drivers on your computer.

Hi MFL100 Code in userChrome.css to move the tabs to a lower position shouldn't cause freezes, so this is likely another problem ,so best would be to create a new thread. Could be an extension or hardware acceleration related or caused by external software or drivers on your computer. *https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode *https://support.mozilla.org/en-US/kb/troubleshoot-extensions-themes-to-fix-problems
Was this helpful to you?
Quote
Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.