DevTools/AppTools/Design

Info

Mockups available here: http://htmlpad.org/app-manager/

Relevant bugs can be found here: https://bugzilla.mozilla.org/showdependencytree.cgi?id=894354&hide_resolved=1

Github for WIP patches: https://github.com/paulrouget/mozilla-central/compare/fx-team...app-manager

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 stores 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-inspector.xhtml.