DevTools/AppTools/Design: Difference between revisions
(Created page with "## Server side The app manager uses 2 actors at the moment: * ''/toolkit/devtools/server/actors/webapps.js'': this actor provides methods to manipulate apps * ''/toolkit/devt...") |
No edit summary |
||
| Line 1: | Line 1: | ||
== Server side == | |||
The app manager uses 2 actors at the moment: | The app manager uses 2 actors at the moment: | ||
| Line 5: | Line 5: | ||
* ''/toolkit/devtools/server/actors/device.js'': this actor provides info about the connected device (Firefox OS, Firefox Desktop, Fennec, Thunderbird, ...) | * ''/toolkit/devtools/server/actors/device.js'': this actor provides info about the connected device (Firefox OS, Firefox Desktop, Fennec, Thunderbird, ...) | ||
== Client side == | |||
=== Connection === | |||
''/toolkit/devtools/client/connection-manager.js'' | ''/toolkit/devtools/client/connection-manager.js'' | ||
| Line 13: | Line 13: | ||
The debugger client is wrapped into an object call `Connection`. A `ConnectionManager` creates and delete connections. Connections are persistent. A connection is destroyed only if explicitly requested (via `ConnectionManager.deleteConnection`). If the client is not connected yet or has been disconnected, the connection object is still alive. Only its status is affected (`Connection.status`). A connection emits events ("disconnected", "connecting", "timeout", ...). | The debugger client is wrapped into an object call `Connection`. A `ConnectionManager` creates and delete connections. Connections are persistent. A connection is destroyed only if explicitly requested (via `ConnectionManager.deleteConnection`). If the client is not connected yet or has been disconnected, the connection object is still alive. Only its status is affected (`Connection.status`). A connection emits events ("disconnected", "connecting", "timeout", ...). | ||
=== Stores === | |||
''/browser/devtools/app-manager/*-store.js'' | ''/browser/devtools/app-manager/*-store.js'' | ||
| Line 19: | Line 19: | ||
A store is a JSON-like object that gathers many information about one specific topic. For example, ''device-store.js'' is an object with info about the device (version, permissions, name, ...). `store.object` holds the JSON like object, and `store` is an event emitter. If any property of this object changes, an event is fired. For example: deviceStore.on("set", (e,p,v) console.log(p)) will print "name" if deviceStore.object.name is updated. The store are fed from a connection object. | A store is a JSON-like object that gathers many information about one specific topic. For example, ''device-store.js'' is an object with info about the device (version, permissions, name, ...). `store.object` holds the JSON like object, and `store` is an event emitter. If any property of this object changes, an event is fired. For example: deviceStore.on("set", (e,p,v) console.log(p)) will print "name" if deviceStore.object.name is updated. The store are fed from a connection object. | ||
=== Frontend === | |||
''/browser/devtools/app-manager/content/*'' | ''/browser/devtools/app-manager/content/*'' | ||
Revision as of 08:15, 6 August 2013
Server side
The app manager uses 2 actors at the moment:
- /toolkit/devtools/server/actors/webapps.js: this actor provides methods to manipulate apps
- /toolkit/devtools/server/actors/device.js: this actor provides info about the connected device (Firefox OS, Firefox Desktop, Fennec, Thunderbird, ...)
Client side
Connection
/toolkit/devtools/client/connection-manager.js
The debugger client is wrapped into an object call `Connection`. A `ConnectionManager` creates and delete connections. Connections are persistent. A connection is destroyed only if explicitly requested (via `ConnectionManager.deleteConnection`). If the client is not connected yet or has been disconnected, the connection object is still alive. Only its status is affected (`Connection.status`). A connection emits events ("disconnected", "connecting", "timeout", ...).
Stores
/browser/devtools/app-manager/*-store.js
A store is a JSON-like object that gathers many information about one specific topic. For example, device-store.js is an object with info about the device (version, permissions, name, ...). `store.object` holds the JSON like object, and `store` is an event emitter. If any property of this object changes, an event is fired. For example: deviceStore.on("set", (e,p,v) console.log(p)) will print "name" if deviceStore.object.name is updated. The store are fed from a connection object.
Frontend
/browser/devtools/app-manager/content/*
Frontend code uses the stores to show live information in the UI. A template mechanism based on the ObservableObject nature of the store take care of updating the UI.
device-inspector.xhtml is a page that is made to be embedded and displayed as a footer. This is where connections and stores are created (as both of these objects are some kind of singletons, all the device-inspector.xhtml pages are all synced). This footer is where the user connect a device. This footer can be expanded to reveal more data about the connected device.
app-manager.xhtml is page where user's projects are displayed, as a list. It embeds device-inspecto.xhtml.