system browser

38
[email protected] system browser on Firefox OS v2.1

Upload: yi-fan-liao

Post on 14-Jul-2015

750 views

Category:

Software


0 download

TRANSCRIPT

[email protected]

system browser on Firefox OS v2.1

• 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

interactions

system search

settings

verticalhomebookmark

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

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

system

searchverticalhome

bookmark

read/write

read/write

data manipulation

indexedDB: places_idb_store

dataStore: places

dataStore: bookmarks_store

read/write

read

read

read/remove

system app

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

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

app windowdiv#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.

• AppWindowManager

• AppWindow

• AppChrome

• AppWindowFactory

• WrapperFactory

• Rocketbar

• SearchWindow

modules• BrowserConfigHelper

• BrowserFrame

• BrowserContextMenu

• BrowserMixin

• BrowserSettings

• BookmarksDatabase

• Places

settings change

browserSettings

settings

change clear.browser.history

change clear.browser.private-data

places

clear()

app

clearBrowserData()

search app

{!

"name": "Browser",!

"description": "Gaia System Web Browser",!

"type": "certified",!

"role": "search",!

"launch_path": “/newtab.html",!

search app

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

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

indexedDBDBName: 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’,…]}}

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

• launch search app through mozapp.launch

• click browser app on home screen

• click new window in browser app context menu

launch

launch browser app

appWindowFactory

browserFrame

Event: webapps-launch

new AppChrome

appWindow

new AppWindow

appChrome

new BrowserFrame

• launch search app through window.open

• submit search on rocket bar

• click home screen bookmark

• click history or top site

launch

• Page loading browser events in general:

• mozbrowserloadstart

• mozbrowserlocationchange

• mozbrowsertitlechange

• mozbrowsericonchange

• mozbrowserloadend

load a page

page loading

appWindow appChrome

mozbrowsertitlechange

mozbrowserlocationchange

places

appiconchange apploaded

update app chrome

mozbrowsericonchange

mozbrowserloaded

apptitlechange applocationchange

update dataStore entries

click app chrome

• Handle chrome UI events:

!

!

!

• Handle chrome UI events:

• activate rocket bar

• navigation

• open chrome menu

click app chrome

open menudiv#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. …

• When a user long press on links, images, videos, …etc.

mozbrowsercontextmenu

MozActivity ‘view’

bookmark app

• To save a link to homescreen:

• Handles MozActivity ‘save-bookmark’

• Saves the entry in ‘bookmarks_store’ using BookmarksDatabase

save bookmark