Instead of trying to arrange things so that there is something covering all the parts of the scrollable area we don't want to see, use -webkit-image-mask to only show the parts we do want to see.

This change also fixes overflow of miniview items. Under some circumstances, the old JS approach wasn't working. Used a CSS one instead.

TEST=Set up most visisted so that it has items. Start it in
expanded mode. Minimize it. There should be no clipped last
item.

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

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

4 files changed, 10 insertions, 11 deletions

diff --git a/chrome/browser/resources/ntp/apps.css b/chrome/browser/resources/ntp/apps.css
index 5398044..1527d9b 100644
--- a/chrome/browser/resources/ntp/apps.css
+++ b/chrome/browser/resources/ntp/apps.css
@@ -1,7 +1,7 @@
 /* Apps */
 
-#apps-section .app,
-#apps-section .app[new=installed] {
+.app,
+.app[new=installed] {
   -webkit-box-sizing: border-box;
   -webkit-perspective: 400;
   border-radius: 10px;
@@ -113,11 +113,11 @@
   }
 }
 
-#apps-section .app[new=new] {
+.app[new=new] {
   opacity: 0;
 }
 
-#apps-section .app[new=installed] {
+.app[new=installed] {
   -webkit-animation: bounce .5s ease-in-out;
   -webkit-transition: opacity .5s;
 }
diff --git a/chrome/browser/resources/ntp/apps.js b/chrome/browser/resources/ntp/apps.js
index 5bf1d1a..2c2484b 100644
--- a/chrome/browser/resources/ntp/apps.js
+++ b/chrome/browser/resources/ntp/apps.js
@@ -4,8 +4,8 @@
 
 function getAppsCallback(data) {
   logEvent('recieved apps');
-  var appsSection = $('apps-section');
-  var appsSectionContent = $('apps-section-content');
+  var appsSection = $('apps');
+  var appsSectionContent = $('apps-maxiview');
   var appsMiniview = appsSection.getElementsByClassName('miniview')[0];
   appsSectionContent.textContent = '';
   appsMiniview.textContent = '';
diff --git a/chrome/browser/resources/ntp/most_visited.css b/chrome/browser/resources/ntp/most_visited.css
index 0bb6735..3512d59 100644
--- a/chrome/browser/resources/ntp/most_visited.css
+++ b/chrome/browser/resources/ntp/most_visited.css
@@ -1,10 +1,8 @@
 /* Most Visited */
 
-#most-visited {
+#most-visited-maxiview {
   position: relative;
-  padding: 0;
   height: 366px;
-  margin-top: 0;
   -webkit-user-select: none;
 }
 
@@ -240,7 +238,7 @@ html[dir=rtl] .thumbnail-container > .title > div {
 }
 
 @media (max-width: 940px) {
-  #most-visited {
+  #most-visited-maxiview {
     height: 294px;
   }
 
diff --git a/chrome/browser/resources/ntp/most_visited.js b/chrome/browser/resources/ntp/most_visited.js
index ca01c1e..178563c 100644
--- a/chrome/browser/resources/ntp/most_visited.js
+++ b/chrome/browser/resources/ntp/most_visited.js
@@ -255,6 +255,7 @@ var MostVisited = (function() {
       var w = thumbWidth + 2 * borderWidth + 2 * marginWidth;
       var h = thumbHeight + 40 + 2 * marginHeight;
       var sumWidth = cols * w  - 2 * marginWidth;
+      var topSpacing = 10;
 
       var rtl = isRtl();
       var rects = [];
@@ -266,7 +267,7 @@ var MostVisited = (function() {
           var left = rtl ? sumWidth - col * w - thumbWidth - 2 * borderWidth :
               col * w;
 
-          var top = row * h;
+          var top = row * h + topSpacing;
 
           rects[i] = {left: left, top: top};
         }