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..5f28fca20a622afbb8c2caee13f0b11798aaacf4 100644
--- a/content/browser/resources/media/client_renderer.js
+++ b/content/browser/resources/media/client_renderer.js
@@ -51,7 +51,8 @@ var ClientRenderer = (function() {
     NO_PLAYERS_SELECTED: 'no-players-selected',
     NO_COMPONENTS_SELECTED: 'no-components-selected',
     SELECTABLE_BUTTON: 'selectable-button',
-    DESTRUCTED_PLAYER: 'destructed-player'
+    LIVING_PLAYER: 'living-player',
+    DESTRUCTED_PLAYER: 'destructed-player',
   };
 
   function removeChildren(element) {
@@ -60,7 +61,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 +70,12 @@ var ClientRenderer = (function() {
     radioButton.id = id;
     radioButton.name = groupName;
 
-    var buttonLabel = document.createElement('label');
     buttonLabel.classList.add(ClientRenderer.Css_.SELECTABLE_BUTTON);
-    if (isDestructed)
+    if (isDestructed === true)

[DaleCurtis, 2017/07/01 00:08:04]

is === true/false really necessary?

[sandersd (OOO until July 31), 2017/07/01 00:52:03]

It was, to distinguish undefined, but I've removed that case now.

       buttonLabel.classList.add(ClientRenderer.Css_.DESTRUCTED_PLAYER);
+    else if (isDestructed === false)
+      buttonLabel.classList.add(ClientRenderer.Css_.LIVING_PLAYER);
     buttonLabel.setAttribute('for', radioButton.id);
-    buttonLabel.appendChild(document.createTextNode(text));
 
     var fragment = document.createDocumentFragment();
     fragment.appendChild(radioButton);
@@ -177,15 +178,11 @@ var ClientRenderer = (function() {
         this.drawProperties_(player.properties, this.playerPropertiesTable);
         this.drawLog_();
       }
-      if (key === 'name' || key === 'url') {
+      if (key === 'url' || key === 'frame.url' || key === 'frame.title' ||

[DaleCurtis, 2017/07/01 00:08:04]

Maybe just create an array of these and use REQUIRED_KEYS.contains(key) ?

[sandersd (OOO until July 31), 2017/07/01 00:52:03]

Done.

+          key === 'audio_codec_name' || key === 'video_codec_name' ||
+          key === 'width' || key === 'height' || key === 'event') {
         this.redrawPlayerList_(players);
       }
-      if (key === 'event' && value === 'WEBMEDIAPLAYER_DESTROYED') {
-        player.destructed = true;
-        document.querySelector(
-            "label.selectable-button[for='" + player.id + "']").classList.add(
-                ClientRenderer.Css_.DESTRUCTED_PLAYER);
-      }
     },
 
     createVideoCaptureFormatTable: function(formats) {
@@ -307,8 +304,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 +347,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 === true));
         fragment.appendChild(li);
       }
       removeChildren(this.playerListElement);