Installing 2 versions of Firefox on OS X

DISCLAIMER:  This approach is only tested on OS X 10.7.5 (Lion)

As a web developer you test your development in various browsers to mitigate any issues before handing over the site to your client. But what if the new site that you put sweat and tears into developing, misbehave in the next release of a given browser? Or if the next release fixes a small annoyance that you otherwise would have to work hard to solve? Developing with cutting edge technologies make this scenario very plausible. This recipe will show you how to install the beta version of Firefox, while still maintaining the current stable version.

Installing a local copy of Firefox

I’m going to explain this step by step. You should be able to follow the recipe even if you have never used Mac before. I am, however, going to assume that you already have the current version of Firefox installed.

First, you need to download the beta version of Firefox. Go to http://www.mozilla.org/firefox/beta/and download Firefox Beta. If you are asked to open the file with DiskImageMounter then choose that, if not, then you need to open the downloaded file (should be an .dmg file) with DiskImageMounter after your download is finish. As DiskImageMounter is the default for .dmg files you should be able to just double click the file. Don’t install Firefox Beta just yet!

Now, we need to open your local Applications folder. On Mac, the Applications folder is where your programs normally reside. A program is installed just by copying it to your hard drive and you can in practice put it anywhere, while this would pretty quickly lead to a mess. Apple has therefore made a “ready to use” Applications folder for you and in OS X Lion you have several.  If you open Finder (the program with the blue square face) you will find an Applications folder in the left pane, either under Favorites or Places depending on your OS X version.  This is the global Applications folder where all your programs are.

If you can’t find Applications in the left pane then look in your Dock (usually in the bottom of the screen), right-click the Applications icon and choose Open Applications from the context menu. If you don’t find it in the Dock then try opening Spotlight (the magnifying glass in the upper right corner) and write “applications”.

Well, this is all good and dandy but we need to make a local installation of Firefox Beta so we need to find our local Applications folder. The folder resides in a folder with your username. On my Mac it’s under dotnetCarpenter.

If your download is completed then you can drag the Firefox icon to your local Applications folder. Do not drag it to the Applications folder to the right of the Firefox icon, as this will overwrite you current version of Firefox!

Distinguish between Firefox stable and Firefox beta

Now that we have a local installation of Firefox Beta we need to distinguish between the current stable- and beta-version. Firefox has a built-in Profile Manager that basically creates a folder with all your add-ons and settings data.  The main reason for creating a new profile is that we don’t want to spend time managing add-ons that might not be compatible with the beta version of Firefox, while switching between versions when we are testing a site. To open Profile Manager we need to provide a -ProfileManager argument to Firefox. We do this via the Terminal program that comes with OS X.  Open the global Applications folder and open Utilities, then double click on Terminal.  Then copy the following line into the Terminal and press enter:

~/Applications/Firefox.app/Contents/MacOS/firefox-bin –ProfileManager

This should open the Profile Manager.

If the Profile Manager doesn’t open then make sure Firefox is not running. You can easily close all instances of Firefox by selecting a Firefox window and press command (⌘) + q.

Click on the Create Profile… button and click on Continue. Now enter a profile name of your choice. I recommend Beta as Firefox Beta will stay on the beta channel for updates and hence, always stay in beta. I have to warn you not to store your new profile in a folder that contains anything else than profile data. If you delete the profile using the Profile Manager, then Firefox will delete the folder including all files. Now that you’re warned, click on the Done button and you are… done! Well, not just yet. You noticed that the icon for Firefox Beta is exactly the same as the stable version? What a mess! Now I have to see the about page just to check what version I’m viewing a site in? I hear you. Let’s change the icon.

Changing the Firefox Beta icon

Unfortunately, Firefox Beta doesn’t come with its own icon so we need to create one. I found a nice one on Mozilla’s site: http://www.mozilla.org/en-US/firefox/channel/

In chance that Mozilla changed the web page as you read this, you can download it directly from this page.

Now we just have to convert the .png file. As a front-end developer I always try to use online services and this is no exception. Head over to http://iconverticons.com (you might have to click on the Use Online button) and upload the image. iConvert will generate several icon files for us. I have only tried the .hqx file and it worked like a charm on OS X 10.7.5. Download the .hqx file via the Download button and unpack it by double clicking the file. If you choose the file in Finder, you’ll notice it’s handled like an ordinary text file. The text is a handy guide for changing the icon of a program. Here I have changed the text to reflect our use-case but it’s pretty much just what is says in the original.

How to use this icon:

Step 1: Copy the icon to the clipboard

a) Click on this file from Finder.

b) Choose 'Get Info' from the 'File' menu.

c) In the info window that pops up, click on the icon in the upper left corner.

d) Choose 'Copy' from the 'Edit' menu.

e) Close the info window

Step 2: Paste the icon to the desired item.

a) Go to Firefox in your local Applications folder in Finder.

b) Click on Firefox (program).

b) Choose 'Get Info' from the 'File' menu.

c) In the info window that pops up, click on the icon in the upper left corner.

d) Choose 'Paste' from the 'Edit' menu.

e) Close the info window.

Now you can drag Firefox Beta to your Dock from your local Applications folder. Firefox only allow one instance of Firefox running at a time. So you will need to close Firefox completely before you can switch between versions. The Profile Manager will automatically add -no-remote argument for you, if you have another instance of Firefox running. So as long you don't tick "Don't ask at startup" in the Profile Manager, you'll be able to run both versions of Firefox simultaneously.