media: Add more player details in chrome://media-internals player list

content/browser/resources/media/client_renderer.js

Index: content/browser/resources/media/client_renderer.js
diff --git a/content/browser/resources/media/client_renderer.js b/content/browser/resources/media/client_renderer.js
index 3206ac97e8062d6806d88e78b5cf218fd8d973cc..3bdf53852f7987a25c3fed1eb2611db2c94f4993 100644
--- a/content/browser/resources/media/client_renderer.js
+++ b/content/browser/resources/media/client_renderer.js
@@ -51,7 +51,7 @@ var ClientRenderer = (function() {
     NO_PLAYERS_SELECTED: 'no-players-selected',
     NO_COMPONENTS_SELECTED: 'no-components-selected',
     SELECTABLE_BUTTON: 'selectable-button',
-    DESTRUCTED_PLAYER: 'destructed-player'
+    DESTRUCTED_PLAYER: 'destructed-player',
   };
 
   function removeChildren(element) {
@@ -60,7 +60,7 @@ var ClientRenderer = (function() {
     }
   };
 
-  function createSelectableButton(id, groupName, text, select_cb,
+  function createSelectableButton(id, groupName, buttonLabel, select_cb,
                                   isDestructed) {
     // For CSS styling.
     var radioButton = document.createElement('input');
@@ -69,12 +69,10 @@ var ClientRenderer = (function() {
     radioButton.id = id;
     radioButton.name = groupName;
 
-    var buttonLabel = document.createElement('label');
     buttonLabel.classList.add(ClientRenderer.Css_.SELECTABLE_BUTTON);
     if (isDestructed)
       buttonLabel.classList.add(ClientRenderer.Css_.DESTRUCTED_PLAYER);
     buttonLabel.setAttribute('for', radioButton.id);
-    buttonLabel.appendChild(document.createTextNode(text));
 
     var fragment = document.createDocumentFragment();
     fragment.appendChild(radioButton);
@@ -177,14 +175,11 @@ var ClientRenderer = (function() {
         this.drawProperties_(player.properties, this.playerPropertiesTable);
         this.drawLog_();
       }
-      if (key === 'name' || key === 'url') {
-        this.redrawPlayerList_(players);
-      }
-      if (key === 'event' && value === 'WEBMEDIAPLAYER_DESTROYED') {
+      if (key === 'event' && value === 'WEBMEDIAPLAYER_DESTROYED')
         player.destructed = true;
-        document.querySelector(
-            "label.selectable-button[for='" + player.id + "']").classList.add(
-                ClientRenderer.Css_.DESTRUCTED_PLAYER);
+      if (['url', 'frame_url', 'frame_title', 'audio_codec_name',
+           'video_codec_name', 'width', 'height', 'event'].includes(key)) {
+        this.redrawPlayerList_(players);
       }
     },
 
@@ -307,8 +302,10 @@ var ClientRenderer = (function() {
         var button_cb = this.selectAudioComponent_.bind(
                 this, componentType, id, components[id]);
         var friendlyName = this.getAudioComponentName_(componentType, id);
+        var label = document.createElement('label');
+        label.appendChild(document.createTextNode(friendlyName));
         li.appendChild(createSelectableButton(
-            id, buttonGroupName, friendlyName, button_cb));
+            id, buttonGroupName, label, button_cb));
         fragment.appendChild(li);
       }
       removeChildren(listElement);
@@ -348,14 +345,53 @@ var ClientRenderer = (function() {
       for (var id in players) {
         hasPlayers = true;
         var player = players[id];
-        var usableName = player.properties.name ||
-            player.properties.url ||
-            'Player ' + player.id;
+        var p = player.properties;
+        var label = document.createElement('label');
+
+        var name_text = p.url || 'Player ' + player.id;
+        var name_node = document.createElement('span');
+        name_node.appendChild(document.createTextNode(name_text));
+        name_node.className = 'player-name';
+        label.appendChild(name_node);
+
+        var frame = [];
+        if (p.frame_title)
+          frame.push(p.frame_title);
+        if (p.frame_url)
+          frame.push(p.frame_url);
+        var frame_text = frame.join(' - ');
+        if (frame_text) {
+          label.appendChild(document.createElement('br'));
+          var frame_node = document.createElement('span');
+          frame_node.className = 'player-frame';
+          frame_node.appendChild(document.createTextNode(frame_text));
+          label.appendChild(frame_node);
+        }
+
+        var desc = []
+        if (p.width && p.height)
+          desc.push(p.width + 'x' + p.height);
+        if (p.video_codec_name)
+          desc.push(p.video_codec_name);
+        if (p.video_codec_name && p.audio_codec_name)
+          desc.push('+');
+        if (p.audio_codec_name)
+          desc.push(p.audio_codec_name);
+        if (p.event)
+          desc.push('(' + p.event + ')');
+        var desc_text = desc.join(' ');
+        if (desc_text) {
+          label.appendChild(document.createElement('br'));
+          var desc_node = document.createElement('span');
+          desc_node.className = 'player-desc';
+          desc_node.appendChild(document.createTextNode(desc_text));
+          label.appendChild(desc_node);
+        }
 
         var li = document.createElement('li');
         var button_cb = this.selectPlayer_.bind(this, player);
         li.appendChild(createSelectableButton(
-            id, buttonGroupName, usableName, button_cb, player.destructed));
+            id, buttonGroupName, label, button_cb, player.destructed));
         fragment.appendChild(li);
       }
       removeChildren(this.playerListElement);