userChrome.css not working on newly installed FF

[Frank Lion]

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.

[arturox]

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...

Ax

[LuvKomputrs]

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("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* 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;
}
#home-button
{
  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 ?
Thanks!

[ginahoy]

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 }

.titlebar-buttonbox-container{
  position: fixed;
  top:0;
  right:0;
  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%; }
#titlebar{
 -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)
}
.titlebar-placeholder,
#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 }
#toolbar-menubar{
  position: fixed;
  top: 0px;
  height: 22px;
  margin-top:1px;
  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 */
#toolbar-menubar:hover{
  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.

[shmerl]

May be I'm missing something. I just made a new profile (Firefox 69.0 beta channel), and copied over userChrome.css (to same location under <profile>/chrome/userChrome.css) from the previous profile where it works fine. In the new profile it's simply ignored. Is there some setting that needs to be flipped to enable userChrome.css?

[shmerl]

Oh, I found it. Apparently Mozilla just disabled it in Firefox 69! To turn it back on, set in about:config

Code: Select all

toolkit.legacyUserProfileCustomizations.stylesheets = true

How hard was it to call the key toolkit.legacyUserChrome or something? I tried to find that inside about:config, and obviously didn't see it.

[dickvl]

If you update a profile from 68 to 69 then Firefox 68 should have created and set toolkit.legacyUserProfileCustomizations.stylesheets to prepare for the change in 69 and userChrome.css should continue to work properly.
A new Firefox 69 profile won't have this pref and thus you need to create this new Boolean pref yourself.

[fswl1234]

If you update a profile from 68 to 69 then Firefox 68 should have created and set toolkit.legacyUserProfileCustomizations.stylesheets to prepare for the change in 69 and userChrome.css should continue to work properly.

somehow it's not working here

A new Firefox 69 profile won't have this pref and thus you need to create this new Boolean pref yourself.

tried a new profile, the pref is there but doesn't work either after i toggle it to true. any idea?

also, any other way to customize UI? pref like this will be gone soon iiuc

[jscher2000]

tried a new profile, the pref is there but doesn't work either after i toggle it to true. any idea?

Did you also exit/restart Firefox? userChrome.css and userContent.css are only read at startup.

Can you double-check that the file is in the correct location? See: https://www.userchrome.org/how-create-u ... e-css.html

[fswl1234]

tried a new profile, the pref is there but doesn't work either after i toggle it to true. any idea?

Did you also exit/restart Firefox? userChrome.css and userContent.css are only read at startup.

thanks and yes, i restarted

Can you double-check that the file is in the correct location? See: https://www.userchrome.org/how-create-u ... e-css.html

it has to be, it's working before the update

[Franpa]

Firefox 65 has rendered some syntax out of date for the userChrome.css file. For example the CSS for having the Tab Bar appear below the the other Toolbars now needs new CSS code in order for it to work.
If you provide us with a copy of your CSS file we may be able to identify and potentially update it for you.

@Franpa I have this problem as well. With today's FF update to version 65.0, I lost the tabs below the address bar. Here are the contents of my userChrome.css

Code: Select all

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

/* Tabs on bottom 1 stopped working with the Jan 29, 2019 FF update to version 65.0. 
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar)
{
    -moz-box-ordinal-group:10}
    #TabsToolbar {-moz-box-ordinal-group:1000!important
}

*/

/* Tabs on bottom  2  does not work */
 
#TabsToolbar {
  -moz-box-ordinal-group: 2;
  border-bottom: 1px solid #888 !important; 
}
#nav-bar{ border-top-width: 0px !important; }

I don't know if you were already answered but the updated code is here (the "chosen solution"): https://support.mozilla.org/en-US/quest ... 277?page=2

[jscher2000]

tried a new profile, the pref is there but doesn't work either after i toggle it to true. any idea?

Did you also exit/restart Firefox? userChrome.css and userContent.css are only read at startup.

thanks and yes, i restarted

Can you double-check that the file is in the correct location? See: https://www.userchrome.org/how-create-u ... e-css.html

it has to be, it's working before the update

But if it's a new profile, then you need to set up the file in a new chrome folder in that profile.

[fswl1234]

But if it's a new profile, then you need to set up the file in a new chrome folder in that profile.

i did
created the folder & copied the css file over

anyways, i'm gonna drop it now
i'll try firefox again after this pref is obsolete, hopefully some other way to modify the UI had emerged bye then...

[dickvl]

The Tab bar is no longer ion the main #navigator-toolbox container, but is in a separate container with the menu bar.
This is the basic code to move the tabs to the bottom position.

Code: Select all

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

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

#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: calc(0px + var(--tab-min-height))}

https://support.mozilla.org/en-US/kb/fo ... ow-url-bar

[Brummelchen]

why dont you use existing solutions?
https://github.com/aris-t2/customcssforfx

bulletproofed!