Bug 1120884 - Make shrinking grid sizes animate smoothly. r=kgrandon

apps/verticalhome/js/app.js

@@ -17,6 +17,7 @@
     this.grid.addEventListener('iconblobdecorated', this);
     this.grid.addEventListener('gaiagrid-iconbloberror', this);
     this.grid.addEventListener('gaiagrid-attention', this);
+    this.grid.addEventListener('gaiagrid-resize', this);
     this.grid.addEventListener('cached-icons-rendered', this);
     this.grid.addEventListener('edititem', this);
     window.addEventListener('hashchange', this);
@@ -243,6 +244,45 @@
           }
           break;
 
+        case 'gaiagrid-resize':
+          var height = e.detail;
+          var oldHeight = this.grid.clientHeight;
+
+          if (this.gridResizeTimeout !== null) {
+            clearTimeout(this.gridResizeTimeout);
+            this.gridResizeTimeout = null;
+          }
+
+          if (height < oldHeight) {
+            // Make sure that if we're going to shrink the grid so that exposed
+            // area is made inaccessible, we scroll it out of view first.
+            var viewHeight = document.body.clientHeight;
+            var scrollBottom = window.scrollY + viewHeight;
+            var padding = window.getComputedStyle ?
+              parseInt(window.getComputedStyle(this.grid).paddingBottom) : 0;
+            var maxScrollBottom = height + this.grid.offsetTop + padding;
+
+            if (scrollBottom >= maxScrollBottom) {
+              // This scrollTo needs to happen after the height style
+              // change has been processed, or it will be overridden.
+              // Ensure this by wrapping it in a nested requestAnimationFrame.
+              requestAnimationFrame(() => { requestAnimationFrame(() => {
+                window.scrollTo({ left: 0, top: maxScrollBottom - viewHeight,
+                                  behavior: 'smooth' });
+              });});
+            }
+          }
+
+          if (height === oldHeight) {
+            break;
+          }
+
+          // Although the height is set immediately, a CSS transition rule
+          // means it's actually delayed by 0.5s, giving any scrolling
+          // animations time to finish.
+          this.grid.style.height = height + 'px';
+          break;
+
         case 'gaiagrid-saveitems':
           this.itemStore.save(this.grid.getItems());
           break;

apps/verticalhome/style/css/app.css

@@ -19,6 +19,7 @@ gaia-grid {
   min-height: calc(100% - 5rem - 5rem);
   width: 100%;
   padding-bottom: 5rem;
+  transition: height 0s 0.5s;
 }
 
 #curtain {

shared/elements/gaia_grid/js/grid_view.js

@@ -446,6 +446,7 @@
       this.cleanItems(options.skipDivider);
 
       // Reset offset steps
+      var oldHeight = this.layout.offsetY;
       this.layout.offsetY = 0;
 
       // Grid render coordinates
@@ -564,11 +565,12 @@
       }
 
       // All the children of this element are absolutely positioned and then
-      // transformed, so manually set a height for the convenience of
-      // embedders.
-      var padding = window.getComputedStyle ?
-        parseInt(window.getComputedStyle(this.element).paddingBottom) : 0;
-      this.element.style.height = (this.layout.offsetY + padding) + 'px';
+      // transformed, so the grid actually has no height. Fire an event that
+      // embedders can listen to discover the grid height.
+      if (this.layout.offsetY != oldHeight) {
+        this.element.dispatchEvent(new CustomEvent('gaiagrid-resize',
+                                     { detail: this.layout.offsetY }));
+      }
 
       this.element.setAttribute('cols', this.layout.cols);
       pendingCachedIcons === 0 && onCachedIconRendered();