remoting/webapp/crd/js/connection_stats.js

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @fileoverview
   7  * Module to support debug overlay window with connection stats.
   8  */
   9
  10 'use strict';
  11
  12 /** @suppress {duplicate} */
  13 var remoting = remoting || {};
  14
  15 /**
  16  * @constructor
  17  * @implements {remoting.WindowShape.ClientUI}
  18  * @param {Element} statsElement The HTML div to which to update stats.
  19  */
  20 remoting.ConnectionStats = function(statsElement) {
  21   /**
  22    * @private
  23    */
  24   this.statsElement_ = statsElement;
  25
  26   /**
  27    * @type {remoting.ClientSession.PerfStats}
  28    * @private
  29    */
  30   this.mostRecent_ = null
  31
  32   remoting.windowShape.addCallback(this);
  33 };
  34
  35 /**
  36  * @return {remoting.ClientSession.PerfStats} The most recently-set PerfStats,
  37  *     or null if update() has not yet been called.
  38  */
  39 remoting.ConnectionStats.prototype.mostRecent = function() {
  40   return this.mostRecent_;
  41 };
  42
  43 /**
  44  * Show or hide the connection stats div.
  45  */
  46 remoting.ConnectionStats.prototype.toggle = function() {
  47   this.statsElement_.hidden = !this.statsElement_.hidden;
  48 };
  49
  50 /**
  51  * Show or hide the connection stats div.
  52  * @param {boolean} show
  53  */
  54 remoting.ConnectionStats.prototype.show = function(show) {
  55   this.statsElement_.hidden = !show;
  56 };
  57
  58 /**
  59  * If the stats panel is visible, add its bounding rectangle to the specified
  60  * region.
  61  * @param {Array<{left: number, top: number, width: number, height: number}>}
  62  *     rects List of rectangles.
  63  */
  64
  65 remoting.ConnectionStats.prototype.addToRegion = function(rects) {
  66   if (!this.statsElement_.hidden) {
  67     rects.push(this.statsElement_.getBoundingClientRect());
  68   }
  69 };
  70
  71 /**
  72  * Update the statistics panel.
  73  * @param {remoting.ClientSession.PerfStats} stats The connection statistics.
  74  */
  75 remoting.ConnectionStats.prototype.update = function(stats) {
  76   this.mostRecent_ = stats;
  77   var units = '';
  78   var videoBandwidth = stats.videoBandwidth;
  79   if (videoBandwidth != undefined) {
  80     if (videoBandwidth < 1024) {
  81       units = 'Bps';
  82     } else if (videoBandwidth < 1048576) {
  83       units = 'KiBps';
  84       videoBandwidth = videoBandwidth / 1024;
  85     } else if (videoBandwidth < 1073741824) {
  86       units = 'MiBps';
  87       videoBandwidth = videoBandwidth / 1048576;
  88     } else {
  89       units = 'GiBps';
  90       videoBandwidth = videoBandwidth / 1073741824;
  91     }
  92   }
  93
  94   /**
  95    * @param {number} value
  96    * @param {string} units
  97    * @return {string} Formatted number.
  98    */
  99   function formatStatNumber(value, units) {
 100     if (value != undefined) {
 101       return value.toFixed(2) + ' ' + units;
 102     } else {
 103       return "n/a";
 104     }
 105   }
 106
 107   var statistics = document.getElementById('statistics');
 108   this.statsElement_.innerText = (
 109       'Bandwidth: ' + formatStatNumber(videoBandwidth, units) +
 110       ', Frame Rate: ' + formatStatNumber(stats.videoFrameRate, 'fps') +
 111       ', Capture: ' + formatStatNumber(stats.captureLatency, 'ms') +
 112       ', Encode: ' + formatStatNumber(stats.encodeLatency, 'ms') +
 113       ', Decode: ' + formatStatNumber(stats.decodeLatency, 'ms') +
 114       ', Render: ' + formatStatNumber(stats.renderLatency, 'ms') +
 115       ', Latency: ' + formatStatNumber(stats.roundtripLatency, 'ms'));
 116 };
 117
 118 /**
 119  * Check for the debug toggle hot-key.
 120  *
 121  * @param {Event} event The keyboard event.
 122  * @return {void} Nothing.
 123  */
 124 remoting.ConnectionStats.onKeydown = function(event) {
 125   var element = /** @type {Element} */ (event.target);
 126   if (element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') {
 127     return;
 128   }
 129   if (String.fromCharCode(event.which) == 'D') {
 130     remoting.stats.toggle();
 131   }
 132 };
 133
 134 /** @type {remoting.ConnectionStats} */
 135 remoting.stats = null;