browser & bookmark 
yliao@mozilla.com
BROWSER APP
summary 
• Manages navigation controls, address bar 
and tabbing 
• Manages top sites, history, bookmarks 
and browser set...
body 
HTML overview 
div#main-screen 
menu#toolbar-start 
div#frames 
div#startscreen 
div#awesomescreen 
div#crashscreen ...
body 
HTML overview 
div#main-screen 
menu#toolbar-start 
div#frames 
div#startscreen 
div#awesomescreen 
div#crashscreen ...
body 
HTML overview 
div#main-screen 
menu#toolbar-start 
div#frames 
div#startscreen 
div#awesomescreen 
div#crashscreen ...
body 
HTML overview 
div#main-screen 
menu#toolbar-start 
div#frames 
div#startscreen 
div#awesomescreen 
div#crashscreen ...
body 
HTML overview 
div#main-screen 
menu#toolbar-start 
div#frames 
div#startscreen 
div#awesomescreen 
div#crashscreen ...
body 
HTML & JS module 
div#main-screen 
menu#toolbar-start 
div#frames 
div#startscreen 
div#awesomescreen 
Awesomescreen...
body 
HTML & JS module 
div#main-screen 
Browser 
menu#toolbar-start 
Browser 
div#frames 
Browser 
div#startscreen 
Brows...
Browser module 
• Init modules (except Toolbar) 
• Manage navigation and address bar UI (filter top sites with 
awesome sc...
Browser module 
• Manage screen transitions 
• Manage bookmark UI (except bookmarks tab in Awesomescreen) 
and bookmark ed...
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’: Browse...
Toolbar 
• Manage button states 
• Init click event listeners (but callbacks are 
implemented in Browser except ‘share’ 
b...
AwesomeScreen 
• Manage tabbing and UI events 
• Generate and display top site, bookmark 
and history list from BrowserDB ...
Settings 
• Handle settings panel UI events 
• Clear history using BrowserDB 
• Clear cookies & data with 
navigator.mozAp...
ModalDialog 
• Handle mozbrowsershowmodalprompt 
event (event listener in Browser) 
• Manage prompt UI 
• evt.detail.messa...
AuthenticationDialog 
• Handle mozbrowserusernameandpasswordrequired event (event 
listener in Browser) 
• Manage authenti...
BrowserDB 
• Manage bookmarks, topsites, history, search engines and settings in 
IndexedDB 
• Load default top sites and ...
NfcURI 
• Handles NFC connections using NDEF (NFC Data Exchange 
Format) & MozNDEFRecord (implementation of NDEF) 
• Share...
load a page 
• Page loading browser events in general: 
• mozbrowserloadstart 
• mozbrowserlocationchange 
• mozbrowsertit...
SYSTEM BROWSER
system browser 
• Init a browser page from rocketbar:
system browser 
• Handle chrome UI events:
system browser 
• Handle chrome menu clicks:
system browser 
• Handle mozbrowsercontextmenu:
BOOKMARK APP
• To save a link to homescreen: 
• Handles MozActivity ‘save-bookmark’ 
• Saves the entry using 
BookmarksDatabase 
• Link...
bookmark app 
• To remove a link from homescreen: 
• Handles MozActivity ‘remove-bookmark’ 
• Removes the entry using Book...
Browser and bookmark in FirefoxOS on Aug.21.2014
Browser and bookmark in FirefoxOS on Aug.21.2014
Browser and bookmark in FirefoxOS on Aug.21.2014
Browser and bookmark in FirefoxOS on Aug.21.2014
Browser and bookmark in FirefoxOS on Aug.21.2014
Browser and bookmark in FirefoxOS on Aug.21.2014
Browser and bookmark in FirefoxOS on Aug.21.2014
Browser and bookmark in FirefoxOS on Aug.21.2014
Browser and bookmark in FirefoxOS on Aug.21.2014
Browser and bookmark in FirefoxOS on Aug.21.2014
Upcoming SlideShare
Loading in …5
×

Browser and bookmark in FirefoxOS on Aug.21.2014

566 views

Published on

Introduce the implementations of the bookmark app, browser app and system chrome browser in FirefoxOS.

Published in: Software
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
566
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Browser and bookmark in FirefoxOS on Aug.21.2014

  1. 1. browser & bookmark yliao@mozilla.com
  2. 2. BROWSER APP
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 13. startscreen • Browser.showStartscreen • Displayed when: • browser app launched • empty tab selected
  14. 14. crashscreen • Browser.showCrashScreen • Displayed on ‘mozbrowsererror’
  15. 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. 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. 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. 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. 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. 20. AuthenticationDialog • Handle mozbrowserusernameandpasswordrequired event (event listener in Browser) • Manage authentication dialog UI • evt.detail.authenticate(name, password) • evt.detail.cancel()
  21. 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. 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
  23. 23. load a page • Page loading browser events in general: • mozbrowserloadstart • mozbrowserlocationchange • mozbrowsertitlechange • mozbrowsericonchange • mozbrowserloadend
  24. 24. SYSTEM BROWSER
  25. 25. system browser • Init a browser page from rocketbar:
  26. 26. system browser • Handle chrome UI events:
  27. 27. system browser • Handle chrome menu clicks:
  28. 28. system browser • Handle mozbrowsercontextmenu:
  29. 29. BOOKMARK APP
  30. 30. • 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
  31. 31. 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

×