[Sync] Add 'Events' tab to chrome://sync-internals

The new 'Events' tab displays sync events as they occur.

Tidied up sync_log.js and data.html.

BUG=69500
TEST=

Review URL: http://codereview.chromium.org/6612034

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@76955 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 238 insertions, 138 deletions

diff --git a/chrome/browser/resources/sync_internals/data.html b/chrome/browser/resources/sync_internals/data.html
index d32961d..732bbf5 100644
--- a/chrome/browser/resources/sync_internals/data.html
+++ b/chrome/browser/resources/sync_internals/data.html
@@ -1,40 +1,3 @@
-<script>
-(function() {
-function onLoad() {
-  var dumpToTextButton = document.getElementById('dump-to-text');
-  var dataDump = document.getElementById('data-dump');
-  dumpToTextButton.addEventListener('click', function(event) {
-    // TODO(akalin): Add info like Chrome version, OS, date dumped, etc.
-
-    var data = '';
-    data += '======\n';
-    data += 'Status\n';
-    data += '======\n';
-    data += JSON.stringify(chrome.sync.aboutInfo, null, 2);
-    data += '\n';
-    data += '\n';
-
-    data += '=============\n';
-    data += 'Notifications\n';
-    data += '=============\n';
-    data += JSON.stringify(chrome.sync.notifications, null, 2);
-    data += '\n';
-    data += '\n';
-
-    data += '===\n';
-    data += 'Log\n';
-    data += '===\n';
-    data += JSON.stringify(chrome.sync.log.entries, null, 2);
-    data += '\n';
-
-    dataDump.textContent = data;
-  });
-}
-
-document.addEventListener("DOMContentLoaded", onLoad, false);
-})();
-</script>
-
 <p><strong>Some personal info may be in the data dump.  An option to
 redact sensitive info will be added in the future, but until then, be
 careful about posting data dumps on bug reports.</strong></p>
@@ -44,3 +7,36 @@ careful about posting data dumps on bug reports.</strong></p>
 <button id="dump-to-text">Dump to text</button>
 
 <pre id="data-dump"></pre>
+
+<script>
+(function() {
+var dumpToTextButton = document.getElementById('dump-to-text');
+var dataDump = document.getElementById('data-dump');
+dumpToTextButton.addEventListener('click', function(event) {
+  // TODO(akalin): Add info like Chrome version, OS, date dumped, etc.
+
+  var data = '';
+  data += '======\n';
+  data += 'Status\n';
+  data += '======\n';
+  data += JSON.stringify(chrome.sync.aboutInfo, null, 2);
+  data += '\n';
+  data += '\n';
+
+  data += '=============\n';
+  data += 'Notifications\n';
+  data += '=============\n';
+  data += JSON.stringify(chrome.sync.notifications, null, 2);
+  data += '\n';
+  data += '\n';
+
+  data += '===\n';
+  data += 'Log\n';
+  data += '===\n';
+  data += JSON.stringify(chrome.sync.log.entries, null, 2);
+  data += '\n';
+
+  dataDump.textContent = data;
+});
+})();
+</script>
diff --git a/chrome/browser/resources/sync_internals/events.html b/chrome/browser/resources/sync_internals/events.html
new file mode 100644
index 0000000..928ad9d
--- /dev/null
+++ b/chrome/browser/resources/sync_internals/events.html
@@ -0,0 +1,65 @@
+<style>
+#sync-events-table,
+#sync-events-table th,
+#sync-events-table td {
+  border: 1px black solid;
+}
+
+#sync-events-table {
+  width: 100%;
+}
+
+#sync-events > tr {
+  vertical-align: top;
+}
+</style>
+
+<table id="sync-events-table">
+  <thead>
+    <th>Time</th>
+    <th>Submodule</th>
+    <th>Event</th>
+    <th>Details</th>
+  </thead>
+  <tbody id="sync-events">
+  </tbody>
+</table>
+
+<script>
+(function() {
+function makeLogEntryNode(entry) {
+  var timeNode = document.createElement('td');
+  timeNode.innerText = entry.date;
+
+  var submoduleNode = document.createElement('td');
+  submoduleNode.innerText = entry.submodule;
+
+  var eventNode = document.createElement('td');
+  eventNode.innerText = entry.event;
+
+  var details = document.createElement('pre');
+  details.innerText = JSON.stringify(entry.details, null, 2);
+  var detailsNode = document.createElement('td');
+  detailsNode.appendChild(details);
+
+  var node = document.createElement('tr');
+  node.appendChild(timeNode);
+  node.appendChild(submoduleNode);
+  node.appendChild(eventNode);
+  node.appendChild(detailsNode);
+
+  return node;
+}
+
+var syncEvents = document.getElementById('sync-events');
+
+var entries = chrome.sync.log.entries;
+for (var i = 0; i < entries.length; ++i) {
+  syncEvents.appendChild(makeLogEntryNode(entries[i]));
+}
+
+chrome.sync.log.addEventListener('append', function(event) {
+  syncEvents.appendChild(makeLogEntryNode(event.detail));
+});
+})();
+</script>
diff --git a/chrome/browser/resources/sync_internals/sync_index.html b/chrome/browser/resources/sync_internals/sync_index.html
index 572fa73..b438872 100644
--- a/chrome/browser/resources/sync_internals/sync_index.html
+++ b/chrome/browser/resources/sync_internals/sync_index.html
@@ -6,6 +6,7 @@ chrome/test/functional/special_tabs.py. -->
 <title>Sync Internals</title>
 <link rel="stylesheet" href="chrome://resources/css/tabs.css">
 <script src="chrome://resources/js/cr.js"></script>
+<script src="chrome://resources/js/cr/event_target.js"></script>
 <script src="chrome://resources/js/cr/ui.js"></script>
 <script src="chrome://resources/js/cr/ui/focus_outline_manager.js"></script>
 <script src="chrome://resources/js/cr/ui/tabs.js"></script>
@@ -27,6 +28,7 @@ chrome/test/functional/special_tabs.py. -->
     <tab>About</tab>
     <tab>Data</tab>
     <tab>Notifications</tab>
+    <tab>Events</tab>
     <tab>Sync Node Browser</tab>
   </tabs>
   <tabpanels>
@@ -40,6 +42,9 @@ chrome/test/functional/special_tabs.py. -->
       <include src="notifications.html" />
     </tabpanel>
     <tabpanel>
+      <include src="events.html" />
+    </tabpanel>
+    <tabpanel>
       <include src="sync_node_browser.html" />
     </tabpanel>
   </tabpanels>
diff --git a/chrome/browser/resources/sync_internals/sync_log.js b/chrome/browser/resources/sync_internals/sync_log.js
index 51c3d28..893bac2 100644
--- a/chrome/browser/resources/sync_internals/sync_log.js
+++ b/chrome/browser/resources/sync_internals/sync_log.js
@@ -2,115 +2,149 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-var chrome = chrome || {};
-chrome.sync = chrome.sync || {};
-(function () {
+// require: cr.js
+// require: cr/event_target.js
+
+/**
+ * @fileoverview This creates a log object which listens to and
+ * records all sync events.
+ */
+
+cr.define('chrome.sync', function() {
+  /**
+   * Creates a new log object which then immediately starts recording
+   * sync events.  Recorded entries are available in the 'entries'
+   * property and there is an 'append' event which can be listened to.
+   * @constructor
+   * @extends {cr.EventTarget}
+   */
+  var Log = function() {
+    var self = this;
+
+    // Service
+
+    chrome.sync.onSyncServiceStateChanged.addListener(function () {
+      self.log_('service', 'onSyncServiceStateChanged', {});
+    });
 
-function Log() {
-  this.entries = [];
+    // Notifier
 
-  var self = this;
+    chrome.sync.onSyncNotificationStateChange.addListener(
+      function (notificationsEnabled) {
+        self.log_('notifier', 'onSyncNotificationStateChange', {
+                    notificationsEnabled: notificationsEnabled
+                  });
+      });
 
-  // Service
+    chrome.sync.onSyncIncomingNotification.addListener(function (changedTypes) {
+      self.log_('notifier', 'onSyncIncomingNotification', {
+                  changedTypes: changedTypes
+                });
+    });
 
-  chrome.sync.onSyncServiceStateChanged.addListener(function () {
-    self.log_('service', 'onSyncServiceStateChanged', {});
-  });
+    // Manager
+
+    chrome.sync.onChangesApplied.addListener(function (modelType, changes) {
+      self.log_('manager', 'onChangesApplied', {
+                  modelType: modelType,
+                  changes: changes
+                });
+    });
+
+    chrome.sync.onChangesComplete.addListener(function (modelType) {
+      self.log_('manager', 'onChangesComplete', {
+                  modelType: modelType
+                });
+    });
+
+    chrome.sync.onSyncCycleCompleted.addListener(function (snapshot) {
+      self.log_('manager', 'onSyncCycleCompleted', {
+                  snapshot: snapshot
+                });
+    });
+
+    chrome.sync.onAuthError.addListener(function (authError) {
+      self.log_('manager', 'onAuthError', {
+                  authError: authError
+                });
+    });
+
+    chrome.sync.onUpdatedToken.addListener(function (token) {
+      self.log_('manager', 'onUpdatedToken', {
+                  token: token
+                });
+    });
 
-  // Notifier
+    chrome.sync.onPassphraseRequired.addListener(function (forDecryption) {
+      self.log_('manager', 'onPassphraseRequired', {
+                  forDecryption: forDecryption
+                });
+    });
 
-  chrome.sync.onSyncNotificationStateChange.addListener(
-    function (notificationsEnabled) {
-      self.log_('notifier', 'onSyncNotificationStateChange', {
-                  notificationsEnabled: notificationsEnabled
+    chrome.sync.onPassphraseAccepted.addListener(function (bootstrapToken) {
+      self.log_('manager', 'onPassphraseAccepted', {
+                  bootstrapToken: bootstrapToken
                 });
     });
 
-  chrome.sync.onSyncIncomingNotification.addListener(function (changedTypes) {
-    self.log_('notifier', 'onSyncIncomingNotification', {
-                changedTypes: changedTypes
-              });
-  });
-
-  // Manager
-
-  chrome.sync.onChangesApplied.addListener(function (modelType, changes) {
-    self.log_('manager', 'onChangesApplied', {
-                modelType: modelType,
-                changes: changes
-              });
-  });
-
-  chrome.sync.onChangesComplete.addListener(function (modelType) {
-    self.log_('manager', 'onChangesComplete', {
-                modelType: modelType
-              });
-  });
-
-  chrome.sync.onSyncCycleCompleted.addListener(function (snapshot) {
-    self.log_('manager', 'onSyncCycleCompleted', {
-                snapshot: snapshot
-              });
-  });
-
-  chrome.sync.onAuthError.addListener(function (authError) {
-    self.log_('manager', 'onAuthError', {
-                authError: authError
-              });
-  });
-
-  chrome.sync.onUpdatedToken.addListener(function (token) {
-    self.log_('manager', 'onUpdatedToken', {
-                token: token
-              });
-  });
-
-  chrome.sync.onPassphraseRequired.addListener(function (forDecryption) {
-    self.log_('manager', 'onPassphraseRequired', {
-                forDecryption: forDecryption
-              });
-  });
-
-  chrome.sync.onPassphraseAccepted.addListener(function (bootstrapToken) {
-    self.log_('manager', 'onPassphraseAccepted', {
-                bootstrapToken: bootstrapToken
-              });
-  });
-
-  chrome.sync.onInitializationComplete.addListener(function () {
-    self.log_('manager', 'onInitializationComplete', {});
-  });
-
-  chrome.sync.onPaused.addListener(function () {
-    self.log_('manager', 'onPaused', {});
-  });
-
-  chrome.sync.onResumed.addListener(function () {
-    self.log_('manager', 'onResumed', {});
-  });
-
-  chrome.sync.onStopSyncingPermanently.addListener(function () {
-    self.log_('manager', 'onStopSyncingPermanently', {});
-  });
-
-  chrome.sync.onClearServerDataSucceeded.addListener(function () {
-    self.log_('manager', 'onClearServerDataSucceeded', {});
-  });
-
-  chrome.sync.onClearServerDataFailed.addListener(function () {
-    self.log_('manager', 'onClearServerDataFailed', {});
-  });
-}
-
-Log.prototype.log_ = function(submodule, event, details) {
-  var entry = {
-    submodule: submodule,
-    event: event,
-    date: new Date(),
-    details: details
+    chrome.sync.onInitializationComplete.addListener(function () {
+      self.log_('manager', 'onInitializationComplete', {});
+    });
+
+    chrome.sync.onPaused.addListener(function () {
+      self.log_('manager', 'onPaused', {});
+    });
+
+    chrome.sync.onResumed.addListener(function () {
+      self.log_('manager', 'onResumed', {});
+    });
+
+    chrome.sync.onStopSyncingPermanently.addListener(function () {
+      self.log_('manager', 'onStopSyncingPermanently', {});
+    });
+
+    chrome.sync.onClearServerDataSucceeded.addListener(function () {
+      self.log_('manager', 'onClearServerDataSucceeded', {});
+    });
+
+    chrome.sync.onClearServerDataFailed.addListener(function () {
+      self.log_('manager', 'onClearServerDataFailed', {});
+    });
+  };
+
+  Log.prototype = {
+    __proto__: cr.EventTarget.prototype,
+
+    /**
+     * The recorded log entries.
+     * @type {array}
+     */
+    entries: [],
+
+    /**
+     * Records a single event with the given parameters and fires the
+     * 'append' event with the newly-created event as the 'detail'
+     * field of a custom event.
+     * @param {string} submodule The sync submodule for the event.
+     * @param {string} event The name of the event.
+     * @param {dictionary} details A dictionary of event-specific details.
+     */
+    log_: function(submodule, event, details) {
+      var entry = {
+        submodule: submodule,
+        event: event,
+        date: new Date(),
+        details: details
+      };
+      this.entries.push(entry);
+      // Fire append event.
+      var e = cr.doc.createEvent('CustomEvent');
+      e.initCustomEvent('append', false, false, entry);
+      this.dispatchEvent(e);
+    }
   };
-  this.entries.push(entry);
-}
 
-chrome.sync.log = new Log();
-})();
+  return {
+    log: new Log()
+  };
+});