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

8 files changed, 149 insertions, 139 deletions

diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index ba2c150..20b20e0 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -20,6 +20,11 @@ html[mode=app-launcher] {
   -webkit-transition: width .15s;
   margin: 0 auto;
   min-height: 100%;
+}
+
+#main,
+.section,
+.maxiview {
   width: 920px;
 }
 
@@ -31,15 +36,6 @@ html[mode=app-launcher] #main {
   min-height: 50px;
 }
 
-#top-spacer {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 5px;
-  z-index: 2;
-}
-
 html[anim=false] *,
 .no-anim, .no-anim *,
 .loading * {
@@ -200,16 +196,15 @@ html[dir=rtl] .item {
   -webkit-box-orient: horizontal;
 }
 
-#sync-status {
-  display: none;
+#sync-status > div {
   border-radius: 6px;
   padding: 5px 0;
-  margin: 10px 0;
+  margin: 10px 0 20px;
   white-space: nowrap;
   overflow-x: hidden;
 }
 
-#sync-status > * {
+#sync-status > div > * {
   display: inline-block;
   max-width: none;
   white-space: nowrap;
@@ -300,33 +295,21 @@ html[dir=rtl] #option-menu > [command=hide]:before {
   margin: 0;
 }
 
-.section > * {
+.section {
+  position: fixed;
   font-size: 12px;
-  width: 920px;
 }
 
 .section.disabled {
   display: none !important;
 }
 
-.section > div {
-  padding-bottom: 20px;
-}
-
-#apps-section-content {
-  /* This one is special because the app buttons already have a lot of empty
-     space around them. */
-  margin-top: -5px;
-  padding-bottom: 5px;
-}
-
 .section > h2 {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 16px;
   font-weight: normal;
   margin: 0;
-  position: fixed;
-  z-index: 2;
+  position: relative;
 }
 
 .section:not([noexpand]) > h2 {
@@ -336,35 +319,17 @@ html[dir=rtl] #option-menu > [command=hide]:before {
 .section > h2 > .disclosure {
   position: absolute;
   left: -15px;
-  top: 19px;
+  top: 4px;
 }
 
 .section:not(.hidden) > h2 > .disclosure {
   -webkit-transform:rotate(90deg);
 }
 
-.section > h2 > .mask {
-  padding: 15px 0;
-}
-
-.section:not(.hidden) > h2 > .mask {
-  /* NOTE: 0.75 ~= 29/39 (for 10px of gradient) */
-  -webkit-mask-image: 
-      -webkit-gradient(linear, 0% 0%, 0% 100%, from(black),
-                       color-stop(0.75, black), to(transparent));
-}
-
-.section:not(.hidden) + .section > h2 > .mask {
-  /* NOTE: 0.25 ~= 10/39 (for 10px of gradient) */
-  -webkit-mask-image: 
-      -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent),
-                       color-stop(0.25, black), to(black));
-}
-
 .section > h2 .back {
   position: absolute;
   left: 0;
-  top: 24px;
+  top: 9px;
   width: 100%;
   height: 24px;
   z-index: 1;
@@ -378,7 +343,7 @@ html[dir=rtl] #option-menu > [command=hide]:before {
 
 .section > h2 .settings-wrapper {
   position: absolute;
-  top: 13px;
+  top: -1px;
   right: 0;
   width: 21px;
   height: 21px;
@@ -403,14 +368,17 @@ html[dir=rtl] #option-menu > [command=hide]:before {
   display: none;
 }
 
-.section > .maxiview {
+.maxiview {
+  padding: 5px 0 30px;
   position: absolute;
+  -webkit-mask-attachment: fixed;
 }
 
 .section > .miniview {
   display: none;
-  position: fixed;
-  z-index: 2;
+  height: 24px;
+  margin: 10px 0 30px;
+  overflow: hidden;
 }
 
 .section.hidden > * {
@@ -426,9 +394,8 @@ html[dir=rtl] #option-menu > [command=hide]:before {
   margin-right: 0;
 }
 
-.miniview {
-  white-space: nowrap;
-  overflow-x: hidden;
+.maxiview.hidden {
+  display: none;
 }
 
 .miniview > span  {
@@ -454,7 +421,8 @@ html[dir=rtl] #option-menu > [command=hide]:before {
 @media (max-width: 940px) {
 
   #main,
-  .section > * {
+  .section,
+  .maxiview {
     width: 692px;
   }
 
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index 71e796b..0b128fc 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -129,32 +129,27 @@ if ('mode' in hashParams) {
     <span class="link"><span class="link-color"></span></span>
   </div>
 
-  <div id="top-spacer"></div>
+  <div class="maxiview" id="apps-maxiview"></div>
+  <div class="maxiview" id="most-visited-maxiview"></div>
 
   <div class="sections">
     <!-- Start disabled. We only enable if we have at least one app. -->
-    <div class="section disabled" section="APPS" id="apps-section">
+    <div id="apps" class="section disabled" section="APPS">
       <h2>
         <img class="disclosure" img src="ntp/ntp_disclosure_triangle.png">
-        <div class="mask">
-          <div class="back"></div>
-          <span i18n-content="apps"></span>
-        </div>
+        <div class="back"></div>
+        <span i18n-content="apps"></span>
       </h2>
-      <div class="maxiview" id="apps-section-content"></div>
       <div class="miniview"></div>
     </div>
 
-    <div id="most-visited-section" class="section" section="THUMB">
+    <div id="most-visited" class="section" section="THUMB">
       <h2>
         <img class="disclosure" src="ntp/ntp_disclosure_triangle.png">
-        <div class="mask">
-          <div class="back"></div>
-          <span i18n-content="mostvisited"></span>
-          <div class="settings-wrapper"><div class="settings"></div></div>
-        </div>
+        <div class="back"></div>
+        <span i18n-content="mostvisited"></span>
+        <div class="settings-wrapper"><div class="settings"></div></div>
       </h2>
-      <div class="maxiview" id="most-visited"></div>
       <div class="miniview"></div>
     </div>
 
@@ -163,10 +158,8 @@ if ('mode' in hashParams) {
     <div id="recently-closed" class="section hidden disabled" section="RECENT"
         noexpand="true">
       <h2>
-        <div class="mask">
-          <div class="back"></div>
-          <span i18n-content="recentlyclosed"></span>
-        </div>
+        <div class="back"></div>
+        <span i18n-content="recentlyclosed"></span>
       </h2>
       <div class="miniview"></div>
     </div>
@@ -186,18 +179,19 @@ if ('mode' in hashParams) {
             >Panel</label>
       </div>
     </div>
-  </div>
 
-  <div id="sync-status">
-    <h2></h2>
-    <span></span>
+    <div id="sync-status" class="section disabled">
+      <div>
+        <h3></h3>
+        <span></span>
+      </div>
+    </div>
   </div>
 
   <div id="attribution" class="attribution">
     <div i18n-content="attributionintro"></div>
     <img id="attribution-img">
   </div>
-
 </div>  <!-- main -->
 
 <div class="window-menu" id="window-tooltip"></div>
@@ -217,8 +211,8 @@ i18nTemplate.process(document, templateData);
 <script src="ntp/apps.js"></script>
 
 <script>
-  updateSimpleSection('apps-section', Section.APPS);
-  updateSimpleSection('most-visited-section', Section.THUMB);
+  updateSimpleSection('apps', Section.APPS);
+  updateSimpleSection('most-visited', Section.THUMB);
   updateSimpleSection('recently-closed', Section.RECENT);
   updateSimpleSection('debug', Section.DEBUG);
 
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index a5e7b76..2637b44 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -7,15 +7,22 @@
 var MAX_MINIVIEW_ITEMS = 15;
 
 // Extra spacing at the top of the layout.
-var LAYOUT_SPACING_TOP = 5;
+var LAYOUT_SPACING_TOP = 25;
 
 var loading = true;
 
 function updateSimpleSection(id, section) {
-  if (shownSections & section)
+  var elm = $(id);
+  var maxiview = getSectionMaxiview(elm);
+  if (shownSections & section) {
     $(id).classList.remove('hidden');
-  else
+    if (maxiview)
+      maxiview.classList.remove('hidden');
+  } else {
     $(id).classList.add('hidden');
+    if (maxiview)
+      maxiview.classList.add('hidden');
+  }
 }
 
 function recentlyClosedTabs(data) {
@@ -101,16 +108,13 @@ function SectionLayoutInfo(section) {
   this.section = section;
   this.header = section.getElementsByTagName('h2')[0];
   this.miniview = section.getElementsByClassName('miniview')[0];
-  this.maxiview = section.getElementsByClassName('maxiview')[0];
-  this.expanded = !section.classList.contains('hidden');
-  this.fixedHeight = this.header.offsetHeight;
+  this.maxiview = getSectionMaxiview(section);
+  this.expanded = this.maxiview && !section.classList.contains('hidden');
+  this.fixedHeight = this.section.offsetHeight;
   this.scrollingHeight = 0;
 
-  if (this.expanded) {
+  if (this.expanded)
     this.scrollingHeight = this.maxiview.offsetHeight;
-  } else if (this.miniview) {
-    this.fixedHeight += this.miniview.offsetHeight;
-  }
 }
 
 // Get all sections to be layed out.
@@ -209,25 +213,58 @@ function layoutSections() {
   // Now position all the elements.
   var y = LAYOUT_SPACING_TOP;
   for (i = 0, section; section = sections[i]; i++) {
-    section.header.style.top = y + 'px';
-    y += section.header.offsetHeight;
-
-    if (section.miniview) {
-      section.miniview.style.top = y + 'px';
-      if (section != expandedSection) {
-        y += section.miniview.offsetHeight;
-      }
-    }
+    section.section.style.top = y + 'px';
+    y += section.fixedHeight;
 
     if (section.maxiview) {
       section.maxiview.style.top = y + 'px';
-      if (section == expandedSection) {
-        y += expandedSectionHeight;
-      }
+
+      if (section == expandedSection)
+        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
+  // percentages.
+
+  // We might not have enough room to do 10px gradients on each side. To get the
+  // right effect, we don't want to make the gradients smaller, but make them
+  // appear to mush into each other.
+  var gradientHeightPx = Math.min(10, Math.floor(visibleHeightPx / 2));
+  var gradientDestination = 'rgba(0,0,0,' + (gradientHeightPx / 10) + ')';
+
+  var bottomSpacing = 15;
+  var first = parseFloat(maxiview.style.top) / window.innerHeight;
+  var second = first + gradientHeightPx / window.innerHeight;
+  var fourth = first + (visibleHeightPx - bottomSpacing) / window.innerHeight;
+  var third = fourth - gradientHeightPx / window.innerHeight;
+
+  var gradientArguments = [
+    "linear",
+    "0 0",
+    "0 100%",
+    "from(transparent)",
+    getColorStopString(first, "transparent"),
+    getColorStopString(second, gradientDestination),
+    getColorStopString(third, gradientDestination),
+    getColorStopString(fourth, "transparent"),
+    "to(transparent)"
+  ];
+
+  var gradient = '-webkit-gradient(' + gradientArguments.join(', ') + ')';
+  maxiview.style.WebkitMaskImage = gradient;
+}
+
+function getColorStopString(height, color) {
+  return "color-stop(" + height + ", " + color + ")";
+}
+
 window.addEventListener('resize', handleWindowResize);
 
 var sectionToElementMap;
@@ -242,13 +279,22 @@ function getSectionElement(section) {
   return sectionToElementMap[section];
 }
 
+function getSectionMaxiview(section) {
+  return $(section.id + '-maxiview');
+}
+
 function showSection(section) {
   if (!(section & shownSections)) {
     shownSections |= section;
     var el = getSectionElement(section);
-    if (el)
+    if (el) {
       el.classList.remove('hidden');
 
+      var maxiview = getSectionMaxiview(el);
+      if (maxiview)
+        maxiview.classList.remove('hidden');
+    }
+
     switch (section) {
       case Section.THUMB:
         mostVisited.visible = true;
@@ -270,8 +316,13 @@ function hideSection(section) {
     }
 
     var el = getSectionElement(section);
-    if (el)
+    if (el) {
       el.classList.add('hidden');
+
+      var maxiview = getSectionMaxiview(el);
+      if (maxiview)
+        maxiview.classList.add('hidden');
+    }
   }
 }
 
@@ -340,31 +391,33 @@ function layoutRecentlyClosed() {
  */
 function syncMessageChanged(newMessage) {
   var syncStatusElement = $('sync-status');
-  var style = syncStatusElement.style;
 
   // Hide the section if the message is emtpy.
   if (!newMessage['syncsectionisvisible']) {
-    style.display = 'none';
+    syncStatusElement.classList.add('disabled');
     return;
   }
-  style.display = 'block';
+
+  syncStatusElement.classList.remove('disabled');
+
+  var content = syncStatusElement.children[0];
 
   // Set the sync section background color based on the state.
   if (newMessage.msgtype == 'error') {
-    style.backgroundColor = 'tomato';
+    content.style.backgroundColor = 'tomato';
   } else {
-    style.backgroundColor = '';
+    content.style.backgroundColor = '';
   }
 
   // Set the text for the header and sync message.
-  var titleElement = syncStatusElement.firstElementChild;
+  var titleElement = content.firstElementChild;
   titleElement.textContent = newMessage.title;
   var messageElement = titleElement.nextElementSibling;
   messageElement.textContent = newMessage.msg;
 
   // Remove what comes after the message
   while (messageElement.nextSibling) {
-    syncStatusElement.removeChild(messageElement.nextSibling);
+    content.removeChild(messageElement.nextSibling);
   }
 
   if (newMessage.linkisvisible) {
@@ -379,9 +432,11 @@ function syncMessageChanged(newMessage) {
       el.addEventListener('click', syncSectionLinkClicked);
     }
     el.textContent = newMessage.linktext;
-    syncStatusElement.appendChild(el);
+    content.appendChild(el);
     fixLinkUnderline(el);
   }
+
+  layoutSections();
 }
 
 /**
@@ -720,7 +775,7 @@ OptionMenu.prototype = {
 };
 
 var optionMenu = new OptionMenu(
-    document.querySelector('#most-visited-section h2 .settings-wrapper'),
+    document.querySelector('#most-visited h2 .settings-wrapper'),
     $('option-menu'));
 optionMenu.commands = {
   'clear-all-blacklisted' : function() {
@@ -740,7 +795,7 @@ $('main').addEventListener('click', function(e) {
   }
 
   p = p.parentNode;
-  if (p.hasAttribute('noexpand')) {
+  if (!getSectionMaxiview(p)) {
     return;
   }
 
@@ -1003,8 +1058,8 @@ function fixLinkUnderline(el) {
 updateAttribution();
 
 var mostVisited = new MostVisited(
-    $('most-visited'),
-    document.querySelector('#most-visited-section .miniview'),
+    $('most-visited-maxiview'),
+    document.querySelector('#most-visited .miniview'),
     useSmallGrid(),
     shownSections & Section.THUMB);
 
diff --git a/chrome/browser/resources/new_tab_theme.css b/chrome/browser/resources/new_tab_theme.css
index 8c60877..0a911f6 100644
--- a/chrome/browser/resources/new_tab_theme.css
+++ b/chrome/browser/resources/new_tab_theme.css
@@ -1,7 +1,4 @@
 html,
-#top-spacer,
-.miniview,
-.section > h2 .mask,
 .section > h2 .settings-wrapper,
 .section > h2 span {
   background-attachment: fixed;
@@ -12,9 +9,6 @@ html,
 }
 
 html[bookmarkbarattached='true'],
-html[bookmarkbarattached='true'] #top-spacer,
-html[bookmarkbarattached='true'] .miniview,
-html[bookmarkbarattached='true'] .section > h2 .mask,
 html[bookmarkbarattached='true'] .section > h2 .settings-wrapper,
 html[bookmarkbarattached='true'] .section > h2 span {
   background-position: $4;
@@ -110,11 +104,11 @@ body {
   color: $$6; /* COLOR_NTP_LINK_UNDERLINE */
 }
 
-.section:not(.hidden) > h2 > .mask {
+.section:not(.hidden) > h2 {
   color: $$9;
 }
 
-.section.hidden:not([noexpand]) > h2:hover > .mask {
+.section.hidden:not([noexpand]) > h2:hover {
   color: $$9;
 }
 
@@ -139,12 +133,12 @@ body {
   border-color: $2; /* COLOR_NTP_BACKGROUND */
 }
 
-#apps-section .app a {
+.app a {
   color: $8; /* COLOR_NTP_TEXT */
 }
 
-#apps-section .app:hover > .front > a,
-#apps-section .app > .back {
+.app:hover > .front > a,
+.app > .back {
   color: $$3; /* COLOR_NTP_SECTION_TEXT */
   background-color: $$1; /* COLOR_NTP_SECTION */;
 }
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};
         }