On the chrome://media-internals web page, display a table of

video capture devices and supported formats.

Each change to the list of devices (e.g. plug/unplug)
automatically refreshes that part of the page.

Also allows copying the data in JSON format via window prompt.

BUG=344882

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

Cr-Commit-Position: refs/heads/master@{#300108}

5 files changed, 78 insertions, 5 deletions

diff --git a/content/browser/resources/media/client_renderer.js b/content/browser/resources/media/client_renderer.js
index 5cdedaa..61281c1 100644
--- a/content/browser/resources/media/client_renderer.js
+++ b/content/browser/resources/media/client_renderer.js
@@ -122,6 +122,44 @@ var ClientRenderer = (function() {
       }
     },
 
+    redrawVideoCaptureCapabilities: function(videoCaptureCapabilities, keys) {
+      var copyButtonElement =
+          document.getElementById('video-capture-capabilities-copy-button');
+      copyButtonElement.onclick = function() {
+        window.prompt('Copy to clipboard: Ctrl+C, Enter',
+                      JSON.stringify(videoCaptureCapabilities))
+      }
+
+      var videoTableBodyElement  =
+          document.getElementById('video-capture-capabilities-tbody');
+      removeChildren(videoTableBodyElement);
+
+      for (var component in videoCaptureCapabilities) {
+        var tableRow =  document.createElement('tr');
+        var device = videoCaptureCapabilities[ component ];
+        for (var i in keys) {
+          var value = device[keys[i]];
+          var tableCell = document.createElement('td');
+          var cellElement;
+          if ((typeof value) == (typeof [])) {
+            cellElement = document.createElement('ul');
+            for (var i in value) {
+              var format = value[i];
+              var li = document.createElement('li');
+              li.appendChild(document.createTextNode(format))
+              cellElement.appendChild(li)
+            }
+          } else {
+            cellElement = document.createTextNode(
+                ((typeof value) == 'undefined') ? 'n/a' : value);
+          }
+          tableCell.appendChild(cellElement)
+          tableRow.appendChild(tableCell);
+        }
+        videoTableBodyElement.appendChild(tableRow);
+      }
+    },
+
     redrawAudioComponentList_: function(componentType, components) {
       function redrawList(renderer, baseName, element) {
         var fragment = document.createDocumentFragment();
diff --git a/content/browser/resources/media/main.js b/content/browser/resources/media/main.js
index ee406b1..23b30cf 100644
--- a/content/browser/resources/media/main.js
+++ b/content/browser/resources/media/main.js
@@ -39,12 +39,17 @@ var media = (function() {
     manager = theManager;
   };
 
-  media.onReceiveAudioStreamData = function(everything) {
-    for (var component in everything) {
-      media.updateAudioComponent(everything[component]);
+  media.onReceiveAudioStreamData = function(audioStreamData) {
+    for (var component in audioStreamData) {
+      media.updateAudioComponent(audioStreamData[component]);
     }
   };
 
+  media.onReceiveVideoCaptureCapabilities = function(videoCaptureCapabilities) {
+    manager.updateVideoCaptureCapabilities(videoCaptureCapabilities)
+    console.log("Video capabilities", videoCaptureCapabilities);
+  }
+
   media.onReceiveConstants = function(constants) {
     for (var key in constants.eventTypes) {
       var value = constants.eventTypes[key];
diff --git a/content/browser/resources/media/manager.js b/content/browser/resources/media/manager.js
index 80cd032..c2fd976 100644
--- a/content/browser/resources/media/manager.js
+++ b/content/browser/resources/media/manager.js
@@ -109,6 +109,13 @@ var Manager = (function() {
                                          this.players_[id],
                                          key,
                                          value);
+    },
+
+    updateVideoCaptureCapabilities: function(videoCaptureCapabilities) {
+      // The keys of each device to be shown in order of appearance.
+      var videoCaptureDeviceKeys = ['id','name','formats','captureApi'];
+      this.clientRenderer_.redrawVideoCaptureCapabilities(
+          videoCaptureCapabilities, videoCaptureDeviceKeys);
     }
   };
 
diff --git a/content/browser/resources/media/media_internals.css b/content/browser/resources/media/media_internals.css
index 041527f..912b557 100644
--- a/content/browser/resources/media/media_internals.css
+++ b/content/browser/resources/media/media_internals.css
@@ -9,6 +9,7 @@ body,
   padding: 0;
   width: 100%;
   height: 100%;
+  font-family:Arial;
 }
 
 table {
@@ -114,4 +115,8 @@ h3 {
 
 .timestamp {
   min-width: 115px;
-}
\ No newline at end of file
+}
+
+#video-capture-capabilities-table tr td {
+  font-size:13px;
+}
diff --git a/content/browser/resources/media/media_internals.html b/content/browser/resources/media/media_internals.html
index 1f76230..d8b9f1c 100644
--- a/content/browser/resources/media/media_internals.html
+++ b/content/browser/resources/media/media_internals.html
@@ -36,7 +36,7 @@ found in the LICENSE file.
     <div id="property-wrapper">
       <h2>
         <span id="property-name"></span> Properties
-        <button id="copy-button">copy to clipboard</button>
+        <button id="copy-button">Copy to clipboard</button>
       </h2>
       <table id="property-table">
         <thead>
@@ -64,6 +64,24 @@ found in the LICENSE file.
         <tbody></tbody>
       </table>
     </div>
+    <div id="video-capture-capabilities-container">
+      <h2>Video Capture Device Capabilities</h2>
+      <button id="video-capture-capabilities-copy-button">
+        Copy to clipboard</button>
+      <table id="video-capture-capabilities-table">
+        <thead>
+          <tr>
+            <th>Device ID</th>
+            <th>Device Name</th>
+            <th>Formats</th>
+            <th>Capture API</th>
+          </tr>
+        </thead>
+        <tbody id="video-capture-capabilities-tbody">
+
+        <tbody>
+      </table>
+    </div>
   </div>
   <script src="media_internals.js"></script>
 </body>