ntp4: new app animation

chrome/browser/resources/ntp4/new_tab.js

Index: chrome/browser/resources/ntp4/new_tab.js
diff --git a/chrome/browser/resources/ntp4/new_tab.js b/chrome/browser/resources/ntp4/new_tab.js
index 22790245ab83a176b5be4ab0a97a9c08c4918f27..2fdc0f93f32c1a8fa29d3d0d55ff80b1f0092ebb 100644
--- a/chrome/browser/resources/ntp4/new_tab.js
+++ b/chrome/browser/resources/ntp4/new_tab.js
@@ -102,6 +102,14 @@ cr.define('ntp4', function() {
   var localStrings = new LocalStrings;
 
   /**
+   * If non-null, this is the ID of the app to highlight to the user the next
+   * time getAppsCallback runs. "Highlight" in this case means to switch to
+   * the page and run the new tile animation.
+   * @type {String}
+   */
+  var highlightAppId = null;
+
+  /**
    * The time in milliseconds for most transitions.  This should match what's
    * in new_tab.css.  Unfortunately there's no better way to try to time
    * something to occur until after a transition has completed.
@@ -127,6 +135,12 @@ cr.define('ntp4', function() {
     shownPage = templateData['shown_page_type'];
     shownPageIndex = templateData['shown_page_index'];
 
+    // When a new app has been installed, we will be opened with a hash value
+    // that corresponds to the new app ID.
+    var hash = location.hash;
+    if (hash && hash.indexOf('#app-id=') == 0)
+      highlightAppId = hash.split('=')[1];
+
     document.querySelector('#notification button').onclick = function(e) {
       hideNotification();
     };
@@ -257,6 +271,9 @@ cr.define('ntp4', function() {
       return a.app_launch_index - b.app_launch_index;
     });
 
+    // An app to animate (in case it was just installed).
+    var highlightApp;
+
     // Add the apps, creating pages as necessary
     for (var i = 0; i < apps.length; i++) {
       var app = apps[i];
@@ -273,7 +290,12 @@ cr.define('ntp4', function() {
         assert(appsPages.length == origPageCount + 1, 'expected new page');
       }
 
-      appsPages[pageIndex].appendApp(app);
+      if (app.id == highlightAppId) {
+        highlightApp = app;
+        highlightAppId = null;
+      } else {
+        appsPages[pageIndex].appendApp(app);
+      }
     }
 
     ntp4.AppsPage.setPromo(data.showPromo ? data : null);
@@ -281,6 +303,9 @@ cr.define('ntp4', function() {
     // Tell the slider about the pages
     updateSliderCards();
 
+    if (highlightApp)
+      appAdded(highlightApp);

[Rick Byers, 2011/08/04 13:21:58]

Is there some reason you can't just do this call to appAdded directly above,
instead of waiting until the end?

If (eg. the user navigates to the hash URL directly or has it bookmarked, etc.),
this app isn't actually the last app on the page, this will put it in the wrong
place.  Then if they do an unrelated rearrange, the new location will be
persisted.  A pretty minor bug, but I could see it annoying some users.

If you can't just move this up for some reason, then maybe you should only check
for (what should be the common case) of the app being the last one on the page.

[Evan Stade, 2011/08/04 16:35:02]

All the cards have to be present and correct.
The first example is officially not supported (and almost impossible for it to
happen by accident). The second example I suppose might possibly happen if you
bookmark the ntp at the right time. I think the best way to fix this is simply
clearing the hash value after reading it.
even if it is the last app on the page, you wouldn't want to animate it every
time (in the bookmark example)

[Rick Byers, 2011/08/04 16:54:19]

Yeah, I think that's good enough.  Thanks.

+
     // Mark the current page
     dots[cardSlider.currentCard].classList.add('selected');
     logEvent('apps.layout: ' + (Date.now() - startTime));