NNTP notification tweaks.

These came up in the usability studies.

Show the first run notification for 30 seconds.

Truncate the blacklisted title so that more of the message is shown.
In small mode both the title and the message have to be truncated. The
current UI design does not work well enough for small screens.

BUG=None

TEST=Start chrome with an empty/new profile. The first run notification
on the new tab page should be shown for 30s. Then navigate to a page
with a long title and go back to the new tab page and blacklist that
page. The title in the notifier should be truncated.

Review URL: http://codereview.chromium.org/160462

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@22280 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 33 insertions, 9 deletions

diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index 99801f3..b58387a 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -342,6 +342,14 @@ html[dir=rtl] .thumbnail-container > .title > div {
   -webkit-margin-start: 20px;
 }
 
+#notification > span > .blacklist-title {
+  display: inline-block;
+  max-width: 30ex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* List mode */
 
 .list .thumbnail,
@@ -711,6 +719,10 @@ html[dir='rtl'] #t4 {
     max-width: 300px;
   }
 
+  #notification > span > .blacklist-title {
+    max-width: 15ex;
+  }
+
   #lower-sections > .section {
     width: 336px; /* Same here, see above */
   }
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index a275898..c30a773 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -474,19 +474,30 @@ var mostVisited = {
         addClass(el, 'fade-in');
       }
 
-      var text = localStrings.formatString('thumbnailremovednotification',
-                                           oldItem.title);
+      // We wrap the title in a <span class=blacklisted-title>. We pass an empty
+      // string to the notifier function and use DOM to insert the real string.
       var actionText = localStrings.getString('undothumbnailremove');
 
       // Show notification and add undo callback function.
       var wasPinned = oldItem.pinned;
-      showNotification(text, actionText, function() {
+      showNotification('', actionText, function() {
         self.removeFromBlackList(url);
         if (wasPinned) {
           chromeSend('addPinnedURL', [url, oldItem.title, String(oldIndex)]);
         }
         chrome.send('getMostVisited');
       });
+
+      // Now change the DOM.
+      var textPattern = localStrings.getString('thumbnailremovednotification');
+      var parts = textPattern.split('%s');
+      var titleSpan = document.createElement('span');
+      titleSpan.className = 'blacklist-title';
+      titleSpan.textContent = oldItem.title;
+      var notifySpan = document.querySelector('#notification > span');
+      notifySpan.appendChild(document.createTextNode(parts[0]));
+      notifySpan.appendChild(titleSpan);
+      notifySpan.appendChild(document.createTextNode(parts[1]));
     });
   },
 
@@ -823,8 +834,10 @@ function afterTransition(f) {
 
 var notificationTimeout;
 
-function showNotification(text, actionText, opt_f) {
+function showNotification(text, actionText, opt_f, opt_delay) {
   var notificationElement = $('notification');
+  var f = opt_f || function() {};
+  var delay = opt_delay || 10000;
 
   function show() {
     window.clearTimeout(notificationTimeout);
@@ -832,13 +845,11 @@ function showNotification(text, actionText, opt_f) {
   }
 
   function delayedHide() {
-    notificationTimeout = window.setTimeout(hideNotification, 10000);
+    notificationTimeout = window.setTimeout(hideNotification, delay);
   }
 
   function doAction() {
-    if (opt_f) {
-      opt_f();
-    }
+    f();
     hideNotification();
   }
 
@@ -867,7 +878,8 @@ function hideNotification() {
 
 function showFirstRunNotification() {
   showNotification(localStrings.getString('firstrunnotification'),
-                   localStrings.getString('closefirstrunnotification'));
+                   localStrings.getString('closefirstrunnotification'),
+                   null, 30000);
   var notificationElement = $('notification');
   addClass(notification, 'first-run');
 }