Yes, but, it's not an easily available setting. The way you can modify toolbars and panels that drop from toolbars is through an optional file named userChrome.css which Firefox checks at startup.

To allow more space for folders, it's useful to remove the image at the top, so here is a combination of rules to try. Please allow 10 minutes for this.

This assumes you do not already have a userChrome.css file. If you do already have a working userChrome.css file, you just need to add the rule under (A) to your file.

(A) Select and copy the following style rule code

/* Add/Edit Bookmarks Drop-down */
/* Taller Folder List */
#editBMPanel_folderTree {
  min-height: 350px !important; 
}
/* Hide Giant Thumbnail and Favicon */
#editBookmarkPanelImage, 
*|div#editBookmarkPanelFaviconContainer {
  display: none !important;
}

(B) Generate and download a userChrome.css file

Open the following page and paste the above rules into the editor, replacing the sample rule:

https://www.userchrome.org/download-userchrome-css.html

Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot)

Minimize that Finder window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

There are boring videos for Mac and Windows if you like videos.

(D) Move the userChrome.css file you generated in Step B into the chrome folder you created in Step C

The next time you exit Firefox and start it up again, it should discover that file and apply the rules.

Thanks for your reply. That was straightforward. However, I diligently followed the steps and there was no effect on that box. Any ideas why?

I'm on Firefox Quantum 66.0.4

I would backtrack through the steps to make sure things ended up in the right place with the right names.

It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.

• https://support.mozilla.org/en-US/kb/use-troubleshooting-information-page-fix-firefox

You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file and not as a RTF file (open the file in a Firefox tab).

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

I have retraced the steps. Below is a screenshot which shows my firefox info screen, the userChrome.css file itself in finder, and its contents. This should be everything. Have I missed anything?

Thanks both for your help I really appreciate it!

The screenshot shows that you didn't add the !important flag (display:none!important;) This flag is required to be able to override existing CSS rules.

#editBMPanel_folderTree { min-height: 40em !important; }

#editBookmarkPanelImage,
*|div#editBookmarkPanelFaviconContainer,
#editBookmarkPanel .panel-header { display: none !important; }

cor-el said

The screenshot shows that you didn't add the !important flag (display:none!important;) This flag is required to be able to override existing CSS rules.

I think that might be caused by an issue with email notifications. To copy the code in its fullest form, it is best to come back to this thread and copy from this page instead of an email.

I think I've got that right now, and restarted (screenshot attached), but still nothing. Any more ideas?!

Thanks again for your ongoing attention.

Hi malinod, sorry for the delay, I was away for a week at a conference.

What program are you using for your CSS viewer? It's funny that the tabs are shaped like the old Google Chrome tabs.

Anyway, if Firefox is not reading the file correctly, could you reconfirm that it is saved in the place that Firefox looks for it? You could check the video for clarification if my page didn't do the job. https://vimeo.com/245560075

Try to add the default @namespace line at the top of the file.

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

Did you try to open userChrome.css in a Firefox tab to confirm that the file is OK?

Can you post the location of the userChrome.css file?

Thank you both! It's fixed now. The problem was that the chrome folder was not inside the Profile sub-folder, but just a level up.

Very silly oversight. Thank you again for your patience, it really means a lot to me.

Do you know where the documentation that lists every Firefox element that can be customised is?

You would have to browse/search the Firefox source code.

• https://dxr.mozilla.org/mozilla-release/

But you would normally use the Browser Toolbox to inspect a specific element and find its selector.

• https://developer.mozilla.org/en-US/Tools/Browser_Toolbox