Getting started with Firefox OS
Book of FoxChapter9 ▼
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
Install ADT bundle from http://developer.android.com/sdk/index.html
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