Merge pull request #32200 from Cwiiis/bug1210737-new-homescreen-start…

…up-opt-sync

Bug 1210737 - Freeze gaia-container during startup. r=gmarty

apps/homescreen/bower_components/gaia-container/.bower.json

@@ -1,10 +1,10 @@
 {
   "name": "gaia-container",
-  "_release": "db877d1edd",
+  "_release": "c9c41be0b3",
   "_resolution": {
     "type": "branch",
     "branch": "master",
-    "commit": "db877d1edd6514a271e19416e54ae3e97f6ff0f4"
+    "commit": "c9c41be0b3b456f25e4ae2e7da5cfd3c0c561445"
   },
   "_source": "https://gitlab.com/Cwiiis/gaia-container.git",
   "_target": "*",

apps/homescreen/bower_components/gaia-container/README.md

@@ -59,6 +59,8 @@ In addition, an extra method, `reorderChild` is provided for convenience, with t
 
 As the container can't always know when to reorganise its children, a `synchronise` method is provided. When called, this method will check what layout the children should receive and updates their transforms to correspond to it. This method is called for the user whenever DOM manipulation happens directly on the container, but a user may need to call it after performing changes outside of the container that would affect its layout.
 
+As adding a child is a potentially expensive operation, two methods, `freeze` and `thaw`, are provided. These temporarily disable the synchronisation of child position. Calling `thaw` automatically causes a synchronisation.
+
 Two utility methods are also provided for convenience, `getChildFromPoint`, which retrieves a container child given client X and Y coordinates, and `getChildOffsetRect` which returns an object of the form `{ top: Y, left: X, width: W, height: H, bottom: Y+H, right: X+W }`.
 
 ## Testing

apps/homescreen/bower_components/gaia-container/script.js

@@ -32,6 +32,7 @@ window.GaiaContainer = (function(exports) {
     var shadow = this.createShadowRoot();
     shadow.appendChild(this._template);
 
+    this._frozen = false;
     this._children = [];
     this._dnd = {
       // Whether drag-and-drop is enabled
@@ -659,6 +660,23 @@ window.GaiaContainer = (function(exports) {
     }
   };
 
+  /**
+   * Temporarily disables element position synchronisation. Useful when adding
+   * multiple elements to the container at the same time, or in quick
+   * succession.
+   */
+  proto.freeze = function() {
+    this._frozen = true;
+  };
+
+  /**
+   * Enables element position synchronisation after freeze() has been called.
+   */
+  proto.thaw = function() {
+    this._frozen = false;
+    this.synchronise();
+  };
+
   /**
    * Synchronise positions between the managed container and all children.
    * This is called automatically when adding/inserting or removing children,
@@ -667,6 +685,10 @@ window.GaiaContainer = (function(exports) {
    * if it's resized).
    */
   proto.synchronise = function() {
+    if (this._frozen) {
+      return;
+    }
+
     var child;
     for (child of this._children) {
       if (!this._dnd.active || child !== this._dnd.child) {

apps/homescreen/js/app.js

@@ -165,6 +165,7 @@ const SETTINGS_VERSION = 0;
     this.restoreSettings();
 
     // Populate apps callback
+    this.icons.freeze();
     var populateApps = () => {
       Promise.all([
         // Populate apps
@@ -174,6 +175,7 @@ const SETTINGS_VERSION = 0;
             for (var app of request.result) {
               this.addApp(app);
             }
+            this.icons.thaw();
             resolve();
 
             // We've loaded and displayed all apps - only bookmarks and
@@ -240,6 +242,7 @@ const SETTINGS_VERSION = 0;
             for (var bookmark of bookmarks) {
               this.addAppIcon(bookmark.data);
             }
+            this.icons.thaw();
           }, (e) => {
             console.error('Error getting bookmarks', e);
           });

apps/homescreen/test/unit/app_test.js

@@ -79,6 +79,8 @@ suite('Homescreen app', () => {
         this.style.display = 'none';
       };
     }
+    var icons = document.getElementById('apps');
+    icons.freeze = icons.thaw = () => {};
     app = new App();
   });
 
@@ -115,6 +117,17 @@ suite('Homescreen app', () => {
       stub.restore();
     });
 
+    test('should call freeze and thaw on icon container', done => {
+      stub = sinon.stub(app.icons, 'freeze', () => {
+        stub.restore();
+        stub = sinon.stub(app.icons, 'thaw', () => {
+          stub.restore();
+          done();
+        });
+      });
+      new App();
+    });
+
     test('should initialise the metadata store', done => {
       stub = sinon.stub(HomeMetadata.prototype, 'init', () => {
         done();