ntp4: most visited dragging onto apps page

chrome/browser/resources/ntp4/most_visited_page.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.
 
 cr.define('ntp4', function() {
   'use strict';
 
   var TilePage = ntp4.TilePage;
 
   /**
@@ skipping 21 matching lines @@
 
       this.addEventListener('click', this.handleClick_.bind(this));
       this.addEventListener('keydown', this.handleKeyDown_.bind(this));
     },
 
     get index() {
       assert(this.tile);
       return this.tile.index;
     },
 
+    get data() {
+      return this.data_;
+    },
+
     /**
      * Clears the DOM hierarchy for this node, setting it back to the default
      * for a blank thumbnail.
      */
     reset: function() {
       this.className = 'most-visited filler real';
       this.innerHTML =
           '<span class="thumbnail-wrapper fills-parent">' +
             '<div class="close-button"></div>' +
             '<span class="thumbnail fills-parent">' +
               // thumbnail-shield provides a gradient fade effect.
               '<div class="thumbnail-shield fills-parent"></div>' +
             '</span>' +
             '<span class="favicon"></span>' +
           '</span>' +
           '<div class="color-stripe"></div>' +
           '<span class="title"></span>';
 
       this.removeAttribute('tabIndex');
       this.data_ = null;
       this.removeAttribute('id');
     },
 
     /**
      * Update the appearance of this tile according to |data|.
      * @param {Object} data A dictionary of relevant data for the page.
      */
     updateForData: function(data) {
+      if (this.classList.contains('blacklisted') && data) {
+        // Animate appearance of new tile.
+        this.classList.add('new-tile-contents');
+      }
+      this.classList.remove('blacklisted');
+
       if (!data || data.filler) {
         if (this.data_)
           this.reset();
         return;
       }
 
       var id = tileID++;
       this.setAttribute('id', 'tile' + id);
       this.data_ = data;
       // TODO(estade): this shouldn't be focusable if the page isn't showing.
       this.tabIndex = 0;
-      this.classList.remove('filler');
 
       var faviconDiv = this.querySelector('.favicon');
       var faviconUrl = data.faviconUrl ||
           'chrome://favicon/size/32/' + data.url;
       faviconDiv.style.backgroundImage = url(faviconUrl);
       faviconDiv.dir = data.direction;
       if (data.faviconDominantColor)
         this.setStripeColor(data.faviconDominantColor);
       else
         chrome.send('getFaviconDominantColor', [faviconUrl, id]);
 
       var title = this.querySelector('.title');
       title.textContent = data.title;
       title.dir = data.direction;
 
       var thumbnailUrl = data.thumbnailUrl || 'chrome://thumb/' + data.url;
       this.querySelector('.thumbnail').style.backgroundImage =
           url(thumbnailUrl);
 
       this.href = data.url;
+
+      this.classList.remove('filler');
     },
 
     /**
      * Sets the color of the favicon dominant color bar.
      * @param {string} color The css-parsable value for the color.
      */
     setStripeColor: function(color) {
       this.querySelector('.color-stripe').style.backgroundColor = color;
     },
 
@@ skipping 29 matching lines @@
     },
 
     /**
      * Permanently removes a page from Most Visited.
      */
     blacklist_: function() {
       this.showUndoNotification_();
       chrome.send('blacklistURLFromMostVisited', [this.data_.url]);
       this.reset();
       chrome.send('getMostVisited');
+      this.classList.add('blacklisted');
     },
 
     showUndoNotification_: function() {
       var data = this.data_;
       var self = this;
       var doUndo = function () {
         chrome.send('removeURLsFromMostVisitedBlacklist', [data.url]);
         self.updateForData(data);
       }
 
@@ skipping 21 matching lines @@
      *     animate.
      */
     setBounds: function(size, x, y) {
       this.style.width = size + 'px';
       this.style.height = heightForWidth(size) + 'px';
 
       this.style.left = x + 'px';
       this.style.right = x + 'px';
       this.style.top = y + 'px';
     },
+
+    /**
+     * Returns whether this element can be 'removed' from chrome (i.e. whether
+     * the user can drag it onto the trash and expect something to happen).
+     * @return {boolean} True, since most visited pages can always be
+     *     blacklisted.
+     */
+    canBeRemoved: function() {
+      return true;
+    },
+
+    /**
+     * Removes this element from chrome, i.e. blacklists it.
+     */
+    removeFromChrome: function() {
+      this.blacklist_();
+      this.parentNode.classList.add('restoring');

[Rick Byers, 2011/08/08 15:24:15]

I'm confused by the name 'restoring' in this situation.  Could it simply be
'removing' or something like that?  Alternately add a comment why a most visited
page being blacklisted is considered to be 'restoring'.

[Evan Stade, 2011/08/08 18:26:58]

you're right, finishing-drag might make more sense. Originally I had it as
restoring because we were waiting for new data to re-populate the tile with.

+    },
+
+    /**
+     * Called when a drag of this tile has ended (after all animations have
+     * finished).
+     */
+    finalizeDrag: function() {
+      this.parentNode.classList.remove('restoring');
+    },
   };
 
   var mostVisitedPageGridValues = {
     // The fewest tiles we will show in a row.
     minColCount: 2,
     // The most tiles we will show in a row.
     maxColCount: 4,
 
     // TODO(estade): Change these to real values.
     // The smallest a tile can be.
@@ skipping 169 matching lines @@
     if (tile)
       tile.setStripeColor(color);
   };
 
   return {
     MostVisitedPage: MostVisitedPage,
     refreshData: refreshData,
     setFaviconDominantColor: setFaviconDominantColor,
   };
 });