Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

tabs below address bar - an ongoing problem not fixed !!!

  • 7 uphendule
  • 1 inale nkinga
  • 40 views
  • Igcine ukuphendulwa ngu m.leddy

more options

Ever since IE changed to tabs on top firefox coders followed like mindless automatons without any regard to/for Mozilla community and users. We are sick and tired of being ignored. We want/need tabs bellow address bar. Now, tell us how to simply get tabs below address bar or tell the coders to provide us with the option. And, we don’t care about any excuses as previously provided or outright ignored by them.

Isisombululo esikhethiwe

You can try this code in userChrome.css, should work in most Firefox versions. I personally place the code in a separate file and use a @import url(tob-file.css); rule in userChrome.css.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* TABS: bottom - Firefox 65 and later */
/* /source/browser/themes/shared/tabs.inc.css */

/* ROOT - VARS */
*|*:root {
 --tab-toolbar-navbar-overlap: 0px !important;

 --tab-min-height:      25px !important; /* adjust */
 --tab-min-width:       60px !important; /* adjust */

 --personal-toolbar-height: 22px; /* personal-toolbar 22px */
 --captionbox-adjust: calc(2px + var(--personal-toolbar-height));
}

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

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

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

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

/* TabsToolbar with menubar and titlebar hidden */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
}

/* TABS: height */
#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;
}

#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;
  color: var(--toolbar-color) !important;
}

/* indicators *//*
*|*:root[privatebrowsingmode=temporary] .private-browsing-indicator {
  position: absolute !important;
  display: block !important;
  right: 0px !important;
  bottom: 0px !important;
  width: 14px !important;
  pointer-events: none !important;
}
*/
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* Indicators - HIDE *//*
*|*:root:not([accessibilitymode])             .accessibility-indicator    {display: none !important}
*|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important}
*/

/* Drag Space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;
}

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

/* window-controls - full screen */
#TabsToolbar #window-controls {
  position: fixed !important;
  display: block !important;
  right: 0 !important;
  bottom: 0 !important;
  visibility: hidden !important; /* adjust: visible/hidden */
}

/* caption buttons - PersonalToolbar (PT) hidden/visible */
*|*: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(--captionbox-adjust)) !important; /*adjust var*/
  height: var(--tab-min-height) !important;
  visibility: hidden !important; /* adjust: visible/hidden */
}

If you want to experiment with the caption buttons then try this code.
Change visibility: hidden !important; to visibility: visible !important; in the above code
<pre><nowiki>
/* caption buttons - HEIGHT */
.titlebar-buttonbox-container .titlebar-button {
  height: var(--tab-min-height) !important;
  margin: 0px -5px 0px -5px !important;
  padding: 0px !important;
}

/* caption buttons - PADDING */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~
  #TabsToolbar {
   padding-right: 90px !important; /*adjust*/
}

Funda le mpendulo ngokuhambisana nalesi sihloko 👍 1

All Replies (7)

more options

Hi g7777, it's the same story since Firefox 57: you can use custom style rules in a userChrome.css file to modify the toolbar area. Are you already experienced with that, or do you need instructions?

As support volunteers, we do not program Firefox or make UI decisions. You have many choices to submit suggestions for changes, depending on your desired style of interaction:

Discussion Sites/Advocacy

Limited Length Comments

Bug Tracking System

Helpful?

more options

Thanx jscher, Been there done that. None of your suggestions work now. It’s the same old runaround. Maybe a good idea to get Mozilla CEO’s info and nag ‘em until he/she gets it. OR shame Mozilla and coders all over net. OR cost Mozilla financially and other usual ways to force companies to bend to user wishes.

Millions of users are absolutely livid about this. Unless Mozilla wants a war on their hands it better smarten up.

Helpful?

more options

g7777 said

Been there done that. None of your suggestions work now.

Are you sure? I just tested it: [see email notification for YouTube link]

Okulungisiwe ngu jscher2000

Helpful?

more options

Isisombululo Esikhethiwe

You can try this code in userChrome.css, should work in most Firefox versions. I personally place the code in a separate file and use a @import url(tob-file.css); rule in userChrome.css.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* TABS: bottom - Firefox 65 and later */
/* /source/browser/themes/shared/tabs.inc.css */

/* ROOT - VARS */
*|*:root {
 --tab-toolbar-navbar-overlap: 0px !important;

 --tab-min-height:      25px !important; /* adjust */
 --tab-min-width:       60px !important; /* adjust */

 --personal-toolbar-height: 22px; /* personal-toolbar 22px */
 --captionbox-adjust: calc(2px + var(--personal-toolbar-height));
}

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

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

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

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

/* TabsToolbar with menubar and titlebar hidden */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
}

/* TABS: height */
#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;
}

#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;
  color: var(--toolbar-color) !important;
}

/* indicators *//*
*|*:root[privatebrowsingmode=temporary] .private-browsing-indicator {
  position: absolute !important;
  display: block !important;
  right: 0px !important;
  bottom: 0px !important;
  width: 14px !important;
  pointer-events: none !important;
}
*/
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* Indicators - HIDE *//*
*|*:root:not([accessibilitymode])             .accessibility-indicator    {display: none !important}
*|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important}
*/

/* Drag Space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;
}

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

/* window-controls - full screen */
#TabsToolbar #window-controls {
  position: fixed !important;
  display: block !important;
  right: 0 !important;
  bottom: 0 !important;
  visibility: hidden !important; /* adjust: visible/hidden */
}

/* caption buttons - PersonalToolbar (PT) hidden/visible */
*|*: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(--captionbox-adjust)) !important; /*adjust var*/
  height: var(--tab-min-height) !important;
  visibility: hidden !important; /* adjust: visible/hidden */
}

If you want to experiment with the caption buttons then try this code.
Change visibility: hidden !important; to visibility: visible !important; in the above code
<pre><nowiki>
/* caption buttons - HEIGHT */
.titlebar-buttonbox-container .titlebar-button {
  height: var(--tab-min-height) !important;
  margin: 0px -5px 0px -5px !important;
  padding: 0px !important;
}

/* caption buttons - PADDING */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~
  #TabsToolbar {
   padding-right: 90px !important; /*adjust*/
}

Helpful?

more options

jscher2000 For some reason didn’t get your youtube link in my email or in private messages inbox in this forum. No problem as moderator cor-el’s code worked. Thank you.

cor-el This is very interesting code cor-el. 1st of all .. IT WORKED ! .. In both, Firefox and Tor. Thanx a million + .. literally more than million PPL will be thanking you .. and that’s just to start as it spreads.

Thanx for including variables for pretty colours, fade affect, private browsing mode and the rest. This also cleaned up some dead tabs [tab counter read 801 tabs, while we counted 897], speeded up tab loading with restore previous session option and tab managers, speeded up loading of pages, fixed other numerous page visuals [probably from previous hacks], and even let some pages to be loaded previously blocked by google recaptcha.

BTW; I just stuffed your whole code into a clean userChrome.css, as is, and let it ride. Rest of the computer club here is being more careful and having fun with it .. before they reference this page for you on other forums.

Kudos to you, be happy, do a happy dance or whatever it is you do when all comes together for you. Cheers

Helpful?

more options

cor-el, the code worked, but changed my titlebar from blue to white. How can I regain the blue? Thanks.

Helpful?

more options

cor-el, I found the problem, it wasn't caused by the code. Thanks.

Helpful?

Buza umbuzo

Kufanele ulogele ukungena ku-akhawunti yakho ukuze uphendule amaphosti. Uyacelwauqale umbuzo omusha, uma ungekabi nayo i-akhawunti namanje.