Bug 1259126 - Use a <box> intead of a <deck> for toolbox tabs;r=bgrins

MozReview-Commit-ID: Lgc7Txe5xt1

devtools/client/framework/test/browser_toolbox_select_event.js

@@ -3,98 +3,72 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
-var toolbox;
+"use strict";
 
-function test() {
-  addTab("about:blank").then(function() {
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    gDevTools.showToolbox(target, "webconsole").then(testSelect);
-  });
-}
+const PAGE_URL = "data:text/html;charset=utf-8,test select events";
 
-var called = {
-  inspector: false,
-  webconsole: false,
-  styleeditor: false,
-  //jsdebugger: false,
-}
+add_task(function*() {
+  let tab = yield addTab(PAGE_URL);
 
-function testSelect(aToolbox) {
-  toolbox = aToolbox;
+  let toolbox = yield openToolboxForTab(tab, "webconsole", "bottom");
+  yield testSelectEvent("inspector");
+  yield testSelectEvent("webconsole");
+  yield testSelectEvent("styleeditor");
+  yield testSelectEvent("inspector");
+  yield testSelectEvent("webconsole");
+  yield testSelectEvent("styleeditor");
 
-  info("Toolbox fired a `ready` event");
+  yield testToolSelectEvent("inspector");
+  yield testToolSelectEvent("webconsole");
+  yield testToolSelectEvent("styleeditor");
+  yield toolbox.destroy();
 
-  toolbox.on("select", selectCB);
+  toolbox = yield openToolboxForTab(tab, "webconsole", "side");
+  yield testSelectEvent("inspector");
+  yield testSelectEvent("webconsole");
+  yield testSelectEvent("styleeditor");
+  yield testSelectEvent("inspector");
+  yield testSelectEvent("webconsole");
+  yield testSelectEvent("styleeditor");
+  yield toolbox.destroy();
 
-  toolbox.selectTool("inspector");
-  toolbox.selectTool("webconsole");
-  toolbox.selectTool("styleeditor");
-  //toolbox.selectTool("jsdebugger");
-}
+  toolbox = yield openToolboxForTab(tab, "webconsole", "window");
+  yield testSelectEvent("inspector");
+  yield testSelectEvent("webconsole");
+  yield testSelectEvent("styleeditor");
+  yield testSelectEvent("inspector");
+  yield testSelectEvent("webconsole");
+  yield testSelectEvent("styleeditor");
+  yield toolbox.destroy();
 
-function selectCB(event, id) {
-  called[id] = true;
-  info("toolbox-select event from " + id);
-
-  for (let tool in called) {
-    if (!called[tool]) {
-      return;
-    }
+  /**
+   * Assert that selecting the given toolId raises a select event
+   * @param {toolId} Id of the tool to test
+   */
+  function testSelectEvent(toolId) {
+    return new Promise(resolve => {
+      toolbox.once("select", (event, id) => {
+        is(id, toolId, toolId + " selected");
+        resolve();
+      });
+      toolbox.selectTool(toolId);
+    });
   }
 
-  ok(true, "All the tools fired a 'select event'");
-  toolbox.off("select", selectCB);
-
-  reselect();
-}
-
-function reselect() {
-  for (let tool in called) {
-    called[tool] = false;
+  /**
+   * Assert that selecting the given toolId raises its corresponding
+   * selected event
+   * @param {toolId} Id of the tool to test
+   */
+  function testToolSelectEvent(toolId) {
+    return new Promise(resolve => {
+      toolbox.once(toolId + "-selected", () => {
+        let msg = toolId + " tool selected";
+        is(toolbox.currentToolId, toolId, msg);
+        resolve();
+      });
+      toolbox.selectTool(toolId);
+    });
   }
+});
 
-  toolbox.once("inspector-selected", function() {
-    tidyUpIfAllCalled("inspector");
-  });
-
-  toolbox.once("webconsole-selected", function() {
-    tidyUpIfAllCalled("webconsole");
-  });
-
-  /*
-  toolbox.once("jsdebugger-selected", function() {
-    tidyUpIfAllCalled("jsdebugger");
-  });
-  */
-
-  toolbox.once("styleeditor-selected", function() {
-    tidyUpIfAllCalled("styleeditor");
-  });
-
-  toolbox.selectTool("inspector");
-  toolbox.selectTool("webconsole");
-  toolbox.selectTool("styleeditor");
-  //toolbox.selectTool("jsdebugger");
-}
-
-function tidyUpIfAllCalled(id) {
-  called[id] = true;
-  info("select event from " + id);
-
-  for (let tool in called) {
-    if (!called[tool]) {
-      return;
-    }
-  }
-
-  ok(true, "All the tools fired a {id}-selected event");
-  tidyUp();
-}
-
-function tidyUp() {
-  toolbox.destroy();
-  gBrowser.removeCurrentTab();
-
-  toolbox = null;
-  finish();
-}

devtools/client/framework/test/head.js

@@ -3,6 +3,8 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
+/* import-globals-from shared-head.js */
+
 // shared-head.js handles imports, constants, and utility functions
 Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/framework/test/shared-head.js", this);
 

devtools/client/framework/toolbox.js

@@ -1242,9 +1242,9 @@ Toolbox.prototype = {
         if (typeof panel.open == "function") {
           built = panel.open();
         } else {
-          let deferred = promise.defer();
-          deferred.resolve(panel);
-          built = deferred.promise;
+          let buildDeferred = promise.defer();
+          buildDeferred.resolve(panel);
+          built = buildDeferred.promise;
         }
       }
 
@@ -1286,12 +1286,32 @@ Toolbox.prototype = {
         iframe.removeEventListener("DOMContentLoaded", callback);
         onLoad();
       };
+
       iframe.addEventListener("DOMContentLoaded", callback);
     }
 
     return deferred.promise;
   },
 
+  /**
+   * Mark all in collection as unselected; and id as selected
+   * @param {string} collection
+   *        DOM collection of items
+   * @param {string} id
+   *        The Id of the item within the collection to select
+   */
+  selectSingleNode: function(collection, id) {
+    [...collection].forEach(node => {
+      if (node.id === id) {
+        node.setAttribute("selected", "true");
+        node.setAttribute("aria-selected", "true");
+      } else {
+        node.removeAttribute("selected");
+        node.removeAttribute("aria-selected");
+      }
+    });
+  },
+
   /**
    * Switch to the tool with the given id
    *
@@ -1301,15 +1321,8 @@ Toolbox.prototype = {
   selectTool: function(id) {
     this.emit("before-select", id);
 
-    let selected = this.doc.querySelector(".devtools-tab[selected]");
-    if (selected) {
-      selected.removeAttribute("selected");
-      selected.setAttribute("aria-selected", "false");
-    }
-
-    let tab = this.doc.getElementById("toolbox-tab-" + id);
-    tab.setAttribute("selected", "true");
-    tab.setAttribute("aria-selected", "true");
+    let tabs = this.doc.querySelectorAll(".devtools-tab");
+    this.selectSingleNode(tabs, "toolbox-tab-" + id);
 
     // If options is selected, the separator between it and the
     // command buttons should be hidden.
@@ -1332,7 +1345,7 @@ Toolbox.prototype = {
       throw new Error("Can't select tool, wait for toolbox 'ready' event");
     }
 
-    tab = this.doc.getElementById("toolbox-tab-" + id);
+    let tab = this.doc.getElementById("toolbox-tab-" + id);
 
     if (tab) {
       if (this.currentToolId) {
@@ -1350,9 +1363,8 @@ Toolbox.prototype = {
     tabstrip.selectedItem = tab || tabstrip.childNodes[0];
 
     // and select the right iframe
-    let deck = this.doc.getElementById("toolbox-deck");
-    let panel = this.doc.getElementById("toolbox-panel-" + id);
-    deck.selectedPanel = panel;
+    let toolboxPanels = this.doc.querySelectorAll(".toolbox-panel");
+    this.selectSingleNode(toolboxPanels, "toolbox-panel-" + id);
 
     this.lastUsedToolId = this.currentToolId;
     this.currentToolId = id;

devtools/client/framework/toolbox.xul

@@ -142,7 +142,7 @@
            height set to a small value without flexing to fill up extra
            space. There must be a flex on both to ensure that the console
            panel itself is sized properly -->
-      <deck id="toolbox-deck" flex="1000" minheight="75" />
+      <box id="toolbox-deck" flex="1000" minheight="75" />
       <splitter id="toolbox-console-splitter" class="devtools-horizontal-splitter" hidden="true" />
       <box minheight="75" flex="1" id="toolbox-panel-webconsole" collapsed="true" />
     </vbox>

devtools/client/themes/toolbars.css

@@ -796,6 +796,16 @@
   margin: 0;
 }
 
+.toolbox-panel {
+  display: -moz-box;
+  -moz-box-flex: 1;
+  visibility: collapse;
+}
+
+.toolbox-panel[selected] {
+  visibility: visible;
+}
+
 .devtools-tab {
   -moz-appearance: none;
   -moz-binding: url("chrome://global/content/bindings/general.xml#control-item");