Removed old media-internals page and rewrote it.

content/browser/resources/media/util/tablegen.js

+/**
+ * @fileoverview Helper functions for generating tables
+ */
+
+/**
+ * Given an array of strings (or anything that will be cast to a string)
+ * generate an HTML <tr> element that contains <td>s that contain an element
+ * in the array.
+ *
+ * Meant to be used with appendRow()
+ */
+function genRow(arr) {
+    "use strict";
+
+    var tr = document.createElement('tr');
+
+    goog.array.forEach(arr, function (text) {
+        var td = document.createElement('td');
+        var textNode = document.createTextNode(text);
+        td.appendChild(textNode);
+        tr.appendChild(td);
+    });
+    return tr;
+}
+
+function genLogRow(logObj) {
+    "use strict";
+    var tr = document.createElement("tr");
+
+    // Unrolled for performance.
+    // This function gets called potentially thousands of times per second
+    var td1 = document.createElement('td');
+    var td2 = document.createElement('td');
+    var td3 = document.createElement('td');
+
+    var text1 = document.createTextNode(goog.time.millisToString(logObj.time));
+    var text2 = document.createTextNode(logObj.key);
+    var text3 = document.createTextNode(logObj.value);
+
+    td1.appendChild(text1);
+    td2.appendChild(text2);
+    td3.appendChild(text3);
+
+    tr.appendChild(td1);
+    tr.appendChild(td2);
+    tr.appendChild(td3);
+
+    return tr;
+}
+
+/**
+ * Creates an HTML <table> element that contains <thead>
+ * and <tbody> elements.  If arguments are applied to this function,
+ * those arguments are inserted into the <thead> section.
+ */
+function makeTable(headers) {
+    "use strict";
+
+    var table = document.createElement('table');
+
+    if (arguments.length > 0) {
+        var thead = document.createElement('thead');
+        var tr = document.createElement('tr');
+        thead.appendChild(tr);
+        table.appendChild(thead);
+
+        goog.array.forEach(arguments, function (arg) {
+            var td = document.createElement('td');
+            var text = document.createTextNode(arg);
+            td.appendChild(text);
+            tr.appendChild(td);
+        });
+    }
+
+    var tbody = document.createElement('tbody');
+    table.appendChild(tbody);
+    return table;
+}
+
+/**
+ * Adds a row to a table
+ */
+function appendRow(table, row) {
+    "use strict";
+
+//    console.trace();
+//    throw "error";
+
+    // last child should be the <tbody>
+    table.lastChild.appendChild(row);
+}
+
+function removeChildren(element) {
+    "use strict";
+
+//    console.trace();
+//    throw "error";
+
+    while (element.hasChildNodes()) {
+        element.removeChild(element.lastChild);
+    }
+}
+
+
+/* If you are treating a table like it is a map where the first <td>
+ * is the name, and the remaining <td>s are properties of that object, then
+ * it might be useful to update that table.
+ */
+function modRow(table, key, valueMult) {
+    "use strict";
+
+    // Since we can get multiple values as arguments, make a list of them.
+    // leaving off the first two args.
+    // Then reverse beause we pop them off in the opposite order.
+    var values = goog.array.toArray(arguments).splice(2).reverse();
+
+    var tbody = table.querySelector("tbody");
+    var rows = tbody.querySelectorAll("tr");
+
+    goog.array.forEach(rows, function (row) {
+        // We need to copy them because we are going to pop them out to
+        // populate the columns
+        var modValues = goog.array.toArray(values);
+        var firstColumn = row.querySelector("td");
+        if (firstColumn.textContent.trim() === key) {
+            var remainingColumns = goog.array.toArray(
+                row.querySelectorAll("td")).slice(1);
+            goog.array.forEach(remainingColumns, function (column) {
+                var replacement = modValues.pop();
+                // If the value is either null or undefined,
+                // don't update the text.
+                if (replacement) {
+                    column.textContent = replacement;
+                }
+            });
+        }
+    });
+}