Adds the UserMedia requests to the UI of chrome://webrtc-internals.

content/browser/resources/media/webrtc_internals.js

 // Copyright (c) 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 USER_MEDIA_TAB_ID = 'user-media-tab-id';
+
 var tabView = null;
 var ssrcInfoManager = null;
 var peerConnectionUpdateTable = null;
 var statsTable = null;
 var dumpCreator = null;
 /** A map from peer connection id to the PeerConnectionRecord. */
 var peerConnectionDataStore = {};
 /** A list of getUserMedia requests. */
 var userMediaRequests = [];
 
@@ skipping 116 matching lines @@
  */
 function extractSsrcInfo(data) {
   if (data.type == 'setLocalDescription' ||
       data.type == 'setRemoteDescription') {
     ssrcInfoManager.addSsrcStreamInfo(data.value);
   }
 }
 
 
 /**
+ * A helper function for appending a child element to |parent|.
+ *
+ * @param {!Element} parent The parent element.
+ * @param {string} tag The child element tag.
+ * @param {string} text The textContent of the new DIV.
+ * @return {!Element} the new DIV element.
+ */
+function appendChildWithText(parent, tag, text) {
+  var child = document.createElement(tag);
+  child.textContent = text;
+  parent.appendChild(child);
+  return child;
+}
+
+/**
  * Helper for adding a peer connection update.
  *
  * @param {Element} peerConnectionElement
  * @param {!PeerConnectionUpdateEntry} update The peer connection update data.
  */
 function addPeerConnectionUpdate(peerConnectionElement, update) {
   peerConnectionUpdateTable.addPeerConnectionUpdate(peerConnectionElement,
                                                     update);
   extractSsrcInfo(update);
   peerConnectionDataStore[peerConnectionElement.id].addUpdate(update);
@@ skipping 28 matching lines @@
   var id = getPeerConnectionId(data);
 
   if (!peerConnectionDataStore[id]) {
     peerConnectionDataStore[id] = new PeerConnectionRecord();
   }
   peerConnectionDataStore[id].initialize(
       data.url, data.servers, data.constraints);
 
   var peerConnectionElement = $(id);
   if (!peerConnectionElement) {
-    peerConnectionElement = tabView.addTab(id, data.url);
+    peerConnectionElement = tabView.addTab(id, data.url + ' [' + id + ']');
   }
   peerConnectionElement.innerHTML =
       '<p>' + data.url + ' ' + data.servers + ' ' + data.constraints +
       '</p>';
 
   return peerConnectionElement;
 }
 
 
 /**
@@ skipping 51 matching lines @@
 }
 
 
 /**
  * Adds a getUserMedia request.
  *
  * @param {!Object} data The object containing rid {number}, pid {number},
  *     origin {string}, audio {string}, video {string}.
  */
 function addGetUserMedia(data) {
-  // TODO(jiayl): add the getUserMedia info to the tabbed UI.
   userMediaRequests.push(data);
+
+  if (!$(USER_MEDIA_TAB_ID)) {
+    tabView.addTab(USER_MEDIA_TAB_ID, 'GetUserMedia Requests');
+  }
+
+  var requestDiv = document.createElement('div');
+  requestDiv.className = 'user-media-request-div-class';
+  requestDiv.rid = data.rid;
+  $(USER_MEDIA_TAB_ID).appendChild(requestDiv);
+
+  appendChildWithText(requestDiv, 'div', 'Caller origin: ' + data.origin);
+  appendChildWithText(requestDiv, 'div', 'Caller process id: ' + data.pid);
+  appendChildWithText(requestDiv, 'span', 'Audio Constraints').style.fontWeight
+      = 'bold';
+  appendChildWithText(requestDiv, 'div', data.audio);
+
+  appendChildWithText(requestDiv, 'span', 'Video Constraints').style.fontWeight
+      = 'bold';
+  appendChildWithText(requestDiv, 'div', data.video);
 }
 
 
 /**
  * Removes the getUserMedia requests from the specified |rid|.
  *
  * @param {!Object} data The object containing rid {number}, the render id.
  */
 function removeGetUserMediaForRenderer(data) {
-  // TODO(jiayl): remove the getUserMedia info from the tabbed UI.
   for (var i = userMediaRequests.length - 1; i >= 0; --i) {
     if (userMediaRequests[i].rid == data.rid)
       userMediaRequests.splice(i, 1);
   }
+
+  var requests = $(USER_MEDIA_TAB_ID).childNodes;
+  for (var i = 0; i < requests.length; ++i) {
+    if (requests[i].rid == data.rid) {

[vrk (LEFT CHROMIUM), 2014/07/18 22:01:06]

nit: no {}

[jiayl, 2014/07/18 22:06:24]

Done.

+      $(USER_MEDIA_TAB_ID).removeChild(requests[i]);
+    }
+  }
+  if ($(USER_MEDIA_TAB_ID).childNodes.length == 0) {

[vrk (LEFT CHROMIUM), 2014/07/18 22:01:06]

nit: no {}

[jiayl, 2014/07/18 22:06:24]

Done.

+    tabView.removeTab(USER_MEDIA_TAB_ID);
+  }
 }
 
 
 /**
  * Notification that the AEC recording file selection dialog was cancelled,
  * i.e. AEC has not been enabled.
  */
 function aecRecordingFileSelectionCancelled() {
   dumpCreator.disableAecRecording();
 }
 
 
 /**
  * Set
  */
 function enableAecRecording() {
   dumpCreator.enableAecRecording();
 }