1. Customize Your Firefox OS
Yuren Ju

2. 今天要講這個！

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

4. Running game on Browser without plugins

5. MinGW
for Windows developers

6. Yuren Ju
●
KaLUG
●
Hacking Thursday
●
COSCUP
●
Mozilla

9. http://www.flickr.com/photos/kky/704056791/
Web Technology

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

12. dialer.[js/html/css]

13. ?
Telephony, FM, Bluetooth, SMS
Mobile Connection, Contact
Alarm, Ambient Light Sensor
Battery, Camera

14. Web API for Firefox OS
https://developer.mozilla.org/en-US/docs/WebAPI

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

18. e.g., bluetooth
BlueZ
WebBluetooth
navigator.mozBluetooth
Gonk
Gecko
Gaia

19. e.g., Infrared?
LIRC
Linux Infrared Remote Control
mozInfrared
navigator.mozInfrared
Gonk
Gecko
Gaia
Something like this, although we haven't supported infrared yet.

20. Standard! Standard! Standard!

21. Build Firefox OS
https://github.com/mozilla-b2g/B2G

22. 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...

23. But I'm a gaia developer. o/

24. Firefox & Firefox OS
OS
Firefox
web apps Gaia
Gecko + Gonk
Hardware Hardware

25. Run Gaia on Firefox Browser!
OS
Firefox
gaia + web apps
Gecko + Gonk
Hardware Hardware

26. Build for Gaia
●
git clone https://github.com/mozilla-
b2g/gaia.git
●
cd gaia
●
make (10~30s except first time)

27. Different Targets...
●
make production

28. DEBUG=1 make

29. Built-in Customization Mechanism
https://wiki.mozilla.org/B2G/MarketCustomizations

30. Customization Mechanism
Gaia Distribution Dir
Building...

31. GAIA_DIR/build/settings.js
e.g., settings/lockscreen/wallpaper

33. Apps customization

34. build/apps-*.list
●
production
– apps/*
– external-apps/*
– outoftree_apps/*
●
engineering
– apps/*
– test_apps/*
– showcase_apps/*
– test_external_apps/*
– external-apps/*
– outoftree_apps/*

35. apps.list
●
apps/*
●
external-apps/twitter

36. Customization Mechanism
Gaia
/apps/*
/external-apps/twitter
Distribution Dir
/apps/*
/external-apps/twitter
Building...

39. Modify Firefox OS

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

41. built-in debugger

42. or you prefer firebug <3

43. Modify color of dock

44. Practice: how to
customization tone of dialing?
gasolin has demoed this work at COSCUP 2013

45. Gecko
Gaia
system
comms Browser Settings ...email
Gaia Overview

47. Tip: use inspector to
know where you are

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

50. KeypadManager.keyHandler()

51. https://wiki.mozilla.org/Audio_Data_API

52. HTML 5 Audio API

53. TonePlayerAudio()
KeypadManager.keyHandler()

54. Okay,
let's find the cool tones for dialing :-)
http://zhusee2.github.io/bumbler-to-speech/

55. copy into gaia

56. Modify Source Code

57. Try it on browser and device! LOL

58. Contribution

59. +