Bug 912892 - [app manager] simulator launch UI. r=ochameau

browser/app/profile/firefox.js

@@ -1068,6 +1068,7 @@ pref("devtools.commands.dir", "");
 
 // Disable the app manager
 pref("devtools.appmanager.enabled", false);
+pref("devtools.appmanager.simulatorInstallPage", "https://addons.mozilla.org/firefox/addon/firefox-os-simulator/");
 
 // Toolbox preferences
 pref("devtools.toolbox.footer.height", 250);

browser/devtools/app-manager/content/connection-footer.js

@@ -7,12 +7,14 @@ const Ci = Components.interfaces;
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource:///modules/devtools/gDevTools.jsm");
 
+const {Simulator} = Cu.import("resource://gre/modules/devtools/Simulator.jsm")
 const {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
 const {require} = devtools;
 
 const {ConnectionManager, Connection} = require("devtools/client/connection-manager");
 const ConnectionStore = require("devtools/app-manager/connection-store");
 const DeviceStore = require("devtools/app-manager/device-store");
+const simulatorsStore = require("devtools/app-manager/simulators-store");
 
 let UI = {
   init: function() {
@@ -43,6 +45,7 @@ let UI = {
     this.store = Utils.mergeStores({
       "device": new DeviceStore(this.connection),
       "connection": new ConnectionStore(this.connection),
+      "simulators": simulatorsStore,
     });
 
     let pre = document.querySelector("#logs > pre");
@@ -96,4 +99,47 @@ let UI = {
     Services.prefs.setCharPref("devtools.debugger.remote-host", host);
     Services.prefs.setIntPref("devtools.debugger.remote-port", port);
   },
+
+  showSimulatorList: function() {
+    document.body.classList.add("show-simulators");
+  },
+
+  cancelShowSimulatorList: function() {
+    document.body.classList.remove("show-simulators");
+  },
+
+  installSimulator: function() {
+    let url = Services.prefs.getCharPref("devtools.appmanager.simulatorInstallPage");
+    window.open(url);
+  },
+
+  startSimulator: function(version) {
+    let port = ConnectionManager.getFreeTCPPort();
+    let simulator = Simulator.getByVersion(version);
+    if (!simulator) {
+      this.connection.log("Error: can't find simulator: " + version);
+      return;
+    }
+    if (!simulator.launch) {
+      this.connection.log("Error: invalid simulator: " + version);
+      return;
+    }
+    this.connection.log("Found simulator: " + version);
+    this.connection.log("Starting simulator...");
+
+    this.simulator = simulator;
+    this.simulator.launch({ port: port })
+      .then(() => {
+        this.connection.log("Simulator ready. Connecting.");
+        this.connection.port = port;
+        this.connection.host = "localhost";
+        this.connection.once("connected", function() {
+          this.connection.log("Connected to simulator.");
+          this.connection.keepConnecting = false;
+        });
+        this.connection.keepConnecting = true;
+        this.connection.connect();
+      });
+    document.body.classList.remove("show-simulators");
+  },
 }

browser/devtools/app-manager/content/connection-footer.xhtml

@@ -38,9 +38,9 @@
               <span>&connection.notConnected;</span>
               <button class="action-primary left" onclick="UI.connect()" id="connect-button" template='{"type":"localizedContent","property":"connection.connectTo","paths":["connection.host","connection.port"]}'></button>
               <button class="right" onclick="UI.editConnectionParameters()">&connection.changeHostAndPort;</button>
-              <div id="start-simulator-box" template='{"type":"attribute","path":"simulators.versions.length","name":"simulators-count"}'>
+              <div id="start-simulator-box">
                 <span>&connection.or;</span>
-                <button id="start-simulator-button" class="action-primary" onclick="UI.startSimulator()">&connection.startSimulator;</button>
+                <button id="start-simulator-button" class="action-primary" onclick="UI.showSimulatorList()">&connection.startSimulator;</button>
               </div>
             </div>
           </div>
@@ -81,6 +81,25 @@
           </div>
         </div>
 
+        <!-- Simulator -->
+        <div id="banner-simulators" class="banner" template='{"type":"attribute","path":"simulators.versions.length","name":"simulator-count"}'>
+          <div class="connected-indicator"></div>
+          <div class="banner-box">
+            <div class="banner-content">
+              <div class="no-simulator">
+                <span>&connection.noSimulatorInstalled;</span>
+                <button class="action-primary" onclick="UI.installSimulator()">&connection.installFirstSimulator;</button>
+              </div>
+              <div class="found-simulator">
+                <span template-loop='{"arrayPath":"simulators.versions","childSelector":"#simulator-item-template"}'></span>
+                <button class="action-primary" onclick="UI.installSimulator()">&connection.installAnotherSimulator;</button>
+              </div>
+              <button class="action-cancel" onclick="UI.cancelShowSimulatorList()">&connection.cancel;</button>
+            </div>
+          </div>
+        </div>
+
+
         <!-- Logs -->
         <div id="banner-logs">
         <div id="logs" class="banner-box">
@@ -92,6 +111,14 @@
     </div>
   </body>
 
+  <template id="simulator-item-template">
+  <span>
+    <button class="simulator-item" onclick="UI.startSimulator(this.dataset.version)" template='{"type":"attribute","path":"version","name":"data-version"}'>
+      <span template='{"type":"textContent", "path":"version"}'></span>
+    </button>
+  </span>
+  </template>
+
   <script type="application/javascript;version=1.8" src="utils.js"></script>
   <script type="application/javascript;version=1.8" src="template.js"></script>
   <script type="application/javascript;version=1.8" src="connection-footer.js"></script>

browser/devtools/app-manager/simulators-store.js

@@ -0,0 +1,21 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const {Cu} = require("chrome");
+const ObservableObject = require("devtools/shared/observable-object");
+const {Simulator} = Cu.import("resource://gre/modules/devtools/Simulator.jsm");
+
+let store = new ObservableObject({versions:[]});
+
+function feedStore() {
+  store.object.versions = Simulator.availableVersions().map(v => {
+    return {version:v}
+  });
+}
+
+Simulator.on("register", feedStore);
+Simulator.on("unregister", feedStore);
+feedStore();
+
+module.exports = store;

browser/locales/en-US/chrome/browser/devtools/app-manager.dtd

@@ -32,6 +32,9 @@
 <!ENTITY connection.disconnecting "Disconnecting…">
 <!ENTITY connection.cancel "Cancel">
 <!ENTITY connection.or "or">
+<!ENTITY connection.noSimulatorInstalled "No simulator installed.">
+<!ENTITY connection.installFirstSimulator "Install simulator.">
+<!ENTITY connection.installAnotherSimulator "Add">
 
 <!ENTITY projects.localApps "Local Apps">
 <!ENTITY projects.addApp "Add">

browser/themes/shared/devtools/app-manager/connection-footer.css

@@ -33,10 +33,12 @@
   display: flex;
 }
 
+body.show-simulators .banner,
 body.edit-connection .banner {
   display: none !important;
 }
 
+body.show-simulators #banner-simulators,
 body.edit-connection #banner-editing {
   display: flex !important;
 }
@@ -70,10 +72,6 @@ body.edit-connection #banner-editing {
   display: inline;
 }
 
-#start-simulator-box[simulators-count="0"] {
-  display: none;
-}
-
 /************** PIXELS **************/
 
 * {
@@ -193,8 +191,18 @@ button.action-cancel {
   background: linear-gradient(to bottom, #69B8FF, #339FFF );
 }
 
+#banner-simulators .connected-indicator,
 #banner-disconnected .connected-indicator,
 #banner-editing .connected-indicator,
 #banner-disconnecting .connected-indicator {
   background: linear-gradient(to bottom, #375A87, #1C4375 );
 }
+
+#banner-simulators .banner-content > * {
+  display: inline-block;
+}
+
+#banner-simulators[simulator-count="0"] .found-simulator,
+#banner-simulators:not([simulator-count="0"]) .no-simulator {
+  display: none;
+}