Bug 1158645 - Calculate FPS in performance tool by counting frames over duration, rather than averaging values of reported framerate timestamps. r=vp

browser/devtools/performance/modules/graphs.js

@@ -110,7 +110,7 @@ FramerateGraph.prototype = Heritage.extend(PerformanceGraph.prototype, {
   mainColor: FRAMERATE_GRAPH_COLOR_NAME,
   setPerformanceData: function ({ duration, ticks }, resolution) {
     this.dataDuration = duration;
-    return this.setDataFromTimestamps(ticks, resolution);
+    return this.setDataFromTimestamps(ticks, resolution, duration);
   }
 });
 

browser/devtools/shared/test/browser.ini

@@ -72,6 +72,7 @@ support-files =
 [browser_graphs-14.js]
 [browser_inplace-editor-01.js]
 [browser_inplace-editor-02.js]
+[browser_graphs-15.js]
 [browser_layoutHelpers.js]
 skip-if = e10s # Layouthelpers test should not run in a content page.
 [browser_layoutHelpers-getBoxQuads.js]

browser/devtools/shared/test/browser_graphs-15.js

@@ -0,0 +1,47 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests that graph widgets correctly emit mouse input events.
+
+const FAST_FPS = 60;
+const SLOW_FPS = 10;
+// Each element represents a second
+const FRAMES= [FAST_FPS, FAST_FPS, FAST_FPS, SLOW_FPS, FAST_FPS];
+const TEST_DATA = [];
+const INTERVAL = 100;
+const DURATION = 5000; // 5s
+let t = 0;
+for (let frameRate of FRAMES) {
+  for (let i = 0; i < frameRate; i++) {
+    let delta = Math.floor(1000 / frameRate); // Duration between frames at this rate
+    t += delta;
+    TEST_DATA.push(t);
+  }
+}
+
+let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
+
+add_task(function*() {
+  yield promiseTab("about:blank");
+  yield performTest();
+  gBrowser.removeCurrentTab();
+});
+
+function* performTest() {
+  let [host, win, doc] = yield createHost();
+  let graph = new LineGraphWidget(doc.body, "fps");
+
+  yield testGraph(graph);
+
+  yield graph.destroy();
+  host.destroy();
+}
+
+function* testGraph(graph) {
+
+  console.log("test data", TEST_DATA);
+  yield graph.setDataFromTimestamps(TEST_DATA, INTERVAL, DURATION);
+  is(graph._avgTooltip.querySelector("[text=value]").textContent, "50",
+    "The average tooltip displays the correct value.");
+}

browser/devtools/shared/widgets/Graphs.jsm

@@ -1302,14 +1302,15 @@ LineGraphWidget.prototype = Heritage.extend(AbstractCanvasGraph.prototype, {
    *        represents the elapsed time on each refresh driver tick.
    * @param number interval
    *        The maximum amount of time to wait between calculations.
+   * @param number duration
+   *        The duration of the recording in milliseconds.
    */
-  setDataFromTimestamps: Task.async(function*(timestamps, interval) {
+  setDataFromTimestamps: Task.async(function*(timestamps, interval, duration) {
     let {
       plottedData,
       plottedMinMaxSum
     } = yield CanvasGraphUtils._performTaskInWorker("plotTimestampsGraph", {
-      timestamps: timestamps,
-      interval: interval
+      timestamps, interval, duration
     });
 
     this._tempMinMaxSum = plottedMinMaxSum;

browser/devtools/shared/widgets/GraphsWorker.js

@@ -21,10 +21,11 @@ self.onmessage = e => {
  * @param number id
  * @param array timestamps
  * @param number interval
+ * @param number duration
  */
 function plotTimestampsGraph(id, args) {
   let plottedData = plotTimestamps(args.timestamps, args.interval);
-  let plottedMinMaxSum = getMinMaxSum(plottedData);
+  let plottedMinMaxSum = getMinMaxAvg(plottedData, args.timestamps, args.duration);
 
   let response = { id, plottedData, plottedMinMaxSum };
   self.postMessage(response);
@@ -33,21 +34,25 @@ function plotTimestampsGraph(id, args) {
 /**
  * Gets the min, max and average of the values in an array.
  * @param array source
+ * @param array timestamps
+ * @param number duration
  * @return object
  */
-function getMinMaxSum(source) {
+function getMinMaxAvg(source, timestamps, duration) {
   let totalTicks = source.length;
+  let totalFrames = timestamps.length;
   let maxValue = Number.MIN_SAFE_INTEGER;
   let minValue = Number.MAX_SAFE_INTEGER;
-  let avgValue = 0;
-  let sumValues = 0;
+  // Calculate the average by counting how many frames occurred
+  // in the duration of the recording, rather than average the frame points
+  // we have, as that weights higher FPS, as there'll be more timestamps for those
+  // values
+  let avgValue = totalFrames / (duration / 1000);
 
   for (let { value } of source) {
     maxValue = Math.max(value, maxValue);
     minValue = Math.min(value, minValue);
-    sumValues += value;
   }
-  avgValue = sumValues / totalTicks;
 
   return { minValue, maxValue, avgValue };
 }