arc: Add render quality and commit deviation to tracing overview.

This gives important information about app quality.

TEST=Locally
BUG=b/143532713

Change-Id: Icb6b1a37ed077b6a9aad5ed81e3b7b650c62cd17
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1947185Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Commit-Queue: Yury Khmel <khmel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#720772}

chrome/browser/resources/chromeos/arc_graphics_tracing/arc_overview_tracing.html

@@ -41,6 +41,9 @@
       App FPS: <span class="arc-tracing-app-fps"></span>
       Chrome FPS: <span class="arc-tracing-chrome-fps"></span>
       <span class="arc-tracing-new-line"></span>
+      Render quality: <span class="arc-tracing-app-render-quality"></span>
+      Commit deviation: <span class="arc-tracing-app-commit-deviation"></span>
+      <span class="arc-tracing-new-line"></span>
       Average power:
       <span class="arc-tracing-app-power-total"></span> watts.
       <span class="arc-tracing-new-line"></span>

chrome/browser/resources/chromeos/arc_graphics_tracing/arc_overview_tracing_ui.js

@@ -68,6 +68,44 @@ function calculateFPS(events, duration) {
   return eventCount * 1000000 / duration;
 }
 
+/**
+ * Helper that calculates render quality and commit deviation. This follows the
+ * calculation in |ArcAppPerformanceTracingSession|.
+ *
+ * @param {Object} model model to process.
+ */
+function calculateAppRenderQualityAndCommitDeviation(model) {
+  var deltas = createDeltaEvents(getAppCommitEvents(model));
+
+  var vsyncErrorDeviationAccumulator = 0.0;
+  // Frame delta in microseconds.
+  var targetFrameTime = 16666;
+  for (var i = 0; i < deltas.events.length; i++) {
+    var displayFramesPassed = Math.round(deltas.events[i][2] / targetFrameTime);
+    var vsyncError =
+        deltas.events[i][2] - displayFramesPassed * targetFrameTime;
+    vsyncErrorDeviationAccumulator += (vsyncError * vsyncError);
+  }
+  var commitDeviation =
+      Math.sqrt(vsyncErrorDeviationAccumulator / deltas.events.length);
+
+  // Sort by time delta.
+  deltas.events.sort(function(a, b) {
+    return a[2] - b[2];
+  });
+
+  // Get 10% and 90% indices.
+  var lowerPosition = Math.round(deltas.events.length / 10);
+  var upperPosition = deltas.events.length - 1 - lowerPosition;
+  var renderQuality =
+      deltas.events[lowerPosition][2] / deltas.events[upperPosition][2];
+
+  return [
+    renderQuality * 100.0 /* convert to % */,
+    commitDeviation * 0.001 /* mcs to ms */
+  ];
+}
+
 /**
  * Gets model title as an traced app name. If no information is available it
  * returns default name for app.
@@ -112,6 +150,12 @@ function addModelHeader(model) {
   header.getElementsByClassName('arc-tracing-chrome-fps')[0].textContent =
       calculateFPS(getChromeSwapEvents(model), model.information.duration)
           .toFixed(2);
+  var renderQualityAndCommitDeviation =
+      calculateAppRenderQualityAndCommitDeviation(model);
+  header.getElementsByClassName('arc-tracing-app-render-quality')[0]
+      .textContent = renderQualityAndCommitDeviation[0].toFixed(1) + '%';
+  header.getElementsByClassName('arc-tracing-app-commit-deviation')[0]
+      .textContent = renderQualityAndCommitDeviation[1].toFixed(2) + 'ms';
 
   var cpuPower = getAveragePower(model, 10 /* kCpuPower */);
   var gpuPower = getAveragePower(model, 11 /* kGpuPower */);

chrome/browser/resources/chromeos/arc_graphics_tracing/arc_tracing.css

@@ -125,13 +125,15 @@
   width: 24px;
 }
 
+.arc-tracing-app-commit-deviation,
 .arc-tracing-app-duration,
 .arc-tracing-app-fps,
-.arc-tracing-chrome-fps,
 .arc-tracing-app-power-total,
 .arc-tracing-app-power-cpu,
 .arc-tracing-app-power-gpu,
-.arc-tracing-app-power-memory {
+.arc-tracing-app-power-memory,
+.arc-tracing-app-render-quality,
+.arc-tracing-chrome-fps {
   font-weight: bold;
 }