Restructures UI and adds a log viewer.

BUG=260005

Review URL: https://chromiumcodereview.appspot.com/23202014

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@220232 0039d316-1c4b-4281-b951-d872f2087c98

7 files changed, 303 insertions, 95 deletions

diff --git a/content/browser/resources/media/new/client_renderer.js b/content/browser/resources/media/new/client_renderer.js
index 6acb302..02f47e1 100644
--- a/content/browser/resources/media/new/client_renderer.js
+++ b/content/browser/resources/media/new/client_renderer.js
@@ -5,8 +5,14 @@
 var ClientRenderer = (function() {
   var ClientRenderer = function() {
     this.playerListElement = document.getElementById('player-list');
+    this.audioStreamListElement = document.getElementById('audio-stream-list');
     this.propertiesTable = document.getElementById('property-table');
+    this.logTable = document.getElementById('log');
+
     this.selectedPlayer = null;
+    this.selectedStream = null;
+
+    this.selectedPlayerLogIndex = 0;
   };
 
   function removeChildren(element) {
@@ -15,14 +21,39 @@ var ClientRenderer = (function() {
     }
   };
 
+  function createButton(text, select_cb) {
+    var button = document.createElement('button');
+
+    button.appendChild(document.createTextNode(text));
+    button.onclick = function() {
+      select_cb();
+    };
+
+    return button;
+  };
+
   ClientRenderer.prototype = {
+    audioStreamAdded: function(audioStreams, audioStreamAdded) {
+      this.redrawAudioStreamList_(audioStreams);
+    },
+
+    audioStreamUpdated: function(audioStreams, stream, key, value) {
+      if (stream === this.selectedStream) {
+        this.drawProperties_(stream);
+      }
+    },
+
+    audioStreamRemoved: function(audioStreams, audioStreamRemoved) {
+      this.redrawAudioStreamList_(audioStreams);
+    },
+
     /**
      * Called when a player is added to the collection.
      * @param players The entire map of id -> player.
      * @param player_added The player that is added.
      */
-    playerAdded: function(players, player_added) {
-      this.redrawList_(players);
+    playerAdded: function(players, playerAdded) {
+      this.redrawPlayerList_(players);
     },
 
     /**
@@ -30,8 +61,8 @@ var ClientRenderer = (function() {
      * @param players The entire map of id -> player.
      * @param player_added The player that was removed.
      */
-    playerRemoved: function(players, player_removed) {
-      this.redrawList_(players);
+    playerRemoved: function(players, playerRemoved) {
+      this.redrawPlayerList_(players);
     },
 
     /**
@@ -43,47 +74,63 @@ var ClientRenderer = (function() {
      */
     playerUpdated: function(players, player, key, value) {
       if (player === this.selectedPlayer) {
-        this.drawSelectedPlayer_();
+        this.drawProperties_(player.properties);
+        this.drawLog_();
       }
       if (key === 'name' || key === 'url') {
-        this.redrawList_(players);
+        this.redrawPlayerList_(players);
       }
     },
 
-    redrawList_: function(players) {
-      removeChildren(this.playerListElement);
+    redrawAudioStreamList_: function(streams) {
+      removeChildren(this.audioStreamListElement);
 
-      function createButton(player, select_cb) {
-        var button = document.createElement('button');
-        var usableName = player.properties.name ||
-            player.properties.url ||
-            'player ' + player.id;
+      for (id in streams) {
+        var li = document.createElement('li');
+        li.appendChild(createButton(
+            id, this.selectAudioStream_.bind(this, streams[id])));
+        this.audioStreamListElement.appendChild(li);
+      }
+    },
 
-        button.appendChild(document.createTextNode(usableName));
-        button.onclick = function() {
-          select_cb(player);
-        };
+    selectAudioStream_: function(audioStream) {
+      this.selectedStream = audioStream;
+      this.selectedPlayer = null;
+      this.drawProperties_(audioStream);
+      removeChildren(this.logTable.querySelector('tbody'));
+    },
 
-        return button;
-      };
+    redrawPlayerList_: function(players) {
+      removeChildren(this.playerListElement);
 
       for (id in players) {
         var li = document.createElement('li');
-        li.appendChild(createButton(players[id], this.select_.bind(this)));
+        var player = players[id];
+        var usableName = player.properties.name ||
+            player.properties.url ||
+            'player ' + player.id;
+
+        li.appendChild(createButton(
+            usableName, this.selectPlayer_.bind(this, player)));
         this.playerListElement.appendChild(li);
       }
     },
 
-    select_: function(player) {
+    selectPlayer_: function(player) {
       this.selectedPlayer = player;
-      this.drawSelectedPlayer_();
+      this.selectedPlayerLogIndex = 0;
+      this.selectedStream = null;
+      this.drawProperties_(player.properties);
+
+      removeChildren(this.logTable.querySelector('tbody'));
+      this.drawLog_();
     },
 
-    drawSelectedPlayer_: function() {
+    drawProperties_: function(propertyMap) {
       removeChildren(this.propertiesTable);
 
-      for (key in this.selectedPlayer.properties) {
-        var value = this.selectedPlayer.properties[key];
+      for (key in propertyMap) {
+        var value = propertyMap[key];
         var row = this.propertiesTable.insertRow(-1);
         var keyCell = row.insertCell(-1);
         var valueCell = row.insertCell(-1);
@@ -91,6 +138,22 @@ var ClientRenderer = (function() {
         keyCell.appendChild(document.createTextNode(key));
         valueCell.appendChild(document.createTextNode(value));
       }
+    },
+
+    appendEventToLog_: function(event) {
+      var row = this.logTable.querySelector('tbody').insertRow(-1);
+
+      row.insertCell(-1).appendChild(document.createTextNode(
+          util.millisecondsToString(event.time)));
+      row.insertCell(-1).appendChild(document.createTextNode(event.key));
+      row.insertCell(-1).appendChild(document.createTextNode(event.value));
+    },
+
+    drawLog_: function() {
+      var toDraw = this.selectedPlayer.allEvents.slice(
+          this.selectedPlayerLogIndex);
+      toDraw.forEach(this.appendEventToLog_.bind(this));
+      this.selectedPlayerLogIndex = this.selectedPlayer.allEvents.length;
     }
   };
 
diff --git a/content/browser/resources/media/new/main.js b/content/browser/resources/media/new/main.js
index 61f6407..85cdd3a 100644
--- a/content/browser/resources/media/new/main.js
+++ b/content/browser/resources/media/new/main.js
@@ -8,68 +8,29 @@
 var media = (function() {
   'use strict';
 
-  var manager = null;
+  var manager_ = null;
 
   /**
    * Users of |media| must call initialize prior to calling other methods.
    */
-  function initialize(playerManager) {
-    manager = playerManager;
-  }
-
-  /**
-   * Call to modify or add a system property.
-   */
-  function onSystemProperty(timestamp, key, value) {
-    console.log('System properties not yet implemented');
-  }
-
-  /**
-   * Call to modify or add a property on a player.
-   */
-  function onPlayerProperty(id, timestamp, key, value) {
-    manager.updatePlayerInfo(id, timestamp, key, value);
-  }
-
-  function onPlayerPropertyNoRecord(id, timestamp, key, value) {
-    manager.updatePlayerInfoNoRecord(id, timestamp, key, value);
-  }
-
-  /**
-   * Call to add a player.
-   */
-  function onPlayerOpen(id, timestamp) {
-    manager.addPlayer(id, timestamp);
-  }
-
-  /**
-   * Call to remove a player.
-   */
-  function onPlayerClose(id) {
-    manager.removePlayer(id);
-  }
-
-  var media = {
-    onSystemProperty: onSystemProperty,
-    onPlayerProperty: onPlayerProperty,
-    onPlayerPropertyNoRecord: onPlayerPropertyNoRecord,
-    onPlayerOpen: onPlayerOpen,
-    onPlayerClose: onPlayerClose,
-
-    initialize: initialize
+  media.initialize = function(manager) {
+    manager_ = manager;
   };
 
-  // Everything beyond this point is for backwards compatibility reasons.
-  // It will go away when the backend is updated.
+  media.onReceiveEverything = function(everything) {
+    for (var key in everything.audio_streams) {
+      media.updateAudioStream(everything.audio_streams[key]);
+    }
+  };
 
   media.onNetUpdate = function(update) {
     // TODO(tyoverby): Implement
   };
 
   media.onRendererTerminated = function(renderId) {
-    util.object.forEach(manager.players_, function(playerInfo, id) {
+    util.object.forEach(manager_.players_, function(playerInfo, id) {
       if (playerInfo.properties['render_id'] == renderId) {
-        media.onPlayerClose(id);
+        manager_.removePlayer(id);
       }
     });
   };
@@ -79,31 +40,39 @@ var media = (function() {
   media.addAudioStream = function(event) {
     switch (event.status) {
       case 'created':
-        media.onPlayerOpen(event.id);
-        // We have to simulate the timestamp since it isn't provided to us.
-        media.onPlayerProperty(
-            event.id, (new Date()).getTime(), 'playing', event.playing);
+        manager_.addAudioStream(event.id);
+        manager_.updateAudioStream(event.id, { 'playing': event.playing });
         break;
       case 'closed':
-        media.onPlayerClose(event.id);
+        manager_.removeAudioStream(event.id);
         break;
     }
   };
+
+  media.updateAudioStream = function(stream) {
+    manager_.addAudioStream(stream.id);
+    manager_.updateAudioStream(stream.id, stream);
+  };
+
   media.onItemDeleted = function() {
     // This only gets called when an audio stream is removed, which
     // for whatever reason is also handled by addAudioStream...
     // Because it is already handled, we can safely ignore it.
   };
 
+  media.onPlayerOpen = function(id, timestamp) {
+    manager_.addPlayer(id, timestamp);
+  };
+
   media.onMediaEvent = function(event) {
     var source = event.renderer + ':' + event.player;
 
     // Although this gets called on every event, there is nothing we can do
-    // about this because there is no onOpen event.
+    // because there is no onOpen event.
     media.onPlayerOpen(source);
-    media.onPlayerPropertyNoRecord(
+    manager_.updatePlayerInfoNoRecord(
         source, event.ticksMillis, 'render_id', event.renderer);
-    media.onPlayerPropertyNoRecord(
+    manager_.updatePlayerInfoNoRecord(
         source, event.ticksMillis, 'player_id', event.player);
 
     var propertyCount = 0;
@@ -116,16 +85,16 @@ var media = (function() {
           key === 'buffer_end' ||
           key === 'buffer_current' ||
           key === 'is_downloading_data') {
-        media.onPlayerPropertyNoRecord(
+        manager_.updatePlayerInfoNoRecord(
             source, event.ticksMillis, key, value);
       } else {
-        media.onPlayerProperty(source, event.ticksMillis, key, value);
+        manager_.updatePlayerInfo(source, event.ticksMillis, key, value);
       }
       propertyCount += 1;
     });
 
     if (propertyCount === 0) {
-      media.onPlayerProperty(
+      manager_.updatePlayerInfo(
           source, event.ticksMillis, 'EVENT', event.type);
     }
   };
diff --git a/content/browser/resources/media/new/media_internals.css b/content/browser/resources/media/new/media_internals.css
new file mode 100644
index 0000000..88a792b
--- /dev/null
+++ b/content/browser/resources/media/new/media_internals.css
@@ -0,0 +1,91 @@
+/* Copyright 2013 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. */
+
+html,
+body,
+#container {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+
+  font-family: 'Lucida Grande', sans-serif;
+}
+
+table {
+  border-collapse: collapse;
+}
+td {
+  border: 1px solid black;
+}
+thead {
+  color: rgb(50,50,50);
+  font-size: 1.1em;
+}
+
+h1,
+h2,
+h3 {
+  color: rgb(50,50,50);
+}
+
+#container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-content: stretch;
+}
+
+#container > * {
+  padding: 0;
+  padding-left: 25px;
+  margin: 0;
+  max-height: 100%;
+}
+
+#list-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-content: stretch;
+  height: 100%;
+}
+
+#player-list-wrapper,
+#audio-stream-list-wrapper {
+  flex-grow: 1;
+  align-self: stretch;
+  min-width: 200px;
+  max-width: 200px;
+  overflow: auto;
+}
+
+#player-list-wrapper ul,
+#player-list-wrapper li,
+#audio-stream-list-wrapper ul,
+#audio-stream-list-wrapper li {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+#list-wrapper button {
+  margin: 0;
+  padding: 0;
+  width: 170px;
+}
+
+#property-wrapper,
+#log-wrapper {
+  display:block;
+  flex-grow: 0.5;
+  align-self: stretch;
+  overflow: auto;
+}
+
+#log-wrapper > thead {
+  position: fixed;
+}
diff --git a/content/browser/resources/media/new/media_internals.html b/content/browser/resources/media/new/media_internals.html
index bc2a4de..8a41e7f 100644
--- a/content/browser/resources/media/new/media_internals.html
+++ b/content/browser/resources/media/new/media_internals.html
@@ -8,11 +8,48 @@ found in the LICENSE file.
 <head>
   <meta charset="utf-8">
   <title i18n-content="Media Internals"></title>
+  <link rel="stylesheet" href="media_internals.css">
 </head>
 
 <body>
-  <ul id="player-list"></ul>
-  <table id="property-table"></table>
+  <div id="container">
+    <div id="list-wrapper">
+      <div id="player-list-wrapper">
+        <h2>Players</h2>
+        <ul id="player-list"></ul>
+      </div>
+      <div id="audio-stream-list-wrapper">
+        <h2>Audio Streams</h2>
+        <ul id="audio-stream-list"></ul>
+      </div>
+    </div>
+    <div id="property-wrapper">
+      <h2>Properties</h2>
+      <table id="property-table">
+        <thead>
+          <tr>
+            <td>Property Name</td> <td>Value</td>
+          </tr>
+        </thead>
+      </table>
+    </div>
+    <div id="log-wrapper">
+      <h2>
+        Log
+      </h2>
+      <table id="log">
+        <thead>
+          <tr>
+            <td>Timestamp</td>
+            <td>Property</td>
+            <td>Value</td>
+          </tr>
+        </thead>
+        <tbody>
+        </tbody>
+      </table>
+    </div>
+  </div>
   <script src="chrome://media-internals/media_internals.js"></script>
 </body>
 </html>
diff --git a/content/browser/resources/media/new/media_internals.js b/content/browser/resources/media/new/media_internals.js
index a795273..67c2944 100644
--- a/content/browser/resources/media/new/media_internals.js
+++ b/content/browser/resources/media/new/media_internals.js
@@ -10,4 +10,4 @@ var media = {};
 <include src="client_renderer.js"/>
 <include src="main.js"/>
 
-media.initialize(new PlayerManager(new ClientRenderer()));
+media.initialize(new Manager(new ClientRenderer()));
diff --git a/content/browser/resources/media/new/player_manager.js b/content/browser/resources/media/new/player_manager.js
index 4ef1a93..1ba1301 100644
--- a/content/browser/resources/media/new/player_manager.js
+++ b/content/browser/resources/media/new/player_manager.js
@@ -3,21 +3,56 @@
 // found in the LICENSE file.
 
 /**
- * @fileoverview Keeps track of all the existing
- * PlayerInfo objects and is the entry-point for messages from the backend.
+ * @fileoverview Keeps track of all the existing PlayerInfo and
+ * audio stream objects and is the entry-point for messages from the backend.
  *
- * The events captured by PlayerManager (add, remove, update) are relayed
+ * The events captured by Manager (add, remove, update) are relayed
  * to the clientRenderer which it can choose to use to modify the UI.
  */
-var PlayerManager = (function() {
+var Manager = (function() {
   'use strict';
 
-  function PlayerManager(clientRenderer) {
+  function Manager(clientRenderer) {
     this.players_ = {};
+    this.audioStreams_ = {};
     this.clientRenderer_ = clientRenderer;
   }
 
-  PlayerManager.prototype = {
+  Manager.prototype = {
+    /**
+     * Adds an audio-stream to the dictionary of audio-streams to manage.
+     * @param id The unique-id of the audio-stream.
+     */
+    addAudioStream: function(id) {
+      this.audioStreams_[id] = this.audioStreams_[id] || {};
+      this.clientRenderer_.audioStreamAdded(this.audioStreams_,
+                                            this.audioStreams_[id]);
+    },
+
+    /**
+     * Sets properties of an audiostream.
+     * @param id The unique-id of the audio-stream.
+     * @param properties A dictionary of properties to be added to the
+     * audio-stream.
+     */
+    updateAudioStream: function(id, properties) {
+      for (var key in properties) {
+        this.audioStreams_[id][key] = properties[key];
+      }
+      this.clientRenderer_.audioStreamAdded(
+          this.audioStreams_, this.audioStreams_[id]);
+    },
+
+    /**
+     * Removes an audio-stream from the manager.
+     * @param id The unique-id of the audio-stream.
+     */
+    removeAudioStream: function(id) {
+      this.clientRenderer_.audioStreamRemoved(
+          this.audioStreams_, this.audioStreams_[id]);
+      delete this.audioStreams_[id];
+    },
+
 
     /**
      * Adds a player to the list of players to manage.
@@ -75,5 +110,5 @@ var PlayerManager = (function() {
     }
   };
 
-  return PlayerManager;
+  return Manager;
 }());
diff --git a/content/browser/resources/media/new/util.js b/content/browser/resources/media/new/util.js
index 5909e9e..29cc1b1 100644
--- a/content/browser/resources/media/new/util.js
+++ b/content/browser/resources/media/new/util.js
@@ -29,6 +29,19 @@ var util = (function() {
       }
     }
   };
+  util.millisecondsToString = function(timeMillis) {
+    function pad(num) {
+      num = num.toString();
+      if (num.length < 2) {
+        return '0' + num;
+      }
+      return num;
+    }
+
+    var date = new Date(timeMillis);
+    return pad(date.getUTCHours()) + ':' + pad(date.getUTCMinutes()) + ':' +
+        pad(date.getUTCSeconds()) + ' ' + pad((date.getMilliseconds()) % 1000);
+  };
 
   return util;
 }());