Bug 1120225 - Move the details view toggle buttons in the top toolbar, r=jsantell
authorVictor Porof <vporof@mozilla.com>
Mon, 12 Jan 2015 10:48:35 -0500
changeset 223412 b2e112d0e6af6471db3e24ba9ed2a3fdaba985e6
parent 223295 7a776d0c87e6be3863a5ad389d13afff948a5a5a
child 223413 6b85abb2bc19fcf3d76eeb70861d38350af9360c
push id28093
push userkwierso@gmail.com
push dateTue, 13 Jan 2015 04:00:18 +0000
treeherdermozilla-central@3d846527576f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjsantell
bugs1120225
milestone37.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1120225 - Move the details view toggle buttons in the top toolbar, r=jsantell
browser/devtools/performance/performance.xul
browser/devtools/performance/views/details-waterfall.js
browser/devtools/performance/views/details.js
--- a/browser/devtools/performance/performance.xul
+++ b/browser/devtools/performance/performance.xul
@@ -23,54 +23,52 @@
   <script type="application/javascript" src="performance/views/details-flamegraph.js"/>
 
   <vbox class="theme-body" flex="1">
     <toolbar id="performance-toolbar" class="devtools-toolbar">
       <hbox id="performance-toolbar-controls-recordings" class="devtools-toolbarbutton-group">
         <toolbarbutton id="record-button"
                        class="devtools-toolbarbutton"
                        tooltiptext="&profilerUI.recordButton.tooltip;"/>
-        <toolbarbutton id="clear-button"
-                       class="devtools-toolbarbutton"
-                       label="&profilerUI.clearButton;"/>
       </hbox>
-      <spacer flex="1"></spacer>
-      <hbox id="performance-toolbar-controls-storage" class="devtools-toolbarbutton-group">
-        <toolbarbutton id="import-button"
-                       class="devtools-toolbarbutton"
-                       label="&profilerUI.importButton;"/>
-        <toolbarbutton id="export-button"
-                       class="devtools-toolbarbutton"
-                       label="&profilerUI.exportButton;"/>
-      </hbox>
-    </toolbar>
-
-    <vbox id="overview-pane">
-      <hbox id="markers-overview"/>
-      <hbox id="memory-overview"/>
-      <hbox id="time-framerate"/>
-    </vbox>
-
-    <toolbar id="details-toolbar" class="devtools-toolbar">
-      <hbox class="devtools-toolbarbutton-group">
+      <hbox id="performance-toolbar-controls-detail-views" class="devtools-toolbarbutton-group">
         <toolbarbutton id="select-waterfall-view"
                        class="devtools-toolbarbutton"
                        data-view="waterfall" />
         <toolbarbutton id="select-calltree-view"
                        class="devtools-toolbarbutton"
                        data-view="calltree" />
         <toolbarbutton id="select-flamegraph-view"
                        class="devtools-toolbarbutton"
                        data-view="flamegraph" />
       </hbox>
+      <spacer flex="1"></spacer>
+      <hbox id="performance-toolbar-controls-storage" class="devtools-toolbarbutton-group">
+        <toolbarbutton id="import-button"
+                       class="devtools-toolbarbutton"
+                       label="&profilerUI.importButton;"/>
+        <toolbarbutton id="export-button"
+                       class="devtools-toolbarbutton"
+                       label="&profilerUI.exportButton;"/>
+        <toolbarbutton id="clear-button"
+                       class="devtools-toolbarbutton"
+                       label="&profilerUI.clearButton;"/>
+      </hbox>
     </toolbar>
 
+    <vbox id="overview-pane">
+      <hbox id="markers-overview"/>
+      <hbox id="memory-overview"/>
+      <hbox id="time-framerate"/>
+    </vbox>
+
     <deck id="details-pane" flex="1">
+
       <hbox id="waterfall-view" flex="1">
-        <vbox id="waterfall-graph" flex="1" />
+        <vbox id="waterfall-breakdown" flex="1" />
         <splitter class="devtools-side-splitter"/>
         <vbox id="waterfall-details"
               class="theme-sidebar"
               width="150"
               height="150"/>
       </hbox>
 
       <vbox id="calltree-view" flex="1">
--- a/browser/devtools/performance/views/details-waterfall.js
+++ b/browser/devtools/performance/views/details-waterfall.js
@@ -11,88 +11,89 @@ let WaterfallView = {
    * Sets up the view with event binding.
    */
   initialize: Task.async(function *() {
     this._onRecordingStarted = this._onRecordingStarted.bind(this);
     this._onRecordingStopped = this._onRecordingStopped.bind(this);
     this._onMarkerSelected = this._onMarkerSelected.bind(this);
     this._onResize = this._onResize.bind(this);
 
-    this.graph = new Waterfall($("#waterfall-graph"), $("#details-pane"), TIMELINE_BLUEPRINT);
-    this.markerDetails = new MarkerDetails($("#waterfall-details"), $("#waterfall-view > splitter"));
+    this.waterfall = new Waterfall($("#waterfall-breakdown"), $("#details-pane"), TIMELINE_BLUEPRINT);
+    this.details = 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);
+    this.waterfall.on("selected", this._onMarkerSelected);
+    this.waterfall.on("unselected", this._onMarkerSelected);
+    this.details.on("resize", this._onResize);
 
     PerformanceController.on(EVENTS.RECORDING_STARTED, this._onRecordingStarted);
     PerformanceController.on(EVENTS.RECORDING_STOPPED, this._onRecordingStopped);
 
-    this.graph.recalculateBounds();
+    this.waterfall.recalculateBounds();
   }),
 
   /**
    * Unbinds events.
    */
   destroy: function () {
-    this.graph.off("selected", this._onMarkerSelected);
-    this.graph.off("unselected", this._onMarkerSelected);
-    this.markerDetails.off("resize", this._onResize);
+    this.waterfall.off("selected", this._onMarkerSelected);
+    this.waterfall.off("unselected", this._onMarkerSelected);
+    this.details.off("resize", this._onResize);
 
     PerformanceController.off(EVENTS.RECORDING_STARTED, this._onRecordingStarted);
     PerformanceController.off(EVENTS.RECORDING_STOPPED, this._onRecordingStopped);
   },
 
   /**
    * Method for handling all the set up for rendering a new waterfall.
    */
   render: function() {
     let { startTime, endTime } = PerformanceController.getInterval();
     let markers = PerformanceController.getMarkers();
 
-    this.graph.setData(markers, startTime, startTime, endTime);
+    this.waterfall.setData(markers, startTime, startTime, endTime);
+
     this.emit(EVENTS.WATERFALL_RENDERED);
   },
 
   /**
    * Called when recording starts.
    */
   _onRecordingStarted: function () {
-    this.graph.clearView();
+    this.waterfall.clearView();
   },
 
   /**
    * Called when recording stops.
    */
   _onRecordingStopped: function () {
     this.render();
   },
 
   /**
    * Called when a marker is selected in the waterfall view,
    * updating the markers detail view.
    */
   _onMarkerSelected: function (event, marker) {
     if (event === "selected") {
-      this.markerDetails.render({
+      this.details.render({
         toolbox: gToolbox,
         marker: marker,
         frames: PerformanceController.getFrames()
       });
     }
     if (event === "unselected") {
-      this.markerDetails.empty();
+      this.details.empty();
     }
   },
 
   /**
    * Called when the marker details view is resized.
    */
   _onResize: function () {
-    this.graph.recalculateBounds();
+    this.waterfall.recalculateBounds();
     this.render();
   }
 };
 
 /**
  * Convenient way of emitting events from the view.
  */
 EventEmitter.decorate(WaterfallView);
--- a/browser/devtools/performance/views/details.js
+++ b/browser/devtools/performance/views/details.js
@@ -19,35 +19,36 @@ let DetailsView = {
     flamegraph: 2
   },
 
   /**
    * Sets up the view with event binding, initializes subviews.
    */
   initialize: Task.async(function *() {
     this.el = $("#details-pane");
+    this.toolbar = $("#performance-toolbar-controls-detail-views");
 
     this._onViewToggle = this._onViewToggle.bind(this);
 
-    for (let button of $$("toolbarbutton[data-view]", $("#details-toolbar"))) {
+    for (let button of $$("toolbarbutton[data-view]", this.toolbar)) {
       button.addEventListener("command", this._onViewToggle);
     }
 
     yield CallTreeView.initialize();
     yield WaterfallView.initialize();
     yield FlameGraphView.initialize();
 
     this.selectView(DEFAULT_DETAILS_SUBVIEW);
   }),
 
   /**
    * Unbinds events, destroys subviews.
    */
   destroy: Task.async(function *() {
-    for (let button of $$("toolbarbutton[data-view]", $("#details-toolbar"))) {
+    for (let button of $$("toolbarbutton[data-view]", this.toolbar)) {
       button.removeEventListener("command", this._onViewToggle);
     }
 
     yield CallTreeView.destroy();
     yield WaterfallView.destroy();
     yield FlameGraphView.destroy();
   }),
 
@@ -56,17 +57,17 @@ let DetailsView = {
    * hiding the others.
    *
    * @params {String} selectedView
    *         Name of the view to be shown.
    */
   selectView: function (selectedView) {
     this.el.selectedIndex = this.viewIndexes[selectedView];
 
-    for (let button of $$("toolbarbutton[data-view]", $("#details-toolbar"))) {
+    for (let button of $$("toolbarbutton[data-view]", this.toolbar)) {
       if (button.getAttribute("data-view") === selectedView) {
         button.setAttribute("checked", true);
       } else {
         button.removeAttribute("checked");
       }
     }
 
     this.emit(EVENTS.DETAILS_VIEW_SELECTED, selectedView);