Fix layout glitches in NTP. Also, lots of naming cleanup.

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;
 
 function getSectionCloseButton(sectionId) {
   return document.querySelector('#' + sectionId + ' .section-close-button');
 }
 
 function getSectionMenuButton(sectionId) {
   return $(sectionId + '-button');
 }
 
 function getSectionMenuButtonTextId(sectionId) {
   return sectionId.replace(/-/g, '');
 }
 
-function setSectionVisible(sectionId, section, visible, hideMask) {
-  if (visible && !(shownSections & hideMask) ||
-      !visible && (shownSections & hideMask))
-    return;
-
-  if (visible) {
-    // Because sections are collapsed when they are minimized, it is not
+function setSectionMenuMode(sectionId, section, menuModeEnabled, menuModeMask) {
+  var el = $(sectionId);
+  if (!menuModeEnabled) {
+    // Because sections are collapsed when they are in menu mode, it is not
     // necessary to restore the maxiview here. It will happen if the section
     // header is clicked.
-    var el = $(sectionId);
-    el.classList.remove('disabled');
-    el = getSectionMenuButton(sectionId);
-    el.classList.add('disabled');
-    shownSections &= ~hideMask;
+    // TODO(aa): Sections should maintain their collapse state when minimized.
+    el.classList.remove('menu');
+    shownSections &= ~menuModeMask;
   } else {
     if (section) {
       hideSection(section);  // To hide the maxiview.
     }
-    var el = $(sectionId);
-    el.classList.add('disabled');
-    el = getSectionMenuButton(sectionId);
-    el.classList.remove('disabled');
-    shownSections |= hideMask;
+    el.classList.add('menu');
+    shownSections |= menuModeMask;
   }
   layoutSections();
 }
 
 function clearClosedMenu(menu) {
   menu.innerHTML = '';
 }
 
 function addClosedMenuEntryWithLink(menu, a) {
   var span = document.createElement('span');
@@ skipping 21 matching lines @@
   } else {
     a.textContent =
         localStrings.getString(getSectionMenuButtonTextId(sectionId));
   }
   a.className = 'item';
   a.addEventListener(
       'click',
       function(e) {
         getSectionMenuButton(sectionId).hideMenu();
         e.preventDefault();
-        setSectionVisible(sectionId, opt_section, true, mask);
+        setSectionMenuMode(sectionId, opt_section, false, mask);
         shownSections &= ~mask;
         saveShownSections();
       });
   menu.appendChild(span);
 }
 
 function initializeSection(sectionId, mask, opt_section) {
   var button = getSectionCloseButton(sectionId);
   button.addEventListener(
     'click',
     function() {
-      setSectionVisible(sectionId, opt_section, false, mask);
+      setSectionMenuMode(sectionId, opt_section, true, mask);
       saveShownSections();
     });
 }
 
 function updateSimpleSection(id, section) {
   var elm = $(id);
   var maxiview = getSectionMaxiview(elm);
   var miniview = getSectionMiniview(elm);
   if (shownSections & section) {
     // The section is expanded, so the maxiview should be opaque (visible) and
     // the miniview should be hidden.
-    elm.classList.remove('hidden');
+    elm.classList.remove('collapsed');
     if (maxiview) {
-      maxiview.classList.remove('hidden');
+      maxiview.classList.remove('collapsed');
       maxiview.classList.add('opaque');
     }
     if (miniview)
       miniview.classList.remove('opaque');
   } else {
-    // The section is minimized, so the maxiview should be hidden and the
+    // The section is collapsed, so the maxiview should be hidden and the
     // miniview should be opaque.
-    elm.classList.add('hidden');
+    elm.classList.add('collapsed');
     if (maxiview) {
-      maxiview.classList.add('hidden');
+      maxiview.classList.add('collapsed');
       maxiview.classList.remove('opaque');
     }
     if (miniview)
       miniview.classList.add('opaque');
   }
 }
 
 var sessionItems = [];
 
 function foreignSessions(data) {
@@ skipping 101 matching lines @@
   var recentElement = $('recently-closed');
   var parentEl = recentElement.lastElementChild;
   parentEl.textContent = '';
   var recentMenu = $('recently-closed-menu');
   clearClosedMenu(recentMenu);
 
   recentItems.forEach(function(item) {
     parentEl.appendChild(createRecentItem(item));
     addRecentMenuItem(recentMenu, item);
   });
-  addClosedMenuFooter(recentMenu, 'recently-closed', MINIMIZED_RECENT);
+  addClosedMenuFooter(recentMenu, 'recently-closed', MENU_RECENT);
 
   layoutRecentlyClosed();
 }
 
 function createRecentItem(data) {
   var isWindow = data.type == 'window';
   var el;
   if (isWindow) {
     el = document.createElement('span');
     el.className = 'item link window';
@@ skipping 68 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.querySelector('h2');
   this.miniview = section.querySelector('.miniview');
   this.maxiview = getSectionMaxiview(section);
-  this.expanded = this.maxiview && !section.classList.contains('hidden');
+  this.expanded = this.maxiview && !section.classList.contains('collapsed');
   this.fixedHeight = this.section.offsetHeight;
   this.scrollingHeight = 0;
 
   if (this.expanded)
     this.scrollingHeight = this.maxiview.offsetHeight;
 }
 
 // Get all sections to be layed out.
 SectionLayoutInfo.getAll = function() {
-  var sections = document.querySelectorAll('.section:not(.disabled)');
+  var sections = document.querySelectorAll(
+      '.section:not(.disabled):not(.menu)');
   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');
+  var miniviews = document.querySelectorAll('.section.collapsed .miniview');
   for (var i = 0, miniview; miniview = miniviews[i]; i++) {
     updateMiniviewClipping(miniview);
   }
 }
 
 // Returns whether or not vertical scrollbars are present.
 function hasScrollBars() {
   return window.innerHeight != document.body.clientHeight;
 }
 
@@ skipping 98 matching lines @@
           expandedSection.scrollingHeight +
           footerHeight +
           fudge +
           'px';
     } else {
       expandedSectionHeight = expandedSection.scrollingHeight;
       document.body.style.height = '';
     }
   } else {
     // We only set the document height when a section is expanded. If
-    // all sections are minimized, then get rid of the previous height.
+    // all sections are collapsed, then get rid of the previous height.
     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) {
@@ skipping 11 matching lines @@
 
     if (section.maxiview && section == expandedSection)
       updateMask(section.maxiview, expandedSectionHeight);
 
     if (section == expandedSection)
       y += expandedSectionHeight;
   }
   if (cr.isChromeOS)
     $('closed-sections-bar').style.top = y + 'px';
 
+  updateMenuSections();
   updateAttributionDisplay(y);
 }
 
 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
@@ skipping 19 matching lines @@
   var gradient = '-webkit-linear-gradient(' + gradientArguments.join(',') + ')';
   maxiview.style.WebkitMaskImage = gradient;
 }
 
 function getColorStopString(height, color) {
   // TODO(arv): The CSS3 gradient syntax allows px units so we should simplify
   // this to use pixels instead.
   return color + ' ' + height * 100 + '%';
 }
 
+// Updates the visibility of the menu buttons for each section, based on
+// whether they are currently enabled and in menu mode.
+function updateMenuSections() {
+  var elms = document.getElementsByClassName('section');
+  for (var i = 0, elm; elm = elms[i]; i++) {
+    var button = getSectionMenuButton(elm.id);
+    if (!button)
+      continue;
+
+    if (!elm.classList.contains('disabled') &&
+        elm.classList.contains('menu')) {
+      button.style.display = 'inline-block';
+    } else {
+      button.style.display = 'none';
+    }
+  }
+}
+
 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 getSectionMiniview(section) {
   return section.querySelector('.miniview');
 }
 
 // You usually want to call |showOnlySection()| instead of this.
 function showSection(section) {
   if (!(section & shownSections)) {
     shownSections |= section;
     var el = getSectionElement(section);
     if (el) {
-      el.classList.remove('hidden');
+      el.classList.remove('collapsed');
 
       var maxiview = getSectionMaxiview(el);
       if (maxiview) {
-        maxiview.classList.remove('hiding');
-        maxiview.classList.remove('hidden');
+        maxiview.classList.remove('collapsing');
+        maxiview.classList.remove('collapsed');
         // The opacity won't transition if you toggle the display property
         // at the same time. To get a fade effect, we set the opacity
         // asynchronously from another function, after the display is toggled.
-        //   1) 'hidden' (display: none, opacity: 0)
+        //   1) 'collapsed' (display: none, opacity: 0)
         //   2) none (display: block, opacity: 0)
         //   3) 'opaque' (display: block, opacity: 1)
         setTimeout(function () {
           maxiview.classList.add('opaque');
         }, 0);
       }
 
       var miniview = getSectionMiniview(el);
       if (miniview) {
         // The miniview is hidden immediately (no need to set this async).
@@ skipping 27 matching lines @@
 
     switch (section) {
       case Section.THUMB:
         mostVisited.visible = false;
         mostVisited.layout();
         break;
     }
 
     var el = getSectionElement(section);
     if (el) {
-      el.classList.add('hidden');
+      el.classList.add('collapsed');
 
       var maxiview = getSectionMaxiview(el);
       if (maxiview) {
-        maxiview.classList.add(isDoneLoading() ? 'hiding' : 'hidden');
+        maxiview.classList.add(isDoneLoading() ? 'collapsing' : 'collapsed');
         maxiview.classList.remove('opaque');
       }
 
       var miniview = getSectionMiniview(el);
       if (miniview) {
         // We need to set this asynchronously to properly get the fade effect.
         setTimeout(function() {
           miniview.classList.add('opaque');
         }, 0);
         updateMiniviewClipping(miniview);
       }
     }
   }
 }
 
 window.addEventListener('webkitTransitionEnd', function(e) {
-  if (e.target.classList.contains('hiding')) {
-    e.target.classList.add('hidden');
-    e.target.classList.remove('hiding');
+  if (e.target.classList.contains('collapsing')) {
+    e.target.classList.add('collapsed');
+    e.target.classList.remove('collapsing');
   }
 
   if (e.target.classList.contains('maxiview') ||
       e.target.classList.contains('miniview'))  {
     document.documentElement.removeAttribute('enable-section-animations');
     showScrollBars();
   }
 });
 
 /**
  * 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]);
   }
-  setSectionVisible(
-      'apps', Section.APPS,
-      !(newShownSections & MINIMIZED_APPS), MINIMIZED_APPS);
-  setSectionVisible(
-      'most-visited', Section.THUMB,
-      !(newShownSections & MINIMIZED_THUMB), MINIMIZED_THUMB);
-  setSectionVisible(
-      'recently-closed', undefined,
-      !(newShownSections & MINIMIZED_RECENT), MINIMIZED_RECENT);
+  setSectionMenuMode('apps', Section.APPS, newShownSections & MENU_APPS,
+                     MENU_APPS);
+  setSectionMenuMode('most-visited', Section.THUMB,
+                     newShownSections & MENU_THUMB, MENU_THUMB);
+  setSectionMenuMode('recently-closed', undefined,
+                     newShownSections & MENU_RECENT, MENU_RECENT);
   layoutSections();
 }
 
 // Recently closed
 
 function layoutRecentlyClosed() {
   var recentElement = $('recently-closed');
   var miniview = getSectionMiniview(recentElement);
 
   updateMiniviewClipping(miniview);
 
   if (miniview.hasChildNodes()) {
-    if (!(shownSections & MINIMIZED_RECENT)) {
-      recentElement.classList.remove('disabled');
-      miniview.classList.add('opaque');
-    }
+    recentElement.classList.remove('disabled');
+    miniview.classList.add('opaque');
   } else {
     recentElement.classList.add('disabled');
     miniview.classList.remove('opaque');
   }
+
+  layoutSections();
 }
 
 /**
  * This function is called by the backend whenever the sync status section
  * needs to be updated to reflect recent sync state changes. The backend passes
  * the new status information in the newMessage parameter. The state includes
  * the following:
  *
  * syncsectionisvisible: true if the sync section needs to show up on the new
  *                       tab page and false otherwise.
@@ skipping 654 matching lines @@
   var promoLink = document.querySelector('#apps-promo-text1 a');
   promoLink.id = 'apps-promo-link';
   promoLink.href = localStrings.getString('web_store_url');
 
   $('apps-promo-hide').addEventListener('click', function() {
     chrome.send('hideAppsPromo', []);
     document.documentElement.classList.remove('apps-promo-visible');
     layoutSections();
   });
 });