Show max latency on client's status bar

remoting/webapp/base/js/connection_stats.js

Index: remoting/webapp/base/js/connection_stats.js
diff --git a/remoting/webapp/base/js/connection_stats.js b/remoting/webapp/base/js/connection_stats.js
index d08a5270bd6c444f3e3601af572b7c83aac85210..8babafc4d40f1d7ae795bf87c371eaffcec95feb 100644
--- a/remoting/webapp/base/js/connection_stats.js
+++ b/remoting/webapp/base/js/connection_stats.js
@@ -123,11 +123,14 @@ remoting.ConnectionStats.prototype.update = function(stats) {
   /**
    * @param {number} value
    * @param {string} units
+   * @param {number} number of digits after decimal.
+   *                 Undefined means no rounding.
    * @return {string} Formatted number.
    */
-  function formatStatNumber(value, units) {
+  function formatStatNumber(value, units, digits) {
     if (value != undefined) {
-      return value.toFixed(2) + ' ' + units;
+      var rounded = (digits == undefined ? digits : (value.toFixed(digits)));

[Sergey Ulanov, 2016/03/18 19:42:06]

Why would digits be undefined here?

[Yuwei, 2016/03/18 20:06:00]

Just thinking it is possible that we may want to format the stat but don't want
to make the number fixed decimal. That's simply value+unit, maybe not necessary
to be done in a function... (BTW should be value:value.toFixed not
digits:value.toFixed...)

[Sergey Ulanov, 2016/03/18 20:17:08]

In that case parameter would need to be marked as optional. But you don't use it
below, so you don't need to make it optional now.

[Yuwei, 2016/03/18 20:46:47]

Acknowledged.

+      return rounded + ' ' + units;
     } else {
       return "n/a";
     }
@@ -135,11 +138,16 @@ remoting.ConnectionStats.prototype.update = function(stats) {
 
   var statistics = document.getElementById('statistics');
   this.statsElement_.innerText = (
-      'Bandwidth: ' + formatStatNumber(videoBandwidth, units) +
-      ', Frame Rate: ' + formatStatNumber(stats.videoFrameRate, 'fps') +
-      ', Capture: ' + formatStatNumber(stats.captureLatency, 'ms') +
-      ', Encode: ' + formatStatNumber(stats.encodeLatency, 'ms') +
-      ', Decode: ' + formatStatNumber(stats.decodeLatency, 'ms') +
-      ', Render: ' + formatStatNumber(stats.renderLatency, 'ms') +
-      ', Latency: ' + formatStatNumber(stats.roundtripLatency, 'ms'));
+      'Bandwidth: ' + formatStatNumber(videoBandwidth, units, 2) +
+      ', Frame Rate: ' + formatStatNumber(stats.videoFrameRate, 'fps', 1) +
+      ', Capture: ' + formatStatNumber(stats.captureLatency, 'ms', 1) +
+        ' / ' + formatStatNumber(stats.maxCaptureLatency, 'ms', 0) +

[Yuwei, 2016/03/18 01:46:20]

average / max. Tried to save some space...

[Sergey Ulanov, 2016/03/18 19:42:06]

This should be clear from the string. Maybe also remove units marker to save
more space? 
I suggest rearranging them to put more important numbers first, e.g. the whole
string may looks something like this.
(avg, max in ms) RTT: 100.0, 200; Capture: 2.2, 55; Encode: 3.3, 41; Decode:
3.5, 12; Render: 35.4, 55; FPS: 3; Bandwidth: 3kbps

(optionally you can use replace this single line with a multi-line transparent
block, that would make these stats more readable and scalable)

[Yuwei, 2016/03/18 20:06:00]

Do you mean the back-tick string template (`foo: ${foo}`) thing?

[Sergey Ulanov, 2016/03/18 20:17:08]

no. I was suggesting to change the UI that display stats.

[Yuwei, 2016/03/18 20:46:47]

I will change the UI to display stats with less space. I'm not sure
what you mean by multi-line transparent block if you are not talking about the
back-tick thing... Maybe I can simply make a function that generate `NAME:
AVERAGE, MAX;` string to refactor the code a little bit...

+      ', Encode: ' + formatStatNumber(stats.encodeLatency, 'ms', 1) +
+        ' / ' + formatStatNumber(stats.maxEncodeLatency, 'ms', 0) +
+      ', Decode: ' + formatStatNumber(stats.decodeLatency, 'ms', 1) +
+        ' / ' + formatStatNumber(stats.maxDecodeLatency, 'ms', 0) +
+      ', Render: ' + formatStatNumber(stats.renderLatency, 'ms', 1) +
+        ' / ' + formatStatNumber(stats.maxRenderLatency, 'ms', 0) +
+      ', Latency: ' + formatStatNumber(stats.roundtripLatency, 'ms', 1) +
+        ' / ' + formatStatNumber(stats.maxRoundtripLatency, 'ms', 0));
 };