Merge Firefox Reload/Stop buttons, extensionless

By Percy Cabello

Extensions are great but I love customizing Firefox without them. One of my favorite extensions is Stop/Reload, a simple extension that merges both buttons into a single one that toggles between stop and reload intelligently.

You can replicate this functionality with a simple edit of userChrome.css file. In Windows, you can find it at:

C:\Documents and Settings\[Your User name]\Application Data\Mozilla\Firefox\Profiles\[obscure profile code followed by profile name]\chrome

To find it in other platforms check Mozilla Knowledge Base. If it's not there, just rename the existing userChrome-example.css file to userChrome.css.

Then, add the following lines to the end of the file:

/* Show Stop and Reload buttons smartly*/

#stop-button[disabled] {    display: none;}

#stop-button:not([disabled]) + #reload-button {
    display: none;
}

Ensure that the Stop button is just before the Reload button in the toolbar. Now enjoy a more compact toolbar, a la Safari, a la Opera. 

Posted on September 26, 2006 - 7:57 am || More on Firefox, Tips

Comments

Eris Siva

September 26, 2006 7:57 am

Another great way is to install the Stylish extension (http://userstyles.org/stylish) and then load the “Combine Stop/Reload Buttons” style from userstyles.org (http://userstyles.org/style/show/10). No mucking around with the userChrome!

Reply

Some Other Jesse

September 26, 2006 7:57 am

Cool idea, but it doesn’t quite work for me. The reload button always displays, and the stop button shows up beside it while a page is loading. I’ll poke at it tomorrow if nobody posts a solution before then. Maybe it has something to do with the fact that I’m using the iFox Graphite theme.

Reply

percy

September 26, 2006 7:57 am

I forgot to mention: the Stop button must be just before the Reload button for this hack to work. I\’ll update the article now.

Reply

Greg

September 27, 2006 7:57 am

Not too sure about it really. It assumes that the stop and reload buttons are mutually exclusive – that they could never be used at the same time. And there are times when both could be useful, so I’ll miss this.

My Userchrome has in it:

/*Find toolbar adjustment to show options in find-as-you-type*/
#FindToolbar > * {display:-moz-box}

/* Hide bookmark toolbar folder in bookmark menu*/
menu[label="Bookmarks Toolbar Folder"],
menu[label="Bookmarks Toolbar Folder"]+menuseparator {
display: none !important;
}

/* Remove Web Search from Tools Menu */
menuitem[label="Web Search"] { display: none; }
menuitem[label="Web Search"] + menuseparator { display: none; }

/* Hide For Internet Explorer Users & Release Notes from Help Menu */
menuitem[label="For Internet Explorer Users"] { display: none; }
menuitem[label="Release Notes"] { display: none; }

/* Less toolbar button spacing */
toolbarbutton {
padding: 3px !important;
}
toolbarbutton[type="menu-button"],
toolbarbutton[type="menu-button"]:hover,
toolbarbutton[type="menu-button"]:hover:active,
toolbarbutton[type="menu-button"][open="true"],
toolbarbutton[type="menu-button"][disabled="true"],
toolbarbutton[type="menu-button"][disabled="true"]:hover,
toolbarbutton[type="menu-button"][disabled="true"]:hover:active {
padding: 0 !important;
}

/*remove the Go button*/
#go-button { display: none !important; }

/* Remove the search-go-button and fix searchbar spacing */
#go-button-stack,
.search-go-button-stack {
display: none !important;
}
#search-container {
margin-right: 7px !important;
}
/*Resize search bar*/
#search-container { width: 200px !important; }

/*Menu icon (for Tiny Menu extension)*/
menu#tinymenu {
background: 50% 50% no-repeat
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAANPSURBVHjalJJrTBRXGIbfue3OLrMIgruWAqKYAXXTolIv1YY03lKT+oNsTWpNmrQhRtGmSX/YGLzFSxqqibamStJq2hCV2Cpao4amtFFKA4aFgIiUIOCusOwssLeZ3bntOEuksU37wzf5Ts7JOd+T8+Z7YRgG/q92HblWa5Zx4rsbnvT5TO3HNXVf1W598Q2RXm59c+hTl9M5ttyzq2H3wUtfhP0PZ7/Fs919SoFrKuPVmqAQORfub8+6/dFvJJdhURr/zBv17GvYC1PTgLZv9+11Ly15QAo/v4+ULS47K3fU3QuDLSkDkTMXWgoQZQ2utgOoWtEHHUz97z1cfP0nt3eSaYqRFPIsYs9Nc/uBSvM7jKFbiHecx71fmtEXSsAXlTEp6+h078cp75ugoG5fXxbOOnX02Hbq9fy5nrWFQ7wqjZdrQR/0SQE6VYCV/DzU3×9HJ7cIY3ENCUWHbH6lXSrEFksT7CzcwkiwkpYCA1cM9gl0gkZKkpESQ8hmx3DGS6LFWQktJIKxMBhlCOTYGSTEFIaCJObMNrCqKAY6ImnQhCmkLIAaVxF4rKKqKYBWx2rofGbaIVRFhaAAsqpDG+hFaKEOYgmFxi4G5ES/H3rIBEgSJJECxdB4LTMGlstE42Q1ano/w6xHLdOgqGnDITzEO7wB2FhkuHSQekbB0dhwrJuKh8FxVmQX52P3Gwzuzr+I1dxTVDv7sCzqBaEooGIR8MYwyGIO4FiI49TzHJRxveWrsJgpcoCy5EMxbf3UGsW10Tm463wbytJ1IOUENnV+jS83T6B02xqkJgbOVZ/lfdNjvBAuCgk96l+yIJnJkEGrPlS4adhy7ciikijqaMDnjw7jxpYxlFa6AUHEkeNPCs/WnT5OpwFXhh9UnKRsgxuSMXAr/cgutMLFRFBfrpm3I0gkJdOyHVKuAqv/MTquR27+Ia4NpHunAWndWbetOdl8GRsGpxbEiwk4eA4OFwHCnA7DWMxsqGCTBu5cDDYd6CrRvPfrqv6O8ow8H9ac9F39ceNWacS+KJVcYDUNWp0ErAtpBKwO74WnuSF/3ppo+6/n35vp+QdgRhXv7vm+v3ewFKIIAgZUq43OecUV6m/7YdO/3/4n4GX0TIABADxRlal76sjCAAAAAElFTkSuQmCC);
}
menu#tinymenu > label {
visibility: hidden;
}

Reply

Greg

September 27, 2006 7:57 am

Opps, sorry for making that go across the screen, edit out the last Userchrome hack altogether if you want/can.

Reply

Firefox-2.0-Oberfläche optimieren — Software Guide

October 29, 2006 7:57 am

[...] Beide Symbole gleichzeitig darzustellen ist unnötig, z.B. der Safari-Browser nutzt nur einen Button für beide Funktionen. Genau dies werden wir auch machen. Man kann dafür die Erweiterung Stop-or-Reload Button verwenden, nach Installation und Browser-Neustart ist dann nur noch ein Symbol vorhanden. Alternativ kann man das ganze auch ohne Erweiterung erledigen, Details siehe unter Merge Firefox Reload/Stop buttons, extensionless (Englisch). [...]

Sean

December 6, 2007 7:57 am

Great tip, worked like a charm! That’s one more extension now uninstalled.

Reply

Mezclar el boton detener/actualizar en Firefox | Baratijas Blog

January 6, 2008 7:57 am

[...] en Mozilla Links Tags: firefoxPublicado en: Informatica [...]

Gray

April 22, 2008 7:57 am

Excellent trick, works perfectly. Thank you!

Reply

Mathew Hartnell

April 24, 2008 7:57 am

Great tip, worked like a charm! That’s one more extension now uninstalled.

Reply

Minimal Firefox - Mozilla Links

October 24, 2008 7:57 am

[...] with keywords only, hence, no search bar. Stop and reload buttons combined via CSS. No global [...]

Your Firefox defaults - Mozilla Links

January 26, 2009 7:57 am

[...] Merge the stop and reload buttons (with this hack) [...]

bejelit

March 17, 2009 7:57 am

please use %appdata% istead of C:\Documents and Settings\[Your User name]\Application Data\

Reply

Firefox 4.0 theme mockups - Mozilla Links

July 29, 2009 7:57 am

[...] on whether you are editing a web address, loading, or reading a web page. (Remember you can merge the stop and reload buttons with no extensions, pretty [...]

V@no

February 15, 2010 7:57 am

Thanks for the tip. It worked initially, after I’ve moved stop button on left side of reload button. But after restarting FF it started showing stop button every time reload button pressed, until I moved stop button to the right side and back to the left side…

Using FF3.6

Reply

Leave Comment