Removed old media-internals page and rewrote it.

content/browser/resources/media/new/table_gen.js

Index: content/browser/resources/media/new/table_gen.js
diff --git a/content/browser/resources/media/new/table_gen.js b/content/browser/resources/media/new/table_gen.js
new file mode 100644
index 0000000000000000000000000000000000000000..55c87fc64d685064c41330c1d88921f50c6aac1c
--- /dev/null
+++ b/content/browser/resources/media/new/table_gen.js
@@ -0,0 +1,138 @@
+// Copyright (c) 2012 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @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');
+
+  arr.forEach(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);
+
+    (Array.prototype.slice.call(arguments)).forEach(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";
+  // 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");
+
+  rows.forEach(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);
+      remainingColumns.forEach(function (column) {
+        var replacement = modValues.pop();
+        // If the value is either null or undefined,
+        // don't update the text.
+        if (replacement) {
+          column.textContent = replacement;
+        }
+      });
+    }
+  });
+}