Bug 1072208 - Implement new events for ToolSidebar. r=bgrins

browser/devtools/framework/sidebar.js

@@ -49,6 +49,8 @@ function ToolSidebar(tabbox, panel, uid, showTabstripe=true)
   if (!showTabstripe) {
     this._tabbox.setAttribute("hidetabs", "true");
   }
+
+  this._toolPanel.emit("sidebar-created", this);
 }
 
 exports.ToolSidebar = ToolSidebar;
@@ -210,6 +212,8 @@ ToolSidebar.prototype = {
       this._tabbox.width = this._width;
     }
     this._tabbox.removeAttribute("hidden");
+
+    this.emit("show");
   },
 
   /**
@@ -218,6 +222,8 @@ ToolSidebar.prototype = {
   hide: function ToolSidebar_hide() {
     Services.prefs.setIntPref("devtools.toolsidebar-width." + this._uid, this._tabbox.width);
     this._tabbox.setAttribute("hidden", "true");
+
+    this.emit("hide");
   },
 
   /**
@@ -257,6 +263,8 @@ ToolSidebar.prototype = {
       this._telemetry.toolClosed(this._currentTool);
     }
 
+    this._toolPanel.emit("sidebar-destroyed", this);
+
     this._tabs = null;
     this._tabbox = null;
     this._panelDoc = null;

browser/devtools/framework/test/browser.ini

@@ -30,6 +30,7 @@ skip-if = e10s # Bug 1070837 - devtools/framework/toolbox.js |doc| getter not e1
 [browser_toolbox_select_event.js]
 skip-if = e10s # Bug 1069044 - destroyInspector may hang during shutdown
 [browser_toolbox_sidebar.js]
+[browser_toolbox_sidebar_events.js]
 [browser_toolbox_tabsswitch_shortcuts.js]
 [browser_toolbox_tool_ready.js]
 [browser_toolbox_tool_remote_reopen.js]

browser/devtools/framework/test/browser_toolbox_sidebar_events.js

@@ -0,0 +1,90 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function test() {
+  const Cu = Components.utils;
+  const { ToolSidebar } = devtools.require("devtools/framework/sidebar");
+
+  const toolURL = "data:text/xml;charset=utf8,<?xml version='1.0'?>" +
+                  "<?xml-stylesheet href='chrome://browser/skin/devtools/common.css' type='text/css'?>" +
+                  "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'>" +
+                  "<hbox flex='1'><description flex='1'>foo</description><splitter class='devtools-side-splitter'/>" +
+                  "<tabbox flex='1' id='sidebar' class='devtools-sidebar-tabs'><tabs/><tabpanels flex='1'/></tabbox>" +
+                  "</hbox>" +
+                  "</window>";
+
+  const tab1URL = "data:text/html;charset=utf8,<title>1</title><p>1</p>";
+
+  let collectedEvents = [];
+
+  let toolDefinition = {
+    id: "testTool1072208",
+    visibilityswitch: "devtools.testTool1072208.enabled",
+    url: toolURL,
+    label: "Test tool",
+    isTargetSupported: function() true,
+    build: function(iframeWindow, toolbox) {
+      let deferred = promise.defer();
+      executeSoon(() => {
+        deferred.resolve({
+          target: toolbox.target,
+          toolbox: toolbox,
+          isReady: true,
+          destroy: function(){},
+          panelDoc: iframeWindow.document,
+        });
+      });
+      return deferred.promise;
+    },
+  };
+
+  gDevTools.registerTool(toolDefinition);
+
+  addTab("about:blank").then(function(aTab) {
+    let target = TargetFactory.forTab(aTab);
+    gDevTools.showToolbox(target, toolDefinition.id).then(function(toolbox) {
+      let panel = toolbox.getPanel(toolDefinition.id);
+      ok(true, "Tool open");
+
+      panel.once("sidebar-created", function(event, id) {
+        collectedEvents.push(event);
+      });
+
+      panel.once("sidebar-destroyed", function(event, id) {
+        collectedEvents.push(event);
+      });
+
+      let tabbox = panel.panelDoc.getElementById("sidebar");
+      panel.sidebar = new ToolSidebar(tabbox, panel, "testbug1072208", true);
+
+      panel.sidebar.once("show", function(event, id) {
+        collectedEvents.push(event);
+      });
+
+      panel.sidebar.once("hide", function(event, id) {
+        collectedEvents.push(event);
+      });
+
+      panel.sidebar.once("tab1-selected", () => finishUp(panel));
+      panel.sidebar.addTab("tab1", tab1URL, true);
+      panel.sidebar.show();
+    }).then(null, console.error);
+  });
+
+  function finishUp(panel) {
+    panel.sidebar.hide();
+    panel.sidebar.destroy();
+
+    let events = collectedEvents.join(":");
+    is(events, "sidebar-created:show:hide:sidebar-destroyed",
+      "Found the right amount of collected events.");
+
+    gDevTools.unregisterTool(toolDefinition.id);
+    gBrowser.removeCurrentTab();
+
+    executeSoon(function() {
+      finish();
+    });
+  }
+}
+

browser/devtools/framework/toolbox.js

@@ -897,6 +897,15 @@ Toolbox.prototype = {
         let panel = built;
         iframe.panel = panel;
 
+        // The panel instance is expected to fire (and listen to) various
+        // framework events, so make sure it's properly decorated with
+        // appropriate API (on, off, once, emit).
+        // In this case we decorate panel instances directly returned by
+        // the tool definition 'build' method.
+        if (typeof panel.emit == "undefined") {
+          EventEmitter.decorate(panel);
+        }
+
         gDevTools.emit(id + "-build", this, panel);
         this.emit(id + "-build", panel);
 
@@ -915,6 +924,14 @@ Toolbox.prototype = {
       promise.resolve(built).then((panel) => {
         this._toolPanels.set(id, panel);
 
+        // Make sure to decorate panel object with event API also in case
+        // where the tool definition 'build' method returns only a promise
+        // and the actual panel instance is available as soon as the
+        // promise is resolved.
+        if (typeof panel.emit == "undefined") {
+          EventEmitter.decorate(panel);
+        }
+
         gDevTools.emit(id + "-ready", this, panel);
         this.emit(id + "-ready", panel);
 

browser/devtools/scratchpad/scratchpad.js

@@ -45,6 +45,7 @@ const require   = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).de
 const Telemetry = require("devtools/shared/telemetry");
 const Editor    = require("devtools/sourceeditor/editor");
 const TargetFactory = require("devtools/framework/target").TargetFactory;
+const EventEmitter = require("devtools/toolkit/event-emitter");
 
 const { Promise: promise } = Cu.import("resource://gre/modules/Promise.jsm", {});
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
@@ -2169,6 +2170,10 @@ ScratchpadTarget.prototype = Heritage.extend(ScratchpadTab.prototype, {
  */
 function ScratchpadSidebar(aScratchpad)
 {
+  // Make sure to decorate this object. ToolSidebar requires the parent
+  // panel to support event (emit) API.
+  EventEmitter.decorate(this);
+
   let ToolSidebar = require("devtools/framework/sidebar").ToolSidebar;
   let tabbox = document.querySelector("#scratchpad-sidebar");
   this._sidebar = new ToolSidebar(tabbox, this, "scratchpad");