Display active media players on chrome://media-internals.

chrome/browser/resources/media_internals/metrics.js

+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+cr.define('media', function() {
+  'use strict';
+
+  // A set of parameter names. An entry of 'abc' allows metrics to specify
+  // events with specific values of 'abc'.
+  var metricProperties = {
+    'pipeline_state': true,

[arv (Not doing code reviews), 2011/09/22 19:26:04]

no underscores in JS?

[arv (Not doing code reviews), 2011/09/22 19:26:04]

Don't quote property names unless you have to

[scherkus (not reviewing), 2011/09/23 06:52:41]

I believe this is a string identifier for an event name as defined in the C++
part of this code

+  };
+
+  // A set of metrics to measure. The user will see the most recent and average
+  // measurement of the time between each metric's start and end events.
+  var metrics = {
+    'seek': {'start': 'SEEK',

[arv (Not doing code reviews), 2011/09/22 19:26:04]

The indentation of this is strange. Please line break after { and indent 2
spaces

[scherkus (not reviewing), 2011/09/23 06:52:41]

Done.

+             'end': 'pipeline_state=started'},
+    'first frame': {'start': 'WEBMEDIAPLAYER_CREATED',
+                    'end': 'pipeline_state=started'},
+  };
+
+  /**
+   * This class measures times between the events specified above. It inherits
+   * <li> and contains a table that displays the measurements.
+   */
+  var Metrics = cr.ui.define('li');
+
+  Metrics.prototype = {
+    __proto__: HTMLLIElement.prototype,
+
+    /**
+     * Decorate this <li> as a Metrics.
+     */
+    decorate: function() {
+      this.table_ = document.createElement('table');
+      var details = document.createElement('details');
+      var summary = media.makeElement('summary', 'Metrics:');
+      details.appendChild(summary);
+      details.appendChild(this.table_);
+      this.appendChild(details);
+
+      var hRow = document.createElement('tr');
+      hRow.appendChild(media.makeElement('th', 'Metric:'));
+      hRow.appendChild(media.makeElement('th', 'Last Measure:'));
+      hRow.appendChild(media.makeElement('th', 'Average:'));
+      var header = document.createElement('thead');
+      header.appendChild(hRow);
+      this.table_.appendChild(header);
+
+      for (var metric in metrics) {
+        var last = document.createElement('td');
+        var avg = document.createElement('td');
+        this[metric] = {'count': 0, 'total': 0, 'start': null,
+                        'last': last, 'avg': avg};
+        var row = document.createElement('tr');
+        row.appendChild(media.makeElement('td', metric + ':'));
+        row.appendChild(last);
+        row.appendChild(avg);
+        this.table_.appendChild(row);
+      }
+    },
+
+    /**
+     * An event has occurred. Update any metrics that refer to this type
+     * of event. Can be called multiple times by addEvent below if the metrics
+     * refer to specific parameters.
+     * @param {Object} event The MediaLogEvent that has occurred.
+     * @param {string} type The type of event.
+     */
+    addEventInternal: function(event, type) {
+      for (var metric in metrics) {
+        var m = this[metric];
+        if (type == metrics[metric].start && !m.start) {
+          m.start = event.time;
+        } else if (type == metrics[metric].end && m.start != null) {
+          var last = event.time - m.start;
+          m.last.textContent = media.round(last);
+          m.total += last;
+          m.count++;
+          if (m.count > 1)
+            m.avg.textContent = round(m.total / m.count);

[arv (Not doing code reviews), 2011/09/22 19:26:04]

Math.round?

[scherkus (not reviewing), 2011/09/23 06:52:41]

I wonder whether this was supposed to be media.round (from util.js), which does
rounding to # of digits

+          m.start = null;
+        }
+      }
+    },
+
+    /**
+     * An event has occurred. Update any metrics that refer to events of this
+     * type or with this event's parameters.
+     * @param {Object} event The MediaLogEvent that has occurred.
+     */
+    addEvent: function(event) {
+      this.addEventInternal(event, event.type);
+      for (var p in event.params) {
+        if (p in metricProperties) {
+          var type = p + '=' + event.params[p];
+          this.addEventInternal(event, type);
+        }
+      }
+    },
+  };
+
+  return {
+      Metrics: Metrics,
+  };
+});