NTP5: Implementing new specification for favicons of Most Visited Pages.

chrome/browser/resources/ntp_search/new_tab.js

 // Copyright (c) 2012 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. NewTabView manages page list,
  * dot list and handles apps pages callbacks from backend. It also handles
  * the layout of the Bottom Panel and the global UI states of the New Tab Page.
  */
@@ skipping 19 matching lines @@
    * @type {number}
    * @const
    */
   var BOTTOM_PANEL_HORIZONTAL_MARGIN = 100;
 
   /**
    * The height required to show the Bottom Panel.
    * @type {number}
    * @const
    */
-  var HEIGHT_FOR_BOTTOM_PANEL = 550;
+  var HEIGHT_FOR_BOTTOM_PANEL = 558;
 
   /**
    * The Bottom Panel width required to show 6 cols of Tiles, which is used
    * in the width computation.
    * @type {number}
    * @const
    */
   var MAX_BOTTOM_PANEL_WIDTH = 920;
 
   /**
@@ skipping 100 matching lines @@
      */
     pageList: undefined,
 
     /**
      * A list of all 'tile-page' elements.
      * @type {!NodeList|undefined}
      */
     tilePages: undefined,
 
     /**
-     * The Apps page.
-     * @type {!Element|undefined}
+     * A list of all 'apps-page' elements.
+     * @type {!NodeList|undefined}
      */
-    appsPage: undefined,
+    appsPages: undefined,
 
     /**
      * The Most Visited page.
      * @type {!Element|undefined}
      */
     mostVisitedPage: undefined,
 
     /**
      * The Recently Closed page.
      * @type {!Element|undefined}
@@ skipping 47 matching lines @@
       this.dotList = dotList;
       cr.ui.decorate(this.dotList, ntp.DotList);
 
       this.shownPage = loadTimeData.getInteger('shown_page_type');
       this.shownPageIndex = loadTimeData.getInteger('shown_page_index');
 
       if (loadTimeData.getBoolean('showApps')) {
         // 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');
+        if (!ntp.ntp5)
+          chrome.send('getApps');
       } else if (this.shownPage == loadTimeData.getInteger('apps_page_id')) {
         // No apps page.
         this.setShownPage_(
             loadTimeData.getInteger('most_visited_page_id'), 0);
       }
 
       this.tilePages = this.pageList.getElementsByClassName('tile-page');
+      this.appsPages = this.pageList.getElementsByClassName('apps-page');
 
       // Initialize the cardSlider without any cards at the moment.
       this.sliderFrame = cardSliderFrame;
       this.cardSlider = new cr.ui.CardSlider(this.sliderFrame, this.pageList,
           this.sliderFrame.offsetWidth);
 
       var cardSlider = this.cardSlider;
       this.cardSlider.initialize(
           loadTimeData.getBoolean('isSwipeTrackingFromScrollEventsEnabled'));
 
@@ skipping 46 matching lines @@
       }
 
       // Remember special MostVisitedPage.
       if (typeof ntp.MostVisitedPage != 'undefined' &&
           page instanceof ntp.MostVisitedPage) {
         assert(this.tilePages.length == 1,
                'MostVisitedPage should be added as first tile page');
         this.mostVisitedPage = page;
       }
 
-      if (typeof ntp.AppsPage != 'undefined' &&
-          page instanceof ntp.AppsPage) {
-        this.appsPage = page;
-      }
-
       if (typeof ntp.RecentlyClosedPage != 'undefined' &&
           page instanceof ntp.RecentlyClosedPage) {
         this.recentlyClosedPage = page;
       }
 
       // Remember special OtherDevicesPage.
       if (typeof ntp.OtherDevicesPage != 'undefined' &&
           page instanceof ntp.OtherDevicesPage) {
         this.otherDevicesPage = page;
       }
@@ skipping 13 matching lines @@
      * @param {Object} appData The data for the app. This contains page and
      *     position indices.
      */
     appMoved: function(appData) {
       assert(loadTimeData.getBoolean('showApps'));
 
       var app = $(appData.id);
       assert(app, 'trying to move an app that doesn\'t exist');
       app.remove(false);
 
-      this.appsPage.insertApp(appData, false);
+      this.appsPages[appData.page_index].insertApp(appData, false);
     },
 
     /**
      * Called by chrome when an existing app has been disabled or
      * removed/uninstalled from chrome.
      * @param {Object} appData A data structure full of relevant information for
      *     the app.
      * @param {boolean} isUninstall True if the app is being uninstalled;
      *     false if the app is being disabled.
      * @param {boolean} fromPage True if the removal was from the current page.
@@ skipping 30 matching lines @@
      *
      * 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.
      */
     getAppsCallback: function(data) {
       assert(loadTimeData.getBoolean('showApps'));
 
-      var page = this.appsPage;
-      var state = page && page.getTileRepositioningState();
-      if (state) {
-        if (state.isRemoving)
-          page.animateTileRemoval(state.index, data);
-        else
-          page.animateTileRestoration(state.index, data);
-
-        page.resetTileRepositioningState();
-        return;
-      }
-
       var startTime = Date.now();
 
-      if (page)
-        page.removeAllTiles();
+      // Remember this to select the correct card when done rebuilding.
+      var prevCurrentCard = this.cardSlider.currentCard;
+
+      // Make removal of pages and dots as quick as possible with less DOM
+      // operations, reflows, or repaints. We set currentCard = 0 and remove
+      // from the end to not encounter any auto-magic card selections in the
+      // process and we hide the card slider throughout.
+      this.cardSlider.currentCard = 0;
+
+      // Clear any existing apps pages and dots.
+      // TODO(rbyers): It might be nice to preserve animation of dots after an
+      // uninstall. Could we re-use the existing page and dot elements?  It
+      // seems unfortunate to have Chrome send us the entire apps list after an
+      // uninstall.
+      while (this.appsPages.length > 0)
+        this.removeTilePageAndDot_(this.appsPages[this.appsPages.length - 1]);
 
       // Get the array of apps and add any special synthesized entries
       var apps = data.apps;
 
+      // Get a list of page names
+      var pageNames = data.appPageNames;
+
       // Sort by launch ordinal
       apps.sort(function(a, b) {
         return a.app_launch_ordinal > b.app_launch_ordinal ? 1 :
           a.app_launch_ordinal < b.app_launch_ordinal ? -1 : 0;
       });
 
       // An app to animate (in case it was just installed).
       var highlightApp;
 
+      // If there are any pages after the apps, add new pages before them.
+      var lastAppsPage = (this.appsPages.length > 0) ?
+          this.appsPages[this.appsPages.length - 1] : null;
+      var lastAppsPageIndex = (lastAppsPage != null) ?
+          Array.prototype.indexOf.call(this.tilePages, lastAppsPage) : -1;
+      var nextPageAfterApps = lastAppsPageIndex != -1 ?
+          this.tilePages[lastAppsPageIndex + 1] : null;
+
       // Add the apps, creating pages as necessary
-      this.appendTilePage(new ntp.AppsPage(),
-          loadTimeData.getString('appDefaultPageName'));
       for (var i = 0; i < apps.length; i++) {
         var app = apps[i];
+        var pageIndex = app.page_index || 0;
+        while (pageIndex >= this.appsPages.length) {
+          var pageName = loadTimeData.getString('appDefaultPageName');
+          if (this.appsPages.length < pageNames.length)
+            pageName = pageNames[this.appsPages.length];
+
+          var origPageCount = this.appsPages.length;
+          this.appendTilePage(new ntp.AppsPage(), pageName, nextPageAfterApps);
+          // Confirm that appsPages is a live object, updated when a new page is
+          // added (otherwise we'd have an infinite loop)
+          assert(this.appsPages.length == origPageCount + 1,
+                 'expected new page');
+        }
+
         if (app.id == this.highlightAppId)
           highlightApp = app;
         else
-          this.appsPage.insertApp(app, false);
+          this.appsPages[pageIndex].insertApp(app, false);
       }
 
+      this.cardSlider.currentCard = prevCurrentCard;
+
       if (highlightApp)
         this.appAdded(highlightApp, true);
 
       logEvent('apps.layout: ' + (Date.now() - startTime));
 
       // Tell the slider about the pages and mark the current page.
       this.updateSliderCards();
+      this.cardSlider.currentCardValue.navigationDot.classList.add('selected');
 
       if (!this.appsLoaded_) {
         this.appsLoaded_ = true;
         cr.dispatchSimpleEvent(document, 'sectionready', true, true);
       }
     },
 
     /**
      * Called by chrome when a new app has been added to chrome or has been
      * enabled if previously disabled.
      * @param {Object} appData A data structure full of relevant information for
      *     the app.
      * @param {boolean=} opt_highlight Whether the app about to be added should
      *     be highlighted.
      */
     appAdded: function(appData, opt_highlight) {
       assert(loadTimeData.getBoolean('showApps'));
 
       if (appData.id == this.highlightAppId) {
         opt_highlight = true;
         this.highlightAppId = null;
       }
 
       var pageIndex = appData.page_index || 0;
 
+      if (pageIndex >= this.appsPages.length) {
+        while (pageIndex >= this.appsPages.length) {
+          this.appendTilePage(new ntp.AppsPage(),
+                              loadTimeData.getString('appDefaultPageName'));
+        }
+        this.updateSliderCards();
+      }
+
+      var page = this.appsPages[pageIndex];
       var app = $(appData.id);
       if (app) {
         app.replaceAppData(appData);
       } else if (opt_highlight) {
-        this.appsPage.insertAndHighlightApp(appData);
+        page.insertAndHighlightApp(appData);
         this.setShownPage_(loadTimeData.getInteger('apps_page_id'),
                            appData.page_index);
       } else {
-        this.appsPage.insertApp(appData, false);
+        page.insertApp(appData, false);
       }
     },
 
     /**
      * Callback invoked by chrome whenever an app preference changes.
      * @param {Object} data An object with all the data on available
      *     applications.
      */
     appsPrefChangedCallback: function(data) {
       assert(loadTimeData.getBoolean('showApps'));
 
       for (var i = 0; i < data.apps.length; ++i) {
         $(data.apps[i].id).appData = data.apps[i];
       }
     },
 
     /**
      * Invoked whenever the pages in page-list have changed so that the
      * CardSlider knows about the new elements.
      */
     updateSliderCards: function() {
       var pageNo = Math.max(0, Math.min(this.cardSlider.currentCard,
                                         this.tilePages.length - 1));
       this.cardSlider.setCards(Array.prototype.slice.call(this.tilePages),
                                pageNo);
-      switch (this.shownPage) {
-        case loadTimeData.getInteger('apps_page_id'):
-          this.cardSlider.selectCardByValue(this.appsPage);
-          break;
-        case loadTimeData.getInteger('most_visited_page_id'):
-          if (this.mostVisitedPage)
-            this.cardSlider.selectCardByValue(this.mostVisitedPage);
-          break;
-      }
+
+      assert(this.mostVisitedPage, 'Most Visited Page not found');
+      // NTP pages are not sticky anymore, so we should always select the Most
+      // Visited page when loading the card slider.
+      this.cardSlider.selectCardByValue(this.mostVisitedPage);
     },
 
     /**
+     * Returns the index of the given apps page.
+     * @param {AppsPage} page The AppsPage we wish to find.
+     * @return {number} The index of |page| or -1 if it is not in the
+     *    collection.
+     */
+    getAppsPageIndex: function(page) {
+      return Array.prototype.indexOf.call(this.appsPages, page);
+    },
+
+    /**
      * Handler for cardSlider:card_changed events from this.cardSlider.
      * @param {Event} e The cardSlider:card_changed event.
      * @private
      */
     onCardChanged_: function(e) {
       var page = e.cardSlider.currentCardValue;
 
       // Don't change shownPage until startup is done (and page changes actually
       // reflect user actions).
       if (!this.isStartingUp_()) {
         if (page.classList.contains('apps-page')) {
-          this.setShownPage_(loadTimeData.getInteger('apps_page_id'), 0);
+          this.setShownPage_(loadTimeData.getInteger('apps_page_id'),
+                             this.getAppsPageIndex(page));
         } else if (page.classList.contains('most-visited-page')) {
           this.setShownPage_(
               loadTimeData.getInteger('most_visited_page_id'), 0);
         } else if (page.classList.contains('recently-closed-page')) {
           this.setShownPage_(
               loadTimeData.getInteger('recently_closed_page_id'), 0);
         } else if (page.classList.contains('other-devices-page')) {
           this.setShownPage_(
               loadTimeData.getInteger('other_devices_page_id'), 0);
         } else {
@@ skipping 138 matching lines @@
      * selected TilePage. Alternatively, you can pass a specific TilePage in
      * the |opt_page| parameter, which is useful for initializing the layout
      * of a recently created TilePage.
      *
      * The |NewTabView.layout| deals with the global layout state while the
      * |TilePage.layout| deals with the per-page layout state. A general rule
      * would be: if you need to resize any element which is outside the
      * card-slider-frame, it should be handled here in NewTabView. Otherwise,
      * it should be handled in TilePage.
      *
-     * @param {boolean=} opt_animate Whether the layout should be animated.
-     * @param {ntp.TilePage=} opt_page Alternative TilePage to calculate layout.
+     * @param {boolean} opt_animate Whether the layout should be animated.
+     * @param {ntp.TilePage} opt_page Alternative TilePage to calculate layout.
      */
     layout: function(opt_animate, opt_page) {
       opt_animate = typeof opt_animate == 'undefined' ? false : opt_animate;
 
       var viewHeight = cr.doc.documentElement.clientHeight;
       var isBottomPanelVisible = viewHeight >= HEIGHT_FOR_BOTTOM_PANEL;
       // Toggles the visibility of the Bottom Panel when there is (or there
       // is not) space to show the entire panel.
       this.showBottomPanel_(isBottomPanelVisible);
 
@@ skipping 67 matching lines @@
 
     notificationContainer = getRequiredElement('notification-container');
     notificationContainer.addEventListener(
         'webkitTransitionEnd', onNotificationTransitionEnd);
 
     var mostVisited = new ntp.MostVisitedPage();
     newTabView.appendTilePage(mostVisited,
                               loadTimeData.getString('mostvisited'));
     chrome.send('getMostVisited');
 
+    var recentlyClosed = new ntp.RecentlyClosedPage();
+    newTabView.appendTilePage(recentlyClosed,
+                              loadTimeData.getString('recentlyclosed'));
+    chrome.send('getRecentlyClosedTabs');
+
+    var devices = new ntp.OtherDevicesPage();
+    newTabView.appendTilePage(devices, loadTimeData.getString('otherSessions'));
+    chrome.send('getForeignSessions');
+
     doWhenAllSectionsReady(function() {
       // Tell the slider about the pages.
       newTabView.updateSliderCards();
       newTabView.onReady();
-
       // Restore the visibility only after calling updateSliderCards to avoid
       // flickering, otherwise for a small fraction of a second the Page List is
       // partially rendered.
       $('bottom-panel').style.visibility = 'visible';
-
       if (loadTimeData.valueExists('serverpromo')) {
         var promo = loadTimeData.getString('serverpromo');
         var tags = ['IMG'];
         var attrs = {
           src: function(node, value) {
             return node.tagName == 'IMG' &&
                    /^data\:image\/(?:png|gif|jpe?g)/.test(value);
           },
         };
         showNotification(parseHtmlSubset(promo, tags, attrs), [], function() {
@@ skipping 153 matching lines @@
    */
   function onNotificationTransitionEnd(e) {
     if (notificationContainer.classList.contains('inactive'))
       notificationContainer.hidden = true;
   }
 
   function setRecentlyClosedTabs(dataList) {
     newTabView.recentlyClosedPage.setDataList(dataList);
   }
 
-  function setMostVisitedPages(dataList, hasBlacklistedUrls) {
+  function setMostVisitedPages(data, hasBlacklistedUrls) {
     var page = newTabView.mostVisitedPage;
     var state = page.getTileRepositioningState();
     if (state) {
       if (state.isRemoving)
-        page.animateTileRemoval(state.index, dataList);
+        page.animateTileRemoval(state.index, data);
       else
-        page.animateTileRestoration(state.index, dataList);
+        page.animateTileRestoration(state.index, data);
 
       page.resetTileRepositioningState();
     } else {
-      page.setDataList(dataList);
+      page.setDataList(data);
       cr.dispatchSimpleEvent(document, 'sectionready', true, true);
     }
   }
 
   function setForeignSessions(dataList, isTabSyncEnabled) {
     newTabView.otherDevicesPage.setDataList(dataList);
   }
 
   function getThumbnailUrl(url) {
     return 'chrome://thumb/' + url;
@@ skipping 37 matching lines @@
   }
 
   function appsPrefChangeCallback() {
     return newTabView.appsPrefChangedCallback.apply(newTabView, arguments);
   }
 
   function getAppsCallback() {
     return newTabView.getAppsCallback.apply(newTabView, arguments);
   }
 
+  function getAppsPageIndex() {
+    return newTabView.getAppsPageIndex.apply(newTabView, arguments);
+  }
+
   function getCardSlider() {
     return newTabView.cardSlider;
   }
 
   function setAppToBeHighlighted(appId) {
     newTabView.highlightAppId = appId;
   }
 
   function layout(opt_animate) {
     newTabView.layout(opt_animate);
   }
 
   function getContentWidth() {
     return newTabView.contentWidth;
   }
 
   // Return an object with all the exports
   return {
     APP_LAUNCH: APP_LAUNCH,
     appAdded: appAdded,
     appMoved: appMoved,
     appRemoved: appRemoved,
     appsPrefChangeCallback: appsPrefChangeCallback,
     getAppsCallback: getAppsCallback,
+    getAppsPageIndex: getAppsPageIndex,
     getCardSlider: getCardSlider,
     getContentWidth: getContentWidth,
     getThumbnailUrl: getThumbnailUrl,
     incrementHoveredThumbnailCount: incrementHoveredThumbnailCount,
     layout: layout,
     logTimeToClickAndHoverCount: logTimeToClickAndHoverCount,
+    // This property is being used to disable NTP5 features that are not ready
+    // yet. Right now this is being used just to disable Apps page.
+    // TODO(pedrosimonetti): Remove this property after porting Apps Page.
+    ntp5: true,
     NtpFollowAction: NtpFollowAction,
     onLoad: onLoad,
     setAppToBeHighlighted: setAppToBeHighlighted,
     setBookmarkBarAttached: setBookmarkBarAttached,
     setForeignSessions: setForeignSessions,
     setMostVisitedPages: setMostVisitedPages,
     setRecentlyClosedTabs: setRecentlyClosedTabs,
     showNotification: showNotification,
     themeChanged: themeChanged,
   };
 });
 
 document.addEventListener('DOMContentLoaded', ntp.onLoad);
 
 var toCssPx = cr.ui.toCssPx;