Run Internet Explorer 6 (or IE7, or IE8) images in VirtualBox on Mac OS X

These days I’m looking to save money anywhere I can. How about you? Whereas VMWare Fusion (as awesome as it is) runs around $80 USD per copy, Sun’s VirtualBox is a free, open-source product for virtualization that runs on Mac OS X, Linux, and Windows.

If you’ve not yet read the related post, “Run Internet Explorer 6 (or IE7, or IE8) images in VMWare Fusion on Mac OS X,” you should. This is a follow up on how to take those virtual machines (which we’ve already done a lot of work on), and convert them for use VirtualBox.

Prerequisites

• You need to have access to a Mac OS X machine.
• A broadband connection would be quite helpful.
• A USB flash drive (or some other way to copy files to the VM before you have network access enabled).

VMWare Fusion uses the .vmdk disk format for its virtual drives. VirtualBox uses the .vdi format. Although VirtualBox can use the existing .vmdk images, you get better performance if you convert them to .vdi.

Downloading and Preparing stuff

1. Download and install VirtualBox. It should live in the /Applications directory.
2. Download and install Q (a Mac version of Qemu). It should live in the /Applications directory.
3. Download and decompress an IE6, IE7, or IE8 VMWare Fusion image that I’ve posted previously. If you need ALL of them, you can save yourself the bandwidth by downloading the IE6 image, making a copy of the file, and upgrading that copy to IE7 or IE8.

Extracting the disk image

1. When you decompress the VMWare Fusion image, you should end up with a folder containing 3 files: Two text files, and a .vmware file.
2. Right-click (or command-click) the .vmware file and choose “Show package contents.” This will open up a new window.
3. Find the .vmdk file and drag it some place that’s easy to find. In this tutorial, we’ll use the desktop.

Converting the VMWare image to a VirtualBox image (Optional)

This step is optional. VirtualBox can read the VMWare Fusion disk image format if you’re short on time. However, you get better performance if you convert to the native VirtualBox format.

1. Fire up Terminal.app. It lives inside your /Applications/Utilities directory.
2. Move to your desktop directory:

   cd ~/Desktop

3. We’ll convert the .vmdk file into a raw hard drive file, then convert that raw file into the native .vdi format:

   /Applications/Q.app/Contents/MacOS/qemu-img convert -O raw IE6-XP.vmdk IE6-XP.raw && /Applications/VirtualBox.app/Contents/MacOS/VBoxManage convertdd IE6-XP.raw IE6-XP.vdi && rm IE6-XP.raw

4. Wait. Depending on your computer, this will probably take 20-45 minutes.
5. Once it’s done, you can delete the IE6-XP.vmdk file.

Configuring the VM

1. Move the new .vdi file to wherever you’ll want your virtual machines to live.
2. Launch VirtualBox. You’ll be presented with the “Welcome to VirtualBox” dialog.
3. Click “New.” A “Create new virtual machine” dialog box will pop up. Click “Next.”
4. Name your virtual machine. I named mine “IE6-XP.”
5. Operating system is “Microsoft Windows.” Version is “Windows XP.” Click “Next.”
6. Determine the amount of RAM you want to allow the virtual machine to use. I have 4 GB of RAM, so I allow 512 MB. Adjust as necessary, but I wouldn’t go below 192 MB. Click “Next.”
7. Here, you select the disk image to use. Choose “Use existing hard disk.” There is a pull-down menu that says “<no media>”. Click the icon to the right of it.
8. The “Virtual Media Manager” dialog should pop up. Click “Add.”
9. Find where you saved the .vdi file to, and select it. Once that’s done, click the “Select” button. This will close the Virtual Media Manager” dialog.
10. Back on the “Create new virtual machine” dialog, the pull-down menu that used to say “<no media>” should now say something along the lines of “IE6-XP.vdi (Normal, 16.00 GB).” Click “Next,” then “Finish.”
11. From there, click “Settings” along the top of the application.
12. Click the “Audio” tab, and deselect “Enable audio.” We don’t have the drivers for this, so we’ll save ourselves the nag-ware.
13. Click the “Network” tab, and choose “Intel PRO/1000 MT Desktop” from the Adapter Type pull-down.
14. Leave everything else as default, and click OK.
15. Click “Start” along the top of the application to start the virtual machine.

Installing the drivers and Guest Additions

1. When the virtual machine starts, the viewport will be very small. Windows also may be asking you to find drivers. Make it go away for now.
2. In the “Devices” menu, choose “Install Guest Additions.” This will load a virtual CD-ROM.
3. The setup should begin automatically. If it doesn’t, go to the Start Menu, choose “My Computer,” then double-click on “VirtualBox Guest Additions.”
4. Go through the process and install the software, then restart your VM.
5. While that restarts, switch back to Mac OS X and download the driver for the Intel PRO/1000 MT ethernet card. Download the version for Windows XP (32-bit). Copy it to your USB flash drive.
6. When the virtual machine comes back up, you’ll need to connect your USB flash drive to your virtual machine. To do this, you’ll need to drag the flash drive icon to the trash from Mac OS X (but leave it physically connected). In VirtualBox, go to the menubar and choose Devices > USB Devices > USB Flash Drive.
7. Navigate to the installer on your flash drive, and install the Intel drivers.
8. Lastly, go to Start Menu > Run, then in the dialog type the following so that you can keep the additional drivers on your VM:

   D:\VBoxWindowsAdditions-x86.exe /extract /D=C:\Drivers

Done!

You should be all set! If you want to get all super-hacky, you can check out “Create IE VBox” for geekier details.

Those kids and their Wiis

I remember back to the late 80’s when I would play Super Mario Bros. with my friends. The one defining aspect of playing that game back then was that I would try to make Mario jump by jerking my controller up in the air. Of course this didn’t do anything, but it was just a natural reaction to playing the game. My mom did the same thing for years.

Fast-forward to today. My 7-year-old is just starting to learn to play video games. For the past few months, she’s enjoyed (or been frustrated by) games like Mario Kart Wii and other games where motion (such as jerking the controller up in the air) gives her the response she wants. Playing the Wii has been a bit unnerving for me, as I spent years of my childhood trying to unlearn the very sorts of actions that the Wii encourages. This has always come naturally to her.

A few days ago, I decided that it was time for her to learn how to play with my Nintendo DS. As the was playing “The New Super Mario Bros.,” I noticed that the motion that she’d become accustomed to (jerking the controller around) wasn’t working, and it was making her frustrated. When playing Mario Kart DS, she kept trying to turn her driver by turning the DS in the air… which, of course, doesn’t work. All in all, playing the DS was a frustrating experience for her after having played the Wii for so long.

After seeing her frustration playing those action-oriented games, I decided to let her try another game that I thought might hold her attention longer: Final Fantasy. Specifically, it was Final Fantasy Tactics Advance for Gameboy Advance. (FFA for PlayStation is still one of my favorite FF games.) I handed her the DS and let her play, warning her that there was a lot of reading involved, but that it might be more interesting for her. She started playing and I didn’t hear anything out of her for over 4 hours. Simply amazing. Her cousin came over yesterday, and they’ve been playing a LOT of Nintendo DS together.

So I suppose it was interesting to see the difference between her generation and mine. Or rather, the similarities. The biggest difference is that this time around, Nintendo allows people to jerk the controller around. I also think it’s interesting that my daughter couldn’t pay attention to the Mario games, but was able to hyper-focus when it came to playing an RPG. That sounds like my daughter.

Introducing DOMBuilder

I hate the DOM. Actually, I take that back. I love the DOM, but I hate the fact that generating DOM nodes in JavaScript is so verbose and unintuitive. You need to construct a new element, then add properties, then construct a child element, then add properties, then append the child to the parent, and the parent to whatever DOM object you want that’s already in the page.

A few years ago I discovered Builder.node(), a component of Scriptaculous. The problem is that Scriptaculous relies on Prototype, and both are HUGE JavaScript libraries. Later I moved to Moo.fx/MooTools, then I didn’t do much JavaScript for a while, then I started doing a lot with YUI, while sprinkling a little jQuery around here and there. None of these other frameworks had an equivalent to Builder.node(), and again, that sucks.

So last night, I wrote a small JavaScript class to handle this very thing. Introducing DOMBuilder. DOMBuilder is small, fast, and doesn’t depend on any other JavaScript frameworks meaning that it’s easy to use in any project where you need to construct nested DOM elements. The fully commented debug version clocks in around 3k. The minified version is 739 bytes. With gzip compression, it squeezes down to a mere 393 bytes.

It’s not quite as terse or elegant as I’d like (yet), but it’s a good result for about 2 hours of hacking.

Examples

Here’s the HTML we want to generate:

<div class="location_select_control">
	<a href="" class="location_select_label">
		<label>This is my label</label>
	</a>
</div>

Here is how we’d do it with the standard DOM:

control_div = document.createElement('div');
control_div.className = "location_select_control";
control_link = document.createElement('a');
control_link.href = "";
control_link.className = "location_select_label";
control_label = document.createElement('label');
control_label.innerHTML = "This is my label";
control_link.appendChild(control_label);
control_div.appendChild(control_link);
document.body.appendChild(control_div);

Lastly, here’s how we’d do it with DOMBuilder:

document.body.appendChild($dom('div', { class:'location_select_control' }).child(
	$dom('a', { href:'', class:'location_select_label' }).child(
		$dom('label').innerHTML('This is my label')
	)
).asDOM());

Download

This code is BSD licensed, so feel free to use it in personal or commercial projects. You can download it from Github.