ntp4: new app animation

chrome/browser/resources/ntp4/new_tab.js

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview New tab page
  * This is the main code for the new tab page used by touch-enabled Chrome
  * browsers.  For now this is still a prototype.
  */
 
@@ skipping 84 matching lines @@
    */
   var eventTracker = new EventTracker;
 
   /**
    * Object for accessing localized strings.
    * @type {!LocalStrings}
    */
   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.
    * @type {number}
    * @const
    */
   var DEFAULT_TRANSITION_TIME = 500;
 
   /**
    * Invoked at startup once the DOM is available to initialize the app.
    */
   function initialize() {
     cr.enablePlatformSpecificCSSRules();
 
     // Load the current theme colors.
     themeChanged();
 
     dotList = getRequiredElement('dot-list');
     pageList = getRequiredElement('page-list');
     trash = getRequiredElement('trash');
     new ntp4.Trash(trash);
 
     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();
     };
 
     // Request data on the apps so we can fill them in.
     // Note that this is kicked off asynchronously.  'getAppsCallback' will be
     // invoked at some point after this function returns.
     chrome.send('getApps');
 
     // Prevent touch events from triggering any sort of native scrolling
@@ skipping 110 matching lines @@
     }
 
     if (!pageNames || stringListIsEmpty(pageNames))
       pageNames = [localStrings.getString('appDefaultPageName')];
 
     // Sort by launch index
     apps.sort(function(a, b) {
       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];
       var pageIndex = (app.page_index || 0);
       while (pageIndex >= appsPages.length) {
         var pageName = '';
         if (appsPages.length < pageNames.length)
           pageName = pageNames[appsPages.length];
 
         var origPageCount = appsPages.length;
         appendAppsPage(new ntp4.AppsPage(), pageName);
         // Confirm that appsPages is a live object, updated when a new page is
         // added (otherwise we'd have an infinite loop)
         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);
 
     // 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));
   }
 
   /**
    * Called by chrome when a new app has been added to chrome.
    * @param {Object} app A data structure full of relevant information for the
    *     app.
    */
@@ skipping 387 matching lines @@
 // TODO(estade): update the content handlers to use ntp namespace instead of
 // making these global.
 var assert = ntp4.assert;
 var getAppsCallback = ntp4.getAppsCallback;
 var appsPrefChangeCallback = ntp4.appsPrefChangeCallback;
 var themeChanged = ntp4.themeChanged;
 var recentlyClosedTabs = ntp4.setRecentlyClosedTabs;
 var setMostVisitedPages = ntp4.setMostVisitedPages;
 
 document.addEventListener('DOMContentLoaded', ntp4.initialize);