Bug 1131577 - Waterfall view can scroll outside the visible bounds if the flamegraph view was initialized before a recording was started, r=jsantell

browser/devtools/performance/test/browser.ini

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

browser/devtools/performance/test/browser_perf-details-03.js

@@ -1,30 +1,31 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let MEMORY_PREF = "devtools.performance.ui.enable-memory";
-
 /**
  * Tests that the details view hides the memory buttons when `enable-memory` is toggled,
  * and that it switches to default panel if toggling while a memory panel is selected.
  */
 function spawnTest () {
   let { panel } = yield initPerformance(SIMPLE_URL);
-  let { EVENTS, DetailsView } = panel.panelWin;
+  let { EVENTS, PerformanceController, OverviewView, DetailsView } = panel.panelWin;
   let { $, WaterfallView, MemoryCallTreeView, MemoryFlameGraphView } = panel.panelWin;
 
-  Services.prefs.setBoolPref(MEMORY_PREF, false);
-
   ok(DetailsView.isViewSelected(WaterfallView),
     "The waterfall view is selected by default in the details view.");
 
+  // The toolbar buttons will always be hidden when a recording isn't available,
+  // so make sure we have one that's finished.
+  yield startRecording(panel);
+  yield stopRecording(panel);
+
   let flameBtn = $("toolbarbutton[data-view='memory-flamegraph']");
   let callBtn = $("toolbarbutton[data-view='memory-calltree']");
 
+  Services.prefs.setBoolPref(MEMORY_PREF, false);
   is(flameBtn.hidden, true, "memory-flamegraph button hidden when enable-memory=false");
   is(callBtn.hidden, true, "memory-calltree button hidden when enable-memory=false");
 
   Services.prefs.setBoolPref(MEMORY_PREF, true);
-
   is(flameBtn.hidden, false, "memory-flamegraph button shown when enable-memory=true");
   is(callBtn.hidden, false, "memory-calltree button shown when enable-memory=true");
 
@@ -33,6 +34,17 @@ function spawnTest () {
   DetailsView.selectView("memory-calltree");
   yield Promise.all([selected, notified]);
 
+  ok(DetailsView.isViewSelected(MemoryCallTreeView),
+    "The memory call tree view can now be selected.");
+
+  selected = DetailsView.whenViewSelected(MemoryFlameGraphView);
+  notified = DetailsView.once(EVENTS.DETAILS_VIEW_SELECTED);
+  DetailsView.selectView("memory-flamegraph");
+  yield Promise.all([selected, notified]);
+
+  ok(DetailsView.isViewSelected(MemoryFlameGraphView),
+    "The memory flamegraph view can now be selected.");
+
   selected = DetailsView.whenViewSelected(WaterfallView);
   notified = DetailsView.once(EVENTS.DETAILS_VIEW_SELECTED);
   Services.prefs.setBoolPref(MEMORY_PREF, false);
@@ -43,16 +55,30 @@ function spawnTest () {
 
   Services.prefs.setBoolPref(MEMORY_PREF, true);
 
+  selected = DetailsView.whenViewSelected(MemoryCallTreeView);
+  notified = DetailsView.once(EVENTS.DETAILS_VIEW_SELECTED);
+  DetailsView.selectView("memory-calltree");
+  yield Promise.all([selected, notified]);
+
+  ok(DetailsView.isViewSelected(MemoryCallTreeView),
+    "The memory call tree view can be selected again after re-enabling memory.");
+
   selected = DetailsView.whenViewSelected(MemoryFlameGraphView);
   notified = DetailsView.once(EVENTS.DETAILS_VIEW_SELECTED);
   DetailsView.selectView("memory-flamegraph");
   yield Promise.all([selected, notified]);
 
+  ok(DetailsView.isViewSelected(MemoryFlameGraphView),
+    "The memory flamegraph view can be selected again after re-enabling memory.");
+
   selected = DetailsView.whenViewSelected(WaterfallView);
   notified = DetailsView.once(EVENTS.DETAILS_VIEW_SELECTED);
   Services.prefs.setBoolPref(MEMORY_PREF, false);
   yield Promise.all([selected, notified]);
 
+  ok(DetailsView.isViewSelected(WaterfallView),
+    "The waterfall view is now selected when toggling off enable-memory when a memory panel is selected.");
+
   yield teardown(panel);
   finish();
 }

browser/devtools/performance/test/browser_perf-details-04.js

@@ -0,0 +1,87 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that the details view hides the toolbar buttons when a recording
+ * doesn't exist or is in progress.
+ */
+function spawnTest () {
+  let { panel } = yield initPerformance(SIMPLE_URL);
+  let { EVENTS, $, $$, PerformanceController, RecordingsView, DetailsView } = panel.panelWin;
+
+  let waterfallBtn = $("toolbarbutton[data-view='waterfall']");
+  let jsFlameBtn = $("toolbarbutton[data-view='js-flamegraph']");
+  let jsCallBtn = $("toolbarbutton[data-view='js-calltree']");
+  let memFlameBtn = $("toolbarbutton[data-view='memory-flamegraph']");
+  let memCallBtn = $("toolbarbutton[data-view='memory-calltree']");
+
+  is(waterfallBtn.hidden, true, "waterfall button hidden when tool starts.");
+  is(jsFlameBtn.hidden, true, "js-flamegraph button hidden when tool starts.");
+  is(jsCallBtn.hidden, true, "js-calltree button hidden when tool starts.");
+  is(memFlameBtn.hidden, true, "memory-flamegraph button hidden when tool starts.");
+  is(memCallBtn.hidden, true, "memory-calltree button hidden when tool starts.");
+
+  yield startRecording(panel);
+
+  is(waterfallBtn.hidden, true, "waterfall button hidden when recording starts.");
+  is(jsFlameBtn.hidden, true, "js-flamegraph button hidden when recording starts.");
+  is(jsCallBtn.hidden, true, "js-calltree button hidden when recording starts.");
+  is(memFlameBtn.hidden, true, "memory-flamegraph button hidden when recording starts.");
+  is(memCallBtn.hidden, true, "memory-calltree button hidden when recording starts.");
+
+  yield stopRecording(panel);
+
+  is(waterfallBtn.hidden, false, "waterfall button visible when recording ends.");
+  is(jsFlameBtn.hidden, false, "js-flamegraph button visible when recording ends.");
+  is(jsCallBtn.hidden, false, "js-calltree button visible when recording ends.");
+  is(memFlameBtn.hidden, true, "memory-flamegraph button hidden when recording ends.");
+  is(memCallBtn.hidden, true, "memory-calltree button hidden when recording ends.");
+
+  yield startRecording(panel);
+
+  is(waterfallBtn.hidden, true, "waterfall button hidden when another recording starts.");
+  is(jsFlameBtn.hidden, true, "js-flamegraph button hidden when another recording starts.");
+  is(jsCallBtn.hidden, true, "js-calltree button hidden when another recording starts.");
+  is(memFlameBtn.hidden, true, "memory-flamegraph button hidden when another recording starts.");
+  is(memCallBtn.hidden, true, "memory-calltree button hidden when another recording starts.");
+
+  let select = once(PerformanceController, EVENTS.RECORDING_SELECTED);
+  mousedown(panel.panelWin, $$(".recording-item")[0]);
+  yield select;
+
+  is(RecordingsView.selectedIndex, 0,
+    "The first recording was selected again.");
+
+  is(waterfallBtn.hidden, false, "waterfall button visible when first recording selected.");
+  is(jsFlameBtn.hidden, false, "js-flamegraph button visible when first recording selected.");
+  is(jsCallBtn.hidden, false, "js-calltree button visible when first recording selected.");
+  is(memFlameBtn.hidden, true, "memory-flamegraph button hidden when first recording selected.");
+  is(memCallBtn.hidden, true, "memory-calltree button hidden when first recording selected.");
+
+  select = once(PerformanceController, EVENTS.RECORDING_SELECTED);
+  mousedown(panel.panelWin, $$(".recording-item")[1]);
+  yield select;
+
+  is(RecordingsView.selectedIndex, 1,
+    "The second recording was selected again.");
+
+  is(waterfallBtn.hidden, true, "waterfall button still hidden when second recording selected.");
+  is(jsFlameBtn.hidden, true, "js-flamegraph button still hidden when second recording selected.");
+  is(jsCallBtn.hidden, true, "js-calltree button still hidden when second recording selected.");
+  is(memFlameBtn.hidden, true, "memory-flamegraph button still hidden when second recording selected.");
+  is(memCallBtn.hidden, true, "memory-calltree button still hidden when second recording selected.");
+
+  yield stopRecording(panel);
+
+  is(RecordingsView.selectedIndex, 1,
+    "The second recording is still selected.");
+
+  is(waterfallBtn.hidden, false, "waterfall button visible when second recording finished.");
+  is(jsFlameBtn.hidden, false, "js-flamegraph button visible when second recording finished.");
+  is(jsCallBtn.hidden, false, "js-calltree button visible when second recording finished.");
+  is(memFlameBtn.hidden, true, "memory-flamegraph button hidden when second recording finished.");
+  is(memCallBtn.hidden, true, "memory-calltree button hidden when second recording finished.");
+
+  yield teardown(panel);
+  finish();
+}

browser/devtools/performance/test/browser_perf-details-memory-calltree-render.js

@@ -8,6 +8,9 @@ function spawnTest () {
   let { panel } = yield initPerformance(SIMPLE_URL);
   let { EVENTS, DetailsView, MemoryCallTreeView } = panel.panelWin;
 
+  // Enable memory to test.
+  Services.prefs.setBoolPref(MEMORY_PREF, true);
+
   yield DetailsView.selectView("memory-calltree");
   ok(DetailsView.isViewSelected(MemoryCallTreeView), "The call tree is now selected.");
 

browser/devtools/performance/test/browser_perf-details-memory-flamegraph-render.js

@@ -8,6 +8,9 @@ function spawnTest () {
   let { panel } = yield initPerformance(SIMPLE_URL);
   let { EVENTS, DetailsView, MemoryFlameGraphView } = panel.panelWin;
 
+  // Enable memory to test.
+  Services.prefs.setBoolPref(MEMORY_PREF, true);
+
   yield DetailsView.selectView("memory-flamegraph");
   ok(DetailsView.isViewSelected(MemoryFlameGraphView), "The flamegraph is now selected.");
 

browser/devtools/performance/test/head.js

@@ -262,6 +262,10 @@ function click (win, button) {
   EventUtils.sendMouseEvent({ type: "click" }, button, win);
 }
 
+function mousedown (win, button) {
+  EventUtils.sendMouseEvent({ type: "mousedown" }, button, win);
+}
+
 function* startRecording(panel) {
   let win = panel.panelWin;
   let clicked = panel.panelWin.PerformanceView.once(win.EVENTS.UI_START_RECORDING);

browser/devtools/performance/views/details.js

@@ -29,6 +29,7 @@ let DetailsView = {
     this.toolbar = $("#performance-toolbar-controls-detail-views");
 
     this._onViewToggle = this._onViewToggle.bind(this);
+    this._onRecordingStoppedOrSelected = this._onRecordingStoppedOrSelected.bind(this);
     this.setAvailableViews = this.setAvailableViews.bind(this);
 
     for (let button of $$("toolbarbutton[data-view]", this.toolbar)) {
@@ -38,6 +39,8 @@ let DetailsView = {
     yield this.selectView(DEFAULT_DETAILS_SUBVIEW);
     yield this.setAvailableViews();
 
+    PerformanceController.on(EVENTS.RECORDING_STOPPED, this._onRecordingStoppedOrSelected);
+    PerformanceController.on(EVENTS.RECORDING_SELECTED, this._onRecordingStoppedOrSelected);
     PerformanceController.on(EVENTS.PREF_CHANGED, this.setAvailableViews);
   }),
 
@@ -53,6 +56,8 @@ let DetailsView = {
       component.initialized && (yield component.view.destroy());
     }
 
+    PerformanceController.off(EVENTS.RECORDING_STOPPED, this._onRecordingStoppedOrSelected);
+    PerformanceController.off(EVENTS.RECORDING_SELECTED, this._onRecordingStoppedOrSelected);
     PerformanceController.off(EVENTS.PREF_CHANGED, this.setAvailableViews);
   }),
 
@@ -63,15 +68,15 @@ let DetailsView = {
    */
   setAvailableViews: Task.async(function* () {
     for (let [name, { view, pref }] of Iterator(this.components)) {
-      if (!pref) {
-        continue;
-      }
-      let value = PerformanceController.getPref(pref);
-      $(`toolbarbutton[data-view=${name}]`).hidden = !value;
+      let recording = PerformanceController.getCurrentRecording();
+
+      let isRecorded = recording && !recording.isRecording();
+      let isEnabled = !pref || PerformanceController.getPref(pref);
+      $(`toolbarbutton[data-view=${name}]`).hidden = !isRecorded || !isEnabled;
 
       // If the view is currently selected and not enabled, go back to the
       // default view.
-      if (!value && this.isViewSelected(view)) {
+      if (!isEnabled && this.isViewSelected(view)) {
         yield this.selectView(DEFAULT_DETAILS_SUBVIEW);
       }
     }
@@ -159,6 +164,13 @@ let DetailsView = {
     }
   }),
 
+  /**
+   * Called when recording stops or is selected.
+   */
+  _onRecordingStoppedOrSelected: function(_, recording) {
+    this.setAvailableViews();
+  },
+
   /**
    * Called when a view button is clicked.
    */