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

content/browser/resources/media/webrtc_internals.js

Index: content/browser/resources/media/webrtc_internals.js
diff --git a/content/browser/resources/media/webrtc_internals.js b/content/browser/resources/media/webrtc_internals.js
index 53a04f4c6865592e64a19e8cbe303b346a8d7280..310f28a152e0ed965f866c4befbae1f8ed6ccab4 100644
--- a/content/browser/resources/media/webrtc_internals.js
+++ b/content/browser/resources/media/webrtc_internals.js
@@ -2,6 +2,8 @@
 // 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;
@@ -138,6 +140,21 @@ function extractSsrcInfo(data) {
 
 
 /**
+ * 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
@@ -186,7 +203,7 @@ function addPeerConnection(data) {
 
   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 +
@@ -258,8 +275,26 @@ function addStats(data) {
  *     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);
 }
 
 
@@ -269,11 +304,20 @@ function addGetUserMedia(data) {
  * @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);
+  }
 }