Bug 1194827 - [promise-dbg] Implement panel startup and destroy r=fitzgen

browser/devtools/debugger/debugger-view.js

@@ -218,6 +218,17 @@ let DebuggerView = {
   _initializePromiseDebugger: function() {
     let iframe = this._promiseDebuggerIframe = document.createElement("iframe");
     iframe.setAttribute("flex", 1);
+
+    let onLoad = (event) => {
+      iframe.removeEventListener("load", onLoad, true);
+
+      let doc = event.target;
+      let win = doc.defaultView;
+
+      win.setPanel(DebuggerController._toolbox);
+    };
+
+    iframe.addEventListener("load", onLoad, true);
     iframe.setAttribute("src", PROMISE_DEBUGGER_URL);
     this._promisePane.appendChild(iframe);
   },
@@ -227,6 +238,8 @@ let DebuggerView = {
    */
   _destroyPromiseDebugger: function() {
     if (this._promiseDebuggerIframe) {
+      this._promiseDebuggerIframe.contentWindow.destroy();
+
       this._promiseDebuggerIframe.parentNode.removeChild(
         this._promiseDebuggerIframe);
 

browser/devtools/debugger/views/sources-view.js

@@ -621,7 +621,9 @@ SourcesView.prototype = Heritage.extend(WidgetMethods, {
       let promisePane = this.DebuggerView._promisePane;
       promisePane.hidden = !promisePane.hidden;
 
-      this.DebuggerView._initializePromiseDebugger();
+      if (!this.DebuggerView._promiseDebuggerIframe) {
+        this.DebuggerView._initializePromiseDebugger();
+      }
     }
   },
 

browser/devtools/jar.mn

@@ -110,7 +110,8 @@ browser.jar:
     content/browser/devtools/performance/views/details-memory-flamegraph.js (performance/views/details-memory-flamegraph.js)
     content/browser/devtools/performance/views/optimizations-list.js        (performance/views/optimizations-list.js)
     content/browser/devtools/performance/views/recordings.js           (performance/views/recordings.js)
-    content/browser/devtools/promisedebugger/promise-debugger.js       (promisedebugger/promise-debugger.js)
+    content/browser/devtools/promisedebugger/promise-controller.js     (promisedebugger/promise-controller.js)
+    content/browser/devtools/promisedebugger/promise-panel.js          (promisedebugger/promise-panel.js)
     content/browser/devtools/promisedebugger/promise-debugger.xhtml    (promisedebugger/promise-debugger.xhtml)
     content/browser/devtools/commandline.css                           (commandline/commandline.css)
     content/browser/devtools/commandlineoutput.xhtml                   (commandline/commandlineoutput.xhtml)

browser/devtools/promisedebugger/moz.build

@@ -7,5 +7,4 @@
 BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
 
 EXTRA_JS_MODULES.devtools.promisedebugger += [
-    'promise-debugger.js'
 ]

browser/devtools/promisedebugger/promise-controller.js

@@ -0,0 +1,102 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* 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/. */
+
+/* global promise, PromisesPanel, PromisesFront, DevToolsUtils */
+
+"use strict";
+
+const { utils: Cu } = Components;
+const { loader, require } =
+  Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
+
+const { Task } = require("resource://gre/modules/Task.jsm");
+
+loader.lazyRequireGetter(this, "promise");
+loader.lazyRequireGetter(this, "EventEmitter",
+  "devtools/toolkit/event-emitter");
+loader.lazyRequireGetter(this, "DevToolsUtils",
+  "devtools/toolkit/DevToolsUtils");
+loader.lazyRequireGetter(this, "PromisesFront",
+  "devtools/server/actors/promises", true);
+
+// Global toolbox, set when startup is called.
+let gToolbox;
+
+/**
+ * Initialize the promise debugger controller and view upon loading the iframe.
+ */
+let startup = Task.async(function*(toolbox) {
+  gToolbox = toolbox;
+
+  yield PromisesController.initialize(toolbox);
+  yield PromisesPanel.initialize();
+});
+
+/**
+ * Destroy the promise debugger controller and view when unloading the iframe.
+ */
+let shutdown = Task.async(function*() {
+  yield PromisesController.destroy();
+  yield PromisesPanel.destroy();
+
+  gToolbox = null;
+});
+
+function setPanel(toolbox) {
+  return startup(toolbox).catch(e =>
+    DevToolsUtils.reportException("setPanel", e));
+}
+
+function destroy() {
+  return shutdown().catch(e => DevToolsUtils.reportException("destroy", e));
+}
+
+/**
+ * The promisedebugger controller's job is to retrieve PromisesFronts from the
+ * server.
+ */
+let PromisesController = {
+  initialize: Task.async(function*() {
+    if (this.initialized) {
+      return this.initialized.promise;
+    }
+
+    this.initialized = promise.defer();
+
+    let target = gToolbox.target;
+    this.promisesFront = new PromisesFront(target.client, target.form);
+    yield this.promisesFront.attach();
+
+    if (this.destroyed) {
+      console.warn("Could not fully initialize the PromisesController");
+      return null;
+    }
+
+    this.initialized.resolve();
+  }),
+
+  destroy: Task.async(function*() {
+    if (!this.initialized) {
+      return null;
+    }
+
+    if (this.destroyed) {
+      return this.destroyed.promise;
+    }
+
+    this.destroyed = promise.defer();
+
+    if (this.promisesFront) {
+      yield this.promisesFront.detach();
+      this.promisesFront.destroy();
+      this.promisesFront = null;
+    }
+
+    this.destroyed.resolve();
+  }),
+};
+
+EventEmitter.decorate(PromisesController);

browser/devtools/promisedebugger/promise-debugger.js

@@ -1,7 +0,0 @@
-/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
-/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
-/* 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/. */
-
-"use strict";

browser/devtools/promisedebugger/promise-debugger.xhtml

@@ -17,6 +17,7 @@
     <script type="application/javascript;version=1.8" src="chrome://browser/content/devtools/theme-switching.js"/>
   </head>
   <body class="devtools-monospace" role="application">
-    <script type="application/javascript;version=1.8" src="promise-debugger.js"></script>
+    <script type="application/javascript;version=1.8" src="promise-controller.js"></script>
+    <script type="application/javascript;version=1.8" src="promise-panel.js"></script>
   </body>
 </html>

browser/devtools/promisedebugger/promise-panel.js

@@ -0,0 +1,44 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* 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/. */
+
+/* global PromisesController, promise */
+
+"use strict";
+
+/**
+ * The main promise debugger UI.
+ */
+let PromisesPanel = {
+  PANEL_INITIALIZED: "panel-initialized",
+
+  initialize: Task.async(function*() {
+    if (PromisesController.destroyed) {
+      return null;
+    }
+    if (this.initialized) {
+      return this.initialized.promise;
+    }
+    this.initialized = promise.defer();
+
+    this.initialized.resolve();
+
+    this.emit(this.PANEL_INITIALIZED);
+  }),
+
+  destroy: Task.async(function*() {
+    if (!this.initialized) {
+      return null;
+    }
+    if (this.destroyed) {
+      return this.destroyed.promise;
+    }
+    this.destroyed = promise.defer();
+
+    this.destroyed.resolve();
+  }),
+};
+
+EventEmitter.decorate(PromisesPanel);

toolkit/devtools/server/actors/promises.js

@@ -241,5 +241,9 @@ exports.PromisesFront = protocol.FrontClass(PromisesActor, {
     protocol.Front.prototype.initialize.call(this, client, form);
     this.actorID = form.promisesActor;
     this.manage(this);
+  },
+
+  destroy: function() {
+    protocol.Front.prototype.destroy.call(this);
   }
 });