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

content/browser/resources/media/client_renderer.js

 // 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.
 
 var ClientRenderer = (function() {
   var ClientRenderer = function() {
     this.playerListElement = document.getElementById('player-list');
     this.audioPropertiesTable =
         document.getElementById('audio-property-table').querySelector('tbody');
     this.playerPropertiesTable =
@@ skipping 33 matching lines @@
   };
 
   /**
    * CSS classes added / removed in JS to trigger styling changes.
    * @private @enum {string}
    */
   ClientRenderer.Css_ = {
     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) {
     while (element.hasChildNodes()) {
       element.removeChild(element.lastChild);
     }
   };
 
-  function createSelectableButton(id, groupName, text, select_cb,
+  function createSelectableButton(id, groupName, buttonLabel, select_cb,
                                   isDestructed) {
     // For CSS styling.
     var radioButton = document.createElement('input');
     radioButton.classList.add(ClientRenderer.Css_.SELECTABLE_BUTTON);
     radioButton.type = 'radio';
     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);
     fragment.appendChild(buttonLabel);
 
     // Listen to 'change' rather than 'click' to keep styling in sync with
     // button behavior.
     radioButton.addEventListener('change', function() {
       select_cb();
     });
@@ skipping 82 matching lines @@
      * @param players The entire map of id -> player.
      * @param player The player that had its property changed.
      * @param key The name of the property that was changed.
      * @param value The new value of the property.
      */
     playerUpdated: function(players, player, key, value) {
       if (player === this.selectedPlayer) {
         this.drawProperties_(player.properties, this.playerPropertiesTable);
         this.drawLog_();
       }
-      if (key === 'name' || key === 'url') {
+      if (key === 'event' && value === 'WEBMEDIAPLAYER_DESTROYED')
+        player.destructed = true;
+      if (['url', 'frame_url', 'frame_title', 'audio_codec_name',
+           'video_codec_name', 'width', 'height', 'event'].includes(key)) {
         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) {
       if (!formats || formats.length == 0)
         return document.createTextNode('No formats');
 
       var table = document.createElement('table');
       var thead = document.createElement('thead');
       var theadRow = document.createElement('tr');
       for (var key in formats[0]) {
@@ skipping 101 matching lines @@
             componentType);
         return;
       }
 
       var fragment = document.createDocumentFragment();
       for (var id in components) {
         var li = document.createElement('li');
         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);
       listElement.appendChild(fragment);
 
       if (this.selectedAudioComponentType &&
           this.selectedAudioComponentType == componentType &&
           this.selectedAudioComponentId in components) {
         // Re-select the selected component since the button was just recreated.
         selectSelectableButton(this.selectedAudioComponentId);
@@ skipping 19 matching lines @@
 
       // Group name imposes rule that only one component can be selected
       // (and have its properties displayed) at a time.
       var buttonGroupName = 'player-buttons';
 
       var hasPlayers = false;
       var fragment = document.createDocumentFragment();
       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);
       this.playerListElement.appendChild(fragment);
 
       if (this.selectedPlayer && this.selectedPlayer.id in players) {
         // Re-select the selected player since the button was just recreated.
         selectSelectableButton(this.selectedPlayer.id);
       }
 
@@ skipping 110 matching lines @@
 
       if (this.selectedPlayer) {
         removeChildren(this.logTable);
         this.selectedPlayerLogIndex = 0;
       }
     },
   };
 
   return ClientRenderer;
 })();