[USS] Show USS counters in about:sync page

components/sync/driver/resources/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 highlightIfChanged(node, oldVal, newVal) {
     function clearHighlight() {
@@ skipping 10 matching lines @@
       node.setAttribute('highlighted', '');
     }
   }
 
   function refreshAboutInfo(aboutInfo) {
     chrome.sync.aboutInfo = aboutInfo;
     var aboutInfoDiv = $('about-info');
     jstProcess(new JsEvalContext(aboutInfo), aboutInfoDiv);
   }
 
+  function onAboutInfoCountersUpdated(e) {

[pavely, 2016/10/03 21:40:14]

Could you move this function below onAboutInfoUpdatedEvent.
onAboutInfoUpdatedEvent and refreshAboutInfo belong together as former calls
latter.

[Gang Wu, 2016/10/06 00:20:22]

Done.

+    var details = e.details;
+
+    var modelType = details.modelType;
+    var counters = details.counters;
+
+    var type_status_array = chrome.sync.aboutInfo.type_status;

[pavely, 2016/10/03 21:40:14]

onCountersUpdated can be called for different counter types. Do you need to
handle it here? Maybe it doesn't matter.

[Gang Wu, 2016/10/06 00:20:22]

I think it doesn't matter, just means update more.

+    type_status_array.forEach(function(row) {
+      if (row.name == modelType) {
+        row.num_entries = counters.numEntriesAndTombstones;
+        row.num_live = counters.numEntries;
+      }
+    });
+    jstProcess(
+        new JsEvalContext({ type_status: type_status_array }),
+        $('typeInfo'));
+  }
+
   function onAboutInfoUpdatedEvent(e) {
     refreshAboutInfo(e.details);
   }
 
   /**
    * Helper to determine if an element is scrolled to its bottom limit.
    * @param {Element} elem element to check
    * @return {boolean} true if the element is scrolled to the bottom
    */
   function isScrolledToBottom(elem) {
@@ skipping 95 matching lines @@
         $('status-text').value = 'Invalid sync status dump.';
         return;
       }
       data = data.substr(firstBrace);
 
       // Remove listeners to prevent sync events from overwriting imported data.
       chrome.sync.events.removeEventListener(
           'onAboutInfoUpdated',
           onAboutInfoUpdatedEvent);
 
+      chrome.sync.events.removeEventListener(
+          'onCountersUpdated',
+          onAboutInfoCountersUpdated);
+
       var aboutInfo = JSON.parse(data);
       refreshAboutInfo(aboutInfo);
     });
   }
 
   /**
    * Toggles the given traffic event entry div's "expanded" state.
    * @param {MouseEvent} e the click event that triggered the toggle.
    */
   function expandListener(e) {
     e.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);
 
+    chrome.sync.events.addEventListener(
+        'onCountersUpdated',
+        onAboutInfoCountersUpdated);
+
     // 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,
     highlightIfChanged: highlightIfChanged
   };
 });
 
 document.addEventListener(
     'DOMContentLoaded', chrome.sync.about_tab.onLoad, false);