Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Insight Gaia - OS Shell in a <html>               Tim Chien         timdream@mozilla.com
In this Talk ….• Everything   you can help	 • As   a user / beta tester	 • As   a web developer	• Everything   you can pla...
Background: What it takes toimplement a OS shell?   git pull git://github.com/mozilla-b2g/gaia.git
Similar Web OS Shells• Others   tried: “Cloud Desktop”	 • eyeOS/jolicloud/Synology      DSM …	• Gaia   is unique in a way ...
From the perspective of the web• Hosting   3 rd-party   content safely	 • <iframe>s?    Pretty close.	• Window/app      ma...
From the perspective of a phone• Device   management	 • Screen/wifi/power/memory/connectivity	• System   user interfaces	 •...
Gaia: 91MB total   du -ch -I .git -I xulrunner-sdk -I profile -I   media-samples -I dictionaries . | tail –n 1
System app: 2.7M total     du –ch ./apps/system/ | tail –n 1
accessibility.js      hardware_buttons.js        sleep_menu.js      activities.js       identity.js        sound_manager.j...
Gaia      Gaia, n., Greek Mythology the Earth  personified as a goddess, daughter of Chaos.
Gaia• Front-end   “shell” of Firefox OS phones	• The   visual layer, composed entirely of web technologies	 • Everything  ...
Gaia concept: framehierarchy, and special APIs
Boot 2 Gecko architecture    Linux              Gecko    Drivers    APIs    Gaia (system app)                        App  ...
Frame hierarchy<xul:window>	 <html:iframe src=“app://system.gaiamobile.org/”>	  <iframe src=“browser”>	    <iframe src=“mo...
Frame busting!• if   (window.top !== window) die();	• X-Frame:	• <a    target=“_blank”>
MozBrowser API• <iframe   mozbrowser src=“google.com”>	• <xul:browser>     (re)implementation in HTML	• Prevent framebusti...
Frame hierarchyxul:window	 html:iframe src=“system” mozbrowser	  iframe src=“browser” mozbrowser	    iframe src=“mozilla.o...
Permission controls• App-by-app    basis  frame-origin control	 • Camera     access/device storage access/geolocation  acc...
Manifest-based permission control{	 permissions: {	     telephony:{},	     voicemail:{},	     contacts:{ access: readwrite...
Frame hierarchyxul:window	 html:iframe src=“system” mozbrowser mozapps=..	  iframe src=“browser” mozbrowser mozapps=..	   ...
Crashes!• If   in-process app crashes, the entire Gecko crashes	  • (Desktop     Firefox rarely crashes, except plug-ins)	...
Frame hierarchyxul:window	 html:iframe src=“system” mozbrowser mozapps=..	   iframe src=“browser” mozbrowser mozapps=.. re...
APIs• https://wiki.mozilla.org/WebAPI	• Telephony/SMS/Wifi    management/Camera/Vibration/ Idle/Orientation/Settings/Power ...
Can I try?   Sure, double click ./index.html and open it in                     Firefox …
B2G Desktop• Proudly  supported by release engineering team http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest- moz...
Launch it with your own Gaia• Run   “make” in the Gaia repository	• Launch B2G Desktop with following command ./b2g-bin -p...
Debugging Gaia• dump()	• console.log()	• Remote      Debugger in Nightly	• No inspector yet :’( -- work on Nightly for lay...
What you can help• We  are really close from shipping the first version, activities are fast and intense	• Bug   hunt! Late...
Bug hunt on B2G Desktop• Find   non-hardware related bugs, or UX issues	• Provide   fix in Javascript/CSS/HTML of existing ...
Specific bugs to hunt• Performance;     find extra repaint with paint-flashing	 • Settings - Device info - More info - Develo...
Where to find the team• irc.mozilla.org   #gaia	• dev-gaia   mailing list	• Shop   for bugs on Bugzilla and take what you c...
Beyond ver. 1.0• OS Shell in a html is a unique opportunity, a canvas for experimenting new OS shell and user interfaces	•...
Insight Gaia - OS Shell in a &lt;html>
Insight Gaia - OS Shell in a &lt;html>
Upcoming SlideShare
Loading in …5
×

Insight Gaia - OS Shell in a &lt;html>

2,978 views

Published on

https://wiki.mozilla.org/MozCampAsia2012/insight_gaia

Published in: Technology
  • Be the first to comment

Insight Gaia - OS Shell in a &lt;html>

  1. 1. Insight Gaia - OS Shell in a <html> Tim Chien timdream@mozilla.com
  2. 2. In this Talk ….• Everything you can help • As a user / beta tester • As a web developer • Everything you can play • Desktop builds • Phone hacking! (Not *that*)
  3. 3. Background: What it takes toimplement a OS shell? git pull git://github.com/mozilla-b2g/gaia.git
  4. 4. Similar Web OS Shells• Others tried: “Cloud Desktop” • eyeOS/jolicloud/Synology DSM … • Gaia is unique in a way that it runs a phone
  5. 5. From the perspective of the web• Hosting 3 rd-party content safely • <iframe>s? Pretty close. • Window/app management • How phones manage apps? Home screen? • How Firefox manage tabs? Bookmarks?
  6. 6. From the perspective of a phone• Device management • Screen/wifi/power/memory/connectivity • System user interfaces • Lock screen/dialogs/pull-down menu/keyboard/status bar/ permission … • Common applications • Phone/Contacts/Message/Settings/Browser/Camera/ Gallery …
  7. 7. Gaia: 91MB total du -ch -I .git -I xulrunner-sdk -I profile -I media-samples -I dictionaries . | tail –n 1
  8. 8. System app: 2.7M total du –ch ./apps/system/ | tail –n 1
  9. 9. accessibility.js hardware_buttons.js sleep_menu.js activities.js identity.js sound_manager.js airplane_mode.js keyboard_manager.js source_view.js app_install_manager.js list_menu.js statusbar.js applications.js lockscreen.js storage.js attention_screen.js mobile_info.js system_banner.js authentication_dialog.js modal_dialog.js trusted_ui.js background_service.js mouse2touch.js ttlview.js battery_manager.js notifications.js updatable.js bluetooth.js operator_variant update_manager.js bluetooth_transfer.js payment.js utility_tray.js bootstrap.js permission_manager.js value_selector cards_view.js popup_manager.js voicemail.js context_menu.js quick_settings.js wifi.jscost_control.js screen_manager.js window_manager.js crash_reporter.js screenshot.js wrapper.js gridview.js sim_lock.js ls ./apps/system/js/
  10. 10. Gaia Gaia, n., Greek Mythology the Earth personified as a goddess, daughter of Chaos.
  11. 11. Gaia• Front-end “shell” of Firefox OS phones • The visual layer, composed entirely of web technologies • Everything is <div>, every logic is written in Javascript • Easily customable to phone venders, phone hackers, web developers • YOU!
  12. 12. Gaia concept: framehierarchy, and special APIs
  13. 13. Boot 2 Gecko architecture Linux Gecko Drivers APIs Gaia (system app) App App Apps chrome
  14. 14. Frame hierarchy<xul:window> <html:iframe src=“app://system.gaiamobile.org/”> <iframe src=“browser”> <iframe src=“mozilla.org”> <iframe src=“phone”> <iframe src=“message”>
  15. 15. Frame busting!• if (window.top !== window) die(); • X-Frame: • <a target=“_blank”>
  16. 16. MozBrowser API• <iframe mozbrowser src=“google.com”> • <xul:browser> (re)implementation in HTML • Prevent framebusting, allow (some) cross-origin control over iframe content • Written entirely in Javascript! • Check Gecko source code ./mozilla-central/source/dom/browser-element/
  17. 17. Frame hierarchyxul:window html:iframe src=“system” mozbrowser iframe src=“browser” mozbrowser iframe src=“mozilla.org” mozbrowser iframe src=“phone” mozbrowser iframe src=“message” mozbrowser
  18. 18. Permission controls• App-by-app basis frame-origin control • Camera access/device storage access/geolocation access • “mozapps” attribute • mozapps=“browser/manifest.webapp”
  19. 19. Manifest-based permission control{ permissions: { telephony:{}, voicemail:{}, contacts:{ access: readwrite }, mobileconnection:{} }
  20. 20. Frame hierarchyxul:window html:iframe src=“system” mozbrowser mozapps=.. iframe src=“browser” mozbrowser mozapps=.. iframe src=“mozilla.org” mozbrowser iframe src=“phone” mozbrowser mozapps=.. iframe src=“message” mozbrowser mozapps=..
  21. 21. Crashes!• If in-process app crashes, the entire Gecko crashes • (Desktop Firefox rarely crashes, except plug-ins) • Move apps out of main process; isolate apps down to process level • “remote” attribute
  22. 22. Frame hierarchyxul:window html:iframe src=“system” mozbrowser mozapps=.. iframe src=“browser” mozbrowser mozapps=.. remote iframe src=“mozilla.org” mozbrowser remote iframe src=“phone” mozbrowser mozapps=.. remote iframe src=“message” mozbrowser mozapps=.. remote
  23. 23. APIs• https://wiki.mozilla.org/WebAPI • Telephony/SMS/Wifi management/Camera/Vibration/ Idle/Orientation/Settings/Power management/Mobile connection status/Audio channels/TCP Socket/ Geolocation/Device Storage/Contacts/Web App Management/Battery status/Time/FM Radio/Payment/ Archive/Devicelight censor/Proximity sensor/System XHR • Dive into code, see how Web interacts with ____!
  24. 24. Can I try? Sure, double click ./index.html and open it in Firefox …
  25. 25. B2G Desktop• Proudly supported by release engineering team http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest- mozilla-central/ • Download, and double click, it comes with a build-in Gaia! • Hardware APIs is not available, sorry :’(
  26. 26. Launch it with your own Gaia• Run “make” in the Gaia repository • Launch B2G Desktop with following command ./b2g-bin -profile /my/gaia/profile • “make” is needed to zip some Gaia apps into packaged apps • Some API privileged require app to be packaged • (“DEBUG=1 make” is currently broken)
  27. 27. Debugging Gaia• dump() • console.log() • Remote Debugger in Nightly • No inspector yet :’( -- work on Nightly for layout works first)
  28. 28. What you can help• We are really close from shipping the first version, activities are fast and intense • Bug hunt! Late features!
  29. 29. Bug hunt on B2G Desktop• Find non-hardware related bugs, or UX issues • Provide fix in Javascript/CSS/HTML of existing bugs • Bug component: Boot2Gecko::Gaia • Web Developers: This is *the* opportunity to get your work into a shipping phone (without learning anything new first!)
  30. 30. Specific bugs to hunt• Performance; find extra repaint with paint-flashing • Settings - Device info - More info - Developer - Flash repainted area • Off-main thread animation (OMTA; async animation) • CSS animates incorrectly on B2G Desktop but correct on nightly• Functional: App installation, built-in app functionalities
  31. 31. Where to find the team• irc.mozilla.org #gaia • dev-gaia mailing list • Shop for bugs on Bugzilla and take what you can solve
  32. 32. Beyond ver. 1.0• OS Shell in a html is a unique opportunity, a canvas for experimenting new OS shell and user interfaces • Can Firefox OS evolving into something doesn’t look like any existing platform? • Fork it, hack it, announce and demonstrate your proposal out loud!

×