Different approach to NTP layout

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 = 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) {
   logEvent('received recently closed tabs');
   // We need to store the recent items so we can update the layout on a resize.
   recentItems = data;
   renderRecentlyClosed();
   layoutSections();
 }
 
@@ skipping 65 matching lines @@
 
   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];
   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.
 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;
@@ skipping 78 matching lines @@
           'px';
     } else {
       expandedSectionHeight = expandedSection.scrollingHeight;
       document.body.style.height = '';
     }
   }
 
   // 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) + ")";

[arv (Not doing code reviews), 2010/09/03 00:24:22]

s/"/'/

+
+  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(', ') + ')';
+  console.log(gradient);

[arv (Not doing code reviews), 2010/09/03 00:24:22]

can you remove this log?

+  maxiview.style.WebkitMaskImage = gradient;
+}
+
+function getColorStopString(height, color) {
+  return "color-stop(" + height + ", " + color + ")";
+}
+
 window.addEventListener('resize', handleWindowResize);
 
 var sectionToElementMap;
 function getSectionElement(section) {
   if (!sectionToElementMap) {
     sectionToElementMap = {};
     for (var key in Section) {
       sectionToElementMap[Section[key]] =
           document.querySelector('.section[section=' + key + ']');
     }
   }
   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;
         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)
+    if (el) {
       el.classList.add('hidden');
+
+      var maxiview = getSectionMaxiview(el);
+      if (maxiview)
+        maxiview.classList.add('hidden');
+    }
   }
 }
 
 /**
  * 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])
@@ skipping 48 matching lines @@
  *           linkisvisible is true).
  * linkurlisset: true if an URL should be set as the href for the link and false
  *               otherwise. If this field is false, then clicking on the link
  *               will result in sending a message to the backend (see
  *               'SyncLinkClicked').
  * linkurl: the URL to use as the element's href (only used if linkurlisset is
  *          true).
  */
 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) {
     var el;
     if (newMessage.linkurlisset) {
       // Use a link
       el = document.createElement('a');
       el.href = newMessage.linkurl;
     } else {
       el = document.createElement('button');
       el.className = 'link';
       el.addEventListener('click', syncSectionLinkClicked);
     }
     el.textContent = newMessage.linktext;
-    syncStatusElement.appendChild(el);
+    content.appendChild(el);
     fixLinkUnderline(el);
   }
+
+  layoutSections();
 }
 
 /**
  * Invoked when the link in the sync status section is clicked.
  */
 function syncSectionLinkClicked(e) {
   chrome.send('SyncLinkClicked');
   e.preventDefault();
 }
 
@@ skipping 318 matching lines @@
     var command = item.getAttribute('command');
     if (command in this.commands) {
       this.commands[command].call(this, item);
     }
 
     this.hide();
   }
 };
 
 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() {
     mostVisited.clearAllBlacklisted();
     chrome.send('getMostVisited');
   }
 };
 
 $('main').addEventListener('click', function(e) {
   var p = e.target;
   while (p && p.tagName != 'H2') {
     p = p.parentNode;
   }
 
   if (!p) {
     return;
   }
 
   p = p.parentNode;
-  if (p.hasAttribute('noexpand')) {
+  if (!getSectionMaxiview(p)) {
     return;
   }
 
   var section = p.getAttribute('section');
   if (section) {
     if (shownSections & Section[section]) {
       hideSection(Section[section]);
     } else {
       for (var p in Section) {
         if (p == section)
@@ skipping 242 matching lines @@
   span.className = 'link-color';
   while (el.hasChildNodes()) {
     span.appendChild(el.firstChild);
   }
   el.appendChild(span);
 }
 
 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);
 
 function mostVisitedPages(data, firstRun) {
   logEvent('received most visited pages');
 
   mostVisited.data = data;
   mostVisited.layout();
   layoutSections();
 
   loading = false;
 
   // Remove class name in a timeout so that changes done in this JS thread are
   // not animated.
   window.setTimeout(function() {
     mostVisited.ensureSmallGridCorrect();
     document.body.classList.remove('loading');
   }, 1);
 
   // Only show the first run notification if first run.
   if (firstRun) {
     showFirstRunNotification();
   }
 }