Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

Firefox 69 Killed Bookmark Toolbar Multirow "Chrome.css Edit" For Firefox 68. Has there been an update for this?

  • 12 replies
  • 2 have this problem
  • 2 views
  • Last reply by tempest21

more options

I've tried looking around for this but the latest update to Firefox Quantum, version 69, killed the Multirow Bookmarks Toolbar "Chrome.css" edit that worked with Firefox 68. Does anyone have an update for this yet or have a link to a working version of the code?

I've tried looking around for this but the latest update to Firefox Quantum, version 69, killed the Multirow Bookmarks Toolbar "Chrome.css" edit that worked with Firefox 68. Does anyone have an update for this yet or have a link to a working version of the code?

All Replies (12)

more options

tempest21 said

I've tried looking around for this but the latest update to Firefox Quantum, version 69, killed the Multirow Bookmarks Toolbar "Chrome.css" edit that worked with Firefox 68.

Do you use something like this:

/* Wrap Bookmarks Toolbar -- Unlimited multirow */
#PersonalToolbar {
  min-height: unset !important;
  max-height: unset !important;
}
#PersonalToolbar #PlacesToolbarItems {
  overflow-x: visible !important;
  overflow-y: visible !important;
  display: inline-block !important;
}

The ones after the first line are invisible, so you need to override that, too. Add this:

#PersonalToolbar #PlacesToolbarItems toolbarbutton {
  visibility: visible !important;
}

Ref. https://support.mozilla.org/questions/1253700

more options

Doesn't work. Every time Mozilla releases an update, they always break Firefox and I seriously tempted to go back to using Opera and Internet Explorer. They never have these problems. Firefox is worse than ever.

more options

Do you want to share your userChrome.css file to see whether a volunteer can spot the problem? You can post anonymously on Pastebin and share a link back here. To make for easier reading, set the Syntax Highlighting to CSS before submitting your post.

https://pastebin.com/

Also, I have information about two critical Firefox 69 changes that may affect some userChrome.css users:

https://www.userchrome.org/firefox-changes-userchrome-css.html#fx69

more options

I've been looking online and been discovering that some users are reporting that userChrome is being disabled by the new version of Firefox and that Mozilla is trying to do away with the userChrome.css file. When I tried reinstalling FF 64, multirow works. But, when I upgrade the 32-bit version to FF 69, Firefox demands I create a new profile and will not allow me to load FF without creating a new profile.

This also happens when I install the 64-bit version. I have no idea what the problem is with this. I've went back to using Opera as my main browser because it looks like Mozilla is disabling/removing more features that make it such a great browser. Plus, I've found that Opera loads much faster than Firefox.

What's funny is that FF used to be such a great browser until Mozilla started disabling a lot of the features that were very useful. I'll post the userChrome.css if you want but if FF is blocking or disabling the file, it wouldn't make any difference.

Before, FF was working great with userChrome, even with 69. FF 64 didn't require the userChrome.css file. But, the minute FF auto updated to FF 70 (Quantum), it literally broke the userChrome file I was using and for some reason is either blocking /disabling the file or just ignoring it altogether.

more options

Hi tempest21, the entire user interface is being modernized from the proprietary XUL and XBL languages to HTML, CSS, and JavaScript. That is breaking lots of old rules. But there's no point talking in generalities about broken rules; as you know, userChrome.css is about details. We have to roll our sleeves and look at the rules.

Reinstalling Firefox 69 (or 68 ESR?)

In a normal "same channel, same program folder" upgrade, Firefox should upgrade the existing profile. However, Firefox 67+ won't "downgrade" a profile by using it after it has been used by a newer version or a different install. If you installed Firefox 70 (beta/developer edition), it makes sense that Firefox 69 won't use the profile now. More info: Dedicated profiles per Firefox installation

You might be able to get the Firefox 69 installer to re-use the profile by removing a file named compatibility.ini in the profile folder. However, I haven't had the need to test that. The "Dedicate profiles" article also mentions a command-line parameter you can use to override downgrade protection.

If you want a version of Firefox that changes more slowly, you could consider switching to the Extended Support Release of Firefox 68. It will have stable features for about a year, with security updates at the usual pace. More info: Switch to Firefox Extended Support Release (ESR) for personal use.

Enabling userChrome.css in Firefox 69+

For profiles that never had a userChrome.css file before, in Firefox 69, you'll need to set Firefox to look for one at startup. That's the first point in my article here:

https://www.userchrome.org/firefox-changes-userchrome-css.html#fx69

This isn't necessary if the profile was upgraded from Firefox 68 to Firefox 69 (it's set to true already).

The future of userChrome.css

As far as I know, there are no immediate plans for Firefox to stop loading the userChrome.css file in upcoming versions 70-71.

more options

I've tried using two different pieces of code for the userChrome.css:

/* Multi-Row Bookmarks Toolbar */
#PersonalToolbar {
/* Provide room for up to 4 rows at 26px */
max-height: 104px !important;
}
#PlacesToolbarItems > box {
display: inline-block !important;
}
#PersonalToolbar #PlacesToolbarItems {
/* Override hiding */
overflow-x: visible !important;
overflow-y: visible !important;
/* Add a little cushion */
padding-bottom: 1px;
}
#PersonalToolbar #PlacesToolbarItems .bookmark-item {
/* Reduce padding on individual bookmarks to fit rows closer together */
padding-top: 1px !important;
padding-bottom: 1px !important;
}

and I've also tried using this:


/* Bookmark font */
#personal-bookmarks .bookmark-item menupopup * {
font-size:14pt !important;
}

/* Multi-row tabs */
/* Tab reordering will not work and can't be made to work */
/* You can use multi-row_tabs_window_control_patch.css to move window controls to nav-bar*/

/* It's recommended to move tabs new-tab-button outside tabs toolbar */

/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll  */
/* Scrollbar can't be clicked but the rows can be scrolled with mouse */
/* This maximum visible rows won't work before Fx66 */
/* So this setting does nothing on Fx65 and all tab rows will be shown */
:root{
    --multirow-n-rows: 3;
    --multirow-tab-min-width: 100px;
    --multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
}

#tabbrowser-tabs{
  min-height: unset !important;
  padding-inline-start: 0px !important
}

/* Test for Firefox > 66 */
@supports (inset-block:auto){
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: calc(var(--tab-min-height) * var(--multirow-n-rows));
    scrollbar-color: var(--toolbar-bgcolor) var(--lwt-accent-color);
    scrollbar-width: thin;
  }
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
    overflow: -moz-hidden-unscrollable;
    display: block;
  }
}

/* Test for Firefox < 66 */
@supports not (inset-block:auto){
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox{
    min-height: unset !important;
  }
  #tabbrowser-tabs .scrollbox-innerbox{
    display: flex;
    flex-wrap: wrap;
  }
  #tabbrowser-tabs .arrowscrollbox-scrollbox {
    overflow: -moz-hidden-unscrollable;
    display: block;
  }
}

.tabbrowser-tab{ height: var(--tab-min-height); }
#tabbrowser-tabs .tabbrowser-tab[pinned]{
  position: static !important;
  margin-inline-start: 0px !important;
}

.tabbrowser-tab[fadein]:not([pinned]){
  min-width: var(--multirow-tab-min-width) !important;
  flex-grow: var(--multirow-tab-dynamic-width);
  /*
  Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
  Don't set to none or you'll see errors in console when closing tabs
  */
  /*max-width: 100vw !important;*/
}

.tabbrowser-tab > stack{ width: 100%; height: 100% }

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-tabs spacer,
.tabbrowser-tab::after{ display: none !important }

/* End multi-row tabs */


/* Hide close button on tabs */
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
  visibility: hidden !important;
  display: block !important;
  opacity: 0 !important;
  -moz-margin-end: -16px !important;
}

#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[pinned] .tab-close-button {
  visibility: hidden !important;
  display: block !important;
  opacity: 0 !important;
  -moz-margin-start: -18px !important;
}
/* End hide close button on tabs */

Unfortunately, neither seems to work. There must be something I'm missing.

Modified by cor-el

more options

I don't know if you saw what your post looks like, but that's why I suggested using Pastebin to share the userChrome.css file. I'll do my best to reconstruct it.

tempest21 said

I've tried using two different pieces of code for the userChrome.css:
/* Multi-Row Bookmarks Toolbar */
#PersonalToolbar {
/* Provide room for up to 4 rows at 26px */
max-height: 104px !important;
}
#PlacesToolbarItems > box {
display: inline-block !important;
}
#PersonalToolbar #PlacesToolbarItems {
/* Override hiding */
overflow-x: visible !important;
overflow-y: visible !important;
/* Add a little cushion */
padding-bottom: 1px;
}
#PersonalToolbar #PlacesToolbarItems .bookmark-item {
/* Reduce padding on individual bookmarks to fit rows closer together */
padding-top: 1px !important;
padding-bottom: 1px !important;
}

For the Bookmarks Toolbar, try using the new code instead:

/* Wrap Bookmarks Toolbar -- Unlimited multirow */
#PersonalToolbar {
  min-height: unset !important;
  max-height: unset !important;
}
#PersonalToolbar #PlacesToolbarItems {
  overflow-x: visible !important;
  overflow-y: visible !important;
  display: inline-block !important;
}
#PersonalToolbar #PlacesToolbarItems toolbarbutton {
  visibility: visible !important;
}
and I've also tried using this:
/* Bookmark font */
#personal-bookmarks .bookmark-item menupopup * {
font-size:14pt !important;
}

/* Multi-row tabs */
/* Tab reordering will not work and can't be made to work */
/* You can use multi-row_tabs_window_control_patch.css to move window controls to nav-bar*/

/* It's recommended to move tabs new-tab-button outside tabs toolbar */

/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll  */
/* Scrollbar can't be clicked but the rows can be scrolled with mouse */
/* This maximum visible rows won't work before Fx66 */
/* So this setting does nothing on Fx65 and all tab rows will be shown */
:root{
    --multirow-n-rows: 3;
    --multirow-tab-min-width: 100px;
    --multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
}

#tabbrowser-tabs{
  min-height: unset !important;
  padding-inline-start: 0px !important
}

/* Test for Firefox > 66 */
@supports (inset-block:auto){
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: calc(var(--tab-min-height) * var(--multirow-n-rows));
    scrollbar-color: var(--toolbar-bgcolor) var(--lwt-accent-color);
    scrollbar-width: thin;
  }
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
    overflow: -moz-hidden-unscrollable;
    display: block;
  }
}

/* Test for Firefox < 66 */
@supports not (inset-block:auto){
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox{
    min-height: unset !important;
  }
  #tabbrowser-tabs .scrollbox-innerbox{
    display: flex;
    flex-wrap: wrap;
  }
  #tabbrowser-tabs .arrowscrollbox-scrollbox {
    overflow: -moz-hidden-unscrollable;
    display: block;
  }
}

.tabbrowser-tab{ height: var(--tab-min-height); }
#tabbrowser-tabs .tabbrowser-tab[pinned]{
  position: static !important;
  margin-inline-start: 0px !important;
}

.tabbrowser-tab[fadein]:not([pinned]){
  min-width: var(--multirow-tab-min-width) !important;
  flex-grow: var(--multirow-tab-dynamic-width);
  /*
  Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
  Don't set to none or you'll see errors in console when closing tabs
  */
  /*max-width: 100vw !important;*/
}

.tabbrowser-tab > stack{ width: 100%; height: 100% }

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-tabs spacer,
.tabbrowser-tab::after{ display: none !important }

/* End multi-row tabs */


/* Hide close button on tabs */
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
  visibility: hidden !important;
  display: block !important;
  opacity: 0 !important;
  -moz-margin-end: -16px !important;
}

#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[pinned] .tab-close-button {
  visibility: hidden !important;
  display: block !important;
  opacity: 0 !important;
  -moz-margin-start: -18px !important;
}
/* End hide close button on tabs */

Unfortunately, neither seems to work. There must be something I'm missing.

Other than the first rule about the font-size, that is for the Tabs bar, not the Bookmarks Toolbar. I don't have rules for the Tabs bar, you can check here for suggestions on that: https://www.reddit.com/r/FirefoxCSS/

more options

It didn't work (for FF 69 32 bit). I think I'm just going to give up Firefox.

Eventually, someone will fix this with a new updated mod but for the near future, I'm just going to stick with Opera. I think Firefox continues to be changed for the sake of being changed. Over the past few years, the changes to Firefox have forced me to revert back to Opera and I just used Firefox as a convenience.

more options

The thing is, even changing the userprof to "true" didn't change anything. After exiting and reloading, there was no change. I can do away with the FB Games problem, it's the multi-row that's creating problems.

more options

That was odd. Now it's working. For some reason, the code you posted, I tweaked it (out of curiosity) to place blank line spaces between each } and # and placed a blank line between the remark */ and the first line of code.

jsher, thanks. Now, to figure out why FF is having problems with FB Games. I take a look at your suggestion and see if that works.

more options

tempest21 said

That was odd. Now it's working. For some reason, the code you posted, I tweaked it (out of curiosity) to place blank line spaces between each } and # and placed a blank line between the remark */ and the first line of code.

It didn't work with plain line breaks, it needed extra line breaks?

Are you using Notepad to edit your file? Unfortunately, Notepad doesn't understand "Linux-style" line breaks. You might consider upgrading to a smarter text editor if you have to do a lot of pasting from the web.

Some examples: https://www.userchrome.org/help-with-userchrome-css.html#tools

more options

Well, I copy & pasted your text above into notepad. I guess I should upgrade. lmao. But, it did work. The thing with the FB Games, I'll take a look at your suggestion and see if that works.

Thanks for your help.