Getting started with Firefox OS

Book of Fox

by Stoyan Stefanov

Hacking Gaia

One of the most appealing features of Firefox OS to a web developer is that the whole UI of the phone is web technologies - HTML, CSS, JavaScript. This means you can modify any part of the UI. You can truly make the phone your own. Or if you're running a website/webapp, you can offer a customized Firefox OS build to your users with much deeper integration of your offering directly in the OS. For example, if you're running a photo hosting service, you can synchronize the built-in gallery app on the phone with your service. Or offer geo check-ins directly from double-tapping the lockscreen. The opportunities are limitless.

This chapter walks you through setting up your copy of Gaia (the phone UI), modifying it and pushing the changes to the device.

Prerequisites

Install B2G Desktop from http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/ (e.g. b2g-23.0a1.multi.mac64.dmg)

Run to test:

~/Codez/B2G.app/Contents/MacOS/b2g-bin

Checkout and make gaia

cd ~/Codez
git clone git://github.com/mozilla-b2g/gaia.git gaia
cd gaia
DEBUG=1 make

Run

~/Codez/B2G.app/Contents/MacOS/b2g-bin -profile ~/Codez/gaia/profile

Run with JS console on:

~/Codez/B2G.app/Contents/MacOS/b2g-bin -profile ~/Codez/gaia/profile -jsconsole

Run and open a specific app:

~/Codez/B2G.app/Contents/MacOS/b2g-bin -profile ~/Codez/gaia/profile -jsconsole --runapp browser

A new Gaia app

Meaning make FFApp a part of Gaia

cd ~/Codez/gaia
mkdir -p ~/Codez/gaia/_mine/ffapp
cp -r ~/Codez/ffapp/ ~/Codez/gaia/_mine/ffapp

Edit Makefile and add _mine as in GAIA_APP_SRCDIRS?=apps _mine

DEBUG=1 make
~/Codez/B2G.app/Contents/MacOS/b2g-bin -profile ~/Codez/gaia/profile -jsconsole --runapp ffapp

B2G Desktop keys

To navigate in the Desktop B2G which doesn't have a home or power buttons

Power button:

fn + right arrow
fn + right arrow hold (sleep menu)

Home button:

fn + left arrow
fn + left arrow hold (browse open apps)

Flashing the phone

Prerequisites

mv ~/Downloads/adt-bundle-mac-x86_64-20130219 ~/Codez/adt
export PATH=~/Codez/adt/sdk/platform-tools:$PATH

Phone in Development mode (Settings, Device information, More Information, Developer)

You should see this:

$ adb devices
List of devices attached
full_unagi    device

Flash with your code

make reset-gaia

Phone in Dev mode again (after each reset)

Later:

make install-gaia

Flash a single app:

BUILD_APP_NAME=ffapp make install-gaia

Hacking Gaia

Same as above, only in ~/Codez/gaia/apps

gaia/apps/system is where it's at. Then:

BUILD_APP_NAME=system make install-gaia

Sample hack

Let's add a floating icon on top of the whole phone's UI which moves left or right whenever you touch it.

cd ~/Codez/gaia

Edit apps/system/index.html

Shove this anywhere, e.g. after <div id="os-logo"...

<div id="myhack" class="myhack-left" style="z-index: 40000;"></div>

(There's a whole z-index file, but this is a hack)

touch apps/system/js/myhack.js

With this content:

(function() {
  var myhack = document.getElementById('myhack');
  myhack.onclick = function () {
    console.log('click');
    myhack.classList.toggle('myhack-right');
    myhack.classList.toggle('myhack-left');
  };
})();

css

touch apps/system/style/myhack/myhack.css

with

#myhack {
  position: absolute;
  width: 5rem;
  height: 5rem;
  border-radius: 5rem;
  top: 10rem;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: url(/style/myhack/myhack.png) center no-repeat;
  background-color: rgba(0, 0, 0, 0.6);
  transition: left 0.2s ease-out;
}
.myhack-left {
  left: -1rem;
}
.myhack-right {
  left: calc(100% - 4rem);
}

Watch the little icon dance to the left and to the right onclick.

screenshot goeth here