userChrome.css not working on newly installed FF

User Help for Mozilla Firefox
Frank Lion

User avatar
Posts: 20229
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted February 9th, 2019, 12:50 am

arturox wrote:Thanks James for the answer to my question... A double code stack relating to tabs is difficult to maintain... That I understand.

So would anyone in the business, but that never was the case. This one was just a simple css coding job and Dao (one of the main Mozilla devs) saw it as such. But no, it had to be the usual Mozilla stuff of decide first, then hunt around for a reason, then spend ages justifying it...and then being defensive.

Mozilla are actually very good at being defensive, which is fine but this is the major Open Source browser out there. So, if Firefox is not going to look after the needs of minorities, then who is?

For example, the needs of children, special needs and the aged forgetful were being met by 'Icons with Text' and 'Text Only' modes, so 5 years back Mozilla removed them. Where was the mythical triple code stack then, considering the code is still in there 5 years later and can be brought back to life with userChrome.css? That removal wasn't a business decision, that was downright nastiness.

This is the reality of it all - the original Bug Report - before the spinning started.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)


User avatar
Posts: 15
Joined: January 30th, 2019, 3:20 am

Post Posted February 10th, 2019, 12:18 am

Thanks for that "the original Bug Report" link frank, a most interesting read in parts.

I don't usually have time to wade through such things, but in this case it was worth the effort.
I'll not be making additional comments about that report as it's now old and OT news... and I don't want to get thrown off here as well... ;-)



User avatar
Posts: 592
Joined: June 9th, 2010, 8:15 am

Post Posted February 11th, 2019, 11:59 am

Very informative thread for help with the userChrome.css code to work with Firefox 65. :)

Many thanks to everyone for their helpful tips in this thread. :)

This is my current userChrome.css file.
Code: Select all
@namespace url("");

/* 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;
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: var(--tab-min-height) !important;
#tabbrowser-tabs {
  width: 100vw !important;
  #TabsToolbar > .toolbar-items {
    padding-top: 0 !important;
   margin-top: 0 !important;

#PersonalToolbar { /* bookmarks toolbar */
  -moz-box-ordinal-group: 2 !important;
#TabsToolbar { /* tab bar */
  -moz-box-ordinal-group: 3 !important;
.bookmark-item[container], treechildren::-moz-tree-image(container) { fill: brown !important;
  fill: brown !important;
#back-button {
fill: green !important;
#forward-button {
fill: green !important;
#PanelUI-menu-button { display: none !important;

It's now very close to what I want my Firefox 65 to look like.
Anything I'm missing in the code here or that needs to be added/edited/moved/removed ? :-k
Thanks! :)

Posts: 223
Joined: October 18th, 2007, 8:32 pm

Post Posted March 1st, 2019, 11:21 pm

on 31 Jan, Leafsdude wrote:Got a solution for this, in case anyone stumbles on it:
Code: Select all
/* Modify to change window drag space width */
:root[tabsintitlebar="true"] #nav-bar{ --window-drag-space-width: 24px }

  position: fixed;
  height: 40px;
#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

:root[sizemode="maximized"] > #navigator-toolbox{ padding-top: 8px !important; }
:root[sizemode="maximized"] .titlebar-buttonbox-container{ top: 8px }

:root[uidensity="compact"] .titlebar-buttonbox-container{ height: 32px }
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
 -moz-box-ordinal-group: 2;
  -moz-appearance: none !important;
:root[tabsintitlebar="true"] #nav-bar{
  padding-right: calc(138px + var(--window-drag-space-width,0px));
  padding-left: var(--window-drag-space-width,0px)
#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }

/* Menubar on top patch - use with Fx65_tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */

#navigator-toolbox{ margin-top: 22px }
  position: fixed;
  top: 0px;
  height: 22px;
  width: 100%;
  overflow: hidden;

#toolbar-menubar .titlebar-buttonbox-container{ height: 22px; }
#toolbar-menubar .titlebar-button{ padding: 2px 17px !important;  }

/* This will allow you to MAYBE put some items to the menubar */
#toolbar-menubar > *{ float: left }
#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

/* Makes tabs toolbar items zero-height initially and sets enlarge them to fill up space equal to tab-min-height set on tabs */
/* Firefox 65+ only */
/* !!USER!! -  REMOVE ALL BUTTONS you can from the tabs toolbar */

/* Configurable window drag space  */
:root[sizemode="normal"] #nav-bar{ --window-drag-space-width: 20px }

#titlebar{ -moz-appearance: none !important; }
#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox{ min-height: 0 !important; }
:root:not([customizing]) #tabbrowser-tabs .tabs-newtab-button,
:root:not([customizing]) #TabsToolbar .titlebar-button{
  -moz-appearance: none !important;
  height: 0px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  -moz-box-align: stretch;
  margin: 0 !important;
#tabbrowser-tabs .tabbrowser-tab{ height: var(--tab-min-height) }
#tabbrowser-tabs .tabbrowser-tab[first-visible-tab="true"][last-visible-tab="true"]{
  visibility: collapse !important;

/* Button re-styling */
#tabbrowser-tabs .tabs-newtab-button:hover{ background-color: var(--toolbarbutton-hover-background) }
#tabbrowser-tabs .tabs-newtab-button > .toolbarbutton-icon{
  padding: 0 !important;
  transform: scale(0.6);
  background-color: transparent !important;
/* Extra top padding  in maximized window */
:root[sizemode="maximized"] > #navigator-toolbox{ padding-top:7px !important; }
/* Fix window controls not being clickable */
  min-height: calc(var(--tab-min-height) + var(--space-above-tabbar) - 1px) !important;
  height: calc(var(--tab-min-height) + var(--space-above-tabbar) - 1px) !important;
  -moz-appearance: initial !important;
#nav-bar{ padding: 0 var(--window-drag-space-width,0px) }

@Leafsdude, thank you for posting this! I've spent more than an hour looking for a .css solution that accomplishes both tasks. I'm grateful for your contribution!

I have one issue... the menu bar is a bit too short on my system. The menu text File/Edit/View, etc. is clipped at the top and I have no clue which setting to adjust to increase the height. Do you know which variable controls this? Here's a fullscreen screenshot.

Return to Firefox Support

Who is online

Users browsing this forum: costark, Google Adsense [Bot] and 9 guests