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

chrome/browser/resources/media_internals/media_internals.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.
 
 <include src="cache_entry.js"/>
+<include src="disjoint_range_set.js"/>
+<include src="event_list.js"/>
 <include src="item_store.js"/>
-<include src="disjoint_range_set.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 = {};
 
   // Map of event source -> url.
   var requestURLs = {};
 
   // Constants passed to us from Chrome.
   var eventTypes = {};
   var eventPhases = {};
 
   // The <div>s on the page in which to display information.
   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.

 
   /**
    * 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';
       out.setAttribute('status', stream.status);
 
       out.textContent += 'Audio stream ' + stream.id.split('.')[1];
       out.textContent += ' is ' + (stream.playing ? 'playing' : 'paused');
       out.textContent += ' at ' + Math.round(stream.volume * 100) + '% volume.';
       return out;
     };
 
     var out = document.createElement('ul');
     audioStreams.map(printStream).forEach(function(s) {
       out.appendChild(s)
     });
 
     audioStreamDiv.textContent = '';
     audioStreamDiv.appendChild(out);
   };
 
   /**
+   * 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)
         out.appendChild(cacheEntriesByKey[key].toListItem());
     }
 
     cacheDiv.textContent = '';
     cacheDiv.appendChild(out);
   };
 
   /**
    * Receiving data for an audio stream.
    * 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();
   };
 
   /**
    * Receiving all data.
    * Add it all to the appropriate stores and update the page.
    * @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();
   };
 
   /**
    * Removing an item from the appropriate store.
    * @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])
         cacheEntries[id] = new media.CacheEntry;
 
       switch (eventPhases[update.phase] + '.' + eventTypes[update.type]) {
       case 'PHASE_BEGIN.DISK_CACHE_ENTRY_IMPL':
         var key = update.params.key;
 
         // Merge this source with anything we already know about this key.
@@ skipping 23 matching lines @@
         break;
 
       case 'PHASE_NONE.HTTP_TRANSACTION_READ_RESPONSE_HEADERS':
         // Record the total size of the file if this was a range request.
         var range = /content-range:\s*bytes\s*\d+-\d+\/(\d+)/i.exec(
             update.params.headers);
         var key = requestURLs[update.source.id];
         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];
         }
         break;
       }
     });
 
     printSparseCacheEntries();
   };
 
   /**
    * Receiving values for constants. Store them for later use.
    * @param {Object} constants A dictionary of constants.
    * @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
   };
 });
 
 /**
  * Initialize everything once we have access to the DOM.
  */
 window.onload = function() {

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

Do you really have to wait for window.onload?

Can you at least change this to listen to DOMContentLoaded?

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

Done.

   media.initialize();
 };