[Sync] Speed up Javascript node operations

chrome/browser/resources/sync_internals/sync_node_browser.js

 // Copyright (c) 2011 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.
 
 // require: cr.js
 // require: cr/ui.js
 // require: cr/ui/tree.js
 
 cr.define('chrome.sync', function() {
   // Allow platform specific CSS rules.
   //
   // TODO(akalin): BMM and options page does something similar, too.
   // Move this to util.js.
   if (cr.isWindows)
     document.documentElement.setAttribute('os', 'win');
 
   // TODO(akalin): Create SyncNodeTree/SyncNodeTreeItem classes that
   // hide all these details.
 
   /**
+   * Returns an object which measures elapsed time.
+   */
+  var makeTimer = function() {
+    var start = new Date();
+
+    return {
+      /**
+       * @return {number} The number of seconds since the timer was
+       * created.
+       */
+      get elapsedSeconds() {
+        return ((new Date()).getTime() - start.getTime()) / 1000.0;
+      }
+    };
+  };
+
+  /**
    * Gets all children of the given node and passes it to the given
    * callback.
    * @param {Object} nodeInfo The info for the node whose children we
    *     want.
    * @param {Function} callback The callback to call with the list of
    *     children.
    */
   function getSyncNodeChildren(nodeInfo, callback) {
-    var children = [];
-    function processChildInfo(childNodeInfo) {
-      if (!childNodeInfo) {
+    var timer = makeTimer();
+    chrome.sync.getChildNodeIds(nodeInfo.id, function(childNodeIds) {
+      console.debug('getChildNodeIds took ' +
+                    timer.elapsedSeconds + 's to retrieve ' +
+                    childNodeIds.length + ' ids');
+      timer = makeTimer();
+      chrome.sync.getNodesById(childNodeIds, function(children) {
+        console.debug('getNodesById took ' +
+                      timer.elapsedSeconds + 's to retrieve ' +
+                      children.length + ' nodes');
         callback(children);
-        return;
-      }
-      children.push(childNodeInfo);
-      chrome.sync.getNodeById(childNodeInfo.successorId, processChildInfo);
-    };
-    chrome.sync.getNodeById(nodeInfo.firstChildId, processChildInfo);
+      });
+    });
   }
 
   /**
    * Makes a tree item from the given node info.
    * @param {dictionary} nodeInfo The node info to create the tree
    *    item from.
    * @return {cr.ui.TreeItem} The created tree item.
    */
   function makeNodeTreeItem(nodeInfo) {
     var treeItem = new cr.ui.TreeItem({
       label: nodeInfo.title,
       detail: nodeInfo
     });
 
     if (nodeInfo.isFolder) {
       treeItem.mayHaveChildren_ = true;
 
       // Load children asynchronously on expand.
       // TODO(akalin): Add a throbber while loading?
       treeItem.triggeredLoad_ = false;
       treeItem.addEventListener('expand', function(event) {
         if (!treeItem.triggeredLoad_) {
           getSyncNodeChildren(nodeInfo, function(children) {
+            var timer = makeTimer();
             for (var i = 0; i < children.length; ++i) {
               var childTreeItem = makeNodeTreeItem(children[i]);
               treeItem.add(childTreeItem);
             }
+            console.debug('adding ' + children.length + ' children took ' +
+                          timer.elapsedSeconds + 's');
           });
           treeItem.triggeredLoad_ = true;
         }
       });
     } else {
       treeItem.classList.add('leaf');
     }
     return treeItem;
   }
 
@@ skipping 46 matching lines @@
     for (var i = 0; i < pendingSyncNodeBrowsers.length; ++i) {
       decorateSyncNodeBrowser(pendingSyncNodeBrowsers[i]);
     }
     domLoaded = true;
   });
 
   return {
     decorateSyncNodeBrowser: decorateSyncNodeBrowserAfterDOMLoad
   };
 });