Share your custom Firefox/Minefield 4 stylish scripts

[+Heartripper Subscriber¹]

Its it possible to hide the borders of the navbar buttons with dropdown menu?

Like the ones for AIO Sidebar and Download Helper(when it detects flash video).

try:

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

#nav-bar .toolbarbutton-1{
  border: 1px solid transparent !important;
  box-shadow: none !important;
  background: none !important;
}

#nav-bar .toolbarbutton-1[type="menu-button"][open="true"],
#nav-bar .toolbarbutton-1:not([disabled="true"]):hover{
  border: 1px solid rgba(0,0,0,.2) !important;
  box-shadow: 0 1px 0 0 rgba(255,255,255,.4) inset,
              0 1px 0 0 rgba(255,255,255,.4) !important;
  border-radius: 4px !important;
}

#nav-bar .toolbarbutton-1:not([disabled="true"]):not([type="menu-button"]):active{
  border: 1px solid rgba(0,0,0,.3) !important;
  background: rgba(0,0,0,.1) !important;
  box-shadow: 0 0 4px 0 rgba(0,0,0,.1) inset !important;
  border-radius: 4px !important;
}

#nav-bar .toolbarbutton-1[type="menu-button"]>*{
  box-shadow: none !important;
  background: none !important;
  border: none !important;
}

#nav-bar .toolbarbutton-1[type="menu-button"] dropmarker{
  border-left: 1px solid transparent !important;
}

#nav-bar .toolbarbutton-1[type="menu-button"]:hover dropmarker,
#nav-bar .toolbarbutton-1[type="menu-button"]:active dropmarker,
#nav-bar .toolbarbutton-1[type="menu-button"][open="true"] dropmarker{
  border-left: 1px solid rgba(0,0,0,.25) !important;
  -moz-transition: none !important;
}

#nav-bar .toolbarbutton-1[type="menu-button"] toolbarbutton:active,
#nav-bar .toolbarbutton-1[type="menu-button"][open="true"] dropmarker{
  background: rgba(0,0,0,.1) !important;
}

[iron2000]

It works!

Thanks Heartripper!

[+Heartripper Subscriber¹]

It works!

Thanks Heartripper!

you're welcome!

i've created this userstyle:

http://userstyles.org/styles/42200

[foxxyn8]

how can I move tabs closer to location bar (I have location bar navigation and tabs on same toolbar)

I want first tab to star directly on the right side of location bar and not as screenshot with massive space and then tab.

this is my userchrome

#urlbar

{

max-width: 700px;

}

tab { min-width: 123px !important; }

/thx /Mac and Firefox 4 b9pre

use #urlbar-container instead of #urlbar

#urlbar-container{
max-width: 700px !important;
}

https://www.neowin.net/forum/topic/921416-share-your-custom-firefoxminefield-4-stylish-scripts/page__view__findpost__p__593466824

[mysiskatten]

use #urlbar-container instead of #urlbar

#urlbar-container{
max-width: 700px !important;
}

https://www.neowin.net/forum/topic/921416-share-your-custom-firefoxminefield-4-stylish-scripts/page__view__findpost__p__593466824

thanks :D worked

[foxxyn8]

Please, can someone help me with this:

Got it from here http://userstyles.org/styles/20883 and I'd like to exclude only the Main Menu while pressing the AppMenuButton...

Must I use the command "not" before all those menus included or just to delete an entry from the list? Also, I don't know the exact name...

Thank you in advance!

I fixed it up for you a little bit. I took out all the popup references since "The popup element is no longer supported; you should use menupopup instead."(see : https://developer.mozilla.org/en/Firefox_4_for_developers). Should you find you need them you can just add them back in.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* GENERAL */
menupopup:not(#appmenu-popup), 
menupopup:not(#appmenu-popup) menu, 
menupopup:not(#appmenu-popup) menuitem {
	-moz-appearance: none !important;
	background: none !important;
	color: #fff !important;
	opacity: 0.95 !important;
}

/* BORDER */
menupopup:not(#appmenu-popup) {
	-moz-border-image: url("data: image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAvCAYAAABAHIylAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAUlSURBVHja7JtPaBRXHMc/781OdnXNqinVlphK4iJoQWiLGIjgLV6UEBFLEcFzLr0JihdB8OjNkwdBWCkKIejFXIKYQkR6CS2Gsv5rjE0sSN11kzWz814P+ya+vMxGL4Xdzfzgx7x9O4edD9/fmzfz+67QWrNeCCGEO9Vg3MyhG4zRnwAg4r53oAgniRm3AhwdM7bnYmGtAWTBiSBI6yiduWaH5AJR1lE5czoO0ipAFhwbhGeltI4upGZWkA0ltI6h9Tk6ZxWkFUAOnChTVmaAHcBWIAukY8qtWeEAfAAqwDvgDVAFalYqK1cgCa11HBzPQPGBDuBrz/P6BgcH1aFDh6pHjx4t9/f3V2mhmJqayty/f7/z0aNHmfHxcRmG4TPgb2AZCAyk0IVkAxKOajqMSvbm8/kdV65c+efkyZNl2iDu3LnTef78+S+LxeIb4E+jrmVHTdoFFCknUk0G6NmzZ09vsVgsAoyMjBwYHx8fLpVKfUEQdLUSFN/33+ZyuWeDg4Oj165dmwbI5/P5p0+fPgdmTclFagoBpbXW9u3bs5STAbZ6nvdDoVCYP3XqVOnw4cM/Pnny5KdUKrUspQyFELqVAGmthVLKq9VqHfv27bs1OTn5S6FQyJ0+ffor4DezNlUtJYWA9pxbuG/KKgPsPnHiRPrSpUsLIyMjByYmJn5Op9NLUkq1du/Y/CGEQEqpPM+rzc/Pf//69evfz507Nzs9Pb1lZmYmBZSchVoDWlp3IumoqGtgYKAMcO/evTO+739oNdU0AKV93/8wNjZ2BmBgYKACbDfXnLK2MQJnL+MC6jx+/HgJoFKp9EgpQ9okpJRhuVzeDTA0NPQOyK0HCKfMIkjpfD4fACilsu2gHltFSqmsWaiDGDgrwpHOM5cNyGPjRCpOPa6ChLOL3kiAPOfahbsGxUESGwiQaPB8KaTzNB73amOjAIp7pYNc50XYRgS0hoUkifW3BAmCBFACKAGUAEoAJYASQAmgJBJACaD/F5DrgNAbiIOmgQNEOhO24yGcmZnpAJBSVkyLqG2e3oUQSwAvXrzwWW1gsFkgiXdAKKA6Nja2DSCbzc4qpdrmDWMYhl4ul3sOUCgUvgAWcdo9ERPZAI4C3k9OTnYBHDt27GYQBOl2UJHWWgRBkB4aGroJ8PDhw+3UTQ0qDpLdOIwsLpFpQRSLxXxvb++7CxcuvLx7965eWFj4TgihTbYcGKVUKgiCzP79+2/dvn174vr1611Xr17tA54B71nbWVVuTz4DbAY6qdtcdu/atWvn7Ozsr7CqN58PgmBbKwHyff/fXC5XtHvzPT09A69evVoAXlJvPZdNuVUxjg+3L58GNlH3/+RM7u3u7s5evnz5j7Nnz75thzXoxo0bXRcvXvx2bm6uQt3dUTJZAZaouz1qQOh2VSPjwiZgi1FSJ9Atpfymv79/4eDBg2+Hh4ffHDlyZLGVoDx48GDz6OjojsePH3dNTU3tVEr9BcwZ1ZRNiS1ZZbZSYo3cHZsNpKzJLdQdZjnzXQfN7VN0787LpnxK1B1m741iKma8GLMG6ZTWOlpwI99ezZwkrW2AMvNVPrZpU6ztqzUroOj3R9dWNWpZdFRju8z05zrMMlZ2NADU7B5FF1AEKcrPcphBY49ilL5J2/XaKgqKHK2ByWUr1/coRntvB5LrcvX52OC3e9nQ/D5p5UCqWVA+7XI1+wRqtVrik6aBT9r3fQAbUuK0jwPkQLJBbez/atiA7HBguUDa/t8+/w0Aop+YsD/C4DEAAAAASUVORK5CYII=")13 13 15 / 13px 13px 15px repeat !important;
	-moz-window-shadow: none !important;
	margin-top: -3px !important;
}

/* SEPARATOR */
menupopup:not(#appmenu-popup) menuseparator {
	-moz-appearance: none !important;
	list-style-image: none !important;
	background: none !important;
	border-top: solid 1px #555555 !important;
	border-right: none !important;
	border-bottom: none !important;
	border-left: none !important;
}

/* DISABLED ITEM */
menupopup:not(#appmenu-popup) menuitem[disabled="true"] {
	color: #666666 !important;
}

/* SELECTED ITEM */
menupopup:not(#appmenu-popup) menu[_moz-menuactive="true"], 
menupopup:not(#appmenu-popup) menuitem:not([disabled="true"])[_moz-menuactive="true"] {
	background: -moz-linear-gradient(top, #6f81f5, #3f51f2) !important;
	opacity: 0.95 !important;
}

/* SELECTED ITEM (GRAPHITE) */
menupopup:not(#appmenu-popup) menu:-moz-system-metric(mac-graphite-theme)[_moz-menuactive="true"], 
menupopup:not(#appmenu-popup) menuitem:not([disabled="true"]):-moz-system-metric(mac-graphite-theme)[_moz-menuactive="true"] {
	background: -moz-linear-gradient(top, #7f858d, #69717c) !important;
	color: #ffffff !important;
	opacity: 1.0 !important;
}

/* RIGHT ARROW */
menupopup:not(#appmenu-popup) .menu-right, 
autorepeatbutton {
	-moz-appearance: none !important;
	list-style-image: url("data: image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAJCAYAAADHP4f4AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADrSURBVHjatJM9TgMxEEafU6WgSEmRAokG5QQoB8ghKDkEJ9lLpKDMGRAV1UopU6AVBV3QxhWPAls4JoYqlj7J8/fNeGaM2qsLlXNhAlwDz0DH/2cLzCrdAMQ/0KPGAjt12ahonXyeKv1KHSuejL264IRhTIQl0bIgOqj32QagbhpJOoCgxkZrdsBNcb8sbB/AHIghBNQp8ApcFD5vIYQrgMkJcoEX4DbJXZWARPaYhRBCBB5SLMAncPfDePy897IVaev2jVaM6uqouu95RXVNZcgBG3VazaJvJMgYKq6Zuv3dGx3Shpztn3wNABJf62ogSXVRAAAAAElFTkSuQmCC")!important;
}

menupopup:not(#appmenu-popup) .menu-right {
	-moz-image-region: rect(0px 7px 9px 0px) !important;
	opacity: 0.4 !important;
}

menupopup:not(#appmenu-popup) .menu-right[_moz-menuactive="true"] {
	opacity: 1.0 !important;
}

/* SCROLL ARROWS */
menupopup:not(#appmenu-popup) .autorepeatbutton-up {
	-moz-image-region: rect(0px 16px 9px 7px) !important;
	opacity: 0.75 !important;
	-moz-border-top-colors: #000000 !important;
	-moz-border-right-colors: #000000 !important;
	-moz-border-bottom-colors: #000000 !important;
	-moz-border-left-colors: #000000 !important;
}

menupopup:not(#appmenu-popup) .autorepeatbutton-down {
	-moz-image-region: rect(0px 25px 9px 16px) !important;
	opacity: 0.75 !important;
}

menupopup:not(#appmenu-popup) .autorepeatbutton-up[disabled="true"], 
menupopup:not(#appmenu-popup) .autorepeatbutton-down[disabled="true"] {
	opacity: 0.4 !important;
}

/* CHECKMARK */
menupopup:not(#appmenu-popup) menuitem[checked="true"] .menu-iconic-left {
	-moz-appearance: none !important;
	list-style-image: none !important;
	background: url("data: image/png;
	base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKFJREFUeNpi/P//PwPJgBhNQDX8QFwNxMykaFr3HwK2AzEbExEaKoBUIJT7mpGR8Rdem4ByrkD8B2rLVSDmQXEeSACI7ZE0yAHxK6iGb0CshRIQIHcC8V4g/gnE3lD+mf8IEIsRekBsBtXwH0rvRdIwB2eQA+kQJPfDwCUg5sQbT0B2MpKGD0CsTlTkgoIYqimcpBQBFHPCF3eM5KQ9gAADAOly5N+9UMPFAAAAAElFTkSuQmCC")no-repeat !important;
	min-height: 13px !important;
	opacity: 0.75 !important;
	margin-bottom: -2px !important;
        margin-right: 24px !important;
}

menupopup:not(#appmenu-popup) menuitem[checked="true"][_moz-menuactive="true"] .menu-iconic-left {
	opacity: 1.0 !important;
}

[SleweD]

Is there any way to reduce the size of the aero window borders on the sides and the bottom? The window is already missing an inside border so it makes the glass borders look even fatter

[SoapyHamHocks Member]

Is there any way to reduce the size of the aero window borders on the sides and the bottom? The window is already missing an inside border so it makes the glass borders look even fatter

There is a way. You change the 'chromemargin' attribute on #main-window, although you can't do this using CSS. In the morning I can cook up a small addon to change this value if you would like.

Here is an example using smaller borders:

[SleweD]

That looks nicer than these fat ones, especially since i've moved the tabs directly into the titlebar (so there's even less glass up there). Would appreciate it :).

[SoapyHamHocks Member]

That looks nicer than these fat ones, especially since i've moved the tabs directly into the titlebar (so there's even less glass up there). Would appreciate it :).

As promised. Let me know if there are any issues.

Download

[SleweD]

Works great so far. I had to restart firefox twice before it worked though, first time was assumed compulsory restart, second one was after nothing happened. This isn't likely to crash dwm, like glasser sometimes did for me is it?

Thanks :D

[SoapyHamHocks Member]

Works great so far. I had to restart firefox twice before it worked though, first time was assumed compulsory restart, second one was after nothing happened. This isn't likely to crash dwm, like glasser sometimes did for me is it?

Thanks :D

It shouldn't at all. All it does is modify an attribute already present on #main-window. Odd that it didn't work, I had a few friends test it and they had no problems.

[ViperAFK]

This was probably already posted but I can't find it, does anybody have any stylish code to put more padding between the tab bar and the titlebar? In the theme I use (clearscreensharp) they are way too close.

[r0bc]

I'm not sure if this will help or not, but this is the code I use to make "about:blank" transparent

#browser,
#content > tabbox > tabpanels {
  background-color: transparent !important;
}

#main-window[stylish-url="about:blank"] #content browser { 
   opacity: 0 !important;
}

Everything has worked flawlessly until a couple days ago (or more...), when I noticed an artifact on the navbar on the transparent about:blank page only, which actually seems to depend on the "opacity" CSS setting, and only disappears when opacity is set to 1. Something in the recent builds must be the culprit...

Note that it appears if the FF window loses focus while the "about:blank" page is open, and remains thereafter, disappearing when you switch to any other tab and reappearing when you click on the "about:blank" tab. I also switched off more or less all other stylish mods and it's always there. If I put tabs below the app button, the "artifact" is partially obscured by them (but visible if they are partially transparent, of course).

Any idea on how to remove it?

[Makmende]

Hey! I've made (stolen from another userscript...) this script to put the download statusbar on the add-on bar.

#downbarHolder{
-moz-appearance:none!important;
min-height:23px!important;
max-height:23px!important;
border:none !important;
margin:0 0 -24px 25px!important;
}

#downbarHolder #downbar {
max-width: 550px !important;
}

It's already pretty good, i was wondering though, is there any way to make the bar depend on the size of the browser's window?

So that when i resize the the browser the bar resizes as well?

[r0bc]

OK, I just checked and it seems to happen only if I have a transparent tab bar, which I implemented with the following (taken somewhere, unfortunately I didn't record it, and later tweaked)

#main-window[tabsontop="true"] #navigator-toolbox > *:not(#TabsToolbar):not(#toolbar-menubar),
#main-window:not([tabsontop="true"]) #navigator-toolbox > *:not(#nav-bar):not(#toolbar-menubar),
#sidebar-header
	{background-color: RGBA(232, 228, 255, 0.3) !important; }


#main-window[tabsontop="true"]  #nav-bar
	{background-clip: padding-box !important; 
         border-top: 1px solid transparent !important; 
         -moz-box-shadow: RGBa(232, 228, 255, .15) 0 0 0 -0.5PX inset,
                          rgb(180, 180, 180) 0 0 0 -0.5PX inset !important; 
border-left: 1px solid transparent !important;
border-right: 1px solid transparent !important;}


#main-window[tabsontop="true"][lwtheme="true"]  #nav-bar
	{border-top: none !important; }


#main-window[tabsontop="true"]  #navigator-toolbox
	{border-bottom: 1px solid transparent !important;
         -moz-box-shadow: RGBa(232, 228, 255, .25) 0 0 0 -0.5PX inset,
                          rgb(180, 180, 180) 0 0 0 -1px inset !important; }


.tabbrowser-tab[selected="true"]
	{background-image: -moz-linear-gradient(rgba(255, 255, 255, .58), rgba(255, 255, 255, .34)),
                           -moz-linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 30%),
                           -moz-linear-gradient(RGBA(232, 228, 255, 0.3), RGBA(252, 228, 250, 0.4)) !important; }

.tabbrowser-tab:not([selected="true"]),
.tabs-newtab-button
	{-moz-box-shadow: RGBa(252, 228, 250, .1) 0 0.5PX 0,
                          rgba(114, 114, 114, .25) 0 1px 0 !important; 
         background-image: -moz-linear-gradient(RGBa(252, 228, 250, .3) 0.500%, rgba(0, 0, 0, 0) 0.500%),
                           -moz-linear-gradient(rgba(153, 153, 153, .5), rgba(114, 114, 114, .5) 50%) !important; }

.tabbrowser-tab:not([selected="true"]):hover,
.tabs-newtab-button:hover
	{background-image: -moz-linear-gradient(RGBa(232, 228, 255, .3) 0.500%, rgba(0, 0, 0, 0) 0.500%),
                           -moz-linear-gradient(rgba(204, 204, 204, .6), rgba(153, 153, 153, .6) 50%) !important; }

.tabbrowser-tab[pinned],
.tabbrowser-tab[pinned]:hover
	{-moz-box-shadow: none !important;
}

.tabbrowser-tab[pinned][titlechanged="true"]
	{background-image: -moz-linear-gradient(rgba(255, 0, 0, .5), rgba(255, 0, 0, .5)) !important; }

#sidebar-header
	{-moz-appearance: none !important;
background: transparent !important;
         background-image: -moz-linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .0)) !important;
         border-top: none !important; }

#navigator-toolbox label:not([class^="menu-"]):not(.menubar-text):not(.tab-text):not([id^="identity-icon"]):not([class^="urlbar"]):not([class^="tab"]),
#main-window:not([tabsontop="true"]) .tabbrowser-tab:not([selected="true"]),
#sidebar-header
	{text-shadow: rgb(255, 255, 255) 0px 0px 6px, 
                      rgb(255, 255, 255) 0px 0px 6px, 
                      rgba(255, 255, 255, .3) 0px 1px 0px !important; }

.tabbrowser-tab[selected="true"]
	{text-shadow: rgba(255, 255, 255, .3) 0px 1px 0px !important; }

.tabbrowser-tab:not([selected="true"]),
.menubar-text
	{text-shadow: rgb(255, 255, 255) 0px 0px 8.4px, 
                      rgba(255, 255, 255, .3) 0px 1px 0px !important; }


#navigator-toolbox[tabsontop="true"] 
{ 
     margin-left: -1px !important; 
     margin-right:-1px !important;

}

If I remove the

.tabbrowser-tab[selected="true"]
	{background-image: -moz-linear-gradient(rgba(255, 255, 255, .58), rgba(255, 255, 255, .34)),
                           -moz-linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 30%),
                           -moz-linear-gradient(RGBA(232, 228, 255, 0.3), RGBA(252, 228, 250, 0.4)) !important; }

the artifact disappears, and of course the selected tab is not transparent anymore ;)

Note also that the width of the artifact is more or less the same as the app button, if I resize it (for example remove the stylish code to reset it to default), the artifact resizes accordingly.

Any other way to make the navbar and tabs translucent as in the image in my previous post and avoid this issue?

[SoapyHamHocks Member]

This was probably already posted but I can't find it, does anybody have any stylish code to put more padding between the tab bar and the titlebar? In the theme I use (clearscreensharp) they are way too close.

I believe this is the code used in browser.css, just mess around with the value until you find something that looks good.

#main-window[chromemargin^="0,"][sizemode="normal"]:not([inFullscreen="true"]) #navigator-toolbox {
  margin-top: -8px !important;
}

Any other way to make the navbar and tabs translucent as in the image in my previous post and avoid this issue?

I've tested your code and have no such problem. It might be time to try a new profile.

[foxxyn8]

OK, I just checked and it seems to happen only if I have a transparent tab bar, which I implemented with the following (taken somewhere, unfortunately I didn't record it, and later tweaked)

the artifact disappears, and of course the selected tab is not transparent anymore ;)

Note also that the width of the artifact is more or less the same as the app button, if I resize it (for example remove the stylish code to reset it to default), the artifact resizes accordingly.

Any other way to make the navbar and tabs translucent as in the image in my previous post and avoid this issue?

I'd really like to be able to help, but I can't reproduce the problem. I use the same method to to acheive transparency in the tabs and toolbars in the current nightly, but I'm not getting any artifacts. Like Soapy said, maybe it's time for a new profile.

[Ziz4rD]

Everything has worked flawlessly until a couple days ago (or more...), when I noticed an artifact on the navbar on the transparent about:blank page only, which actually seems to depend on the "opacity" CSS setting, and only disappears when opacity is set to 1. Something in the recent builds must be the culprit...

Note that it appears if the FF window loses focus while the "about:blank" page is open, and remains thereafter, disappearing when you switch to any other tab and reappearing when you click on the "about:blank" tab. I also switched off more or less all other stylish mods and it's always there. If I put tabs below the app button, the "artifact" is partially obscured by them (but visible if they are partially transparent, of course).

Any idea on how to remove it?

mmm I see this problem in the new Minefields nightly,

use this code

#main-window[stylish-url="about:blank"] #browser {
   visibility: hidden !important;}

but the problem is in panorama, appears again , well when panorama is glass

sorry for my english

[r0bc]

mmm I see this problem in the new Minefields nightly,

Thanks, now it only happens when the window loses the focus. Oddly, if I do it with a blank local html file, the artifact is always visible.

Guess I need to try with a clean profile and installing extensions one by one :( I just hate it...

EDIT: it happens also with a new profile... need to test more I'm afraid

[SoapyHamHocks Member]

Which do you guys prefer?

[ruiderson]

Which do you guys prefer?

Wow! I prefer the first one, but the second looks like a charm too!

Please, share both scripts! :woot:

Thanks

[CGar]

Both are sexy as hell, but I agree, I prefer the top one. I think this is partially due to the fact that it's not the typical preferences layout, it's fresh.

Do you think we could get an apples to apples comparison of the same preference page in both styles?

[SoapyHamHocks Member]

Wow! I prefer the first one, but the second looks like a charm too!

Please, share both scripts! :woot:

Thanks

Just have a few more things to do then they will both go up on userstyles.org

Both are sexy as hell, but I agree, I prefer the top one. I think this is partially due to the fact that it's not the typical preferences layout, it's fresh.

Do you think we could get an apples to apples comparison of the same preference page in both styles?

Thanks. Here is a screenshot of the vertical style with the sync section selected.

[CGar]

Looks great, the vertical is definitely cooler in my opinion

This is just me nitpicking here... but it looks like the vertical setup is extra wide for no particular reason, is this intentional?

Also, reducing the gaps between the buttons on the left may get rid of the extra blank vertical space introduced at the bottom.

Mozilla should be paying you guys to re-skin Firefox, seriously.