[NTP4] Make TilePage and CardSlider evented to simplify code and fix page switcher bug

chrome/browser/resources/ntp4/page_list_view.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 PageListView implementation.
  * PageListView manages page list, dot list, switcher buttons and handles apps
  * pages callbacks from backend.
  *
  * Note that you need to have AppLauncherHandler in your WebUI to use this code.
@@ skipping 149 matching lines @@
 
       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);
       this.cardSlider.initialize();
 
-      // Handle the page being changed
-      this.pageList.addEventListener(
-          cr.ui.CardSlider.EventType.CARD_CHANGED,
-          this.cardChangedHandler_.bind(this));
+      // Handle events from the card slider.
+      this.pageList.addEventListener('cardSlider:card_changed',
+                                     this.onCardChanged_.bind(this));
+      this.pageList.addEventListener('cardSlider:card_added',
+                                     this.onCardAdded_.bind(this));
+      this.pageList.addEventListener('cardSlider:card_removed',
+                                     this.onCardRemoved_.bind(this));
 
       // Ensure the slider is resized appropriately with the window
       window.addEventListener('resize', this.onWindowResize_.bind(this));
 
       // Update apps when online state changes.
       window.addEventListener('online',
           this.updateOfflineEnabledApps_.bind(this));
       window.addEventListener('offline',
           this.updateOfflineEnabledApps_.bind(this));
     },
 
     /**
      * Appends a tile page.
      *
      * @param {TilePage} page The page element.
      * @param {string} title The title of the tile page.
      * @param {bool} titleIsEditable If true, the title can be changed.
      * @param {TilePage} opt_refNode Optional reference node to insert in front
      *     of.
      * When opt_refNode is falsey, |page| will just be appended to the end of
      * the page list.
      */
     appendTilePage: function(page, title, titleIsEditable, opt_refNode) {
-      // When opt_refNode is falsey, insertBefore acts just like appendChild.
-      this.pageList.insertBefore(page, opt_refNode);
+      if (opt_refNode) {
+        var refIndex = this.getTilePageIndex(opt_refNode);
+        this.cardSlider.insertCardAtIndex(page, refIndex);
+      } else {
+        this.cardSlider.appendCard(page);
+      }
 
       // Remember special MostVisitedPage.
       if (typeof ntp4.MostVisitedPage != 'undefined' &&
           page instanceof ntp4.MostVisitedPage) {
         assert(this.tilePages.length == 1,
                'MostVisitedPage should be added as first tile page');
         this.mostVisitedPage = page;
       }
 
       // If we're appending an AppsPage and it's a temporary page, animate it.
@@ skipping 11 matching lines @@
       this.eventTracker.add(page, 'pagelayout', this.onPageLayout_.bind(this));
     },
 
     /**
      * 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.
      */
-    appRemoved: function(appData, isUninstall) {
+    appRemoved: function(appData, isUninstall, fromPage) {
       var app = $(appData.id);
       assert(app, 'trying to remove an app that doesn\'t exist');
 
       if (!isUninstall)
         app.replaceAppData(appData);
       else
-        app.remove();
+        app.remove(!!fromPage);
     },
 
     /**
+     * @return {boolean} If the page is still starting up.
+     * @private
+     */
+    isStartingUp_: function() {
+      return document.documentElement.classList.contains('starting-up');
+    },
+
+    /**
      * 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.
      */
     getAppsCallback: function(data) {
       var startTime = Date.now();
 
+      // 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) {
-        var page = this.appsPages[0];
-        var dot = page.navigationDot;
-
-        this.eventTracker.remove(page);
-        page.tearDown();
-        page.parentNode.removeChild(page);
-        dot.parentNode.removeChild(dot);
-      }
+      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;
 
       function stringListIsEmpty(list) {
         for (var i = 0; i < list.length; i++) {
           if (list[i])
@@ skipping 29 matching lines @@
         }
 
         if (app.id == this.highlightAppId)
           highlightApp = app;
         else
           this.appsPages[pageIndex].appendApp(app);
       }
 
       ntp4.AppsPage.setPromo(data.showPromo ? data : null);
 
+      this.cardSlider.currentCard = prevCurrentCard;
+
       // Tell the slider about the pages.
       this.updateSliderCards();
 
       if (highlightApp)
         this.appAdded(highlightApp, true);
 
       // Mark the current page.
       this.cardSlider.currentCardValue.navigationDot.classList.add('selected');
       logEvent('apps.layout: ' + (Date.now() - startTime));
 
@@ skipping 47 matching lines @@
       for (var i = start; i < dots.length; ++i) {
         dots[i].displayTitle = data.appPageNames[i - start] || '';
       }
     },
 
     /**
      * Invoked whenever the pages in apps-page-list have changed so that
      * the Slider knows about the new elements.
      */
     updateSliderCards: function() {
-      var pageNo = Math.min(this.cardSlider.currentCard,
-                            this.tilePages.length - 1);
+      var pageNo = Math.max(0, Math.min(this.cardSlider.currentCard,
+                                        this.tilePages.length - 1));
       this.cardSlider.setCards(Array.prototype.slice.call(this.tilePages),
-                                                          pageNo);
+                               pageNo);
       switch (this.shownPage) {
         case templateData['apps_page_id']:
           this.cardSlider.selectCardByValue(
               this.appsPages[Math.min(this.shownPageIndex,
                                       this.appsPages.length - 1)]);
           break;
         case templateData['most_visited_page_id']:
           if (this.mostVisitedPage)
             this.cardSlider.selectCardByValue(this.mostVisitedPage);
           break;
       }
     },
 
     /**
      * Called whenever tiles should be re-arranging themselves out of the way
      * of a moving or insert tile.
      */
     enterRearrangeMode: function() {
       var tempPage = new ntp4.AppsPage();
       tempPage.classList.add('temporary');
-      this.appendTilePage(tempPage,
-                          localStrings.getString('appDefaultPageName'),
-                          true);
-      var tempIndex = Array.prototype.indexOf.call(this.tilePages, tempPage);
-      if (this.cardSlider.currentCard >= tempIndex)
-        this.cardSlider.currentCard += 1;
-      this.updateSliderCards();
+      var pageName = localStrings.getString('appDefaultPageName');
+      this.appendTilePage(tempPage, pageName, true);
 
       if (ntp4.getCurrentlyDraggingTile().firstChild.canBeRemoved())
         $('footer').classList.add('showing-trash-mode');
     },
 
     /**
      * Invoked whenever some app is released
      */
     leaveRearrangeMode: function() {
       var tempPage = document.querySelector('.tile-page.temporary');
       var dot = tempPage.navigationDot;
       if (!tempPage.tileCount && tempPage != this.cardSlider.currentCardValue) {
-        dot.animateRemove();
-        var tempIndex = Array.prototype.indexOf.call(this.tilePages, tempPage);
-        if (this.cardSlider.currentCard > tempIndex)
-          this.cardSlider.currentCard -= 1;
-        tempPage.parentNode.removeChild(tempPage);
-        this.updateSliderCards();
+        this.removeTilePageAndDot_(tempPage, true);
       } else {
         tempPage.classList.remove('temporary');
         this.saveAppPageName(tempPage,
                              localStrings.getString('appDefaultPageName'));
       }
 
       $('footer').classList.remove('showing-trash-mode');
     },
 
     /**
@@ skipping 50 matching lines @@
      * 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 CARD_CHANGED on cardSlider.
-     * @param {Event} e The CARD_CHANGED event.
+     * Handler for cardSlider:card_changed events from this.cardSlider.
+     * @param {Event} e The cardSlider:card_changed event.
      * @private
      */
-    cardChangedHandler_: function(e) {
+    onCardChanged_: function(e) {
       var page = e.cardSlider.currentCardValue;
 
       // Don't change shownPage until startup is done (and page changes actually
       // reflect user actions).
-      if (!document.documentElement.classList.contains('starting-up')) {
+      if (!this.isStartingUp_()) {
         if (page.classList.contains('apps-page')) {
           this.shownPage = templateData.apps_page_id;
           this.shownPageIndex = this.getAppsPageIndex(page);
         } else if (page.classList.contains('most-visited-page')) {
           this.shownPage = templateData.most_visited_page_id;
           this.shownPageIndex = 0;
         } else {
           console.error('unknown page selected');
         }
         chrome.send('pageSelected', [this.shownPage, this.shownPageIndex]);
       }
 
       // Update the active dot
       var curDot = this.dotList.getElementsByClassName('selected')[0];
       if (curDot)
         curDot.classList.remove('selected');
       page.navigationDot.classList.add('selected');
       this.updatePageSwitchers();
     },
 
-    /*
-     * Save the name of an app page.
-     * Store the app page name into the preferences store.
-     * @param {AppsPage} appPage The app page for which we wish to save.
+    /**
+     * Listen for card additions to update the page switchers or the current
+     * card accordingly.
+     * @param {Event} e A card removed or added event.
+     */
+    onCardAdded_: function(e) {
+      // When the second arg passed to insertBefore is falsey, it acts just like
+      // appendChild.
+      this.pageList.insertBefore(e.addedCard, this.tilePages[e.addedIndex]);
+      if (!this.isStartingUp_())
+        this.updatePageSwitchers();
+    },
+
+    /**
+     * Listen for card removals to update the page switchers or the current card
+     * accordingly.
+     * @param {Event} e A card removed or added event.
+     */
+    onCardRemoved_: function(e) {
+      e.removedCard.parentNode.removeChild(e.removedCard);
+      if (!this.isStartingUp_())
+        this.updatePageSwitchers();
+    },
+
+    /**
+     * Save the name of an apps page.
+     * Store the apps page name into the preferences store.
+     * @param {AppsPage} appsPage The app page for which we wish to save.
      * @param {string} name The name of the page.
      */
     saveAppPageName: function(appPage, name) {
       var index = this.getAppsPageIndex(appPage);
       assert(index != -1);
       chrome.send('saveAppPageName', [name, index]);
     },
 
     /**
      * Window resize handler.
@@ skipping 36 matching lines @@
         direction = 1;
       else
         return;
 
       var cardIndex =
           (this.cardSlider.currentCard + direction +
            this.cardSlider.cardCount) % this.cardSlider.cardCount;
       this.cardSlider.selectCard(cardIndex, true);
 
       e.stopPropagation();
-    }
+    },
+
+    /**
+     * Returns the index of a given tile page.
+     * @param {TilePage} page The TilePage we wish to find.
+     * @return {number} The index of |page| or -1 if it is not in the
+     *    collection.
+     */
+    getTilePageIndex: function(page) {
+      return Array.prototype.indexOf.call(this.tilePages, page);
+    },
+
+    /**
+     * Removes a page and navigation dot (if the navdot exists).
+     * @param {TilePage} page The page to be removed.
+     * @param {boolean=} opt_animate If the removal should be animated.
+     */
+    removeTilePageAndDot_: function(page, opt_animate) {
+      if (page.navigationDot)
+        page.navigationDot.remove(opt_animate);
+      this.cardSlider.removeCard(page);
+    },
   };
 
   return {
     PageListView: PageListView
   };
 });