NTP: Add transitions.

BUG=53978
TEST=Install an app. Expand and collapse sections. Things should swish.

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

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

4 files changed, 68 insertions, 12 deletions

diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index 2630d79..68d7cd7 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -297,6 +297,10 @@ html[hasattribution=false] #attribution > div {
   font-size: 12px;
 }
 
+html[anim=true][enable-section-animations=true] .section {
+  -webkit-transition: top .15s;
+}
+
 .section.disabled {
   display: none !important;
 }
@@ -325,6 +329,10 @@ html[dir=rtl] .section > h2 > .disclosure {
   -webkit-transform: rotate(180deg);
 }
 
+html[anim=true] .section > h2 > .disclosure {
+  -webkit-transition: -webkit-transform .15s;
+}
+
 .section:not(.hidden) > h2 > .disclosure {
   -webkit-transform:rotate(90deg);
 }
@@ -380,13 +388,26 @@ html[dir=rtl] .section > h2 .settings-wrapper {
   padding: 5px 0 30px;
   position: absolute;
   -webkit-mask-attachment: fixed;
+  opacity: 1;
+}
+
+.maxiview.hiding {
+  opacity: 0;
+}
+
+.maxiview.hidden {
+  display: none;
+}
+
+html[anim=true] .maxiview {
+  -webkit-transition: opacity .15s;
 }
 
 .section > .miniview {
   display: none;
-  height: 24px;
   margin: 10px 0 30px;
-  overflow: hidden;
+  white-space: nowrap;
+  overflow-x: hidden;
 }
 
 .section.hidden > * {
@@ -402,10 +423,6 @@ html[dir=rtl] .section > h2 .settings-wrapper {
   margin-right: 0;
 }
 
-.maxiview.hidden {
-  display: none;
-}
-
 .miniview > span  {
   display: inline-block;
   max-width: 114px; /* Selected so that we can fit 5 items in EN-US */
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index 92daf99..6fbd6c7 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)
@@ -293,8 +315,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) {
@@ -323,11 +347,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.
@@ -828,6 +863,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 {
diff --git a/chrome/browser/resources/ntp/apps.js b/chrome/browser/resources/ntp/apps.js
index 1c45945..0099634 100644
--- a/chrome/browser/resources/ntp/apps.js
+++ b/chrome/browser/resources/ntp/apps.js
@@ -26,6 +26,7 @@ function getAppsCallback(data) {
   });
 
   appsSection.classList.remove('disabled');
+  updateMiniviewClipping(appsMiniview);
   layoutSections();
 }
 
diff --git a/chrome/browser/resources/ntp/most_visited.js b/chrome/browser/resources/ntp/most_visited.js
index 178563c..7dac8a4 100644
--- a/chrome/browser/resources/ntp/most_visited.js
+++ b/chrome/browser/resources/ntp/most_visited.js
@@ -579,6 +579,7 @@ var MostVisited = (function() {
           return;
         }
       }
+      updateMiniviewClipping(this.miniview);
     },
 
     handleClick_: function(e) {