Bug 927226 - Add build-in animation for start grids. r=rsilveira
☠☠ backed out by 84544a4d0e4d ☠ ☠
authorSam Foster <sfoster@mozilla.com>
Thu, 17 Oct 2013 12:14:08 -0700
changeset 165056 dc42a14663fe4a54852f59772af67962c906b527
parent 165055 62732da6ae3d5addd4e4522610d042cf1d8804f6
child 165057 7cb193c966bfb86d5b2caca36d1b0c00cfbc7a3e
push id3066
push userakeybl@mozilla.com
push dateMon, 09 Dec 2013 19:58:46 +0000
treeherdermozilla-beta@a31a0dce83aa [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrsilveira
bugs927226
milestone27.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 927226 - Add build-in animation for start grids. r=rsilveira
browser/metro/base/content/startui/BookmarksView.js
browser/metro/base/content/startui/HistoryView.js
browser/metro/base/content/startui/RemoteTabsView.js
browser/metro/base/content/startui/TopSitesView.js
browser/metro/theme/platform.css
browser/metro/theme/tiles.css
--- a/browser/metro/base/content/startui/BookmarksView.js
+++ b/browser/metro/base/content/startui/BookmarksView.js
@@ -137,17 +137,16 @@ BookmarksView.prototype = Util.extend(Ob
 
     // Remove extra items in case a refresh added more than the limit.
     // This can happen when undoing a delete.
     if (aRefresh) {
       while (this._set.itemCount > limit)
         this._set.removeItemAt(this._set.itemCount - 1, true);
     }
     this._set.arrangeItems();
-    this._set.removeAttribute("fade");
     this._inBatch = false;
     rootNode.containerOpen = false;
   },
 
   inCurrentView: function bv_inCurrentView(aParentId, aItemId) {
     if (this._root && aParentId != this._root)
       return false;
 
@@ -303,17 +302,18 @@ BookmarksView.prototype = Util.extend(Ob
 
 let BookmarksStartView = {
   _view: null,
   get _grid() { return document.getElementById("start-bookmarks-grid"); },
 
   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) {
       this._view.destruct();
     }
   },
 };
 
--- a/browser/metro/base/content/startui/HistoryView.js
+++ b/browser/metro/base/content/startui/HistoryView.js
@@ -90,17 +90,16 @@ HistoryView.prototype = Util.extend(Obje
     // This can happen when undoing a delete.
     if (aRefresh) {
       while (this._set.itemCount > limit)
         this._set.removeItemAt(this._set.itemCount - 1);
     }
 
     rootNode.containerOpen = false;
     this._set.arrangeItems();
-    this._set.removeAttribute("fade");
     if (this._inBatch > 0)
       this._inBatch--;
   },
 
   addItemToSet: function addItemToSet(aURI, aTitle, aIcon, aPos) {
     let item = this._set.insertItemAt(aPos || 0, aTitle, aURI, this._inBatch);
     this._setContextActions(item);
     this._updateFavicon(item, aURI);
@@ -295,16 +294,17 @@ HistoryView.prototype = Util.extend(Obje
 
 let HistoryStartView = {
   _view: null,
   get _grid() { return document.getElementById("start-history-grid"); },
 
   init: function init() {
     this._view = new HistoryView(this._grid, StartUI.maxResultsPerSection, true);
     this._view.populateGrid();
+    this._grid.removeAttribute("fade");
   },
 
   uninit: function uninit() {
     if (this._view) {
       this._view.destruct();
     }
   }
 };
--- a/browser/metro/base/content/startui/RemoteTabsView.js
+++ b/browser/metro/base/content/startui/RemoteTabsView.js
@@ -88,17 +88,16 @@ RemoteTabsView.prototype = Util.extend(O
 
         let item = this._set.appendItem((title || url), url);
         item.setAttribute("iconURI", Weave.Utils.getIcon(icon));
 
       }, this);
     }
     this.setUIAccessVisible(show);
     this._set.arrangeItems();
-    this._set.removeAttribute("fade");
   },
 
   destruct: function destruct() {
     Weave.Svc.Obs.remove("weave:engine:sync:finish", this);
     Weave.Svc.Obs.remove("weave:service:logout:start-over", this);
     View.prototype.destruct.call(this);
   },
 
@@ -111,16 +110,17 @@ RemoteTabsView.prototype = Util.extend(O
 let RemoteTabsStartView = {
   _view: null,
   get _grid() { return document.getElementById("start-remotetabs-grid"); },
 
   init: function init() {
     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) {
       this._view.destruct();
     }
   },
 };
--- a/browser/metro/base/content/startui/TopSitesView.js
+++ b/browser/metro/base/content/startui/TopSitesView.js
@@ -194,17 +194,16 @@ TopSitesView.prototype = Util.extend(Obj
     let tileset = this._set;
     tileset.clearAll(true);
 
     for (let site of sites) {
       let slot = tileset.nextSlot();
       this.updateTile(slot, site);
     }
     tileset.arrangeItems();
-    tileset.removeAttribute("fade");
     this.isUpdating = false;
   },
 
   forceReloadOfThumbnail: function forceReloadOfThumbnail(url) {
     let nodes = this._set.querySelectorAll('richgriditem[value="'+url+'"]');
     for (let item of nodes) {
       if ("isBound" in item && item.isBound) {
         item.refreshBackgroundImage();
@@ -294,16 +293,17 @@ let TopSitesStartView = {
   get _grid() { return document.getElementById("start-topsites-grid"); },
 
   init: function init() {
     this._view = new TopSitesView(this._grid, 8);
     if (this._view.isFirstRun()) {
       let topsitesVbox = document.getElementById("start-topsites");
       topsitesVbox.setAttribute("hidden", "true");
     }
+    this._grid.removeAttribute("fade");
   },
 
   uninit: function uninit() {
     if (this._view) {
       this._view.destruct();
     }
   },
 };
--- a/browser/metro/theme/platform.css
+++ b/browser/metro/theme/platform.css
@@ -684,16 +684,44 @@ arrowbox {
 }
 
 .meta-section-container[viewstate="snapped"] .meta-section-title,
 .meta-section-container[viewstate="snapped"] richgrid {
   margin-top: @metro_spacing_xnormal@;
   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 {
   display: block;
   position: fixed;
   bottom: 0;
   width: 100%;
   transform: translateY(100%);
--- a/browser/metro/theme/tiles.css
+++ b/browser/metro/theme/tiles.css
@@ -27,16 +27,17 @@ richgriditem[compact] {
 }
 /*
  *****************************************************
  */
 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 */
   min-height: @grid_double_row_height@; /* 2 rows (or 1 double rows) minimum; multiple of tile_height */
   -moz-column-fill: auto; /* do not attempt to balance content between columns */
   -moz-column-gap: 0;
   -moz-column-count: auto;
   display: block;
@@ -49,19 +50,16 @@ richgriditem {
   display: block;
   position: relative;
   width: @grid_double_column_width@;
   height: @grid_row_height@;
   -moz-box-sizing: border-box;
   -moz-column-gap: 0;
   overflow:hidden;
   cursor: default;
-  transition: 300ms height ease-out,
-              150ms opacity ease-out,
-              100ms transform ease-out;
 }
 
 .tile-content {
   display: block;
   position: absolute;
   /* background-color colors the tile-edge,
      and will normally be overridden with a favicon-based color */
   background-color: #ccc;