Zoeken in Support

Vermijd ondersteuningsscams. We zullen u nooit vragen een telefoonnummer te bellen, er een sms naar te sturen of persoonlijke gegevens te delen. Meld verdachte activiteit met de optie ‘Misbruik melden’.

Learn More

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

  • 7 antwoorden
  • 1 heeft dit probleem
  • 42 weergaven
  • Laatste antwoord van 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.

Gekozen oplossing

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

Dit antwoord in context lezen 👍 1

Alle antwoorden (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

Behulpzaam?

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.

Behulpzaam?

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]

Bewerkt door jscher2000 op

Behulpzaam?

more options

Gekozen oplossing

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

Behulpzaam?

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

Behulpzaam?

more options

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

Behulpzaam?

more options

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

Behulpzaam?

Een vraag stellen

U moet zich aanmelden bij uw account om op berichten te antwoorden. Stel een nieuwe vraag als u nog geen account hebt.