MozillaZine

userChrome.css not working on newly installed FF

User Help for Mozilla Firefox
Frank Lion

User avatar
 
Posts: 20426
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.)

arturox

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

Ax

LuvKomputrs

User avatar
 
Posts: 636
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("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 ? :-k
Thanks! :)

ginahoy
 
Posts: 226
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 }

.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
 
Posts: 353
Joined: February 18th, 2008, 1:08 pm

Post Posted September 2nd, 2019, 12:06 pm

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
 
Posts: 353
Joined: February 18th, 2008, 1:08 pm

Post Posted September 2nd, 2019, 12:09 pm

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

User avatar
 
Posts: 52813
Joined: July 18th, 2005, 3:25 am

Post Posted September 2nd, 2019, 3:16 pm

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

User avatar
 
Posts: 248
Joined: October 15th, 2003, 4:32 pm

Post Posted September 3rd, 2019, 8:00 pm

dickvl wrote: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

User avatar
 
Posts: 10715
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted September 3rd, 2019, 9:51 pm

fswl1234 wrote: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-userchrome-css.html

fswl1234

User avatar
 
Posts: 248
Joined: October 15th, 2003, 4:32 pm

Post Posted September 3rd, 2019, 10:06 pm

jscher2000 wrote:
fswl1234 wrote: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-userchrome-css.html


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

Franpa
 
Posts: 35
Joined: November 10th, 2011, 1:31 pm

Post Posted September 4th, 2019, 2:16 am

ineuw wrote:
Franpa wrote: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
Computer specifications:
Windows 10 (1809) x64|Intel Core i7 920 @ 3.60GHz|ASUS P6T Motherboard|24GB DDR3 1500~ RAM|Nvidia Geforce 1070Ti 8GB|Corsair AX760 Power Supply

jscher2000

User avatar
 
Posts: 10715
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted September 4th, 2019, 8:03 am

fswl1234 wrote:
jscher2000 wrote:
fswl1234 wrote: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-userchrome-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

User avatar
 
Posts: 248
Joined: October 15th, 2003, 4:32 pm

Post Posted September 4th, 2019, 9:25 am

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

User avatar
 
Posts: 52813
Joined: July 18th, 2005, 3:25 am

Post Posted September 4th, 2019, 9:58 am

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
 
Posts: 4537
Joined: March 19th, 2005, 10:51 am

Post Posted September 4th, 2019, 12:03 pm

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

bulletproofed!

Return to Firefox Support


Who is online

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