Browser and bookmark in FirefoxOS on Aug.21.2014

browser & bookmark
yliao@mozilla.com

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)

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

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
AuthenticationDialog
div#modal-dialog
ModalDialog
section#settings
Settings
form#danger-dialog

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
Browser
Browser
div#modal-dialog
section#settings
form#danger-dialog
Browser

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)

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)

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

crashscreen
• Browser.showCrashScreen
• Displayed on ‘mozbrowsererror’

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

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

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

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

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

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

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

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

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

system browser
• Init a browser page from rocketbar:

system browser
• Handle chrome UI events:

system browser
• Handle chrome menu clicks:

system browser
• Handle mozbrowsercontextmenu:

• 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

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

Browser and bookmark in FirefoxOS on Aug.21.2014

Browser and bookmark in FirefoxOS on Aug.21.2014

Recommended

Recommended

More Related Content

Similar to Browser and bookmark in FirefoxOS on Aug.21.2014

Similar to Browser and bookmark in FirefoxOS on Aug.21.2014 (20)

Recently uploaded

Recently uploaded (20)

Browser and bookmark in FirefoxOS on Aug.21.2014