Customize Your Firefox OS

Yuren Ju

今天要講這個！

http://www.pcworld.idg.com.au/article/465951/developers_express_enthusiasm_firefox_os_survey_shows/

Running game on Browser without plugins

MinGWfor Windows developers

Yuren Ju

● KaLUG● Hacking Thursday● COSCUP● Mozilla

http://www.flickr.com/photos/kky/704056791/

Web Technology

https://github.com/coolaj86/logo.js

dialer.[js/html/css]

?Telephony, FM, Bluetooth, SMS

Mobile Connection, ContactAlarm, Ambient Light Sensor

Battery, Camera

Web API for Firefox OShttps://developer.mozilla.org/en-US/docs/WebAPI

http://www.mozfans.com/thread-411-1-1.html

e.g., bluetooth

BlueZ

WebBluetooth

navigator.mozBluetooth

Gonk

Gecko

Gaia

e.g., Infrared?

LIRCLinux Infrared Remote Control

mozInfrared

navigator.mozInfrared

Gonk

Gecko

Gaia

Something like this, although we haven't supported infrared yet.

Standard! Standard! Standard!

Build Firefox OS

https://github.com/mozilla-b2g/B2G

Build B2G

● git clone https://github.com/mozilla-b2g/B2G.git

● (install a lot of dependencies...)● ./config.sh <DEVICE_NAME>● ./build.sh● wait 20min ~ 2hr... Zzzzz...

But I'm a gaia developer. \o/

Firefox & Firefox OS

OS

Firefox

web apps Gaia

Gecko + Gonk

Hardware Hardware

Run Gaia on Firefox Browser!

OS

Firefox

gaia + web apps

Gecko + Gonk

Hardware Hardware

Build for Gaia

● git clone https://github.com/mozilla-b2g/gaia.git

● cd gaia● make (10~30s except first time)

Different Targets...

● make production

DEBUG=1 make

Built-in Customization Mechanismhttps://wiki.mozilla.org/B2G/MarketCustomizations

Customization Mechanism

Gaia Distribution Dir

Building...

GAIA_DIR/build/settings.js

e.g., settings/lockscreen/wallpaper

Apps customization

build/apps-*.list

● production– apps/*– external-apps/*– outoftree_apps/*

● engineering– apps/*– test_apps/*– showcase_apps/*– test_external_apps/*– external-apps/*– outoftree_apps/*

apps.list

● apps/*● external-apps/twitter

Customization Mechanism

Gaia /apps/* /external-apps/twitter

Distribution Dir /apps/* /external-apps/twitter

Building...

Modify Firefox OS

Tools

http://www.flickr.com/photos/84906483@N08/8747337118/

built-in debugger

or you prefer firebug <3

Modify color of dock

Practice: how tocustomization tone of dialing?

gasolin has demoed this work at COSCUP 2013

Gecko

Gaia

system

comms Browser Settings ...email

Gaia Overview

Tip: use inspector toknow where you are

after found the app...Which script we should trace in?

KeypadManager.keyHandler()

https://wiki.mozilla.org/Audio_Data_API

HTML 5 Audio API

TonePlayerAudio()

KeypadManager.keyHandler()

Okay,let's find the cool tones for dialing :-)

http://zhusee2.github.io/bumbler-to-speech/

copy into gaia

Modify Source Code

Try it on browser and device! LOL

Contribution

+