1105014-sync-waterfall-view.patch

From ce7ca9ead42687a7735eaced811411e31bbe191b Mon Sep 17 00:00:00 2001
From: Jordan Santell <jsantell@gmail.com>
Date: Wed, 10 Dec 2014 10:55:44 -0800
Subject: Bug 1105014 - Sync overview selection with waterfall details
 view. r=vp

diff --git a/browser/devtools/performance/test/browser.ini b/browser/devtools/performance/test/browser.ini
index 6e56842..536eecc 100644
--- a/browser/devtools/performance/test/browser.ini
+++ b/browser/devtools/performance/test/browser.ini
@@ -33,8 +33,9 @@ support-files =
 [browser_perf-overview-render-01.js]
 [browser_perf-overview-render-02.js]
 [browser_perf-overview-selection.js]
 
 [browser_perf-details.js]
 [browser_perf-details-calltree-render-01.js]
 [browser_perf-details-calltree-render-02.js]
 [browser_perf-details-waterfall-render-01.js]
+[browser_perf-details-waterfall-render-02.js]
diff --git a/browser/devtools/performance/test/browser_perf-details-calltree-render-02.js b/browser/devtools/performance/test/browser_perf-details-calltree-render-02.js
index 6d3d097..af5fad7 100644
--- a/browser/devtools/performance/test/browser_perf-details-calltree-render-02.js
+++ b/browser/devtools/performance/test/browser_perf-details-calltree-render-02.js
@@ -1,13 +1,14 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 /**
- * Tests that the call tree view renders after recording.
+ * Tests that selection in the overview renders the appropriate
+ * subset in the call tree.
  */
 function spawnTest () {
   let { panel } = yield initPerformance(SIMPLE_URL);
   let { EVENTS, CallTreeView, OverviewView } = panel.panelWin;
 
   let updated = 0;
   CallTreeView.on(EVENTS.CALL_TREE_RENDERED, () => updated++);
 
diff --git a/browser/devtools/performance/test/browser_perf-details-waterfall-render-02.js b/browser/devtools/performance/test/browser_perf-details-waterfall-render-02.js
new file mode 100644
index 0000000..7814edb
--- /dev/null
+++ b/browser/devtools/performance/test/browser_perf-details-waterfall-render-02.js
@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that selection in the overview renders the appropriate
+ * subset in the waterfall.
+ */
+function spawnTest () {
+  let { panel } = yield initPerformance(SIMPLE_URL);
+  let { EVENTS, WaterfallView, OverviewView } = panel.panelWin;
+
+  let updated = 0;
+  WaterfallView.on(EVENTS.WATERFALL_RENDERED, () => updated++);
+
+  let rendered = once(WaterfallView, EVENTS.WATERFALL_RENDERED);
+
+  yield startRecording(panel);
+  yield busyWait(100);
+  yield stopRecording(panel);
+  yield rendered;
+
+  rendered = once(WaterfallView, EVENTS.WATERFALL_RENDERED);
+  OverviewView.emit(EVENTS.OVERVIEW_RANGE_SELECTED, { beginAt: 0, endAt: 10 });
+  yield rendered;
+
+  ok(true, "Waterfall rerenders when a range in the overview graph is selected.");
+
+  rendered = once(WaterfallView, EVENTS.WATERFALL_RENDERED);
+  OverviewView.emit(EVENTS.OVERVIEW_RANGE_CLEARED);
+  yield rendered;
+
+  ok(true, "Waterfall rerenders when a range in the overview graph is removed.");
+
+  is(updated, 3, "Waterfall rerendered 3 times.");
+
+  yield teardown(panel);
+  finish();
+}
diff --git a/browser/devtools/performance/views/details-waterfall.js b/browser/devtools/performance/views/details-waterfall.js
index 686c42b..17e5f5d 100644
--- a/browser/devtools/performance/views/details-waterfall.js
+++ b/browser/devtools/performance/views/details-waterfall.js
@@ -15,55 +15,79 @@ let WaterfallView = {
    * Sets up the view with event binding.
    */
   initialize: Task.async(function *() {
     this.el = $("#waterfall-view");
     this._stop = this._stop.bind(this);
     this._start = this._start.bind(this);
     this._onTimelineData = this._onTimelineData.bind(this);
     this._onMarkerSelected = this._onMarkerSelected.bind(this);
+    this._onRangeChange = this._onRangeChange.bind(this);
     this._onResize = this._onResize.bind(this);
 
     this.graph = new Waterfall($("#waterfall-graph"), $("#details-pane"));
     this.markerDetails = new MarkerDetails($("#waterfall-details"), $("#waterfall-view > splitter"));
-
     this.graph.on("selected", this._onMarkerSelected);
     this.graph.on("unselected", this._onMarkerSelected);
     this.markerDetails.on("resize", this._onResize);
 
     PerformanceController.on(EVENTS.RECORDING_STARTED, this._start);
     PerformanceController.on(EVENTS.RECORDING_STOPPED, this._stop);
     PerformanceController.on(EVENTS.TIMELINE_DATA, this._onTimelineData);
+    OverviewView.on(EVENTS.OVERVIEW_RANGE_SELECTED, this._onRangeChange);
+    OverviewView.on(EVENTS.OVERVIEW_RANGE_CLEARED, this._onRangeChange);
     yield this.graph.recalculateBounds();
   }),
 
   /**
    * Unbinds events.
    */
   destroy: function () {
     this.graph.off("selected", this._onMarkerSelected);
     this.graph.off("unselected", this._onMarkerSelected);
     this.markerDetails.off("resize", this._onResize);
+    this.markerDetails.destroy();
 
     PerformanceController.off(EVENTS.RECORDING_STARTED, this._start);
     PerformanceController.off(EVENTS.RECORDING_STOPPED, this._stop);
     PerformanceController.off(EVENTS.TIMELINE_DATA, this._onTimelineData);
+    OverviewView.off(EVENTS.OVERVIEW_RANGE_SELECTED, this._onRangeChange);
+    OverviewView.off(EVENTS.OVERVIEW_RANGE_CLEARED, this._onRangeChange);
   },
 
-  render: Task.async(function *() {
+  render: Task.async(function *(markers, epoch, startTime, endTime) {
+    markers = markers || this._markers;
+    epoch = epoch || this._startTime;
+    startTime = startTime || this._startTime;
+    endTime = endTime || this._endTime;
+    this.graph.resetSelection();
     yield this.graph.recalculateBounds();
-    this.graph.setData(this._markers, this._startTime, this._startTime, this._endTime);
+    this.graph.setData(markers, epoch, startTime, endTime);
     this.emit(EVENTS.WATERFALL_RENDERED);
   }),
 
   /**
    * Event handlers
    */
 
   /**
+   * Fired when a range is selected or cleared in the OverviewView.
+   */
+  _onRangeChange: function (_, params) {
+    // When a range is cleared, we'll have no beginAt/endAt data,
+    // so the rebuild will just render all the data again.
+    let { beginAt, endAt } = params || {};
+
+    // The `startAt` and `endAt` values are delta from `this._startTime`,
+    let start = this._startTime + (beginAt || 0);
+    let end = this._startTime + (endAt || this._endTime);
+    this.render(this._markers, this._startTime, start, end);
+  },
+
+  /**
    * Called when recording starts.
    */
   _start: function (_, { startTime }) {
     this._startTime = startTime;
     this._endTime = startTime;
     this.graph.clearView();
   },
 
-- 
1.8.4.2