Update: This documentation is out-of-date: Please read developer.mozilla.org/en-US/Firefox_OS/Building for latest information
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!
