Simulator/FirefoxIntegration/

Following the discussion started in devtools mailing list, here is a draft plan on how to integrate various features from Firefox OS Simulator addon, and moreover how to improve devtools to ease webapps development.

(Note that various mockups displayed in this page are forkable from here)

Ease device connection

It's currently not that simple to connect to a mobile device. You first have to make it work with your OS (install the very precise driver on Windows, or hack android.rules file on linux). Then install adb. But to do that you have to go through the Android SDK manager app and can easily be lost in middle of the Android development story. You have to continue and ensure that you allowed remote connection on the device itself by going to the almost hidden toggle in settings app. But that's not all, you then have to execute: "adb forward tcp:6000 tcp:6000". And finally, open the connect page, and only then, click on the connect button. Wait! You also have to accept the connection by agreeing on the device screen.

The simulator addon has been digging multiple ways to improve device connection. Shipping adb in the addon itself and automagically detecting and displaying devices to the user as soon as they get plugged in improved a lot device connection! But shipping and running adb from Firefox introduces various issues we would not like to have in Firefox:

• have to build adb from source,
• need to handle conflicts with adb already installed on the OS,
• handle 32 and 64bits,
• issues on windows to open a command line tool without having a command line

window to appear. We have various plans to avoid these issues like reimplementing adb in JS, calling it as a dynamic library via jsctypes, see if emscripten can compile it to JS, ... or any other eventual solution.

Get a firefox-global remote device connection/selection

For now, when you open the connection screen, a remote toolbox is opened and connected to the device. But if you want to connect to another tab, or open another devtool, you have to go through the whole connection process again.

We should be able to connect once and then be able to navigate in our various devtools and also select at anytime another context (Tabs, Apps). Bug 875104 is a first step toward this goal.

Get (remote) devtools in tabs

So far, most devtools are segregated in toolboxes. Toolboxes can be a bottom bar, a sidebar, or a popup. In all cases, the overall size of tools is quite limited. Also toolboxes as bottom bar makes a lot of sense for tools related to current tab content, but all tools won't necessary target a tab document. That will be the case of the app manager. So that we can imagine some other ways to display a tool. An obvious placeholder is to display tools in a tab, like about:config, addons, memory, ...

We can already mimic about:* pages and just register a new URI, but we have to somehow integrate, or connect these page to other tools. For example, if I connect through the connect page, I want these pages to also target the the connected device. We may display additional targets to select in the connect page. We may also want these tools to automatically appear in the devtools menu, have a shortcut,...

It is now extremelly easy to create a new devtool panel registered in regular toolboxes, it would be really cool to do the same with devtool in pages and handle everything for us, without having to know about nsIAboutModule and such...

Implement a webapps management actor

We used to have a webapps actor allowing to install apps in b2g. This actor has now been moved to toolkit (bug 865207) to work on all platforms and also gained from new methods (bug 844227) to be able to implement an app management tool to:

• install/uninstall apps
• list currently installed apps
• get some metadata/installation status for each app
• launch and close an app

Implement a webapps management page

Once we have all previous features/tweaks being done, we will just have to build the UI, in a page, to manage apps with the same actions exposed by the webapps actor.

Help developers to create a new webapp

Either tune the existing webapps management page or come up with a new one to help developers to start creating a new webapp out of nothing:

• create a manifest, help filling it and verify it.
• help handling app permission and app types (web, priviledged, certified),
• help choosing between packaged and hosted app,
• offer an easy way to push the app to a device and connect tools to it,
• if the simulator addon is installed, offer the same thing: install/update/run

the app on it,

• ...

Integrate the simulation into firefox

Given all these new UI, we should find a place where to expose the simulator. The simulator will mostly be about how to launch a simulation and how to display it. It won't handle apps management/creation anymore. So that we may just present it as a new remote target in the connection screen and add a button in the urlbar toolbox (or somewhere else in devtools) to start/stop the simulation.