NTP: Add transitions.

chrome/browser/resources/new_new_tab.js

 // Copyright (c) 2010 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.
 
 // To avoid creating tons of unnecessary nodes. We assume we cannot fit more
 // than this many items in the miniview.
 var MAX_MINIVIEW_ITEMS = 15;
 
 // Extra spacing at the top of the layout.
 var LAYOUT_SPACING_TOP = 25;
@@ skipping 79 matching lines @@
   }
 
   var oldLayoutMode = layoutMode;
   var b = useSmallGrid();
   layoutMode = b ? LayoutMode.SMALL : LayoutMode.NORMAL
 
   if (layoutMode != oldLayoutMode){
     mostVisited.useSmallGrid = b;
     mostVisited.layout();
     renderRecentlyClosed();
+    updateAllMiniviewClippings();
   }
 
   layoutSections();
 }
 
 // Stores some information about each section necessary to layout. A new
 // instance is constructed for each section on each layout.
 function SectionLayoutInfo(section) {
   this.section = section;
   this.header = section.getElementsByTagName('h2')[0];
@@ skipping 10 matching lines @@
 // Get all sections to be layed out.
 SectionLayoutInfo.getAll = function() {
   var sections = document.querySelectorAll('.section:not(.disabled)');
   var result = [];
   for (var i = 0, section; section = sections[i]; i++) {
     result.push(new SectionLayoutInfo(section));
   }
   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.
 //
 // =============================
 // | collapsed section         |  <- Any collapsed sections are fixed position.
 // | and miniview              |
 // |---------------------------|
 // | expanded section          |
 // |                           |  <- There can be one expanded section and it
@@ skipping 69 matching lines @@
       document.body.style.height = '';
     }
   }
 
   // Now position all the elements.
   var y = LAYOUT_SPACING_TOP;
   for (i = 0, section; section = sections[i]; i++) {
     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)
       y += expandedSectionHeight;
   }
 }
 
 function updateMask(maxiview, visibleHeightPx) {
   // We want to end up with 10px gradients at the top and bottom of
   // visibleHeight, but webkit-mask only supports expression in terms of
@@ skipping 50 matching lines @@
 }
 
 function showSection(section) {
   if (!(section & shownSections)) {
     shownSections |= section;
     var el = getSectionElement(section);
     if (el) {
       el.classList.remove('hidden');
 
       var maxiview = getSectionMaxiview(el);
-      if (maxiview)
+      if (maxiview) {
+        maxiview.classList.remove('hiding');
         maxiview.classList.remove('hidden');
+      }
     }
 
     switch (section) {
       case Section.THUMB:
         mostVisited.visible = true;
         mostVisited.layout();
         break;
     }
   }
 }
 
 function hideSection(section) {
   if (section & shownSections) {
     shownSections &= ~section;
 
     switch (section) {
       case Section.THUMB:
         mostVisited.visible = false;
         mostVisited.layout();
         break;
     }
 
     var el = getSectionElement(section);
     if (el) {
       el.classList.add('hidden');
 
       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.
  */
 function setShownSections(newShownSections) {
   for (var key in Section) {
     if (newShownSections & Section[key])
       showSection(Section[key]);
     else
       hideSection(Section[key]);
@@ skipping 455 matching lines @@
     return;
   }
 
   p = p.parentNode;
   if (!getSectionMaxiview(p)) {
     return;
   }
 
   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 {
       for (var p in Section) {
         if (p == section)
           showSection(Section[p]);
         else
           hideSection(Section[p]);
       }
     }
@@ skipping 263 matching lines @@
   window.setTimeout(function() {
     mostVisited.ensureSmallGridCorrect();
     document.body.classList.remove('loading');
   }, 1);
 
   // Only show the first run notification if first run.
   if (firstRun) {
     showFirstRunNotification();
   }
 }