ntp4: app install improvements

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 38 matching lines @@
    */
   var bookmarksPage;
 
   /**
    * The 'dots-list' element.
    * @type {!Element|undefined}
    */
   var dotList;
 
   /**
-   * A list of all 'dots' elements.
-   * @type {!NodeList|undefined}
-   */
-  var dots;
-
-  /**
    * The left and right paging buttons.
    * @type {!Element|undefined}
    */
   var pageSwitcherStart;
   var pageSwitcherEnd;
 
   /**
    * The 'trash' element.  Note that technically this is unnecessary,
    * JavaScript creates the object for us based on the id.  But I don't want
    * to rely on the ID being the same, and JSCompiler doesn't know about it.
@@ skipping 63 matching lines @@
     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];
-      // Clear the hash so if the user bookmarks this page, they'll just get
-      // chrome://newtab/.
-      window.history.replaceState({}, '', '/');
-    }
+    highlightAppId = getAndClearAppIDHash();
 
     // 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
     document.addEventListener('touchmove', function(e) {
       e.preventDefault();
     }, true);
 
-    dots = dotList.getElementsByClassName('dot');
     tilePages = pageList.getElementsByClassName('tile-page');
     appsPages = pageList.getElementsByClassName('apps-page');
 
     pageSwitcherStart = getRequiredElement('page-switcher-start');
     ntp4.initializePageSwitcher(pageSwitcherStart);
     pageSwitcherEnd = getRequiredElement('page-switcher-end');
     ntp4.initializePageSwitcher(pageSwitcherEnd);
 
     // Initialize the cardSlider without any cards at the moment
     var sliderFrame = getRequiredElement('card-slider-frame');
@@ skipping 56 matching lines @@
    * @param {string} id The identifier name.
    * @return {!Element} the Element.
    */
   function getRequiredElement(id) {
     var element = document.getElementById(id);
     assert(element, 'Missing required element: ' + id);
     return element;
   }
 
   /**
+   * Gets the app ID stored in the hash of the URL, and resets the hash to
+   * empty. If there is not an app-id in the hash, does nothing.
+   * @return {String} The value of the app-id query string parameter.
+   */
+  function getAndClearAppIDHash() {
+    var hash = location.hash;
+    if (hash.indexOf('#app-id=') == 0) {
+      var appID = hash.split('=')[1];
+      // Clear the hash so if the user bookmarks this page, they'll just get
+      // chrome://newtab/.
+      window.history.replaceState({}, '', '/');
+      return appID;
+    }
+    return '';
+  }
+
+  /**
    * Callback invoked by chrome with the apps available.
    *
    * Note that calls to this function can occur at any time, not just in
    * response to a getApps request. For example, when a user installs/uninstalls
    * an app on another synchronized devices.
    * @param {Object} data An object with all the data on available
    *        applications.
    */
   function getAppsCallback(data) {
     var startTime = Date.now();
@@ skipping 57 matching lines @@
       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
+    // Tell the slider about the pages.
     updateSliderCards();
 
     if (highlightApp)
-      appAdded(highlightApp);
+      appAdded(highlightApp, true);
 
-    // Mark the current page
-    dots[cardSlider.currentCard].classList.add('selected');
+    // Mark the current page.
+    cardSlider.currentCardValue.navigationDot.classList.add('selected');
     logEvent('apps.layout: ' + (Date.now() - startTime));
 
     document.documentElement.classList.remove('starting-up');
   }
 
   /**
    * 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.
    */
-  function appAdded(app) {
+  function appAdded(app, opt_highlight) {
+    // If the page is already open when a new app is installed, the hash will
+    // be set once again.
+    var appID = getAndClearAppIDHash();
+    if (appID == app.id)
+      opt_highlight = true;
+
     var pageIndex = app.page_index || 0;
+
+    if (pageIndex >= appsPages.length) {
+      while (pageIndex >= appsPages.length) {
+        appendAppsPage(new ntp4.AppsPage(), '');
+      }
+      updateSliderCards();
+    }
+
     var page = appsPages[pageIndex];
-    cardSlider.selectCardByValue(page);
+    if (opt_highlight)
+      cardSlider.selectCardByValue(page);
     page.appendApp(app, true);
   }
 
   /**
    * Called by chrome when an existing app has been removed/uninstalled from
    * chrome.
    * @param {Object} appData A data structure full of relevant information for
    *     the app.
    */
   function appRemoved(appData) {
@@ skipping 42 matching lines @@
    */
   function updateSliderCards() {
     var pageNo = cardSlider.currentCard;
     if (pageNo >= tilePages.length)
       pageNo = tilePages.length - 1;
     var pageArray = [];
     for (var i = 0; i < tilePages.length; i++)
       pageArray[i] = tilePages[i];
     cardSlider.setCards(pageArray, pageNo);
 
-    if (shownPage == templateData['most_visited_page_id'])
+    if (shownPage == templateData['most_visited_page_id']) {
       cardSlider.selectCardByValue(mostVisitedPage);
-    else if (shownPage == templateData['apps_page_id'])
-      cardSlider.selectCardByValue(appsPages[shownPageIndex]);
-    else if (shownPage == templateData['bookmarks_page_id'])
+    } else if (shownPage == templateData['apps_page_id']) {
+      cardSlider.selectCardByValue(
+          appsPages[Math.min(shownPageIndex, appsPages.length - 1)]);
+    } else if (shownPage == templateData['bookmarks_page_id']) {
       cardSlider.selectCardByValue(bookmarksPage);
+    }
   }
 
   /**
    * Appends a tile page (for bookmarks or most visited).
    *
    * @param {TilePage} page The page element.
    * @param {string} title The title of the tile page.
    */
   function appendTilePage(page, title) {
     pageList.appendChild(page);
@@ skipping 62 matching lines @@
       $('footer').classList.add('showing-trash-mode');
   }
 
   /**
    * Invoked whenever some app is released
    * @param {Grabber.Event} e The Grabber RELEASE event.
    */
   function leaveRearrangeMode(e) {
     var tempPage = document.querySelector('.tile-page.temporary');
     var dot = tempPage.navigationDot;
-    if (!tempPage.tileCount) {
+    if (!tempPage.tileCount && tempPage != cardSlider.currentCardValue) {
       dot.animateRemove();
       tempPage.parentNode.removeChild(tempPage);
       updateSliderCards();
     } else {
       tempPage.classList.remove('temporary');
       saveAppPageName(tempPage, '');
     }
 
     $('footer').classList.remove('showing-trash-mode');
   }
@@ skipping 120 matching lines @@
       shownPageIndex = 0;
     } else {
       console.error('unknown page selected');
     }
     chrome.send('pageSelected', [shownPage, shownPageIndex]);
 
     // Update the active dot
     var curDot = dotList.getElementsByClassName('selected')[0];
     if (curDot)
       curDot.classList.remove('selected');
-    var newPageIndex = e.cardSlider.currentCard;
-    dots[newPageIndex].classList.add('selected');
+    page.navigationDot.classList.add('selected');
     updatePageSwitchers();
   }
 
   /**
     * Timeout ID.
     * @type {number}
     */
   var notificationTimeout_ = 0;
 
   /**
@@ skipping 101 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);