[NTP4] Auto-deletion of empty apps panes.

chrome/browser/resources/ntp4/apps_page.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.
 
 cr.define('ntp4', function() {
   'use strict';
 
   var localStrings = new LocalStrings;
 
   var APP_LAUNCH = {
@@ skipping 257 matching lines @@
 
     /**
      * Sets the color of the favicon dominant color bar.
      * @param {string} color The css-parsable value for the color.
      */
     set stripeColor(color) {
       this.querySelector('.color-stripe').style.backgroundColor = color;
     },
 
     /**
-     * Removes the app tile from the page. Should be called after the app has
-     * been uninstalled.
-     */
-    remove: function() {
-      // Unset the ID immediately, because the app is already gone. But leave
-      // the tile on the page as it animates out.
-      this.id = '';
-      this.tile.doRemove();
-    },
-
-    /**
      * Set the URL of the icon from |appData_|. This won't actually show the
      * icon until loadIcon() is called (for performance reasons; we don't want
      * to load icons until we have to).
      */
     setIcon: function() {
       var src = this.useSmallIcon_ ? this.appData_.icon_small :
                                      this.appData_.icon_big;
       if (!this.appData_.enabled ||
           (!this.appData_.offline_enabled && !navigator.onLine)) {
         src += '?grayscale=true';
@@ skipping 328 matching lines @@
     // The padding between tiles, as a fraction of the tile width.
     tileSpacingFraction: 1 / 8,
   };
   TilePage.initGridValues(appsPageGridValues);
 
   /**
    * Creates a new AppsPage object.
    * @constructor
    * @extends {TilePage}
    */
-  function AppsPage() {
+  function AppsPage(ordinal) {
     var el = new TilePage(appsPageGridValues);
     el.__proto__ = AppsPage.prototype;
-    el.initialize();
+    el.initialize(ordinal);
 
     return el;
   }
 
   AppsPage.prototype = {
     __proto__: TilePage.prototype,
 
-    initialize: function() {
+    initialize: function(ordinal) {
+      this.ordinal_ = ordinal;
       this.classList.add('apps-page');
 
       this.addEventListener('cardselected', this.onCardSelected_);
       // Add event listeners for two events, so we can temporarily suppress
       // the app notification bubbles when the app card slides in and out of
       // view.
       this.addEventListener('carddeselected', this.onCardDeselected_);
-      this.addEventListener('cardSelectionCompleted',
-                            this.onCardSelectionCompleted_);
+      this.addEventListener(cr.ui.CardSlider.EventType.CARD_CHANGE_ENDED,
+                            this.onCardChangeEnded_);
+
+      this.addEventListener(TilePage.EventType.TILE_ADDED, this.onTileAdded_);
 
       this.content_.addEventListener('scroll', this.onScroll_.bind(this));
     },
 
+    get ordinal() {
+      assert(typeof this.ordinal_ == 'string' && this.ordinal_);
+      return this.ordinal_;
+    },
+
+    set ordinal(ordinal) {
+      assert(typeof ordinal == 'string' && ordinal);
+      this.ordinal_ = ordinal;
+    },
+
     /**
      * Creates an app DOM element and places it at the last position on the
      * page.
      * @param {Object} appData The data object that describes the app.
      * @param {?boolean} animate If true, the app tile plays an animation.
      */
     appendApp: function(appData, animate) {
       if (animate) {
         // Select the page and scroll all the way down so the animation is
         // visible.
         ntp4.getCardSlider().selectCardByValue(this);
         this.content_.scrollTop = this.content_.scrollHeight;
       }
-      var app = new App(appData);
-      if (this.classList.contains('selected-card'))
-        app.loadIcon();
-      this.appendTile(app, animate);
+      this.appendTile(new App(appData), animate);
     },
 
     /**
      * Handler for 'cardselected' event, fired when |this| is selected. The
      * first time this is called, we load all the app icons.
      * @private
      */
     onCardSelected_: function(e) {
       var apps = this.querySelectorAll('.app.icon-loading');
       for (var i = 0; i < apps.length; i++) {
         apps[i].loadIcon();
         if (apps[i].currentBubbleShowing_)
           apps[i].currentBubbleShowing_.suppressed = false;
       }
     },
 
     /**
-     * Handler for the 'cardSelectionCompleted' event, fired when the app card
-     * is done transitioning into view (and all the apps have repositioned).
+     * Handler for tile additions to this page.
+     * @param {Event} e The TILE_MOVED event.
+     */
+    onTileAdded_: function(e) {
+      assert(e.tilePage == this);
+      var tileContents = e.tilePage.tiles[e.tileIndex].firstChild;
+      assert(tileContents instanceof App);
+      if (e.tilePage.classList.contains('selected-card'))
+        tileContents.loadIcon();
+    },
+
+    /**
+     * Handler for the when this.cardSlider ends change its card. If animated,
+     * this happens when the -webkit-transition is done, otherwise happens
+     * immediately (but after CardSlider.EventType.CARD_CHANGED).
      * @private
      */
-    onCardSelectionCompleted_: function(e) {
+    onCardChangeEnded: function(e) {
       for (var i = 0; i < this.tileElements_.length; i++) {
         var app = this.tileElements_[i].firstChild;
         assert(app instanceof App);
         if (app.currentBubbleShowing_)
           app.currentBubbleShowing_.suppressed = false;
       }
     },
 
     /**
      * Handler for the 'carddeselected' event, fired when the user switches
@@ skipping 43 matching lines @@
           (e.dataTransfer && e.dataTransfer.types.indexOf('url') != -1);
     },
 
     /** @inheritDoc */
     addDragData: function(dataTransfer, index) {
       var sourceId = -1;
       var currentlyDraggingTile = ntp4.getCurrentlyDraggingTile();
       if (currentlyDraggingTile) {
         var tileContents = currentlyDraggingTile.firstChild;
         if (tileContents.classList.contains('app')) {
-          sourceId = currentlyDraggingTile.tilePage == this ?
-              DRAG_SOURCE.SAME_APPS_PANE : DRAG_SOURCE.OTHER_APPS_PANE;
-          this.tileGrid_.insertBefore(
-              currentlyDraggingTile,
-              this.tileElements_[index]);
+          var originalPage = currentlyDraggingTile.tilePage;
+          var samePageDrag = originalPage == this;
+          sourceId = samePageDrag ? DRAG_SOURCE.SAME_APPS_PANE :
+                                    DRAG_SOURCE.OTHER_APPS_PANE;
+          this.tileGrid_.insertBefore(currentlyDraggingTile,
+                                      this.tileElements_[index]);
           this.tileMoved(currentlyDraggingTile);
+          if (!samePageDrag)
+            originalPage.fireRemovedEvent(true);
+          if (originalPage)
+            originalPage.cleanupDrag();
         } else if (currentlyDraggingTile.querySelector('.most-visited')) {
           this.generateAppForLink(tileContents.data);
           sourceId = DRAG_SOURCE.MOST_VISITED_PANE;
         }
       } else {
-        this.addOutsideData_(dataTransfer, index);
+        this.addOutsideData_(dataTransfer);
         sourceId = DRAG_SOURCE.OUTSIDE_NTP;
       }
 
       assert(sourceId != -1);
       chrome.send('metricsHandler:recordInHistogram',
           ['NewTabPage.AppsPageDragSource', sourceId, DRAG_SOURCE_LIMIT]);
     },
 
     /**
      * Adds drag data that has been dropped from a source that is not a tile.
@@ skipping 97 matching lines @@
     appNotificationChanged: appNotificationChanged,
     AppsPage: AppsPage,
     launchAppAfterEnable: launchAppAfterEnable,
   };
 });
 
 // TODO(estade): update the content handlers to use ntp namespace instead of
 // making these global.
 var appNotificationChanged = ntp4.appNotificationChanged;
 var launchAppAfterEnable = ntp4.launchAppAfterEnable;