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

Buttons now contain:
  [player src or ID]
  [frame title] - [frame url]
  [resolution, codecs] [last event]

Screenshot: http://i.imgur.com/ue2ibQJ.png

Also removes the kCreated event from PipelineImpl. After this change,
the first event reported by every MediaLog is WEBMEDIAPLAYER_CREATED,
and we will be able to use that to improve log expiry.

BUG=551065

Review-Url: https://codereview.chromium.org/2964713004
Cr-Commit-Position: refs/heads/master@{#485093}

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);

content/browser/resources/media/media_internals.css

@@ -178,10 +178,15 @@ h3 {
 }
 
 label.selectable-button {
-  -webkit-appearance: button;
   -webkit-user-select: none;
-  padding: 2px 5px;
-  margin-bottom: 5px;
+  display: inline-block;
+  background: #BDF;
+  cursor: pointer;
+  border: solid 1px #999;
+  border-radius: 3px;
+  padding: 6px;
+  margin: 4px 0;
+  line-height: 1.4;
 }
 
 input.selectable-button {
@@ -189,12 +194,25 @@ input.selectable-button {
 }
 
 input.selectable-button:checked + label.selectable-button {
-  background-color: #4AA9E4;
-  color: white;
+  background-color: #2196F3;
+  border-color: #666;
+  color: #FFF;
+}
+
+input.selectable-button:hover + label.selectable-button {
+  border-color: #666;
 }
 
 label.destructed-player {
-  background-color: #E4854A;
+  background-color: #EEE;
+}
+
+.player-name {
+  font-weight: bold;
+}
+
+.player-frame {
+  font-style: italic;
 }
 
 .no-players-selected #players .property-wrapper,

media/base/pipeline_impl.cc

@@ -201,7 +201,6 @@ PipelineImpl::RendererWrapper::RendererWrapper(
       text_renderer_ended_(false),
       weak_factory_(this) {
   weak_this_ = weak_factory_.GetWeakPtr();
-  media_log_->AddEvent(media_log_->CreatePipelineStateChangedEvent(kCreated));
 }
 
 PipelineImpl::RendererWrapper::~RendererWrapper() {

media/blink/webmediaplayer_impl.cc

@@ -290,6 +290,10 @@ WebMediaPlayerImpl::WebMediaPlayerImpl(
 
   media_log_->AddEvent(media_log_->CreateCreatedEvent(
       url::Origin(frame_->GetSecurityOrigin()).GetURL().spec()));
+  media_log_->SetStringProperty("frame_url",
+                                frame_->GetDocument().Url().GetString().Utf8());
+  media_log_->SetStringProperty("frame_title",
+                                frame_->GetDocument().Title().Utf8());
 
   if (params->initial_cdm())
     SetCdm(params->initial_cdm());