NTP: Add transitions.

chrome/browser/resources/new_new_tab.js

Index: chrome/browser/resources/new_new_tab.js
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index 2637b44950a41dad967621c15e138273a4d52c7d..e3a7577dbbbfa9890c6f29bc0dc28cb7b03654f4 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -97,6 +97,7 @@ function handleWindowResize() {
     mostVisited.useSmallGrid = b;
     mostVisited.layout();
     renderRecentlyClosed();
+    updateAllMiniviewClippings();
   }
 
   layoutSections();
@@ -127,6 +128,29 @@ SectionLayoutInfo.getAll = function() {
   return result;
 };
 
+// Ensure the miniview sections don't have any clipped items.
+function updateMiniviewClipping(miniview) {
+  var clipped = false;
+  for (var j = 0, item; item = miniview.children[j]; j++) {
+    item.style.display = '';
+    if (clipped ||
+        (item.offsetLeft + item.offsetWidth) > miniview.offsetWidth) {
+      item.style.display = 'none';
+      clipped = true;
+    } else {
+      item.style.display = '';
+    }
+  }
+}
+
+// Ensure none of the miniviews have any clipped items.
+function updateAllMiniviewClippings() {
+  var miniviews = document.querySelectorAll('.section.hidden .miniview');
+  for (var i = 0, miniview; miniview = miniviews[i]; i++) {
+    updateMiniviewClipping(miniview);
+  }
+}
+
 // Layout the sections in a modified accordian. The header and miniview, if
 // visible are fixed within the viewport. If there is an expanded section, its
 // it scrolls.
@@ -216,11 +240,9 @@ function layoutSections() {
     section.section.style.top = y + 'px';
     y += section.fixedHeight;
 
-    if (section.maxiview) {
+    if (section.maxiview && section == expandedSection) {
       section.maxiview.style.top = y + 'px';
-
-      if (section == expandedSection)
-        updateMask(section.maxiview, expandedSectionHeight);
+      updateMask(section.maxiview, expandedSectionHeight);
     }
 
     if (section == expandedSection)
@@ -291,8 +313,10 @@ function showSection(section) {
       el.classList.remove('hidden');
 
       var maxiview = getSectionMaxiview(el);
-      if (maxiview)
+      if (maxiview) {
+        maxiview.classList.remove('hiding');
         maxiview.classList.remove('hidden');
+      }
     }
 
     switch (section) {
@@ -321,11 +345,22 @@ function hideSection(section) {
 
       var maxiview = getSectionMaxiview(el);
       if (maxiview)
-        maxiview.classList.add('hidden');
+        maxiview.classList.add('hiding');
+
+      var miniview = el.getElementsByClassName('miniview')[0];
+      if (miniview)
+        updateMiniviewClipping(miniview);
     }
   }
 }
 
+window.addEventListener('webkitTransitionEnd', function(e) {
+  if (e.target.classList.contains('hiding'))
+    e.target.classList.add('hidden');
+
+  document.documentElement.setAttribute("enable-section-animations", "false");
+});
+
 /**
  * Callback when the shown sections changes in another NTP.
  * @param {number} newShownSections Bitmask of the shown sections.
@@ -801,6 +836,8 @@ $('main').addEventListener('click', function(e) {
 
   var section = p.getAttribute('section');
   if (section) {
+    // We set it back in webkitTransitionEnd.
+    document.documentElement.setAttribute("enable-section-animations", "true");
     if (shownSections & Section[section]) {
       hideSection(Section[section]);
     } else {