sync: Buffer Protocol Events for about:sync page

chrome/browser/resources/sync_internals/about.js

 // 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.
 
 cr.define('chrome.sync.about_tab', function() {
   // Contains the latest snapshot of sync about info.
   chrome.sync.aboutInfo = {};
 
   function refreshAboutInfo(aboutInfo) {
     chrome.sync.aboutInfo = aboutInfo;
     var aboutInfoDiv = $('about-info');
     jstProcess(new JsEvalContext(aboutInfo), aboutInfoDiv);
   }
 
   function onAboutInfoUpdatedEvent(e) {
     refreshAboutInfo(e.details);
   }
 
   /** Container for accumulated sync protocol events. */
   var protocolEvents = [];
 
+  /** We may receive re-delivered events.  Keep a record of ones we've seen. */
+  var knownEventTimestamps = {};
+
   /**
    * Callback for incoming protocol events.
    * @param {Event} e The protocol event.
    */
   function onReceivedProtocolEvent(e) {
     var details = e.details;
+
+    // Return early if we've seen this event before.  Assumes that timestamps
+    // are sufficiently high resolution to uniquely identify an event.
+    if (knownEventTimestamps.hasOwnProperty(details.time)) {
+      return;
+    }
+
+    knownEventTimestamps[details.time] = true;
     protocolEvents.push(details);
 
     var context = new JsEvalContext({ events: protocolEvents });
     jstProcess(context, $('traffic-event-container'));
   }
 
   /**
    * Initializes state and callbacks for the protocol event log UI.
    */
   function initProtocolEventLog() {
     chrome.sync.events.addEventListener(
         'onProtocolEvent', onReceivedProtocolEvent);
 
     // Make the prototype jscontent element disappear.
     jstProcess({}, $('traffic-event-container'));
   }
 
   /**
-   * Toggles the given traffic event entry div's "expanded" state.
-   * @param {HTMLElement} element the element to toggle.
+   * Initializes listeners for status dump and import UI.
    */
-  function expandListener(element) {
-    element.target.classList.toggle('traffic-event-entry-expanded');
-  }
-
-  /**
-   * Attaches a listener to the given traffic event entry div.
-   * @param {HTMLElement} element the element to attach the listener to.
-   */
-  function addExpandListener(element) {
-    element.addEventListener('click', expandListener, false);
-  }
-
-  function onLoad() {
+  function initStatusDumpButton() {
     $('status-data').hidden = true;
 
-    chrome.sync.events.addEventListener(
-        'onAboutInfoUpdated',
-        onAboutInfoUpdatedEvent);
-    chrome.sync.requestUpdatedAboutInfo();
-
     var dumpStatusButton = $('dump-status');
     dumpStatusButton.addEventListener('click', function(event) {
       var aboutInfo = chrome.sync.aboutInfo;
       if (!$('include-ids').checked) {
         aboutInfo.details = chrome.sync.aboutInfo.details.filter(function(el) {
           return !el.is_sensitive;
         });
       }
       var data = '';
       data += new Date().toString() + '\n';
@@ skipping 25 matching lines @@
       data = data.substr(firstBrace);
 
       // Remove listeners to prevent sync events from overwriting imported data.
       chrome.sync.events.removeEventListener(
           'onAboutInfoUpdated',
           onAboutInfoUpdatedEvent);
 
       var aboutInfo = JSON.parse(data);
       refreshAboutInfo(aboutInfo);
     });
+  }
 
+  /**
+   * Toggles the given traffic event entry div's "expanded" state.
+   * @param {HTMLElement} element the element to toggle.
+   */
+  function expandListener(element) {
+    element.target.classList.toggle('traffic-event-entry-expanded');
+  }
+
+  /**
+   * Attaches a listener to the given traffic event entry div.
+   * @param {HTMLElement} element the element to attach the listener to.
+   */
+  function addExpandListener(element) {
+    element.addEventListener('click', expandListener, false);
+  }
+
+  function onLoad() {
+    initStatusDumpButton();
     initProtocolEventLog();
+
+    chrome.sync.events.addEventListener(
+        'onAboutInfoUpdated',
+        onAboutInfoUpdatedEvent);
+
+    // Register to receive a stream of event notifications.
+    chrome.sync.registerForEvents();
+
+    // Request an about info update event to initialize the page.
+    chrome.sync.requestUpdatedAboutInfo();
   }
 
   return {
     onLoad: onLoad,
     addExpandListener: addExpandListener
   };
 });
 
 document.addEventListener(
     'DOMContentLoaded', chrome.sync.about_tab.onLoad, false);