By
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.
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. If you build your Gaia profile with DEBUG=1 and are getting 404s when B2G loads, you might find that you need some entries in your etc/hosts file (some need it, some don’t). Here is a gist that you can simply copy into it (A nice tool to manage you hosts file on Mac is GasMask)
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
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.
<menu id="view-selector">
<li class="today">
<a href="#today">Today</a>
</li>
<li class="time-selection">
...
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.
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:
- A growing list of B2G scripts by James Lal.
- Join the Gaia Mailing list
- Find everyone on IRC (irc.mozilla.org) channel #gaia
- Simulating hardware buttons on MacOSX and on Windows (* Limited but should get you around)
34 comments