Bug 1106544 - Make sure a group is visible after expanding. r=kgrandon

apps/sharedtest/test/unit/elements/gaia_grid/grid_dragdrop_test.js

@@ -159,7 +159,7 @@ suite('GaiaGrid > DragDrop', function() {
 
   test('create new groups by dropping items at the end', function() {
     var requestAttentionStub =
-      sinon.stub(GaiaGrid.GridItem.prototype, 'requestAttention');
+      sinon.stub(GaiaGrid.Divider.prototype, 'requestAttention');
     var dividers = countDividers();
     var subject = grid.dragdrop;
 

apps/verticalhome/js/app.js

@@ -1,5 +1,6 @@
 'use strict';
 /* global ItemStore, LazyLoader, Configurator, groupEditor */
+/* global requestAnimationFrame */
 
 (function(exports) {
 
@@ -203,11 +204,17 @@
         case 'gaiagrid-attention':
           var offsetTop = this.grid.offsetTop;
           var scrollTop = window.scrollY;
-          var gridHeight = document.body.clientHeight - offsetTop;
+          var gridHeight = document.body.clientHeight;
+
+          // In edit mode, the grid is obscured by the edit header, whose
+          // size matches the offsetTop of the grid.
+          if (this.grid._grid.dragdrop.inEditMode) {
+            gridHeight -= offsetTop;
+          } else {
+            scrollTop -= offsetTop;
+          }
 
           // Try to nudge scroll position to contain the item.
-          // We don't add offsetTop back onto scrollTop as the edit bar
-          // is the same size as the search bar and is covering the grid
           var rect = e.detail;
           if (scrollTop + gridHeight < rect.y + rect.height) {
             scrollTop = (rect.y + rect.height) - gridHeight;
@@ -216,14 +223,23 @@
             scrollTop = rect.y;
           }
 
+          if (!this.grid._grid.dragdrop.inEditMode) {
+            scrollTop += offsetTop;
+          }
+
           if (scrollTop !== window.scrollY) {
             // Grid hides overflow during dragging and normally only unhides it
             // when it finishes. However, this causes smooth scrolling not to
             // work, so remove it early.
             document.body.style.overflow = '';
-            setTimeout(() => {
+
+            // We need to make sure that this smooth scroll happens after
+            // a style flush, and also after the container does any
+            // size-changing, otherwise it will stop the in-progress scroll.
+            // We do this using a nested requestAnimationFrame.
+            requestAnimationFrame(() => { requestAnimationFrame(() => {
               window.scrollTo({ left: 0, top: scrollTop, behavior: 'smooth'});
-            });
+            });});
           }
           break;
 

apps/verticalhome/test/unit/app_test.js

@@ -28,7 +28,8 @@ suite('app.js > ', function() {
   var raf, scrollStub;
 
   setup(function(done) {
-    raf = sinon.stub(window, 'requestAnimationFrame');
+    raf = sinon.stub(window, 'requestAnimationFrame',
+                     function(callback) { callback(); });
     scrollStub = sinon.stub(window, 'scrollTo');
     loadBodyHTML('/index.html');
     var grid = document.querySelector('gaia-grid')._grid;
@@ -54,8 +55,6 @@ suite('app.js > ', function() {
     window.scrollY = 100000;
     app.grid.dispatchEvent(
       new CustomEvent('gaiagrid-attention', {detail: {y: 0, height: 0}}));
-    this.sinon.clock.tick();
-
     assert.ok(scrollStub.called);
   });
 

shared/elements/gaia_grid/js/items/group.js

@@ -202,6 +202,19 @@
       }
     },
 
+    /**
+     * Gets the y-position of the group. When the group is expanded, its y
+     * position is actually the y-position of the separator underneath the
+     * group. This gets the visible y-position of the group.
+     */
+    getRealYPosition: function(nApps) {
+      if (this.detail.collapsed) {
+        return this.y;
+      }
+      return this.grid.items[this.detail.index - nApps].y -
+             this.headerHeight;
+    },
+
     /**
      * Renders the icon to the grid component.
      */
@@ -220,11 +233,7 @@
       // Calculate group position.
       // If we're not collapsed, the group's position will be underneath its
       // icons, but we want it to display above.
-      var y = this.y;
-      if (!this.detail.collapsed) {
-        y = this.grid.items[this.detail.index - nApps].y -
-          this.headerHeight;
-      }
+      var y = this.getRealYPosition(nApps);
 
       // Place the header span
       this.headerSpanElement.style.transform =
@@ -344,6 +353,10 @@
         } else {
           // If we're not dragging, save the collapsed state
           window.dispatchEvent(new CustomEvent('gaiagrid-saveitems'));
+
+          // Request attention so that we're as visible as we can be after
+          // expanding/collapsing
+          this.requestAttention();
         }
       }, 20);
     },
@@ -386,6 +399,18 @@
 
     isDraggable: function() {
       return true;
+    },
+
+    requestAttention: function() {
+      var rect = {
+        x: 0,
+        y: this.getRealYPosition(this.size),
+        width: this.gridWidth * this.grid.layout.gridItemWidth,
+        height: this.backgroundHeight
+      };
+
+      this.grid.element.dispatchEvent(
+        new CustomEvent('gaiagrid-attention', { detail: rect }));
     }
   };