X
Tippen Sie hierhin, um die Version dieser Website für Mobilgeräte aufzurufen.

Hilfeforum

tabs on bottom release 72.0.1

Veröffentlicht

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.

Ausgewählte Lösung

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;}
Diese Antwort im Kontext lesen 0
Zitieren

Mehr Details zum System

Installierte Plugins

  • Shockwave Flash 32.0 r0

Anwendung

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

Weitere Informationen

Ausgewählte Lösung

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>

Geändert am von cor-el

Hat Ihnen das weitergeholfen?
Zitieren
MFL100 0 Lösungen 9 Antworten
Veröffentlicht

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?
Hat Ihnen das weitergeholfen?
Zitieren
the-edmeister
  • Top 25 Contributor
  • Moderator
5425 Lösungen 40503 Antworten
Veröffentlicht

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

Look here for Fx72 compatible code: https://old.reddit.com/r/FirefoxCSS/
Hat Ihnen das weitergeholfen?
Zitieren
JussAskin 3 Lösungen 37 Antworten
Veröffentlicht

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!
Hat Ihnen das weitergeholfen?
Zitieren
cor-el
  • Top 10 Contributor
  • Moderator
17777 Lösungen 160821 Antworten
Veröffentlicht

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).
Hat Ihnen das weitergeholfen?
Zitieren
MFL100 0 Lösungen 9 Antworten
Veröffentlicht

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.
Hat Ihnen das weitergeholfen?
Zitieren

Fragesteller

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.
Hat Ihnen das weitergeholfen? 0
Zitieren
MFL100 0 Lösungen 9 Antworten
Veröffentlicht

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.
Hat Ihnen das weitergeholfen?
Zitieren

Fragesteller

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.

Geändert am von jdevlin

Hat Ihnen das weitergeholfen?
Zitieren
Peter Humphries 2 Lösungen 33 Antworten
Veröffentlicht

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.
Hat Ihnen das weitergeholfen?
Zitieren
JussAskin 3 Lösungen 37 Antworten
Veröffentlicht

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!
Hat Ihnen das weitergeholfen?
Zitieren
Peter Humphries 2 Lösungen 33 Antworten
Veröffentlicht

Hilfreiche Antwort

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.
Hat Ihnen das weitergeholfen? 1
Zitieren
JussAskin 3 Lösungen 37 Antworten
Veröffentlicht

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!
Hat Ihnen das weitergeholfen?
Zitieren
Peter Humphries 2 Lösungen 33 Antworten
Veröffentlicht

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.
Hat Ihnen das weitergeholfen?
Zitieren
MFL100 0 Lösungen 9 Antworten
Veröffentlicht

Peter, your code worked. Thank you.

Peter, your code worked. Thank you.
Hat Ihnen das weitergeholfen?
Zitieren
Peter Humphries 2 Lösungen 33 Antworten
Veröffentlicht

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.
Hat Ihnen das weitergeholfen?
Zitieren
cor-el
  • Top 10 Contributor
  • Moderator
17777 Lösungen 160821 Antworten
Veröffentlicht

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.
Hat Ihnen das weitergeholfen?
Zitieren
MFL100 0 Lösungen 9 Antworten
Veröffentlicht

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)?
Hat Ihnen das weitergeholfen?
Zitieren
cor-el
  • Top 10 Contributor
  • Moderator
17777 Lösungen 160821 Antworten
Veröffentlicht

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
Hat Ihnen das weitergeholfen?
Zitieren
Stellen Sie eine Frage

Sie müssen sich mit Ihrem Benutzerkonto anmelden, um auf Beiträge zu antworten. Bitte stellen Sie eine neue Frage, wenn Sie noch kein Benutzerkonto haben.