Frame rate detection on MotionMark occasionally sees older devices as 90 fps instead of 60

#50
rdar://127012351

To get the target frame rate we sample 300 rAFs and we get the average of their
frame rates. We calculate the average incrementally using some sort of exponential
decay. The average starts very small but keeps increasing until it reaches the
actual target frame rate and it is supposed to stay unchanged much. Then we compare
the final average rate with predefined frame rates and get the closest one.

The purpose of this incremental calculation was to show the target frame rate
being calculated in the detectionProgressElement in the developer page.

In addition to having the incremental average very small for more than 100 frames,
the bigger problem is this incremental average calculation gives more weight to
the last frame. And if it is considerably large for any reason, the final average
will be wildly inaccurate.

The fix is to simplify the calculations:

1. For count == 0: The firstTimeStamp will be recorded and and we won't update
   the detectionProgressElement.

2. For count > 0:
   averageFrameLength = (timestamp - firstTimeStamp) / count;
   averageFrameRate = 1000 / averageFrameLength;

Author: shallawa

MotionMark/resources/runner/motionmark.js

@@ -558,11 +558,15 @@ window.benchmarkController = {
     determineFrameRate: function(detectionProgressElement)
     {
         return new Promise((resolve, reject) => {
-            let last = 0;
-            let average = 0;
+            let firstTimestamp;
             let count = 0;
 
-            const finish = function()
+            const averageFrameRate = function(timestamp)
+            {
+                return 1000. / ((timestamp - firstTimestamp) / count);
+            }
+
+            const finish = function(average)
             {
                 const commonFrameRates = [15, 30, 45, 60, 90, 120, 144];
                 const distanceFromFrameRates = commonFrameRates.map(rate => {
@@ -585,16 +589,17 @@ window.benchmarkController = {
 
             const tick = function(timestamp)
             {
-                average -= average / 30;
-                average += 1000. / (timestamp - last) / 30;
-                if (detectionProgressElement)
-                    detectionProgressElement.textContent = Math.round(average);
-                last = timestamp;
+                if (!firstTimestamp)
+                    firstTimestamp = timestamp;
+                else if (detectionProgressElement)
+                    detectionProgressElement.textContent = Math.round(averageFrameRate(timestamp));
+
                 count++;
+
                 if (count < 300)
                     requestAnimationFrame(tick);
                 else
-                    finish();
+                    finish(averageFrameRate(timestamp));
             }
 
             requestAnimationFrame(tick);