ntp4: Most Visited appearance refresh

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 27 matching lines @@
       assert(this.tile);
       return this.tile.index;
     },
 
     /**
      * 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';
-      // TODO(estade): why do we need edit-mode-border?
       this.innerHTML =
-          '<div class="edit-mode-border fills-parent">' +
-            '<div class="edit-bar-wrapper">' +
-              '<div class="edit-bar">' +
-                '<div class="pin"></div>' +
-                '<div class="spacer"></div>' +
-                '<div class="remove"></div>' +
-              '</div>' +
-            '</div>' +
-            '<span class="thumbnail-wrapper fills-parent">' +
-              '<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 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>' +
-            '<div class="color-stripe"></div>' +
-            '<span class="title"></span>' +
-          '</div>';
+            '<span class="favicon"></span>' +
+          '</span>' +
+          '<div class="color-stripe"></div>' +
+          '<span class="title"></span>';
 
       this.tabIndex = -1;
       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.
      */
@@ skipping 22 matching lines @@
 
       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.updatePinnedState_();
     },
 
     /**
      * 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;
     },
 
     /**
      * Handles a click on the tile.
      * @param {Event} e The click event.
      */
     handleClick_: function(e) {
-      var target = e.target;
-
-      // Don't navigate on edit bar clicks.
-      if (this.querySelector('.edit-bar').contains(target))
+      if (e.target.classList.contains('close-button')) {
+        this.blacklist_();
         e.preventDefault();
-
-      if (target.classList.contains('pin')) {
-        this.setPinned_(!this.data_.pinned);
-      } else if (target.classList.contains('remove')) {
-        this.blacklist_();
       } else {
         chrome.send('recordInHistogram', ['NTP_MostVisited', this.index, 8]);
       }
     },
 
     /**
      * Allow blacklisting most visited site using the keyboard.
      */
     handleKeyDown_: function(e) {
       if (!IS_MAC && e.keyCode == 46 || // Del
           IS_MAC && e.metaKey && e.keyCode == 8) { // Cmd + Backspace
         this.blacklist_();
       }
     },
 
     /**
-     * Changes the visual state of the page and updates the model.
-     */
-    setPinned_: function(pinned) {
-      var data = this.data_;
-      data.pinned = pinned;
-      if (data.pinned) {
-        chrome.send('addPinnedURL', [
-          data.url,
-          data.title,
-          data.faviconUrl || '',
-          data.thumbnailUrl || '',
-          // TODO(estade): should not need to convert index to string.
-          String(this.index)
-        ]);
-      } else {
-        chrome.send('removePinnedURL', [data.url]);
-      }
-
-      this.updatePinnedState_();
-    },
-
-    /**
-     * Updates the DOM for the current pinned state.
-     */
-    updatePinnedState_: function() {
-      if (this.data_.pinned) {
-        this.classList.add('pinned');
-        this.querySelector('.pin').title = templateData.unpinthumbnailtooltip;
-      } else {
-        this.classList.remove('pinned');
-        this.querySelector('.pin').title = templateData.pinthumbnailtooltip;
-      }
-    },
-
-    /**
      * Permanently removes a page from Most Visited.
      */
     blacklist_: function() {
       this.showUndoNotification_();
       chrome.send('blacklistURLFromMostVisited', [this.data_.url]);
       this.reset();
       chrome.send('getMostVisited');
     },
 
     showUndoNotification_: function() {
       var data = this.data_;
-      var pinned = data.pinned;
       var self = this;
       var doUndo = function () {
         chrome.send('removeURLsFromMostVisitedBlacklist', [data.url]);
         self.updateForData(data);
-        self.setPinned_(data.pinned);
-        // chrome.send('getMostVisited');
       }
 
       var undo = {
         action: doUndo,
         text: templateData.undothumbnailremove,
       }
 
       var undoAll = {
         action: function() {
           chrome.send('clearMostVisitedURLsBlacklist', []);
@@ skipping 29 matching lines @@
     // TODO(estade): Change these to real values.
     // The smallest a tile can be.
     minTileWidth: 200,
     // The biggest a tile can be.
     maxTileWidth: 240,
   };
   TilePage.initGridValues(mostVisitedPageGridValues);
 
   /**
    * Calculates the height for a Most Visited tile for a given width. The size
-   * is based on the thumbnail, which should have a 212:132 ratio (the rest of
-   * the arithmetic accounts for padding).
+   * is based on the thumbnail, which should have a 212:132 ratio.
    * @return {number} The height.
    */
   function heightForWidth(width) {
-    return (width - 2) * 132 / 212 + 48;
+    // The 2s are for borders, the 23 is for the title.
+    return (width - 2) * 132 / 212 + 2 + 23;
   }
 
   var THUMBNAIL_COUNT = 8;
 
   /**
    * Creates a new MostVisitedPage object.
    * @constructor
    * @extends {TilePage}
    */
   function MostVisitedPage() {
@@ skipping 53 matching lines @@
         this.data_ = data.slice(0, THUMBNAIL_COUNT);
       } else {
         this.data_ = refreshData(this.data_, data);
       }
 
       this.updateTiles_();
     },
 
     /** @inheritDoc */
     shouldAcceptDrag: function(dataTransfer) {
-      return this.contains(ntp4.getCurrentlyDraggingTile());
+      return false;
     },
 
     /** @inheritDoc */
     heightForWidth: heightForWidth,
   };
 
   /**
    * We've gotten additional Most Visited data. Update our old data with the
    * new data. The ordering of the new data is not important, except when a
    * page is pinned. Thus we try to minimize re-ordering.

[csilv, 2011/07/12 21:31:09]

nit: remove reference to a pinned item in the comment.

    * @param {Object} oldData The current Most Visited page list.
    * @param {Object} newData The new Most Visited page list.
    * @return The merged page list that should replace the current page list.
    */
   function refreshData(oldData, newData) {
     oldData = oldData.slice(0, THUMBNAIL_COUNT);
     newData = newData.slice(0, THUMBNAIL_COUNT);
 
     // Copy over pinned sites directly.

[csilv, 2011/07/12 21:31:09]

This block is obsolete.

[Evan Stade, 2011/07/12 21:47:29]

it doesn't do any harm so I left it there for now. Removing it would require
fixing some tests, and for all I know someone may change their mind in the
future and want pinning back. So I will remove it when we rip out the rest of
the pinning infrastructure (C++ side).

     for (var j = 0; j < newData.length; j++) {
       if (newData[j].pinned) {
         oldData[j] = newData[j];
         // Mark the entry as 'updated' so we don't try to update again.
         oldData[j].updated = true;
         // Mark the newData page as 'used' so we don't try to re-use it.
         newData[j].used = true;
       }
     }
 
@@ skipping 50 matching lines @@
     if (tile)
       tile.setStripeColor(color);
   };
 
   return {
     MostVisitedPage: MostVisitedPage,
     refreshData: refreshData,
     setFaviconDominantColor: setFaviconDominantColor,
   };
 });