Merge Firefox Reload/Stop buttons, extensionless
Posted by Percy Cabello on September 26th, 2006 • Tags:
ShareThis

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. 

Comments
Eris Siva said on September 26, 2006, 3:27 pm:

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!

Some Other Jesse said on September 26, 2006, 4:05 pm:

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.

percy said on September 26, 2006, 4:19 pm:

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.

Greg said on September 27, 2006, 6:35 pm:

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/DzU3x9HJ7cIY3ENCUWHbH6lXSrEFksT7CzcwkiwkpYCA1cM9gl0gkZKkpESQ8hmx3DGS6LFWQktJIKxMBhlCOTYGSTEFIaCJObMNrCqKAY6ImnQhCmkLIAaVxF4rKKqKYBWx2rofGbaIVRFhaAAsqpDG+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;
}

Greg said on September 27, 2006, 6:36 pm:

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

Firefox-2.0-Oberfläche optimieren — Software Guide said on October 29, 2006, 7:15 pm:

[...] 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 said on December 6, 2007, 12:25 pm:

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

Mezclar el boton detener/actualizar en Firefox | Baratijas Blog said on January 6, 2008, 2:04 am:

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

Gray said on April 22, 2008, 5:34 pm:

Excellent trick, works perfectly. Thank you!

Mathew Hartnell said on April 24, 2008, 12:21 pm:

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

Minimal Firefox - Mozilla Links said on October 24, 2008, 10:50 am:

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

Your Firefox defaults - Mozilla Links said on January 26, 2009, 10:50 pm:

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

bejelit said on March 17, 2009, 12:32 pm:

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

Firefox 4.0 theme mockups - Mozilla Links said on July 29, 2009, 9:53 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 said on February 15, 2010, 8:45 pm:

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

Daniel Ritchie said on July 11, 2010, 7:44 am:

@V@no: This article is over 4 years old. I believe it was Firefox 1.5 being discussed here; 2.0 at latest. The Firefox Chrome (GUI) has changed since then, and is about to change again in Firefox 4. What Percy wrote, and what Greg supplied later, can be scrapped and a new sollution is to be found. Likely, people at userstyles.org will post this sort of thing. My tutorial on the subject, ( http://honestlyillustrated.com/userstyles/stylishguide/ ), explains how to use Stylish Firefox extension to do these sorts of things.