System browser
4 likes1,532 views
The document describes the system browser app on Firefox OS v2.1. It discusses the various modules that make up the app and how they interact, including managing browser iframes and events, providing search results, bookmarks, and settings. It describes how the app handles user interactions like launching pages, clicking links, and interacting with the app chrome interface. Key data stores and indexes like IndexedDB are used to manage bookmarks, history, and search results.
![indexedDB
DBName: places_idb_store, objectStore: places
keyPath index unique description
url O O
frecency O incremented by 1 for now
visited O timestamp
visits [timestamp, timestamp, …]
title
screenshot Blob
icons { ‘icon URI’: { sizes: [‘180x180’,…]}}](https://image.slidesharecdn.com/systembrowser-150305205539-conversion-gate01/85/System-browser-17-320.jpg)
![DBName: places_idb_store, objectStore: visits (not
in use on v2.1)
keyPath index unique description
date O O O
url
title
icons { ‘icon URI’: { sizes: [‘180x180’, …]}}
meta
dataset { url:‘plaintext url’ }
indexedDB](https://image.slidesharecdn.com/systembrowser-150305205539-conversion-gate01/85/System-browser-18-320.jpg)
![open menu
div#AppWindow_NO.
form#BrowserContextMenuNO.
header.contextmenu-header
menu.contextmenu-list
button[data-id=“new-window”]
button[data-id=“show-windows”]
button[data-id=“add-to-homescreen”]
button[data-id=“share”]
button#ctx-cancel-button
div#AppChromeNO.
…](https://image.slidesharecdn.com/systembrowser-150305205539-conversion-gate01/85/System-browser-31-320.jpg)
System browser
- 1. yliao@mozilla.com system browser on Firefox OS v2.1
- 2. • system: manage browser iframes & mozbrowser events • search: provide search results & new browser tab • verticalhome: present browser entry & bookmarks • bookmark: add/remove/update bookmarks on the verticalhome • settings: provide interface to clear browsing history & data system browser apps
- 3. interactions system search settings verticalhome bookmark MozActivity: save-bookmark & remove-bookmark window.open & mozapp.launch IAC: search IAC: search-results MozActivity: view mozbrowseropenwindow navigator.mozSettings: clear.browser.history & clear.browser.private-data
- 4. • (DataStore API) dataStore: places • browsing history • (DataStore API) dataStore: bookmarks_store • bookmarks • indexedDB: places_idb_store • used in search app, synced with dataStore: places data storages
- 6. system app
- 7. div#screen div#statusbar (Rocketbar module) div#rocketbar form#roketbar-form div#rocketbar-backdrop div#rocketbar-results div#search (SearchWindow module) div#AppChromeNO. div.browser-container iframe#browserNO. rocketbar
- 8. div#screen … div#windows div#AppWindow_NO. (AppWindow) div#AppChromeNO. (AppChrome) div.titlebar div.identification-overlay div.fade-overlay div.touch-blocker div.browser-container div.screenshot-overlay iframe#browserNO. app window
- 9. app window div#AppWindow_NO. form#BrowserContextMenuNO. (BrowserContextMenu) div#AppChromeNO. gaia-progress div.controls div.titlebar div.identification-overlay div.fade-overlay div.touch-blocker div.browser-container div.screenshot-overlay iframe#browserNO.
- 10. • AppWindowManager • AppWindow • AppChrome • AppWindowFactory • WrapperFactory • Rocketbar • SearchWindow modules • BrowserConfigHelper • BrowserFrame • BrowserContextMenu • BrowserMixin • BrowserSettings • BookmarksDatabase • Places
- 13. search app
- 14. {! "name": "Browser",! "description": "Gaia System Web Browser",! "type": "certified",! "role": "search",! "launch_path": “/newtab.html",! search app
- 15. newtab.html : ! body h2#top-sites-header section#top-sites div.top-site div.top-site … h2#history-header section#history h3 ul div.result div.result new tab
- 16. index.html ! body div#search-results div#offline-message div#suggestions-wrapper section#suggestions div#suggestions-notice-wrapper section#contacts section#places section.apps gaia-grid#icons menu#contextmenu menuitem#add-to-homescreen showing search results
- 17. indexedDB DBName: places_idb_store, objectStore: places keyPath index unique description url O O frecency O incremented by 1 for now visited O timestamp visits [timestamp, timestamp, …] title screenshot Blob icons { ‘icon URI’: { sizes: [‘180x180’,…]}}
- 18. DBName: places_idb_store, objectStore: visits (not in use on v2.1) keyPath index unique description date O O O url title icons { ‘icon URI’: { sizes: [‘180x180’, …]}} meta dataset { url:‘plaintext url’ } indexedDB
- 19. • launch search app through mozapp.launch • click browser app on home screen • click new window in browser app context menu launch
- 20. launch browser app appWindowFactory browserFrame Event: webapps-launch new AppChrome appWindow new AppWindow appChrome new BrowserFrame
- 23. • launch search app through window.open • submit search on rocket bar • click home screen bookmark • click history or top site launch
- 26. • Page loading browser events in general: • mozbrowserloadstart • mozbrowserlocationchange • mozbrowsertitlechange • mozbrowsericonchange • mozbrowserloadend load a page
- 27. page loading appWindow appChrome mozbrowsertitlechange mozbrowserlocationchange places appiconchange apploaded update app chrome mozbrowsericonchange mozbrowserloaded apptitlechange applocationchange update dataStore entries
- 28. click app chrome • Handle chrome UI events: ! ! !
- 29. • Handle chrome UI events: • activate rocket bar • navigation • open chrome menu click app chrome
- 33. • When a user long press on links, images, videos, …etc. mozbrowsercontextmenu
- 36. bookmark app
- 37. • To save a link to homescreen: • Handles MozActivity ‘save-bookmark’ • Saves the entry in ‘bookmarks_store’ using BookmarksDatabase save bookmark