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

Also fix an issue with missing constriants logged at webrtc-internals.

See a snapshot of the UI at https://docs.google.com/a/google.com/presentation/d/1dL2flqsQj8h_dTO9t8BWOCjiwbLiZCN2Nt93FHqpM9o/edit?usp=sharing

BUG=304023

Review URL: https://codereview.chromium.org/405683003

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@284545 0039d316-1c4b-4281-b951-d872f2087c98

content/browser/media/webrtc_internals_browsertest.cc

@@ -232,7 +232,7 @@ class MAYBE_WebRtcInternalsBrowserTest: public ContentBrowserTest {
     ASSERT_TRUE(ExecuteScriptAndExtractString(
         shell()->web_contents(),
         "window.domAutomationController.send("
-        "JSON.stringify(userMediaRequests));",
+            "JSON.stringify(userMediaRequests));",
         &json_requests));
     scoped_ptr<base::Value> value_requests;
     value_requests.reset(base::JSONReader::Read(json_requests));
@@ -259,6 +259,24 @@ class MAYBE_WebRtcInternalsBrowserTest: public ContentBrowserTest {
       EXPECT_EQ(requests[i].audio_constraints, audio);
       EXPECT_EQ(requests[i].video_constraints, video);
     }
+
+    bool user_media_tab_existed = false;
+    ASSERT_TRUE(ExecuteScriptAndExtractBool(
+        shell()->web_contents(),
+        "window.domAutomationController.send("
+            "$('user-media-tab-id') != null);",
+        &user_media_tab_existed));
+    EXPECT_EQ(!requests.empty(), user_media_tab_existed);
+
+    if (user_media_tab_existed) {
+      int user_media_request_count = -1;
+      ASSERT_TRUE(ExecuteScriptAndExtractInt(
+          shell()->web_contents(),
+          "window.domAutomationController.send("
+              "$('user-media-tab-id').childNodes.length);",
+          &user_media_request_count));
+      ASSERT_EQ(requests.size(), static_cast<size_t>(user_media_request_count));
+    }
   }
 
   // Verifies that DOM for |pc| is correctly created with the right content.

content/browser/resources/media/tab_view.js

@@ -50,9 +50,9 @@ var TabView = (function() {
       if (this.tabElements_[id])
         throw 'Tab already exists: ' + id;
 
-      var head = document.createElement('div');
+      var head = document.createElement('span');
       head.className = this.TAB_HEAD_CLASS_;
-      head.textContent = title + ' [' + id + ']';
+      head.textContent = title;
       head.title = title;
       this.headBar_.appendChild(head);
       head.addEventListener('click', this.switchTab_.bind(this, id));

content/browser/resources/media/webrtc_internals.css

@@ -88,8 +88,9 @@ th {
   text-decoration: underline;
   cursor: pointer;
   display: inline-block;
-  word-break: break-all;
+  overflow: hidden;
   width: 20em;
+  height: 3em;
 }
 
 .active-tab-head {
@@ -107,3 +108,12 @@ th {
 .active-tab-body {
   display: block;
 }
+
+.user-media-request-div-class {
+  background-color: lightgray;
+  margin: 10px 0 10px 0;
+}
+
+.user-media-request-div-class > div {
+  margin: 5px 0 5px 0;
+}

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;
@@ -137,6 +139,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.
  *
@@ -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,19 @@ 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)
+      $(USER_MEDIA_TAB_ID).removeChild(requests[i]);
+
+  }
+  if ($(USER_MEDIA_TAB_ID).childNodes.length == 0)
+    tabView.removeTab(USER_MEDIA_TAB_ID);
 }
 
 

content/renderer/media/peer_connection_tracker.cc

@@ -36,6 +36,29 @@ static string SerializeServers(
   return result;
 }
 
+static RTCMediaConstraints GetNativeMediaConstraints(
+    const blink::WebMediaConstraints& constraints) {
+  RTCMediaConstraints native_constraints;
+
+  if (constraints.isNull())
+    return native_constraints;
+
+  blink::WebVector<blink::WebMediaConstraint> mandatory;
+  constraints.getMandatoryConstraints(mandatory);
+  for (size_t i = 0; i < mandatory.size(); ++i) {
+    native_constraints.AddMandatory(
+        mandatory[i].m_name.utf8(), mandatory[i].m_value.utf8(), false);
+  }
+
+  blink::WebVector<blink::WebMediaConstraint> optional;
+  constraints.getOptionalConstraints(optional);
+  for (size_t i = 0; i < optional.size(); ++i) {
+    native_constraints.AddOptional(
+        optional[i].m_name.utf8(), optional[i].m_value.utf8(), false);
+  }
+  return native_constraints;
+}
+
 static string SerializeMediaConstraints(
     const RTCMediaConstraints& constraints) {
   string result;
@@ -441,8 +464,10 @@ void PeerConnectionTracker::TrackCreateDTMFSender(
 
 void PeerConnectionTracker::TrackGetUserMedia(
     const blink::WebUserMediaRequest& user_media_request) {
-  RTCMediaConstraints audio_constraints(user_media_request.audioConstraints());
-  RTCMediaConstraints video_constraints(user_media_request.videoConstraints());
+  RTCMediaConstraints audio_constraints(
+      GetNativeMediaConstraints(user_media_request.audioConstraints()));
+  RTCMediaConstraints video_constraints(
+      GetNativeMediaConstraints(user_media_request.videoConstraints()));
 
   RenderThreadImpl::current()->Send(new PeerConnectionTrackerHost_GetUserMedia(
       user_media_request.securityOrigin().toString().utf8(),