From MozillaWiki
< B2G
Jump to: navigation, search
Warning signWarning: This page is horribly out of date. Please see https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS instead.

JSConf Hack Night


  • Most awesome lock screen (we have WebGL!)

  • Prettiest home screen

  • Best B2G app

  • Craziest system hack (node on the phone? speech recognition? NFC?)

Submit a pull request to Gaia or B2G by tomorrow (Tuesday, 4/3) midnight PST. Describe what you did and post it somewhere, and email a link to gal@mozilla.com. We will notify the winners end of this week, and we will showcase the best submissions on hacks.mozilla.org and Brendan's blog.

Writing apps for B2G

See the documentation on the Mozilla Developer Network.

Gaia/B2G Development Environment

WINDOWS USERS: We do not currently support Windows as development platform. You can install a Linux VM using VMWare Player (see http://www.howtogeek.com/howto/11287/how-to-run-ubuntu-in-windows-7-with-vmware-player/).

The user interface on the phone is called "Gaia". It is hosted on gaiamobile.org, and offline cached on the device using appcache. At the moment the easiest way to modify Gaia is to check out the Gaia repository, modify the HTML5/JS source, and upload the new content to the phone. We will discuss this approach first:

1. First we need to checkout the Gaia source:

$ git clone https://github.com/andreasgal/gaia
Cloning into gaia...
remote: Counting objects: 14812, done.
remote: Compressing objects: 100% (5014/5014), done.
remote: Total 14812 (delta 9876), reused 14224 (delta 9345)
Receiving objects: 100% (14812/14812), 119.18 MiB | 1.46 MiB/s, done.
Resolving deltas: 100% (9876/9876), done.
$ cd gaia

2. The version of Gaia installed on developer phones is tagged "m2.5". You probably want to switch to that tag.

$ git checkout m2.5
Note: checking out 'm2.5'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:

  git checkout -b new_branch_name

HEAD is now at 8b547e6... Merge pull request #1075 from krellian/owa

3. Next we will need adb, the Android Debugger Bridge. The easiest way to install adb is to install the Android SDK from this url:


Make sure to install the Platform Tools (not installed by default).

Alternatively, manually download adb from the links below into a directory that's in your PATH. This is faster but more complicated. If you're on a linux host

curl http://update.boot2gecko.org/m2.5/adb-linux-x86 -o adb
chmod +x adb

and if you're on OS X

curl http://update.boot2gecko.org/m2.5/adb-darwin-x86 -o adb
chmod +x adb

4. Make sure adb is in your path.

$ adb
Android Debug Bridge version 1.0.26

 -d                            - directs command to the only connected USB device
                                 returns an error if more than one USB device is present.

5. You should be able to connect to the B2G phone via adb now:

$ adb shell
* daemon not running. starting it now on port 5037 *
* daemon started successfully *
root@android:/ # ^D

Control-D exits the shell again.

6. Now lets flash a new version of Gaia onto the phone:

Note: The first time install-gaia is invoked the Makefile will download xulrunner, which is used to build the appcache. Make sure you are connected to the network.

$ make install-gaia
git rev-parse HEAD > apps/settings/gaia-commit.txt
test -d xulrunner-sdk || (wget http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/11.0/sdk/xulrunner-11.0.en-US.mac-x86_64.sdk.tar.bz2 && tar xjf  xulrunner*.tar.bz2 && rm xulrunner*.tar.bz2) 
--2012-04-02 01:55:32--  http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/11.0/sdk/xulrunner-11.0.en-US.mac-x86_64.sdk.tar.bz2
Resolving ftp.mozilla.org (ftp.mozilla.org)...
Connecting to ftp.mozilla.org (ftp.mozilla.org)||:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 56155841 (54M) [application/x-bzip2]
Saving to: `xulrunner-11.0.en-US.mac-x86_64.sdk.tar.bz2'


push: profile/webapps/video/manifest.json -> /data/local/webapps/video/manifest.json
push: profile/webapps/wikipedia/manifest.json -> /data/local/webapps/wikipedia/manifest.json
push: profile/webapps/zimbra/manifest.json -> /data/local/webapps/zimbra/manifest.json
push: profile/webapps/webapps.json -> /data/local/webapps/webapps.json
27 files pushed. 0 files skipped.
304 KB/s (25655 bytes in 0.082s)
Rebooting b2g now
adb shell kill 87

The phone should reboot and within about a second the new version of Gaia should be on the screen.

Advanced Gaia Hacking

You can find a lot of tips and instructions for advanced Gaia hacking at https://wiki.mozilla.org/Gaia/Hacking. Amongst others we have desktop builds of b2g, and you can use them to develop your app. In the alternative, you can also use Firefox, but watch out for differences between desktop and mobile (e.g. touch events).

For the particularly adventurous, you can also redirect the domain for an installed app in the /etc/hosts file on the phone to a server you own. Copy the files of an app onto the server and start modifying the code. To reload the UI on the phone, simply kill the b2g process. The following command line takes care of that:

adb shell kill `adb shell toolbox ps | grep "b2g" | awk '{ print $2; }'`

You can add new applications to your local gaia directory and then push those onto device. To do that, 1. In your gaia checkou $gaia, create a new directory $gaia/apps/$foo. Here, I'll use $foo to refer to your new application. 2. Copy all your applications files into $gaia/apps/$foo/. 3. Create a new file $gaia/apps/$foo/manifest.json. Here are some "starter" file contents, edit to your desire

  "name": "Foo",
  "default_locale": "en-US",
  "icons": {
    "120": "your/icon/here.png"
  "description": "Foo",
  "launch_path": "/",
  "locales": {
    "en-US": {
      "name": "Foo",
      "description": "Foo"
    "fr": {
      "name": "Foo",
      "description": "Foo"
  "developer": {
    "url": "http://foo.example.com",
    "name": "You"

4. Append your app's information to $gaia/apps/webapps.json. (This is a temporary step.) This will get you started

"foo": {
   "origin": "http://foo.example.com/",
   "installOrigin": "http://foo.example.com/",
   "receipt": null,
   "installTime": 1323339869000

5. Upload a new gaia with your changes

$ make install-gaia

Restoring Gecko

Gecko is the "rendering engine", or "application runtime", on the device. It's the same engine that powers Firefox. The Gecko build on your phone is configured to automatically update itself. It should mostly stay out of your way.

However, if something does go wrong, you can repair your Gecko installation by running the following commands in your shell

curl update.boot2gecko.org/m2.5/b2g-gecko-m2.5-recovery.zip > b2g-gecko-m2.5-recovery.zip
unzip b2g-gecko-m2.5-recovery.zip
cd b2g-gecko-m2.5-recovery
make install-gecko