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

chrome/browser/resources/media_internals/media_internals.js

Index: chrome/browser/resources/media_internals/media_internals.js
diff --git a/chrome/browser/resources/media_internals/media_internals.js b/chrome/browser/resources/media_internals/media_internals.js
index 5d80b289547ec1aa2cc44a2d2848ee461ea0ddb4..c8c1914eb65d9d7722d3b1cc9dfd913a556b149a 100644
--- a/chrome/browser/resources/media_internals/media_internals.js
+++ b/chrome/browser/resources/media_internals/media_internals.js
@@ -3,14 +3,22 @@
 // found in the LICENSE file.
 
 <include src="cache_entry.js"/>
-<include src="item_store.js"/>
 <include src="disjoint_range_set.js"/>
+<include src="event_list.js"/>
+<include src="item_store.js"/>
+<include src="media_player.js"/>
+<include src="metrics.js"/>
+<include src="util.js"/>
 
 cr.define('media', function() {
+  'use strict';
 
   // Stores information on open audio streams, referenced by id.
   var audioStreams = new media.ItemStore;
 
+  // Active media players, indexed by 'render_id:player_id'.
+  var mediaPlayers = {};
+
   // Cached files indexed by key and source id.
   var cacheEntriesByKey = {};
   var cacheEntries = {};
@@ -26,12 +34,16 @@ cr.define('media', function() {
   var audioStreamDiv;
   var cacheDiv;
 
+  // A timer used to limit the rate of redrawing the Media Players section.
+  var redrawTimer = null;
+
   /**
    * Initialize variables and ask MediaInternals for all its data.
    */
-  initialize = function() {
+  function initialize() {
     audioStreamDiv = document.getElementById('audio-streams');
     cacheDiv = document.getElementById('cache-entries');
+
     // Get information about all currently active media.
     chrome.send('getEverything');
   };

[arv (Not doing code reviews), 2011/09/23 15:59:01]

no semicolon after function declarations

[scherkus (not reviewing), 2011/09/23 17:43:23]

Done.

@@ -39,14 +51,14 @@ cr.define('media', function() {
   /**
    * Write the set of audio streams to the DOM.
    */
-  printAudioStreams = function() {
+  function printAudioStreams() {
 
     /**
      * Render a single stream as a <li>.
      * @param {Object} stream The stream to render.
      * @return {HTMLElement} A <li> containing the stream information.
      */
-    printStream = function(stream) {
+    function printStream(stream) {
       var out = document.createElement('li');
       out.id = stream.id;
       out.className = 'audio-stream';
@@ -68,9 +80,19 @@ cr.define('media', function() {
   };
 
   /**
+   * Redraw each MediaPlayer.
+   */
+  function printMediaPlayers() {
+    for (var id in mediaPlayers) {
+      mediaPlayers[id].redraw();
+    }
+    redrawTimer = null;
+  };
+
+  /**
    * Write the set of sparse CacheEntries to the DOM.
    */
-  printSparseCacheEntries = function() {
+  function printSparseCacheEntries() {
     var out = document.createElement('ul');
     for (var key in cacheEntriesByKey) {
       if (cacheEntriesByKey[key].sparse)
@@ -86,7 +108,7 @@ cr.define('media', function() {
    * Add it to audioStreams and update the page.
    * @param {Object} stream JSON representation of an audio stream.
    */
-  addAudioStream = function(stream) {
+  function addAudioStream(stream) {
     audioStreams.addItem(stream);
     printAudioStreams();
   };
@@ -97,7 +119,7 @@ cr.define('media', function() {
    * @param {Object} stuff JSON containing lists of data.
    * @param {Object} stuff.audio_streams A dictionary of audio streams.
    */
-  onReceiveEverything = function(stuff) {
+  function onReceiveEverything(stuff) {
     audioStreams.addItems(stuff.audio_streams);
     printAudioStreams();
   };
@@ -107,22 +129,36 @@ cr.define('media', function() {
    * @param {string} id The id of the item to be removed, in the format
    *    "item_type.identifying_info".
    */
-  onItemDeleted = function(id) {
+  function onItemDeleted(id) {
     var type = id.split('.')[0];
     switch (type) {
-    case 'audio_streams':
-      audioStreams.removeItem(id);
-      printAudioStreams();
-      break;
+      case 'audio_streams':
+        audioStreams.removeItem(id);
+        printAudioStreams();
+        break;
     }
   };
 
   /**
+   * A render process has ended, delete any media players associated with it.
+   * @param {int} renderer The id of the render process.

[arv (Not doing code reviews), 2011/09/23 15:59:01]

@param {number}

[scherkus (not reviewing), 2011/09/23 17:43:23]

Done.

+   */
+  function onRendererTerminated(renderer) {
+    for (var key in mediaPlayers) {
+      if (mediaPlayers[key].renderer == renderer) {
+        document.getElementById('media-players').removeChild(mediaPlayers[key]);
+        delete mediaPlayers[key];

[arv (Not doing code reviews), 2011/09/23 15:59:01]

Maybe break out of loop here?

[scherkus (not reviewing), 2011/09/23 17:43:23]

Good catch - done.

+      }
+    }
+    printMediaPlayers();
+  };
+
+  /**
    * Receiving net events.
    * Update cache information and update that section of the page.
    * @param {Array} updates A list of net events that have occurred.
    */
-  onNetUpdate = function(updates) {
+  function onNetUpdate(updates) {
     updates.forEach(function(update) {
       var id = update.source.id;
       if (!cacheEntries[id])
@@ -166,7 +202,7 @@ cr.define('media', function() {
         delete requestURLs[update.source.id];
         if (range && key) {
           if (!cacheEntriesByKey[key]) {
-            cacheEntriesByKey[key] = new CacheEntry;
+            cacheEntriesByKey[key] = new media.CacheEntry;
             cacheEntriesByKey[key].key = key;
           }
           cacheEntriesByKey[key].size = range[1];
@@ -184,23 +220,55 @@ cr.define('media', function() {
    * @param {Object} constants.eventTypes A dictionary of event name -> int.
    * @param {Object} constants.eventPhases A dictionary of event phase -> int.
    */
-  onReceiveConstants = function(constants) {
+  function onReceiveConstants(constants) {
     var events = constants.eventTypes;
-    for (var e in events)
+    for (var e in events) {
       eventTypes[events[e]] = e;
+    }
 
     var phases = constants.eventPhases;
-    for (var p in phases)
+    for (var p in phases) {
       eventPhases[phases[p]] = p;
+    }
+  };
+
+  /**
+   * Receiving notification of a media event.
+   * @param {Object} event The json representation of a MediaLogEvent.
+   */
+  function onMediaEvent(event) {
+    // List everything in miliseconds.
+    event.time *= 1000;

[arv (Not doing code reviews), 2011/09/23 15:59:01]

It is kind of ugly to change the event object here.

I don't see where time is used. Maybe it is cleaner to only do the
multiplication there in case someone else references this object.

[scherkus (not reviewing), 2011/09/23 17:43:23]

Hmm... it looks like the event trickles through to these places:

media_player.js: addEvent() (time not used)
metrics.js: addEvent()
event_list.js: addEvent() (actually modifies time!)

I've made the conversion to milliseconds local to metrics/event_list.js

Nice catch!

+
+    var source = event.renderer + ':' + event.player;
+    var item = mediaPlayers[source] ||
+        new media.MediaPlayer({id: source, renderer: event.renderer});
+    mediaPlayers[source] = item;
+    item.addEvent(event);
+
+    // Both media and net events could provide the size of the file.
+    // Media takes priority, but keep the size in both places synchronized.
+    if (cacheEntriesByKey[item.properties.url]) {
+      item.properties.total_bytes = item.properties.total_bytes ||
+                                    cacheEntriesByKey[item.properties.url].size;
+      cacheEntriesByKey[item.properties.url].size = item.properties.total_bytes;
+    }
+
+    // Events tend to arrive in groups; don't redraw the page too often.
+    if (!redrawTimer)
+      redrawTimer = setTimeout(printMediaPlayers, 50);
   };
 
   return {
     initialize: initialize,
     addAudioStream: addAudioStream,
+    cacheEntriesByKey: cacheEntriesByKey,
     onReceiveEverything: onReceiveEverything,
     onItemDeleted: onItemDeleted,
+    onRendererTerminated: onRendererTerminated,
     onNetUpdate: onNetUpdate,
     onReceiveConstants: onReceiveConstants,
+    onMediaEvent: onMediaEvent
   };
 });