Improve video capture columns in chrome://media-internals

content/browser/resources/media/client_renderer.js

Index: content/browser/resources/media/client_renderer.js
diff --git a/content/browser/resources/media/client_renderer.js b/content/browser/resources/media/client_renderer.js
index 61281c1b8e976a02580d4f879ca350c0380265ae..0eedb35df468e133347b387ead8e741e12b5854d 100644
--- a/content/browser/resources/media/client_renderer.js
+++ b/content/browser/resources/media/client_renderer.js
@@ -122,6 +122,35 @@ var ClientRenderer = (function() {
       }
     },
 
+    createVideoCaptureFormatTable: function(formats) {
+      if (!formats || formats.length == 0)
+        return document.createTextNode('No formats');
+
+      var table = document.createElement('table');
+      var thead = document.createElement('thead');
+      var theadRow = document.createElement('tr');
+      for (var key in formats[0]) {
+        var th = document.createElement('th');
+        th.appendChild(document.createTextNode(key));
+        theadRow.appendChild(th);
+      }
+      thead.appendChild(theadRow);
+      table.appendChild(thead);
+      var tbody = document.createElement('tbody');
+      for (var i=0; i < formats.length; ++i) {
+        var tr = document.createElement('tr')
+        for (var key in formats[i]) {
+          var td = document.createElement('td');
+          td.appendChild(document.createTextNode(formats[i][key]));
+          tr.appendChild(td);
+        }
+        tbody.appendChild(tr);
+      }
+      table.appendChild(tbody);
+      table.classList.add('video-capture-formats-table');
+      return table;
+    },
+
     redrawVideoCaptureCapabilities: function(videoCaptureCapabilities, keys) {
       var copyButtonElement =
           document.getElementById('video-capture-capabilities-copy-button');
@@ -142,13 +171,7 @@ var ClientRenderer = (function() {
           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)
-            }
+            cellElement = this.createVideoCaptureFormatTable(value);
           } else {
             cellElement = document.createTextNode(
                 ((typeof value) == 'undefined') ? 'n/a' : value);