Adding the chrome://copresence page

chrome/browser/resources/copresence.js

Index: chrome/browser/resources/copresence.js
diff --git a/chrome/browser/resources/copresence.js b/chrome/browser/resources/copresence.js
new file mode 100644
index 0000000000000000000000000000000000000000..68438eec6667a93e4f6e7fa5e5f83692ed8c3729
--- /dev/null
+++ b/chrome/browser/resources/copresence.js
@@ -0,0 +1,86 @@
+// 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

[Dan Beam, 2014/12/08 22:41:59]

can you make this type stricter (e.g. {{type: string, medium: string, duration:
number}})?  maybe even create a @typedef?  we're just starting to compile our JS
in chromium and would be useful to have this info.

[Charlie, 2014/12/08 23:37:07]

Done. Can I run closure for just this file and have it check that I did it
right? Also, is there a way to provide descriptions of the individual fields?

[Dan Beam, 2014/12/08 23:52:56]

create a chrome/browser/resources/compiled_resources.gyp like others[1] and run:

  # run from src/, may require sudo apt-get install gyp
  gyp --depth . chrome/browser/resources/compiled_resources.gyp

  # directory may differ depending on your GYP config?
  ninja -C out/Default

if you'd like your code to be typechecked continuously (on every commit) add
your file to third_party/closure_compiler/compiled_resources.gyp.

[1]
https://code.google.com/p/chromium/codesearch#search/&q=compiled_resources.gy...

+ */
+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).textContent = directive.type;
+    row.cells.item(1).textContent = directive.medium;
+    row.cells.item(2).textContent = 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].textContent == 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

[Dan Beam, 2014/12/08 22:41:59]

nit: can you @typedef tokens as well?

[Charlie, 2014/12/08 23:37:07]

Done.

+ */
+function updateTokenRow(row, token) {
+  while (row.cells.length < 4)
+    row.insertCell();
+  row.className = token.statuses;
+
+  row.cells[0].textContent = token.id;
+  row.cells[1].textContent =
+      token.statuses.replace('confirmed', '(Confirmed)');

[Dan Beam, 2014/12/08 22:41:59]

i18n?

[Charlie, 2014/12/08 23:37:07]

i18n of our debug UI is currently a non-goal. More display strings are listed
verbatim in copresence_ui_handler.cc. I added an i18n TODO there.

+  row.cells[2].textContent = token.medium;
+  row.cells[3].textContent = token.time;
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  chrome.send('populateCopresenceState');
+});