Hacking Gaia for Firefox OS, part 1

So I guess pretty much everyone is aware of this awesome new product being developed at Mozilla that is making a lot of noise in the mobile world. I am of course referring to FirefoxOS (code named Boot2Gecko) and if you have not heard of it yet, then you need to head over to the product page right now and also, the Wiki for a more technical overview.

Not to go into too much detail and restate what is already on the wiki, FirefoxOS is made up of three distinct parts:

  • Gonk – The ‘OS’ i.e. low level Linux kernel and hardware abstraction layer (HAL)
  • Gecko – The application runtime, also present in your desktop and mobile Firefox
  • Gaia – The user facing front end of the OS

Contributing to Gaia

As a front-end engineer this new OS opens a world of new possibilities but, did you know, you can also be part of and contribute to Gaia? This is true, and starting today I will be writing a series of posts on how you can get involved. Today’s topic is how to get a working environment that enables you to work on, test and contribute to Gaia. Ok then, let’s get started.

First thing right out of the door is to head over to Github and fork and clone the Gaia repo.

git clone git://github.com/yourusername/gaia.git && cd gaia

After the above is complete, you are ready to make your local Gaia profile. Inside the gaia directory, which you should be in now, run:

DEBUG=1 make

The process above is going to do a bunch of things and the first time you run it, it is going to take some time so my suggestion is, take a break and make yourself some coffee. Once the above has completed the last line of output should be something like:

Profile Ready: please run [b2g|firefox]
-profile /Users/schalkneethling/mozilla/projects/gaia/profile

Downloading B2G desktop build

Keep a note of the -profile flag as you will need it in a minute. Next we need to download a B2G desktop build. For work on version 1 of Gaia, which is the current focus, we are going to be using the Aurora builds, on the linked FTP page, select the latest build for your platform and once downloaded, follow the usual process for installing an application on your environment.

Note: Due to some changes in the way events are sent and handled by apps the most recent builds of the B2G desktop will not work. To get around this, and ensure a more stable dev environment, you can make use of the builds from http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g18/

Now that we have our profile and desktop build, let’s join the two. Open up a terminal (command line) and enter the following:

/path/to/b2g-bin -profile /path/to/profile
 
# Note: On Mac the path is slightly different as b2g-bin lives 
# inside the Contents folder of the .app so here use:
 
/path/to/b2g/B2G.app/Contents/MacOS/b2g-bin
-profile /path/to/gaia/profile

Set-up app

Once you run the above, a window will open up sized to the dimensions of the current FirefoxOS target device device and the set-up app will be will be visible. Click through this and complete as needed. After this, there will be a phone tour app loaded which you can either follow or skip.

Screen shot of a running B2G Desktop

NOTE: Currently there is a bug in the desktop build and once you exit the tour, you will be presented with a black screen. To get to the lock screen you will need to close down B2G (Ctrl+C should do it) and relaunch.

Making changes to the code

Once you have clicked around the interface a little, let’s look at making a simple change to one of the current apps and see our change reflected.

With B2G running, open up the Calendar app, it should be located on the third screen to the right of Home, on the top left. At the bottom you will see the usual triggers for displaying the calendar by month, week or day. Now in your editor of choice open up the index.html file inside gaia > apps > calendar

Screen shot of FirefoxOS showing calendar app icon

At around line 180 you will see the HTML that reflects the tabs I just referred to. Go ahead and completely remove the <menu> element and save the file.

<code>
<menu id="view-selector">
  <li class="today">
    <a href="#today">Today</a>
  </li>
  <li class="time-selection">
  ...
</code>

Next, without rebuilding Gaia, simply close B2G and relaunch. Now open up the calendar app again and this time you will see that the tabs from before are gone as expected. Great! Now go back and undo your changes and relaunch B2G and the calendar app again. Your tabs should now be back and working as before. This shows a simple example of a common workflow when developing with B2G desktop.

Debugging

One of the things that is tricky within this environment is debugging but, we are not left with nothing. If you start-up B2G as before but append the -jsconsole flag, you will now see that the error console you know from Firefox, open up alongside it. This is useful when you want to check for script errors or log messages out to the console.

Screen shot of B2G desktop running with jsconsole

Just to see how this will work, open up the month.js file inside gaia > apps > calendar > js > views and after the first line add:

console.log("Test log message when loading the Calendar App....");

Save the change and launch B2G with the -jsconsole flag. Once launched, click on the messages tab of the error console and then go ahead and open up the calendar app, you should now see your message printed.

NOTE: If you do not see your messages being logged to the console it might because console logging has been disabled. To remedy this, head to the Settings app on FirefoxOS, then Device Information > More Information > Developer > Console Enabled.

This then concludes the first post in this series but before ending the post, here are some useful places to get info and speed up development:

View full post on Mozilla Hacks – the Web developer blog

Tagged on: , , ,

Leave a Reply