The document outlines the functionalities of a browser application, detailing its components such as navigation controls, bookmark management, and handling of user interface events. It includes descriptions of various browser modules, event handlers, and the structure of the underlying database used for managing bookmarks and browsing history. It also covers the integration of NFC capabilities for sharing links and the system interactions for handling bookmarks from a homescreen app.

1. browser & bookmark
yliao@mozilla.com

2. BROWSER APP

3. summary
• Manages navigation controls, address bar
and tabbing
• Manages top sites, history, bookmarks
and browser settings in IndexedDB (DB
name: ‘browser’)
• Handle mozbrowser events
• Handles navigator.mozNfc.onpeerready
to share the current link address
(MozActivity ‘view’ is removed from
here, it’s handled by system app now)

4. body
HTML overview
div#main-screen
menu#toolbar-start
div#frames
div#startscreen
div#awesomescreen
div#crashscreen
div#tab_1
ul#toolbar-end
div#tray
section#bookmark-menu
section#bookmark-entry-sheet
section#http-authentication-dialog
div#modal-dialog
section#settings
form#danger-dialog

5. body
HTML overview
div#main-screen
menu#toolbar-start
div#frames
div#startscreen
div#awesomescreen
div#crashscreen
div#tab_1
ul#toolbar-end
div#tray
section#bookmark-menu
section#bookmark-entry-sheet
section#http-authentication-dialog
div#modal-dialog
section#settings
form#danger-dialog

6. body
HTML overview
div#main-screen
menu#toolbar-start
div#frames
div#startscreen
div#awesomescreen
div#crashscreen
div#tab_1
ul#toolbar-end
div#tray
section#bookmark-menu
section#bookmark-entry-sheet
section#http-authentication-dialog
div#modal-dialog
section#settings
form#danger-dialog

7. body
HTML overview
div#main-screen
menu#toolbar-start
div#frames
div#startscreen
div#awesomescreen
div#crashscreen
div#tab_1
ul#toolbar-end
div#tray
section#bookmark-menu
section#bookmark-entry-sheet
section#http-authentication-dialog
div#modal-dialog
section#settings
form#danger-dialog

8. body
HTML overview
div#main-screen
menu#toolbar-start
div#frames
div#startscreen
div#awesomescreen
div#crashscreen
div#tab_1
ul#toolbar-end
div#tray
section#bookmark-menu
section#bookmark-entry-sheet
section#http-authentication-dialog
div#modal-dialog
section#settings
form#danger-dialog

9. body
HTML & JS module
div#main-screen
menu#toolbar-start
div#frames
div#startscreen
div#awesomescreen
Awesomescreen
div#crashscreen
div#tab_1
ul#toolbar-end
Toolbar
div#tray
section#bookmark-menu
section#bookmark-entry-sheet
section#http-authentication-dialog
AuthenticationDialog
div#modal-dialog
ModalDialog
section#settings
Settings
form#danger-dialog

10. body
HTML & JS module
div#main-screen
Browser
menu#toolbar-start
Browser
div#frames
Browser
div#startscreen
Browser
div#awesomescreen
div#crashscreen
Browser
div#tab_1
Browser
ul#toolbar-end
div#tray
Browser
section#bookmark-menu
Browser
section#bookmark-entry-sheet
Browser
section#http-authentication-dialog
div#modal-dialog
section#settings
form#danger-dialog
Browser

11. Browser module
• Init modules (except Toolbar)
• Manage navigation and address bar UI (filter top sites with
awesome screen)
• Manage tabs and iframes (create, select, delete, visibility), iframes
are created with ‘ mozbrowser’, ‘mozallowfullscreen’,
‘mozasyncpanzoom’ and ‘remote’ attributes
• Handle mozbrowser events (each tab gets its own handler)

12. Browser module
• Manage screen transitions
• Manage bookmark UI (except bookmarks tab in Awesomescreen)
and bookmark editing with BrowserDB
• Manage browsing history with BrowserDB
• Manage touch (touchstart, pan, tap, swipe) using GestureDetector
(shared/js/gesture_detector.js)
• Handle MozActivity ‘view’ (it’s been removed from manifest)

13. startscreen
• Browser.showStartscreen
• Displayed when:
• browser app launched
• empty tab selected

14. crashscreen
• Browser.showCrashScreen
• Displayed on ‘mozbrowsererror’

15. browser screens
• These class names are applied to body
• ‘page-screen’: Browser.showPageScreen
• ‘tabs-screen’: Browser.showTabScreen
• ‘awesome-screen’: Awesomescreen.show
• ‘settings-screen’: Settings.show

16. Toolbar
• Manage button states
• Init click event listeners (but callbacks are
implemented in Browser except ‘share’
button)
• Handle ‘share’ button click with
MozActivity ‘share’

17. AwesomeScreen
• Manage tabbing and UI events
• Generate and display top site, bookmark
and history list from BrowserDB
• Filter top sites by input using BrowserDB
• Cache awesomescreen result
• On ‘contextmenu’ event on bookmark
items using Browser module to edit
bookmark
• On link clicked using Browser module to
navigate the URL

18. Settings
• Handle settings panel UI events
• Clear history using BrowserDB
• Clear cookies & data with
navigator.mozApps.getSelf request
• Manage search engine options using
BrowserDB

19. ModalDialog
• Handle mozbrowsershowmodalprompt
event (event listener in Browser)
• Manage prompt UI
• evt.detail.message: dialog message
• evt.detail.promptType: as above
• evt.detail.initialValue: default value for the
prompt input
• evt.detail.returnValue: the value to be returned
to the tab
• evt.detail.showCheckbox: show checkbox or
not
• evt.detail.unblock: the method to unblock the
tab

20. AuthenticationDialog
• Handle mozbrowserusernameandpasswordrequired event (event
listener in Browser)
• Manage authentication dialog UI
• evt.detail.authenticate(name, password)
• evt.detail.cancel()

21. BrowserDB
• Manage bookmarks, topsites, history, search engines and settings in
IndexedDB
• Load default top sites and bookmarks from json on init
• Handle system message ‘first-run-with-sim’ to get bookmarks in
config
• navigator.mozSettings.addObserver(‘operatorResources.data.topsit
es', …) for setting operator provided top sites
• object stores:
• places: uri, iconUri, title, frecency(typo), screenshot
• visits: uri, timestamp
• icons: uri (iconUri), data, expiration, failed
• bookmarks: uri, timestamp
• settings: defaultSearchEngine,
• search_engines: uri, title

22. NfcURI
• Handles NFC connections using NDEF (NFC Data Exchange
Format) & MozNDEFRecord (implementation of NDEF)
• Share the link of the current tab on peer ready
(navigator.mozNfc.onpeerready)
• More on NFC:
• http://developer.android.com/guide/topics/connectivity/nfc/
nfc.html
• https://wiki.mozilla.org/WebAPI/WebNFC#Usage_of_APIs

26. load a page
• Page loading browser events in general:
• mozbrowserloadstart
• mozbrowserlocationchange
• mozbrowsertitlechange
• mozbrowsericonchange
• mozbrowserloadend

28. SYSTEM BROWSER

29. system browser
• Init a browser page from rocketbar:

31. system browser
• Handle chrome UI events:

33. system browser
• Handle chrome menu clicks:

35. system browser
• Handle mozbrowsercontextmenu:

37. BOOKMARK APP

38. • To save a link to homescreen:
• Handles MozActivity ‘save-bookmark’
• Saves the entry using
BookmarksDatabase
• Links on the homescreen are
saved using Data Store API in
‘bookmarks_store’
!
bookmark app

40. bookmark app
• To remove a link from homescreen:
• Handles MozActivity ‘remove-bookmark’
• Removes the entry using BookmarksDatabase
• Only used in homescreen app, vertical homescreen implements
the bookmark removing by itself