Bug 927226 - Add build-in animation for start grids. r=rsilveira

browser/metro/base/content/startui/BookmarksView.js

@@ -142,7 +142,6 @@ BookmarksView.prototype = Util.extend(Object.create(View.prototype), {
         this._set.removeItemAt(this._set.itemCount - 1, true);
     }
     this._set.arrangeItems();
-    this._set.removeAttribute("fade");
     this._inBatch = false;
     rootNode.containerOpen = false;
   },
@@ -308,7 +307,8 @@ let BookmarksStartView = {
   init: function init() {
     this._view = new BookmarksView(this._grid, StartUI.maxResultsPerSection, Bookmarks.metroRoot, true);
     this._view.getBookmarks();
-  },
+    this._grid.removeAttribute("fade");
+},
 
   uninit: function uninit() {
     if (this._view) {

browser/metro/base/content/startui/HistoryView.js

@@ -95,7 +95,6 @@ HistoryView.prototype = Util.extend(Object.create(View.prototype), {
 
     rootNode.containerOpen = false;
     this._set.arrangeItems();
-    this._set.removeAttribute("fade");
     if (this._inBatch > 0)
       this._inBatch--;
   },
@@ -300,6 +299,7 @@ let HistoryStartView = {
   init: function init() {
     this._view = new HistoryView(this._grid, StartUI.maxResultsPerSection, true);
     this._view.populateGrid();
+    this._grid.removeAttribute("fade");
   },
 
   uninit: function uninit() {

browser/metro/base/content/startui/RemoteTabsView.js

@@ -93,7 +93,6 @@ RemoteTabsView.prototype = Util.extend(Object.create(View.prototype), {
     }
     this.setUIAccessVisible(show);
     this._set.arrangeItems();
-    this._set.removeAttribute("fade");
   },
 
   destruct: function destruct() {
@@ -116,7 +115,8 @@ let RemoteTabsStartView = {
     let vbox = document.getElementById("start-remotetabs");
     let uiList = [vbox];
     this._view = new RemoteTabsView(this._grid, uiList);
-  },
+    this._grid.removeAttribute("fade");
+},
 
   uninit: function uninit() {
     if (this._view) {

browser/metro/base/content/startui/TopSitesView.js

@@ -199,7 +199,6 @@ TopSitesView.prototype = Util.extend(Object.create(View.prototype), {
       this.updateTile(slot, site);
     }
     tileset.arrangeItems();
-    tileset.removeAttribute("fade");
     this.isUpdating = false;
   },
 
@@ -299,6 +298,7 @@ let TopSitesStartView = {
       let topsitesVbox = document.getElementById("start-topsites");
       topsitesVbox.setAttribute("hidden", "true");
     }
+    this._grid.removeAttribute("fade");
   },
 
   uninit: function uninit() {

browser/metro/theme/platform.css

@@ -689,6 +689,34 @@ arrowbox {
   padding: 0;
 }
 
+.meta-section > richgrid {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+  transition-duration: 367ms;
+  transition-delay: 500ms;
+  transition-timing-function: @metro_animation_easing@;
+}
+
+.meta-section:nth-child(2) > richgrid {
+  transition-delay: 600ms;
+}
+.meta-section:nth-child(3) > richgrid > richgrid {
+  transition-delay: 700ms;
+}
+.meta-section:nth-child(4) > richgrid > richgrid {
+  transition-delay: 800ms;
+}
+
+.meta-section > richgrid[fade] {
+  opacity: 0;
+  transform: translateX(150px) scale(.9);
+}
+
+#start-container[viewstate="snapped"] .meta-section > richgrid {
+  transition-property: none;
+}
+
+
 /* App bars ----------------------------------------------------------------- */
 
 appbar {

browser/metro/theme/tiles.css

@@ -32,6 +32,7 @@ richgrid {
   display: -moz-box;
   overflow: hidden;
 }
+
 richgrid > .richgrid-grid {
   -moz-column-width: @grid_double_column_width@; /* tile width (2x unit + gutter) */
   min-width: @grid_double_column_width@; /* min 1 column */
@@ -54,9 +55,6 @@ richgriditem {
   -moz-column-gap: 0;
   overflow:hidden;
   cursor: default;
-  transition: 300ms height ease-out,
-              150ms opacity ease-out,
-              100ms transform ease-out;
 }
 
 .tile-content {