ntp4: notification area

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 87 matching lines @@
 
       this.updatePinnedState_();
     },
 
     /**
      * 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))
+        e.preventDefault();
+
       if (target.classList.contains('pin')) {
-        this.togglePinned_();
-        e.preventDefault();
+        this.setPinned_(!this.data_.pinned);
       } else if (target.classList.contains('remove')) {
         this.blacklist_();
-        e.preventDefault();
       } else {
         chrome.send('metrics', ['NTP_MostVisited' + this.index]);
       }
     },
 
     /**
      * 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.
      */
-    togglePinned_: function() {
+    setPinned_: function(pinned) {
       var data = this.data_;
-      data.pinned = !data.pinned;
+      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 {
@@ skipping 13 matching lines @@
       } 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', []);
+        },
+        text: templateData.restoreThumbnailsShort,
+      }
+
+      ntp4.showNotification(templateData.thumbnailremovednotification,
+                            [undo, undoAll]);
+    },
+
     /**
      * Set the size and position of the most visited tile.
      * @param {number} size The total size of |this|.
      * @param {number} x The x-position.
      * @param {number} y The y-position.
      *     animate.
      */
     setBounds: function(size, x, y) {
       this.style.width = size + 'px';
       this.style.height = heightForWidth(size) + 'px';
@@ skipping 124 matching lines @@
         // 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;
       }
     }
 
     // Look through old pages; if they exist in the newData list, keep them
     // where they are.
     for (var i = 0; i < oldData.length; i++) {
-      if (oldData[i].updated)
+      if (!oldData[i] || oldData[i].updated)
         continue;
 
       for (var j = 0; j < newData.length; j++) {
         if (newData[j].used)
           continue;
 
         if (newData[j].url == oldData[i].url) {
           // The background image and other data may have changed.
           oldData[i] = newData[j];
           oldData[i].updated = true;
           newData[j].used = true;
           break;
         }
       }
     }
 
     // Look through old pages that haven't been updated yet; replace them.
     for (var i = 0; i < oldData.length; i++) {
-      if (oldData[i].updated)
+      if (oldData[i] && oldData[i].updated)
         continue;
 
       for (var j = 0; j < newData.length; j++) {
         if (newData[j].used)
           continue;
 
         oldData[i] = newData[j];
         oldData[i].updated = true;
         newData[j].used = true;
         break;
       }
 
-      if (!oldData[i].updated)
+      if (oldData[i] && !oldData[i].updated)
         oldData[i] = null;
     }
 
     // Clear 'updated' flags so this function will work next time it's called.
     for (var i = 0; i < THUMBNAIL_COUNT; i++) {
       if (oldData[i])
         oldData[i].updated = false;
     }
 
     return oldData;
   };
 
   return {
     MostVisitedPage: MostVisitedPage,
     refreshData: refreshData,
   };
 });