NNTP: Remove tips and downloads and introduce a recently closed bar instead.

Make the list mode only show one column and make the items look like links.

BUG=None

TEST= On the new tab page try opening and closing tabs and windows.
The closed tabs and windows should appear in the recently closed bar at
the bottom.

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

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

6 files changed, 168 insertions, 330 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index ce33e5f..ffed4d6 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -3780,6 +3780,14 @@ each locale. -->
                desc="Menu item text used to hide tips.">
         Hide recommendations
       </message>
+      <message name="IDS_NEW_TAB_SHOW_RECENTLY_CLOSED_TABS"
+               desc="Menu item text used to show recently closed tabs.">
+        Show recently closed tabs
+      </message>
+      <message name="IDS_NEW_TAB_HIDE_RECENTLY_CLOSED_TABS"
+               desc="Menu item text used to hide recently closed tabs.">
+        Hide recently closed tabs
+      </message>
       <message name="IDS_NEW_TAB_THUMBNAIL_REMOVED_NOTIFICATION"
                desc="Notification text shown when a thumbnail has been removed from the most visited section.">
         The thumbnail for &#x201C;<ph name="THUMBNAIL_TITLE">%s</ph>&#x201D; will no longer appear.
diff --git a/chrome/browser/dom_ui/new_tab_ui.cc b/chrome/browser/dom_ui/new_tab_ui.cc
index 0489d23..e3f2f62 100644
--- a/chrome/browser/dom_ui/new_tab_ui.cc
+++ b/chrome/browser/dom_ui/new_tab_ui.cc
@@ -307,20 +307,8 @@ void NewTabHTMLSource::StartDataRequest(const std::string& path,
       l10n_util::GetString(IDS_NEW_TAB_RECENTLY_CLOSED_WINDOW_MULTIPLE));
   localized_strings.SetString(L"attributionintro",
       l10n_util::GetString(IDS_NEW_TAB_ATTRIBUTION_INTRO));
-  localized_strings.SetString(L"resourcecache",
-      l10n_util::GetString(IDS_NEW_TAB_WEB_RESOURCE_CACHE));
-  localized_strings.SetString(L"recentactivities",
-      l10n_util::GetString(IDS_NEW_TAB_RECENT_ACTIVITIES));
-  localized_strings.SetString(L"tipsandsuggestions",
-      l10n_util::GetString(IDS_NEW_TAB_EVEN_MORE_TITLE));
-  localized_strings.SetString(L"defaulttipstitle",
-      l10n_util::GetString(IDS_NEW_TAB_EVEN_MORE_CONTENT));
-  localized_strings.SetString(L"downloads",
-      l10n_util::GetString(IDS_NEW_TAB_DOWNLOADS));
   localized_strings.SetString(L"viewfullhistory",
       l10n_util::GetString(IDS_NEW_TAB_VIEW_FULL_HISTORY));
-  localized_strings.SetString(L"viewalldownloads",
-      l10n_util::GetString(IDS_NEW_TAB_VIEW_ALL_DOWNLOADS));
   localized_strings.SetString(L"showthumbnails",
       l10n_util::GetString(IDS_NEW_TAB_SHOW_THUMBNAILS));
   localized_strings.SetString(L"hidethumbnails",
@@ -329,14 +317,10 @@ void NewTabHTMLSource::StartDataRequest(const std::string& path,
       l10n_util::GetString(IDS_NEW_TAB_SHOW_LIST));
   localized_strings.SetString(L"hidelist",
       l10n_util::GetString(IDS_NEW_TAB_HIDE_LIST));
-  localized_strings.SetString(L"showrecent",
-      l10n_util::GetString(IDS_NEW_TAB_SHOW_RECENT));
-  localized_strings.SetString(L"hiderecent",
-      l10n_util::GetString(IDS_NEW_TAB_HIDE_RECENT));
-  localized_strings.SetString(L"showtips",
-      l10n_util::GetString(IDS_NEW_TAB_SHOW_EVEN_MORE));
-  localized_strings.SetString(L"hidetips",
-      l10n_util::GetString(IDS_NEW_TAB_HIDE_EVEN_MORE));
+  localized_strings.SetString(L"showrecentlyclosedtabs",
+      l10n_util::GetString(IDS_NEW_TAB_SHOW_RECENTLY_CLOSED_TABS));
+  localized_strings.SetString(L"hiderecentlyclosedtabs",
+      l10n_util::GetString(IDS_NEW_TAB_HIDE_RECENTLY_CLOSED_TABS));
   localized_strings.SetString(L"thumbnailremovednotification",
       l10n_util::GetString(IDS_NEW_TAB_THUMBNAIL_REMOVED_NOTIFICATION));
   localized_strings.SetString(L"undothumbnailremove",
diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index 5e28407..c46ce3c 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -361,40 +361,21 @@ html[dir=rtl] .thumbnail-container > .title > div {
 }
 
 .list > .thumbnail-container > .title {
-  font-size: 160%;
-  line-height: 40px;
-  height: 40px;
+  font-size: 120%;
+  line-height: 34px;
+  height: 34px;
   color: hsl(213, 27%, 68%);
   width: 100%;
 }
 
-.list .title > div {
-  color: rgb(6, 45, 117);
-}
-
-.section {
-  background: rgba(239, 246, 255, 0.8);
-  -webkit-border-radius: 4px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  border: 1px solid hsl(213, 63%, 93%);
-  overflow: hidden;
-  min-height: 151px; /* height of 5 items plus the header */
-  vertical-align: top;
-  margin: 0;
-  margin-bottom: 10px;
+.list > .thumbnail-container {
+  color: hsl(213, 27%, 68%);
+  text-decoration: underline;
 }
 
-.section > h2 {
-  background-image: -webkit-gradient(linear, left top, left bottom,
-      from(hsl(213, 87%, 67%)),
-      to(hsl(213, 66%, 57%)));
-  -webkit-border-top-left-radius: 2px;
-  -webkit-border-top-right-radius: 2px;
-  padding: 4px 8px;
-  color: white;
-  font-size: 100%;
-  margin: 0px;
+.list > .thumbnail-container > .title > div {
+  text-decoration: none;
+  color: rgb(6, 45, 117);
 }
 
 .item {
@@ -425,17 +406,6 @@ html[dir='rtl'] .item {
   text-align: right;
 }
 
-.tips-title {
-  color: black;
-  text-decoration: none;
-  padding-top: 6px;
-  white-space: normal;
-}
-
-.tips-container {
-  padding-top: 4px;
-}
-
 .window {
   overflow: visible; /* We use visible so that the menu can be a child and shown
                         on :hover. To get this to work we have to set visibility
@@ -479,45 +449,45 @@ html[dir='rtl'] .item {
   -webkit-box-orient: horizontal;
 }
 
-.section h3 {
-  padding: 8px 5px;
-  padding-bottom: 0;
-  font-size: 80%;
-  font-weight: normal;
-  margin: 0;
-  -webkit-margin-start: 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.item-container {
-  margin: 0 5px;
-  text-decoration: underline;
-  color: hsl(213, 27%, 68%);
+#recently-closed {
+  -webkit-transition: opacity .15s;
+  background-color: hsla(213, 60%, 92%, .4);
+  border: 1px solid hsl(213, 60%, 92%);
+  -webkit-border-radius: 2px;
+  padding: 5px 0px;;
+  white-space: nowrap;
+  overflow-x: hidden;
 }
 
-.item.nav:after {
-  content: '\00bb'; /* raque gets flipped automatically in rtl */
-  font-size: 115%;
-  -webkit-padding-start: 2px;
+#recently-closed > * {
+  display: inline-block;
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 100%;
+  margin: 0 10px;
 }
 
-#recent-activities {
-  -webkit-transition: width .15s, opacity .15s;
+#recently-closed > h2,
+#recently-closed .nav {
+  max-width: none;
 }
 
-#recent-activities > .item-container {
-  -webkit-column-count: 2;
-  -webkit-column-gap: 20px;
-  height: 120px;
+#recently-closed > span {
+  color: hsl(213, 27%, 68%);
+  text-decoration: underline;
 }
 
-#recent-activities.large > .item-container {
-  -webkit-column-count: 4;
+.nav > a {
+  /* no icon */
+  padding: 0;
 }
 
-.section {
-  display: inline-block;
+.nav > a:after {
+  content: '\00bb'; /* raque gets flipped automatically in rtl */
+  font-size: 115%;
+  -webkit-padding-start: 2px;
 }
 
 #view-toolbar {
@@ -545,26 +515,6 @@ html[dir='rtl'] #view-toolbar {
   outline: none;
 }
 
-#lower-sections {
-  position: relative;
-  overflow: hidden;
-  -webkit-transition: height .15s, width .15s, opacity .15s;
-  white-space: nowrap;
-}
-
-#lower-sections > .section {
-  -webkit-transition: width .15s, opacity .15s, left .15s;
-  -webkit-box-sizing: border-box;
-  width: 450px; /* Set default size so we don't have to do a js layout at
-                   load */
-}
-
-#lower-sections .spacer {
-  width: 20px;
-  -webkit-transition: width .15s;
-  display: inline-block;
-}
-
 #thumb-checkbox {
   background-image: url(chrome://theme/newtab_thumb_off);
 }
@@ -722,10 +672,6 @@ html[dir='rtl'] #t4 {
     max-width: 15ex;
   }
 
-  #lower-sections > .section {
-    width: 336px; /* Same here, see above */
-  }
-
   #t0, #t4,
   html[dir='rtl'] #t3,
   html[dir='rtl'] #t7 {
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index dc0b2b5..3674b20 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -34,15 +34,13 @@ function registerCallback(name) {
 
 chrome.send('getShownSections');
 chrome.send('getMostVisited');
-chrome.send('getDownloads');
 chrome.send('getRecentlyClosedTabs');
-chrome.send('getTips');
 
 registerCallback('onShownSections');
 registerCallback('mostVisitedPages');
-registerCallback('downloadsList');
 registerCallback('recentlyClosedTabs');
-registerCallback('tips');
+// TODO(arv): The backend calls this function. Remove the call on the backend.
+function downloadsList() {}
 
 logEvent('log start');
 
@@ -75,13 +73,9 @@ document.write('<link id="themecss" rel="stylesheet" ' +
     <div section="LIST" show="true" i18n-content="showlist"></div>
     <div section="LIST" show="false" i18n-content="hidelist"
          style="display:none"></div>
-    <div section="RECENT" show="true" i18n-content="showrecent"
+    <div section="RECENT" show="true" i18n-content="showrecentlyclosedtabs"
          style="display:none"></div>
-    <div section="RECENT" show="false" i18n-content="hiderecent"></div>
-    <div section="TIPS" show="true"
-         i18n-content="showtips" style="display:none"></div>
-    <div section="TIPS" show="false"
-         i18n-content="hidetips"></div>
+    <div section="RECENT" show="false" i18n-content="hiderecentlyclosedtabs"></div>
   </div>
 
   <div id="notification">
@@ -220,61 +214,12 @@ document.write('<link id="themecss" rel="stylesheet" ' +
 
   </div>
 
-  <div id="lower-sections">
-
-    <div id="recent-activities" class="section">
-      <h2 i18n-content="recentactivities"></h2>
-
-      <div class="item-container">
-        <div jsselect="$this">
-          <a class="item"
-              jsdisplay="type == 'tab'"
-              jsvalues="href:url;
-                  .xtitle:title;
-                  .style.backgroundImage:'url(&quot;chrome://favicon/' +
-                      url + '&quot;)';
-                  dir:direction;
-                  .sessionId:sessionId"
-              jscontent="title"></a>
-          <div jsdisplay="type == 'window'"
-              class="item link window"
-              jsvalues=".sessionId:sessionId;
-                        .tabItems:tabs"
-              tabindex="0">
-            <span jscontent="formatTabsText($this.tabs.length)"></span>
-          </div>
-          <a class="item"
-              jsdisplay="type == 'download'"
-              jsvalues="href:file_path;title:url;
-                  dir:direction;
-                  .fileId:id"
-              jscontent="file_name"
-              style="background-image:
-                  url(chrome://theme/downloads_favicon)"></a>
-        </div>
-        <a href="chrome://history/" class="item nav"
-            i18n-content="viewfullhistory"></a>
-        <a href="chrome://downloads/" class="item nav"
-            i18n-content="viewalldownloads"></a>
-      </div>
-
-    </div><div class="spacer">
-
-    </div><div id="tips" class="section">
-      <h2 i18n-content="tipsandsuggestions"></h2>
-      <div id="tip-items">
-        <div class="item" jsselect="$this"
-            jsdisplay="!url"
-            i18n-content="defaulttipstitle">
-        </div>
-        <div class="tips-container item-container">
-          <a class="item" jsselect="$this"
-              jsdisplay="url.length"
-              jsvalues="href:url;.xtitle:title"
-              jscontent="title"></a>
-        </div>
-      </div>
-    </div>
+  <div id="recently-closed">
+    <h2 i18n-content="recentlyclosed"></h2>
+    <span class="nav">
+      <a href="chrome://history/" class="item"
+          i18n-content="viewfullhistory"></a>
+    </span>
   </div>
 
 </div> <!-- main -->
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index 58c1c31..e1b649b 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -94,58 +94,57 @@ function mostVisitedPages(data, firstRun) {
   }
 }
 
-function downloadsList(data) {
-  logEvent('received downloads');
-
-  // We should only show complete downloads.
-  data = data.filter(function(d) {
-    d.type = 'download';
-    d.timestamp = d.started;
-    return d.state == 'COMPLETE';
-  });
-
-  gotRecentItems(data, 'download');
-}
-
 function recentlyClosedTabs(data) {
   logEvent('received recently closed tabs');
-
-  // Remove old tabs and windows to prevent duplicates.
-  recentItems = recentItems.filter(function(item) {
-    return item.type != 'tab' && item.type != 'window';
-  });
-
-  // We handle timestamp 0 as now
-  data.forEach(function(d) {
-    if (d.timestamp == 0) {
-      d.timestamp = Date.now();
-    }
-  });
-
-  gotRecentItems(data);
+  // We need to store the recent items so we can update the layout on a resize.
+  recentItems = data;
+  renderRecentlyClosed();
 }
 
 var recentItems = [];
 var recentItemKeys = {};
 
-function gotRecentItems(data) {
-  // Add new items
-  Array.prototype.push.apply(recentItems, data);
+function renderRecentlyClosed() {
+  // We remove all items but the header and the nav
+  var recentlyClosedElement = $('recently-closed');
+  var headerEl = recentlyClosedElement.firstElementChild;
+  var navEl = recentlyClosedElement.lastElementChild;
 
-  recentItems.sort(function(d1, d2) {
-    return d2.timestamp - d1.timestamp;
+  for (var el = navEl.previousElementSibling; el != headerEl;
+       el = navEl.previousElementSibling) {
+    recentlyClosedElement.removeChild(el);
+  }
+
+  // Create new items
+  recentItems.forEach(function(item) {
+    var el = createRecentItem(item);
+    recentlyClosedElement.insertBefore(el, navEl);
   });
 
-  renderRecentItems();
+  layoutRecentlyClosed();
 }
 
-function renderRecentItems() {
-  // When tips are shown we only show 10 items
-  var desiredCount = shownSections & Section.TIPS ? 10 : 20;
-  desiredCount -= 2; // Show all downloads and all history uses two rows.
-
-  processData('#recent-activities > .item-container',
-              recentItems.slice(0, desiredCount));
+function createRecentItem(data) {
+  var isWindow = data.type == 'window';
+  var el;
+  if (isWindow) {
+    el = document.createElement('span');
+    el.className = 'item link window';
+    el.tabItems = data.tabs;
+    el.tabIndex = 0;
+    el.textContent = formatTabsText(data.tabs.length);
+  } else {
+    el = document.createElement('a');
+    el.className = 'item';
+    el.href = data.url;
+    el.style.backgroundImage = url('chrome://favicon/' + data.url);
+    el.dir = data.direction;
+    el.textContent = data.title;
+  }
+  el.sessionId = data.sessionId;
+  var wrapperEl = document.createElement('span');
+  wrapperEl.appendChild(el);
+  return wrapperEl;
 }
 
 function onShownSections(mask) {
@@ -160,16 +159,8 @@ function onShownSections(mask) {
       mostVisited.invalidate();
     }
 
-    if ((mask & Section.RECENT) != (oldShownSections & Section.RECENT)) {
-      notifyLowerSectionForChange(Section.RECENT);
-    }
-
-    if ((mask & Section.TIPS) != (oldShownSections & Section.TIPS)) {
-      notifyLowerSectionForChange(Section.TIPS);
-    }
-
     mostVisited.updateDisplayMode();
-    layoutLowerSections();
+    layoutRecentlyClosed();
     updateOptionMenu();
   }
 
@@ -181,12 +172,6 @@ function saveShownSections() {
   chrome.send('setShownSections', [String(shownSections)]);
 }
 
-function tips(data) {
-  logEvent('received tips data');
-  data.length = Math.min(data.length, 5);
-  processData('#tip-items', data);
-}
-
 function processData(selector, data) {
   var output = document.querySelector(selector);
 
@@ -292,7 +277,7 @@ function handleWindowResize() {
   if (layoutMode != oldLayoutMode){
     mostVisited.invalidate();
     mostVisited.layout();
-    layoutLowerSections();
+    layoutRecentlyClosed();
   }
 }
 
@@ -304,11 +289,10 @@ function handleWindowResize() {
 var Section = {
   THUMB: 1,
   LIST: 2,
-  RECENT: 4,
-  TIPS: 8
+  RECENT: 4
 };
 
-var shownSections = Section.THUMB | Section.RECENT | Section.TIPS;
+var shownSections = Section.THUMB | Section.RECENT;
 
 function showSection(section) {
   if (!(section & shownSections)) {
@@ -324,8 +308,7 @@ function showSection(section) {
       shownSections &= ~Section.THUMB;
       mostVisited.invalidate();
     } else {
-      notifyLowerSectionForChange(section);
-      layoutLowerSections();
+      layoutRecentlyClosed();
     }
 
     updateOptionMenu();
@@ -342,9 +325,8 @@ function hideSection(section) {
       mostVisited.invalidate();
     }
 
-    if (section & Section.RECENT || section & Section.TIPS) {
-      notifyLowerSectionForChange(section);
-      layoutLowerSections();
+    if (section & Section.RECENT) {
+      layoutRecentlyClosed();
     }
 
     updateOptionMenu();
@@ -353,18 +335,6 @@ function hideSection(section) {
   }
 }
 
-function notifyLowerSectionForChange(section) {
-  // Notify recent and tips if they need to display more data.
-  if (section == Section.RECENT || section == Section.TIPS) {
-    if (shownSections & Section.RECENT) {
-      recentChangedSize(!(shownSections & Section.TIPS));
-    }
-    if (shownSections & Section.TIPS) {
-      tipsChangedSize(!(shownSections & Section.RECENT));
-    }
-  }
-}
-
 var mostVisited = {
   getItem: function(el) {
     return findAncestorByClass(el, 'thumbnail-container');
@@ -611,13 +581,16 @@ var mostVisited = {
     var sumWidth = cols * w  - 2 * marginWidth;
     var sumHeight = rows * h;
     var opacity = 1;
+    // Since the list mode does not have a toolbar move it down a little to add
+    // some spacing at the top.
+    var LIST_TOP_SPACING = 22;
 
     if (shownSections & Section.LIST) {
-      w = (sumWidth + 2 * marginWidth) / 2;
-      h = 45;
-      rows = 4;
-      cols = 2;
-      sumHeight = rows * h;
+      w = sumWidth;
+      h = 34;
+      rows = 8;
+      cols = 1;
+      sumHeight = rows * h + LIST_TOP_SPACING;
     } else if (!(shownSections & Section.THUMB)) {
       sumHeight = 0;
       opacity = 0;
@@ -646,7 +619,8 @@ var mostVisited = {
         top = row * h;
 
         if (shownSections & Section.LIST) {
-          width = w - 2 * marginWidth;
+          width = w;
+          top += LIST_TOP_SPACING;
         }
 
         rects[i] = {left: left, top: top, width: width};
@@ -668,65 +642,45 @@ var mostVisited = {
   }
 };
 
-function recentChangedSize(large) {
-  if (large) {
-    addClass($('recent-activities'), 'large');
-  } else {
-    removeClass($('recent-activities'), 'large');
-  }
-
-  renderRecentItems();
-}
+// Recently closed
 
-function tipsChangedSize(large) {
-  // TODO(arv): Implement
-}
+function layoutRecentlyClosed() {
+  var recentElement = $('recently-closed');
 
-// Recent activities
-
-function layoutLowerSections() {
-  // This lower sections are inline blocks so all we need to do is to set the
-  // width and opacity.
-  var lowerSectionsElement = $('lower-sections');
-  var recentElement = $('recent-activities');
-  var tipsElement = $('tips');
-  var spacer = recentElement.nextElementSibling;
-
-  var totalWidth = useSmallGrid() ? 692 : 920;
-  var spacing = 20;
   var rtl = document.documentElement.dir == 'rtl';
-
   var recentShown = shownSections & Section.RECENT;
-  var tipsShown = shownSections & Section.TIPS;
+  var style = recentElement.style;
 
-  if (recentShown || tipsShown) {
-    lowerSectionsElement.style.height = '198px';
-    lowerSectionsElement.style.opacity = '';
+  if (!recentShown) {
+    style.opacity = style.height = 0;
   } else {
-    lowerSectionsElement.style.height = lowerSectionsElement.style.opacity = 0;
-  }
+    style.opacity = style.height = '';
+
+    // Show all items.
+    for (var i = 0, child; child = recentElement.children[i]; i++) {
+      child.style.display = '';
+    }
 
-  // Even when the width is set to 0 it will take up 2px due to the border. We
-  // compensate by setting the margin to -2px.
-  if (recentShown && tipsShown) {
-    var w = (totalWidth - spacing) / 2;
-    recentElement.style.width = tipsElement.style.width = w + 'px'
-    recentElement.style.opacity = tipsElement.style.opacity =
-        recentElement.style.WebkitMarginStart = '';
-    spacer.style.width = spacing + 'px';
-  } else if (recentShown) {
-    recentElement.style.width = totalWidth + 'px';
-    recentElement.style.opacity = recentElement.style.WebkitMarginStart = '';
-    tipsElement.style.width =
-        tipsElement.style.opacity = 0;
-    spacer.style.width = 0;
-
-  } else if (tipsShown) {
-    tipsElement.style.width = totalWidth + 'px';
-    tipsElement.style.opacity = '';
-    recentElement.style.width = recentElement.style.opacity = 0;
-    recentElement.style.WebkitMarginStart = '-2px';
-    spacer.style.width = 0;
+    // We cannot use clientWidth here since the width has a transition.
+    var spacing = 20;
+    var headerEl = recentElement.firstElementChild;
+    var navEl = recentElement.lastElementChild;
+    var navWidth = navEl.offsetWidth;
+    // Subtract 10 for the padding
+    var availWidth = (useSmallGrid() ? 690 : 918) - navWidth - 10;
+
+    // Now go backwards and hide as many elements as needed.
+    var elementsToHide = [];
+    for (var el = navEl.previousElementSibling; el != headerEl;
+         el = el.previousElementSibling) {
+      if (el.offsetLeft + el.offsetWidth + spacing > availWidth) {
+        elementsToHide.push(el);
+      }
+    }
+
+    elementsToHide.forEach(function(el) {
+      el.style.display = 'none';
+    });
   }
 }
 
@@ -1102,17 +1056,17 @@ function maybeShowWindowTooltip(e) {
 }
 
 
-var recentActivitiesElement = $('recent-activities');
-recentActivitiesElement.addEventListener('click', maybeOpenFile);
-recentActivitiesElement.addEventListener('keydown',
-                                         handleIfEnterKey(maybeOpenFile));
+var recentlyClosedElement = $('recently-closed');
+recentlyClosedElement.addEventListener('click', maybeOpenFile);
+recentlyClosedElement.addEventListener('keydown',
+                                       handleIfEnterKey(maybeOpenFile));
 
-recentActivitiesElement.addEventListener('click', maybeReopenTab);
-recentActivitiesElement.addEventListener('keydown',
-                                         handleIfEnterKey(maybeReopenTab));
+recentlyClosedElement.addEventListener('click', maybeReopenTab);
+recentlyClosedElement.addEventListener('keydown',
+                                       handleIfEnterKey(maybeReopenTab));
 
-recentActivitiesElement.addEventListener('mouseover', maybeShowWindowTooltip);
-recentActivitiesElement.addEventListener('focus', maybeShowWindowTooltip, true);
+recentlyClosedElement.addEventListener('mouseover', maybeShowWindowTooltip);
+recentlyClosedElement.addEventListener('focus', maybeShowWindowTooltip, true);
 
 /**
  * This object represents a tooltip representing a closed window. It is
@@ -1146,6 +1100,7 @@ WindowTooltip.prototype = {
                                    300);
   },
   show: function(type, linkEl, tabs) {
+    window.addEventListener('blur', this.boundHide_);
     this.linkEl_.removeEventListener('mousemove',
                                      WindowTooltip.trackMouseMove_);
     clearTimeout(this.timer);
@@ -1185,6 +1140,7 @@ WindowTooltip.prototype = {
   },
   hide: function() {
     window.clearTimeout(this.timer);
+    window.removeEventListener('blur', this.boundHide_);
     this.linkEl_.removeEventListener('mousemove',
                                      WindowTooltip.trackMouseMove_);
     this.linkEl_.removeEventListener('mouseout', this.boundHandleMouseOut_);
diff --git a/chrome/browser/resources/new_tab_theme.css b/chrome/browser/resources/new_tab_theme.css
index 63472e5..12ac86d 100644
--- a/chrome/browser/resources/new_tab_theme.css
+++ b/chrome/browser/resources/new_tab_theme.css
@@ -36,16 +36,7 @@ body {
 .thumbnail-container:hover > .edit-mode-border {
   background-color: $6;
 }
-.section {
-  border: 1px solid $7;
-}
-.section > h2 {
-  background-color: $7;
-  background-image: -webkit-gradient(linear, left top, left bottom,
-                                     from($7),
-                                     to($6));
-  color: $$1;
-}
+
 #view-toolbar > input {
   background-color: $7;
   -webkit-mask-image: url(chrome://theme/newtab_menu_mask);
@@ -57,3 +48,11 @@ body {
 .tips-title {
   color: $$1;
 }
+
+/* TODO(arv): The theme does not have the thumbnail outline color in non hover
+   mode
+#recently-closed {
+  border-color:
+  background-color:
+}
+*/