Merge pull request #11949 from jmcanterafonseca/bug-907127

Bug 907127 - [zffos1.1][Contacts][Import from Gmail] Not able to import ...

apps/communications/contacts/js/fb/friends_list.js

@@ -14,6 +14,12 @@ var FriendListRenderer = (function() {
     orderBy: 'lastName'
   };
 
+  // Callback to notify when finish
+  var finishCb;
+  var totalContacts;
+  var lock;
+  var CHUNK_SIZE = 10;
+
   var render = function render(contacts, cb, options) {
     // Populate defaults
     for (var key in defaults) {
@@ -22,6 +28,11 @@ var FriendListRenderer = (function() {
       }
     }
 
+    finishCb = cb;
+    totalContacts = contacts.length;
+
+    lock = navigator.requestWakeLock('cpu');
+
     doRender(contacts, cb, options);
   };
 
@@ -49,8 +60,6 @@ var FriendListRenderer = (function() {
       groups[groupName].push(contact);
     });
 
-    var fragment = document.createDocumentFragment();
-
     // We are going to delete the paragraph that paints the other order for the
     // contact's name from template...
     var notRenderedParagraph = groupsList.querySelector('[data-order-by="' +
@@ -59,55 +68,101 @@ var FriendListRenderer = (function() {
       notRenderedParagraph.parentNode.removeChild(notRenderedParagraph);
     }
 
-    // A..Z groups
-    for (var i = 65; i <= 90; i++) {
-      var group = String.fromCharCode(i);
-      renderGroup(fragment, groupsList, group, groups[group]);
-    }
+    // Start letter (A)
+    var letterStart = 65;
+    doRenderGroupChunk(letterStart, String.fromCharCode(letterStart),
+                       groupsList, groups);
+  };
+
+  // Controls group rendering one by one
+  function doRenderGroupChunk(index, group, groupsList, groups) {
+    renderGroup(groupsList, group, groups[group], function(fragment) {
+      if (fragment) {
+        groupsList.appendChild(fragment);
+      }
+      fragment = null;
+
+      // 90 is the end letter (Z)
+      if (index + 1 <= 90) {
+        window.setTimeout(function renderNextGroup() {
+          doRenderGroupChunk(index + 1, String.fromCharCode(index + 1),
+                        groupsList, groups);
+        });
+      }
+      else if (group != '#') {
+        window.setTimeout(function renderNextGroup() {
+          doRenderGroupChunk(index + 1, '#', groupsList, groups);
+        });
+      }
+      else {
+         // Deleting template
+        groupsList.removeChild(groupsList.firstElementChild);
+
+         if (typeof finishCb === 'function') {
+        // We wait a delay depending on number of nodes
+        // Afterwards the curtain will be displayed
+          window.setTimeout(finishCb, totalContacts * 2);
+        }
+        if (lock) {
+          lock.unlock();
+        }
+      }
+    });
+  }
+
+  // Renders the items in a group in chunks
+  function doRenderGroupItems(from, groupsList, group, friends, element, cb) {
+    var end = from + CHUNK_SIZE;
+
+    // This is the <ol> and <header> is children[0]
+    var list = element.children[1];
 
-    // # group
-    renderGroup(fragment, groupsList, '#', groups['#']);
+    for (var i = from; i < end && i < friends.length; i++) {
+      var friend = friends[i];
 
-    // Deleting template
-    utils.dom.removeChildNodes(groupsList);
-    groupsList.appendChild(fragment);
+      if (friend.search && friend.search.length > 0) {
+        // Set the picture size
+        var box = importUtils.getPreferredPictureBox();
+        friend.picwidth = box.width;
+        friend.picheight = box.height;
 
-    if (typeof cb === 'function') {
-      // We wait a delay depending on number of nodes (the curtain is displayed)
-      window.setTimeout(function() { cb(); }, contacts.length * 2);
+        friend.search = Normalizer.toAscii(friend.search);
+
+        // New friend appended
+        utils.templates.append(list, friend);
+      }
     }
-  };
 
-  function renderGroup(fragment, groupsList, group, friends) {
-    if (!friends || friends.length === 0)
+    if (i < friends.length) {
+      window.setTimeout(function renderNextChunk() {
+        doRenderGroupItems(end, groupsList, group, friends, element, cb);
+      });
+    }
+    else {
+      list.removeChild(list.firstElementChild);
+      cb();
+    }
+  }
+
+  // Renders a group
+  function renderGroup(groupsList, group, friends, cb) {
+    if (!friends || friends.length === 0) {
+      window.setTimeout(cb);
       return;
+    }
+
+    // Document fragment that will hold the group nodes
+    var fragment = document.createDocumentFragment();
 
     // New element appended
     var element = utils.templates.append(groupsList, {
       group: group
     }, fragment);
 
-    // This is the <ol> and <header> is children[0]
-    var list = element.children[1];
-
     // For each friend in the group
-    friends.forEach(function(friend) {
-      if (!friend.search || friend.search.length === 0)
-        return;
-
-      // Set the picture size
-      var box = importUtils.getPreferredPictureBox();
-      friend.picwidth = box.width;
-      friend.picheight = box.height;
-
-      friend.search = Normalizer.toAscii(friend.search);
-
-      // New friend appended
-      utils.templates.append(list, friend);
+    doRenderGroupItems(0, groupsList, group, friends, element, function() {
+      cb(fragment);
     });
-
-    // Template is deleted from the list
-    list.removeChild(list.firstElementChild);
   }
 
   function getStringToBeOrdered(contact, order) {