Building Boot2Gecko(B2G) on Ubuntu

You heard about Mozilla Boot2Gecko(B2G) mobile operating system. Boot2Gecko's Gaia user interface is developed entirely using HTML, CSS and Javascript web technologies. If you are an experienced web developer you can contribute to Gaia UI and develop new Boot2Gecko applications with ease. In this post I'll explain how to setup the Boot2Gecko (B2G) development environment on your personal computer.

You can run Boot2Gecko(B2G) inside an emulator or inside a Firefox web browser. Using Boot2Gecko(B2G) with QEMU emulator is very resource intensive, so we will focus on the later in this post. I'll assume you are comfortable with Mozilla build environment. So, get that pot of coffee brewing and prepare for a long night of hacking.

Building Boot2Gecko(B2G) Firefox App

Before you start, let us make sure that you have all the prerequisites for building Firefox on your computer. Please have a look at the build prerequisites for your Linux, Window and OSX operating system.

# Let get the source code 
# Download mozilla-central repository 

$ hg clone http://hg.mozilla.org/mozilla-central mozilla-central

# Download the Gaia source code 

$ git clone https://github.com/mozilla-b2g/gaia gaia

# Change directory and create our profile 

$ cd gaia 

$ make profile 


# Change directory into your mozilla-central directory

$ cd mozilla-central


# Create a .mozconfig file inside your mozilla-central directory: 

$ nano .mozconfig 
mk_add_options MOZ_OBJDIR=../b2g-build
mk_add_options MOZ_MAKE_FLAGS="-j9 -s"
ac_add_options --enable-application=b2g
ac_add_options --disable-libjpeg-turbo
ac_add_options --enable-b2g-ril
ac_add_options --with-ccache=/usr/bin/ccache 

# Build the Firefox B2G app and wait for the build to finish 

$ make -f client.mk build 


# Create a simple b2g bash script to launch B2G app; change paths you suit your environment
# Note: Have to use to -safe-mode option due to bug on my Ubuntu box 
 
#!/bin/sh 
export B2G_HOMESCREEN=http://homescreen.gaiamobile.org/
/home/arky/src/b2g-build/dist/bin/b2g -profile /home/arky/src/gaia/profile

If everything goes well. You should have boot2gecko running inside a firefox now.

Customizing Firefox B2G App

For better Boot2Gecko (B2G) experience, we will customize Firefox features offline cache and touch events using a custom Firefox profile.

Create a Custom Firefox Profile

You can use dist/bin/b2g -ProfileManager option to launch Firefox Profile Manager. Create a new profile called 'b2g'. Now we can add customizations to this new profile.

On Linux computers, the profile is created under ~/.mozilla/b2g/ directory. You can find the information about location of firefox profiles for your operating system here.

You launch B2G with your new custom profile using the '-P' option. Modify your B2G bash script and add the custom profile option. dist/bin/b2g -P b2g

Disable offline cache

Create a user.js file inside your custom 'b2g' firefox profile directory. Add the following line to disable offline cache.

user_pref('browser.cache.offline.enable', false);

Enabling Touch events

Add the following line in your user.js file inside your custom 'b2g' Firefox profile directory to enable touch events.

 user_pref('dom.w3c_touch_events.enabled', true);

That's it. You now have a Boot2Gecko(B2G) running inside Firefox on your computer. Happy Hacking!