Adding the chrome://copresence page

chrome/browser/resources/copresence.js

+// Copyright 2014 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.
+
+/**
+ * Callback to refresh the list of directives.
+ * @param {Array.<Object>} directives
+ */
+function refreshDirectives(directives) {
+  var table = $('directives-table').tBodies[0];
+
+  // Fix the directives table to have the correct number of rows.
+  while (table.rows.length < directives.length)
+    table.insertRow();
+  while (table.rows.length > directives.length)
+    table.deleteRow();
+
+  // Populate the directives into the table.
+  directives.forEach(function(directive, index) {
+    var row = table.rows.item(index);
+    while (row.cells.length < 3)
+      row.insertCell();
+
+    row.cells.item(0).innerText = directive.type;

[xiyuan, 2014/12/05 18:56:55]

nit: .innerText -> .textContent, here an other places. 

Think .textContent is more preferrable when it can be used.

[Charlie, 2014/12/05 21:26:08]

Done.

+    row.cells.item(1).innerText = directive.medium;
+    row.cells.item(2).innerText = directive.duration;
+  });
+}
+
+/**
+ * Callback to add or update sent tokens.
+ * @param {Object} token
+ */
+function updateSentToken(token) {
+  updateTokenTable($('sent-tokens-table'), token);
+}
+
+/**
+ * Callback to add or update received tokens.
+ * @param {Object} token
+ */
+function updateReceivedToken(token) {
+  updateTokenTable($('received-tokens-table'), token);
+}
+
+/**
+ * Add or update a token in the specified table.
+ * @param {HTMLTableElement} table
+ * @param {Object} token
+ */
+function updateTokenTable(table, token) {
+  var rows = table.tBodies[0].rows;
+
+  var index;
+  for (index = 0; index < rows.length; index++) {
+    var row = rows.item(index);
+    if (row.cells[0].innerText == token.id) {
+      updateTokenRow(row, token);
+      break;
+    }
+  }
+
+  if (index == rows.length)
+    updateTokenRow(table.tBodies[0].insertRow(), token);
+}
+
+/*
+ * Update a token on the specified row.
+ * @param {HTMLTableRowElement} row
+ * @param {Object} token
+ */
+function updateTokenRow(row, token) {
+  while (row.cells.length < 4)
+    row.insertCell();
+  row.cells[0].innerText = token.id;
+  row.cells[1].innerText = token.status;
+  row.cells[2].innerText = token.medium;
+  row.cells[3].innerText = token.time;
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  chrome.send('populateCopresenceState');
+});