0
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,071

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,071
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
9
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×