Bug 1111020 - Fix key events in perf tool's call trees. r=vp

browser/devtools/performance/test/browser.ini

@@ -22,6 +22,7 @@ support-files =
 [browser_perf-details-01.js]
 [browser_perf-details-02.js]
 [browser_perf-details-03.js]
+[browser_perf-events-calltree.js]
 [browser_perf-front-basic-profiler-01.js]
 [browser_perf-front-basic-timeline-01.js]
 #[browser_perf-front-profiler-01.js] bug 1077464

browser/devtools/performance/test/browser_perf-events-calltree.js

@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that the call tree up/down events work for js calltree and memory calltree.
+ */
+let { ThreadNode } = devtools.require("devtools/profiler/tree-model");
+function spawnTest () {
+  let focus = 0;
+  let focusEvent = () => focus++;
+
+  Services.prefs.setBoolPref(MEMORY_PREF, true);
+
+  let { panel } = yield initPerformance(SIMPLE_URL);
+  let { EVENTS, $, DetailsView, JsCallTreeView, MemoryCallTreeView } = panel.panelWin;
+
+  yield DetailsView.selectView("js-calltree");
+  ok(DetailsView.isViewSelected(JsCallTreeView), "The call tree is now selected.");
+
+  // Make a recording just so the performance tool is in the correct state
+  yield startRecording(panel);
+  let rendered = once(JsCallTreeView, EVENTS.JS_CALL_TREE_RENDERED);
+  yield stopRecording(panel);
+  yield rendered;
+
+  // Mock the profile used so we can get a deterministic tree created
+  let threadNode = new ThreadNode(gSamples);
+  JsCallTreeView._populateCallTree(threadNode);
+  JsCallTreeView.emit(EVENTS.JS_CALL_TREE_RENDERED);
+
+  JsCallTreeView.on("focus", focusEvent);
+
+  click(panel.panelWin, $("#js-calltree-view .call-tree-item"));
+  fireKey("VK_DOWN");
+  fireKey("VK_DOWN");
+  fireKey("VK_DOWN");
+  fireKey("VK_DOWN");
+
+  JsCallTreeView.off("focus", focusEvent);
+
+  is(focus, 4, "several focus events are fired for the js calltree.");
+
+  yield teardown(panel);
+  finish();
+};
+
+let gSamples = [{
+  time: 5,
+  frames: [
+    { category: 8,  location: "(root)" },
+    { category: 8,  location: "A (http://foo/bar/baz:12)" },
+    { category: 16, location: "B (http://foo/bar/baz:34)" },
+    { category: 32, location: "C (http://foo/bar/baz:56)" }
+  ]
+}, {
+  time: 5 + 1,
+  frames: [
+    { category: 8,  location: "(root)" },
+    { category: 8,  location: "A (http://foo/bar/baz:12)" },
+    { category: 16, location: "B (http://foo/bar/baz:34)" },
+    { category: 64, location: "D (http://foo/bar/baz:78)" }
+  ]
+}, {
+  time: 5 + 1 + 2,
+  frames: [
+    { category: 8,  location: "(root)" },
+    { category: 8,  location: "A (http://foo/bar/baz:12)" },
+    { category: 16, location: "B (http://foo/bar/baz:34)" },
+    { category: 64, location: "D (http://foo/bar/baz:78)" }
+  ]
+}, {
+  time: 5 + 1 + 2 + 7,
+  frames: [
+    { category: 8,   location: "(root)" },
+    { category: 8,   location: "A (http://foo/bar/baz:12)" },
+    { category: 128, location: "E (http://foo/bar/baz:90)" },
+    { category: 256, location: "F (http://foo/bar/baz:99)" }
+  ]
+}];

browser/devtools/performance/test/head.js

@@ -391,3 +391,10 @@ function getSourceActor(aSources, aURL) {
   let item = aSources.getItemForAttachment(a => a.source.url === aURL);
   return item && item.value;
 }
+
+/**
+ * Fires a key event, like "VK_UP", "VK_DOWN", etc.
+ */
+function fireKey (e) {
+  EventUtils.synthesizeKey(e, {});
+}

browser/devtools/performance/views/details-js-call-tree.js

@@ -95,6 +95,9 @@ let JsCallTreeView = Heritage.extend(DetailsSubview, {
     // Bind events.
     root.on("link", this._onLink);
 
+    // Pipe "focus" events to the view, mostly for tests
+    root.on("focus", () => this.emit("focus"));
+
     // Clear out other call trees.
     let container = $("#js-calltree-view > .call-tree-cells-container");
     container.innerHTML = "";

browser/devtools/performance/views/details-memory-call-tree.js

@@ -94,6 +94,9 @@ let MemoryCallTreeView = Heritage.extend(DetailsSubview, {
     // Bind events.
     root.on("link", this._onLink);
 
+    // Pipe "focus" events to the view, mostly for tests
+    root.on("focus", () => this.emit("focus"));
+
     // Clear out other call trees.
     let container = $("#memory-calltree-view > .call-tree-cells-container");
     container.innerHTML = "";

browser/devtools/performance/views/details-waterfall.js

@@ -16,7 +16,7 @@ let WaterfallView = Heritage.extend(DetailsSubview, {
   initialize: function () {
     DetailsSubview.initialize.call(this);
 
-    this.waterfall = new Waterfall($("#waterfall-breakdown"), $("#details-pane"), TIMELINE_BLUEPRINT);
+    this.waterfall = new Waterfall($("#waterfall-breakdown"), $("#waterfall-view"), TIMELINE_BLUEPRINT);
     this.details = new MarkerDetails($("#waterfall-details"), $("#waterfall-view > splitter"));
 
     this._onMarkerSelected = this._onMarkerSelected.bind(this);

browser/devtools/timeline/widgets/waterfall.js

@@ -130,7 +130,7 @@ Waterfall.prototype = {
    */
   setupKeys: function() {
     let pane = this._container;
-    pane.parentNode.parentNode.addEventListener("keydown", e => {
+    pane.addEventListener("keydown", e => {
       if (e.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_UP) {
         e.preventDefault();
         this.selectNearestRow(this._selectedRowIdx - 1);