Backed out changeset a0737b57f233 (bug 912891) for browser chrome failures

browser/app/profile/firefox.js

@@ -1081,7 +1081,7 @@ pref("devtools.commands.dir", "");
 
 // Enable the app manager
 pref("devtools.appmanager.enabled", true);
-pref("devtools.appmanager.lastTab", "help");
+pref("devtools.appmanager.firstrun", true);
 pref("devtools.appmanager.manifestEditor.enabled", false);
 
 // Toolbox preferences

browser/devtools/app-manager/content/device.js

@@ -162,13 +162,16 @@ let UI = {
     if (!this.connected) {
       return;
     }
-
-    let app = this.store.object.apps.all.filter(a => a.manifestURL == manifest)[0];
     getTargetForApp(this.connection.client,
                     this.listTabsResponse.webappsActor,
                     manifest).then((target) => {
-
-      top.UI.openAndShowToolboxForTarget(target, app.name, app.iconURL);
+      gDevTools.showToolbox(target,
+                            null,
+                            devtools.Toolbox.HostType.WINDOW).then(toolbox => {
+        this.connection.once(Connection.Events.DISCONNECTED, () => {
+          toolbox.destroy();
+        });
+      });
     }, console.error);
   },
 

browser/devtools/app-manager/content/index.js

@@ -7,176 +7,76 @@ Cu.import("resource:///modules/devtools/gDevTools.jsm");
 const {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
 const {require} = devtools;
 const {ConnectionManager, Connection} = require("devtools/client/connection-manager");
-const promise = require("sdk/core/promise");
 const prefs = require('sdk/preferences/service');
 
+let connection;
 
-let UI = {
-  _toolboxTabCursor: 0,
-  _handledTargets: new Map(),
-
-  connection: null,
-
-  init: function() {
-    this.onLoad = this.onLoad.bind(this);
-    this.onUnload = this.onUnload.bind(this);
-    this.onMessage = this.onMessage.bind(this);
-    this.onConnected = this.onConnected.bind(this);
-    this.onDisconnected = this.onDisconnected.bind(this);
-
-    window.addEventListener("load", this.onLoad);
-    window.addEventListener("unload", this.onUnload);
-    window.addEventListener("message", this.onMessage);
-  },
-
-  onLoad: function() {
-    window.removeEventListener("load", this.onLoad);
-    let defaultPanel = prefs.get("devtools.appmanager.lastTab");
-    let panelExists = !!document.querySelector("." + defaultPanel  + "-panel");
-    this.selectTab(panelExists ? defaultPanel : "projects");
-  },
-
-  onUnload: function() {
-    window.removeEventListener("unload", this.onUnload);
-    window.removeEventListener("message", this.onMessage);
-    if (this.connection) {
-      this.connection.off(Connection.Status.CONNECTED, this.onConnected);
-      this.connection.off(Connection.Status.DISCONNECTED, this.onDisconnected);
-    }
-  },
-
-  onMessage: function(event) {
-    try {
-      let json = JSON.parse(event.data);
-      switch (json.name) {
-        case "connection":
-          let cid = +json.cid;
-          for (let c of ConnectionManager.connections) {
-            if (c.uid == cid) {
-              this.onNewConnection(c);
-              break;
-            }
+window.addEventListener("message", function(event) {
+  try {
+    let json = JSON.parse(event.data);
+    switch (json.name) {
+      case "connection":
+        let cid = +json.cid;
+        for (let c of ConnectionManager.connections) {
+          if (c.uid == cid) {
+            connection = c;
+            onNewConnection();
+            break;
           }
-          break;
-        case "closeHelp":
-          this.selectTab("projects");
-          break;
-        case "toolbox-raise":
-          this.selectTab(json.uid);
-          break;
-        case "toolbox-close":
-          this.closeToolboxTab(json.uid);
-          break;
-        default:
-          Cu.reportError("Unknown message: " + json.name);
-      }
-    } catch(e) { Cu.reportError(e); }
-
-    // Forward message
-    let panels = document.querySelectorAll(".panel");
-    for (let frame of panels) {
-      frame.contentWindow.postMessage(event.data, "*");
-    }
-  },
-
-  selectTabFromButton: function(button) {
-    if (!button.hasAttribute("panel"))
-      return;
-    this.selectTab(button.getAttribute("panel"));
-  },
-
-  selectTab: function(panel) {
-    let isToolboxTab = false;
-    for (let type of ["button", "panel"]) {
-      let oldSelection = document.querySelector("." + type + "[selected]");
-      let newSelection = document.querySelector("." + panel + "-" + type);
-      if (oldSelection) oldSelection.removeAttribute("selected");
-      if (newSelection) {
-        newSelection.scrollIntoView(false);
-        newSelection.setAttribute("selected", "true");
-        if (newSelection.classList.contains("toolbox")) {
-          isToolboxTab = true;
         }
-      }
+        break;
+      case "closeHelp":
+        selectTab("projects");
+        break;
+      default:
+        Cu.reportError("Unknown message: " + json.name);
     }
-    if (!isToolboxTab) {
-      prefs.set("devtools.appmanager.lastTab", panel);
-    }
-  },
+  } catch(e) { Cu.reportError(e); }
 
-  onNewConnection: function(connection) {
-    this.connection = connection;
-    this.connection.on(Connection.Status.CONNECTED, this.onConnected);
-    this.connection.on(Connection.Status.DISCONNECTED, this.onDisconnected);
-  },
+  // Forward message
+  let panels = document.querySelectorAll(".panel");
+  for (let frame of panels) {
+    frame.contentWindow.postMessage(event.data, "*");
+  }
+}, false);
 
-  onConnected: function() {
-    document.querySelector("#content").classList.add("connected");
-  },
+window.addEventListener("unload", function onUnload() {
+  window.removeEventListener("unload", onUnload);
+  if (connection) {
+    connection.off(Connection.Status.CONNECTED, onConnected);
+    connection.off(Connection.Status.DISCONNECTED, onDisconnected);
+  }
+});
 
-  onDisconnected: function() {
-    for (let [,toolbox] of this._handledTargets) {
-      if (toolbox) {
-        toolbox.destroy();
-      }
-    }
-    this._handledTargets.clear();
-    document.querySelector("#content").classList.remove("connected");
-  },
+function onNewConnection() {
+  connection.on(Connection.Status.CONNECTED, onConnected);
+  connection.on(Connection.Status.DISCONNECTED, onDisconnected);
+}
 
-  createToolboxTab: function(name, iconURL, uid) {
-    let button = document.createElement("button");
-    button.className = "button toolbox " + uid + "-button";
-    button.setAttribute("panel", uid);
-    button.textContent = name;
-    button.setAttribute("style", "background-image: url(" + iconURL + ")");
-    let toolboxTabs = document.querySelector("#toolbox-tabs");
-    toolboxTabs.appendChild(button);
-    let iframe = document.createElement("iframe");
-    iframe.setAttribute("flex", "1");
-    iframe.className = "panel toolbox " + uid + "-panel";
-    let panels = document.querySelector("#tab-panels");
-    panels.appendChild(iframe);
-    this.selectTab(uid);
-    return iframe;
-  },
+function onConnected() {
+  document.querySelector("#content").classList.add("connected");
+}
 
-  closeToolboxTab: function(uid) {
-    let buttonToDestroy = document.querySelector("." + uid + "-button");
-    let panelToDestroy = document.querySelector("." + uid + "-panel");
+function onDisconnected() {
+  document.querySelector("#content").classList.remove("connected");
+}
 
-    if (buttonToDestroy.hasAttribute("selected")) {
-      let lastTab = prefs.get("devtools.appmanager.lastTab");
-      this.selectTab(lastTab);
-    }
-
-    buttonToDestroy.remove();
-    panelToDestroy.remove();
-  },
-
-  openAndShowToolboxForTarget: function(target, name, icon) {
-    let host = devtools.Toolbox.HostType.CUSTOM;
-    if (!this._handledTargets.has(target)) {
-      let uid = "uid" + this._toolboxTabCursor++;
-      let iframe = this.createToolboxTab(name, icon, uid);
-      let options = { customIframe: iframe , uid: uid };
-      this._handledTargets.set(target, null);
-      return gDevTools.showToolbox(target, null, host, options).then(toolbox => {
-        this._handledTargets.set(target, toolbox);
-        toolbox.once("destroyed", () => {
-          this._handledTargets.delete(target)
-        });
-      });
-    } else {
-      let toolbox = this._handledTargets.get(target);
-      if (!toolbox) {
-        // Target is handled, but toolbox is still being
-        // created.
-        return promise.resolve(null);
-      }
-      return gDevTools.showToolbox(target, null, host);
-    }
+function selectTab(id) {
+  for (let type of ["button", "panel"]) {
+    let oldSelection = document.querySelector("." + type + "[selected]");
+    let newSelection = document.querySelector("." + id + "-" + type);
+    if (oldSelection) oldSelection.removeAttribute("selected");
+    if (newSelection) newSelection.setAttribute("selected", "true");
+  }
+  if (id != "help") {
+    // Might be the first time the user is accessing the actual app manager
+    prefs.set("devtools.appmanager.firstrun", false);
   }
 }
 
-UI.init();
+let firstRun = prefs.get("devtools.appmanager.firstrun");
+if (firstRun) {
+  selectTab("help");
+} else {
+  selectTab("projects");
+}

browser/devtools/app-manager/content/index.xul

@@ -22,11 +22,11 @@
 
   <vbox id="root" flex="1">
     <hbox id="content" flex="1">
-      <vbox id="tabs" onclick="UI.selectTabFromButton(event.target)">
-        <button class="button projects-button" panel="projects">&index.projects2;</button>
-        <button class="button device-button" panel="device">&index.device2;</button>
-        <vbox id="toolbox-tabs" flex="1"/>
-        <button class="button help-button" panel="help">&index.help;</button>
+      <vbox id="tabs">
+        <button class="button projects-button" onclick="selectTab('projects')">&index.projects2;</button>
+        <button class="button device-button" onclick="selectTab('device')">&index.device2;</button>
+        <spacer flex="1"/>
+        <button class="button help-button" onclick="selectTab('help')">&index.help;</button>
       </vbox>
       <hbox id="tab-panels" flex="1">
         <iframe flex="1" class="panel projects-panel" src="chrome://browser/content/devtools/app-manager/projects.xhtml"/>

browser/devtools/app-manager/content/projects.js

@@ -360,15 +360,25 @@ let UI = {
       loop(0);
       return deferred.promise;
     };
+    let onTargetReady = (target) => {
+      // Finally, when it's finally opened, display the toolbox
+      let deferred = promise.defer();
+      gDevTools.showToolbox(target,
+                            null,
+                            devtools.Toolbox.HostType.WINDOW).then(toolbox => {
+        this.connection.once(Connection.Events.DISCONNECTED, () => {
+          toolbox.destroy();
+        });
+        deferred.resolve(toolbox);
+      });
+      return deferred.promise;
+    };
 
     // First try to open the app
     this.start(project)
         .then(null, onFailedToStart)
         .then(onStarted)
-        .then((target) =>
-          top.UI.openAndShowToolboxForTarget(target,
-                                             project.manifest.name,
-                                             project.icon))
+        .then(onTargetReady)
         .then(() => {
            // And only when the toolbox is opened, release the button
            button.disabled = false;

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

@@ -12,7 +12,6 @@
 
 #banners-and-logs {
   display: flex;
-  flex-grow: 1;
 }
 
 #logs {

browser/themes/shared/devtools/app-manager/index.css

@@ -14,10 +14,6 @@
   background: #252C33;
 }
 
-#toolbox-tabs {
-  overflow-y: auto;
-}
-
 .button {
   width: 80px;
   height: 85px;
@@ -58,12 +54,6 @@
   display: none;
 }
 
-.button.toolbox {
-  background-repeat: no-repeat;
-  background-position: center 15px;
-  background-size: 40px 40px;
-}
-
 .projects-button {
   background: url('chrome://browser/skin/devtools/app-manager/index-icons.svg') no-repeat;
   background-position: left -5px;