Browser and bookmark in FirefoxOS on Aug.21.2014

[email protected] & bookmark

mailto:[email protected]

BROWSER APP

• 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)

summary

body 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

HTML overview


HTML overview


HTML overview


HTML overview


HTML overview

body 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

HTML & JS module

body 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

HTML & JS 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)

Browser module

• Browser.showStartscreen

• Displayed when:

• browser app launched

• empty tab selected

startscreen

• Browser.showCrashScreen

• Displayed on ‘mozbrowsererror’

crashscreen

• These class names are applied to body

• ‘page-screen’: Browser.showPageScreen

• ‘tabs-screen’: Browser.showTabScreen

• ‘awesome-screen’: Awesomescreen.show

• ‘settings-screen’: Settings.show

browser screens

• Manage button states

• Init click event listeners (but callbacks are implemented in Browser except ‘share’ button)

• Handle ‘share’ button click with MozActivity ‘share’

Toolbar

• 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

AwesomeScreen

• Handle settings panel UI events

• Clear history using BrowserDB

• Clear cookies & data with navigator.mozApps.getSelf request

• Manage search engine options using BrowserDB

Settings

• 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

ModalDialog

• Handle mozbrowserusernameandpasswordrequired event (event listener in Browser)

• Manage authentication dialog UI

• evt.detail.authenticate(name, password)

• evt.detail.cancel()

AuthenticationDialog

• 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.topsites', …) 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

BrowserDB

• 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

NfcURI

http://developer.android.com/guide/topics/connectivity/nfc/nfc.html

https://wiki.mozilla.org/WebAPI/WebNFC#Usage_of_APIs

• Page loading browser events in general:

• mozbrowserloadstart

• mozbrowserlocationchange

• mozbrowsertitlechange

• mozbrowsericonchange

• mozbrowserloadend

load a page

SYSTEM BROWSER

• Init a browser page from rocketbar :

system browser

• Handle chrome UI events:

system browser

• Handle chrome menu clicks:

system browser

• Handle mozbrowsercontextmenu:

system browser

BOOKMARK APP

• 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

• 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

bookmark app

Software

Browser and bookmark in FirefoxOS on Aug.21.2014