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

BUG=68677,67273
TEST=

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

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

8 files changed, 126 insertions, 119 deletions

diff --git a/chrome/browser/dom_ui/shown_sections_handler.cc b/chrome/browser/dom_ui/shown_sections_handler.cc
index 164a235..d8f2403 100644
--- a/chrome/browser/dom_ui/shown_sections_handler.cc
+++ b/chrome/browser/dom_ui/shown_sections_handler.cc
@@ -25,8 +25,8 @@ namespace {
 // TODO(aa): Needs to be updated to match newest NTP - http://crbug.com/57440
 void NotifySectionDisabled(int new_mode, int old_mode, Profile *profile) {
   // If the oldmode HAD either thumbs or lists visible.
-  bool old_had_it = (old_mode & THUMB) && !(old_mode & MINIMIZED_THUMB);
-  bool new_has_it = (new_mode & THUMB) && !(new_mode & MINIMIZED_THUMB);
+  bool old_had_it = (old_mode & THUMB) && !(old_mode & MENU_THUMB);
+  bool new_has_it = (new_mode & THUMB) && !(new_mode & MENU_THUMB);
 
   if (old_had_it && !new_has_it) {
     UserMetrics::RecordAction(
@@ -106,7 +106,7 @@ void ShownSectionsHandler::RegisterUserPrefs(PrefService* pref_service) {
 #if defined(OS_CHROMEOS)
   // Default to have expanded APPS and all other secions are minimized.
   pref_service->RegisterIntegerPref(prefs::kNTPShownSections,
-                                    APPS | MINIMIZED_THUMB | MINIMIZED_RECENT);
+                                    APPS | MENU_THUMB | MENU_RECENT);
 #else
   pref_service->RegisterIntegerPref(prefs::kNTPShownSections, THUMB);
 #endif
@@ -147,8 +147,8 @@ void ShownSectionsHandler::OnExtensionInstalled(PrefService* prefs,
   if (extension->is_app()) {
     int mode = prefs->GetInteger(prefs::kNTPShownSections);
 
-    // De-minimize the apps section.
-    mode &= ~MINIMIZED_APPS;
+    // De-menu-mode the apps section.
+    mode &= ~MENU_APPS;
 
     // Hide any open sections.
     mode &= ~ALL_SECTIONS_MASK;
diff --git a/chrome/browser/dom_ui/shown_sections_handler.h b/chrome/browser/dom_ui/shown_sections_handler.h
index 41c7da8..8d03cf3 100644
--- a/chrome/browser/dom_ui/shown_sections_handler.h
+++ b/chrome/browser/dom_ui/shown_sections_handler.h
@@ -24,14 +24,14 @@ enum Section {
   THUMB = 1 << 0,
   APPS = 1 << 6,
 
-  // We use the low 16 bits for sections, the high 16 bits for minimized state.
+  // We use the low 16 bits for sections, the high 16 bits for menu mode.
   ALL_SECTIONS_MASK = 0x0000FFFF,
 
-  // If one of these is set, then the corresponding section is shown minimized
+  // If one of these is set, then the corresponding section is shown in a menu
   // at the bottom of the NTP and no data is directly visible on the NTP.
-  MINIMIZED_THUMB = 1 << (0 + 16),
-  MINIMIZED_RECENT = 1 << (2 + 16),
-  MINIMIZED_APPS = 1 << (6 + 16),
+  MENU_THUMB = 1 << (0 + 16),
+  MENU_RECENT = 1 << (2 + 16),
+  MENU_APPS = 1 << (6 + 16),
 };
 
 class ShownSectionsHandler : public DOMMessageHandler,
diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index 0d7f3db..3266aac 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -335,8 +335,20 @@ html[anim=true][enable-section-animations=true] .section {
   text-align: end;
 }
 
-.section.disabled,
-#closed-sections-bar .disabled {
+/* A section in menu mode doesn't display its contents at all. Instead it is
+rendered as a menu along the bottom of the screen. We have a separate class for
+this so that when a hidden section is unhidden it can go back to its previous
+collapsed state. */
+.section.menu {
+  display: none !important;
+}
+
+/* A disabled section is not rendered in the UI in any way. Examples of this
+state include the 'recently closed' section when we have no data for it, or this
+'sync status' section, when there is no status to display. We have a separate
+class for this so that when a section is enabled, it can go back to its previous
+menu and collapsed state. */
+.section.disabled {
   display: none !important;
 }
 
@@ -369,7 +381,7 @@ html[anim=true] .section > h2 > .disclosure {
   -webkit-transition: -webkit-transform .15s;
 }
 
-.section:not(.hidden) > h2 > .disclosure {
+.section:not(.collapsed) > h2 > .disclosure {
   -webkit-transform: rotate(90deg);
 }
 
@@ -433,6 +445,9 @@ html[dir=rtl] .section-close-button {
 }
 
 #closed-sections-bar > button {
+  /* We hide all these buttons by default and turn them on when needed. */
+  display: none;
+
   -webkit-appearance: none;
   background: none;
   border: 0;
@@ -467,11 +482,11 @@ html[dir=rtl] .section-close-button {
   opacity: 1;
 }
 
-.maxiview.hiding {
+.maxiview.collapsing {
   opacity: 0;
 }
 
-.maxiview.hidden {
+.maxiview.collapsed {
   display: none;
   opacity: 0;
 }
@@ -491,24 +506,24 @@ html[anim=true][enable-section-animations=true] .miniview {
   overflow-x: hidden;
 }
 
-.section.hidden > * {
+.section.collapsed > * {
   display: none;
 }
 
-.section.hidden > h2 {
+.section.collapsed > h2 {
   display: block;
 }
 
-.section.hidden > .miniview {
+.section.collapsed > .miniview {
   display: block;
   opacity: 0;
 }
 
-.section.hidden > .miniview.opaque {
+.section.collapsed > .miniview.opaque {
   opacity: 1;
 }
 
-.section.hidden > h2 {
+.section.collapsed > h2 {
   margin-right: 0;
 }
 
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index 446a08b..e9bd7a1 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -75,12 +75,15 @@ var Section = {
   APPS: 1 << 6
 };
 
-// These are used to hide sections and are part of the |shownSections| bitmask,
-// but are not sections themselves.
-var MINIMIZED_THUMB = 1 << (0 + 16);
-var MINIMIZED_RECENT = 1 << (2 + 16);
-var MINIMIZED_APPS = 1 << (6 + 16);
-
+// These are used to put sections into menu mode and are part of the
+// |shownSections| bitmask, but are not sections themselves.
+var MENU_THUMB = 1 << (0 + 16);
+var MENU_RECENT = 1 << (2 + 16);
+var MENU_APPS = 1 << (6 + 16);
+
+// TODO(aa): This state is duplicated. We keep this variable up to date, but we
+// also have the same information in the DOM. We can probably just have the DOM
+// be the truth and translate to and from the bitmask when needed.
 var shownSections = templateData['shown_sections'];
 
 // Until themes can clear the cache, force-reload the theme stylesheet.
@@ -178,8 +181,8 @@ if ('mode' in hashParams) {
 
     <!-- Start this section disabled because it might not have data, and looks
          silly without any. -->
-    <div id="recently-closed" class="section hidden disabled" section="RECENT"
-        noexpand="true">
+    <div id="recently-closed" class="section collapsed disabled"
+        section="RECENT" noexpand="true">
       <h2>
         <div class="back"></div>
         <span i18n-content="recentlyclosed"></span>
@@ -190,7 +193,8 @@ if ('mode' in hashParams) {
 
     <!-- Start disabled until sync is enabled and foreign sessions are
          available. -->
-    <div id="foreign-sessions" class="section hidden disabled" section="SYNC">
+    <div id="foreign-sessions" class="section collapsed disabled"
+        section="SYNC">
       <h2>
         <div class="back"></div>
         <span i18n-content="foreignsessions"></span>
@@ -215,7 +219,6 @@ if ('mode' in hashParams) {
       <img src="ntp/ntp_disclosure_triangle.png">
     </button>
     <button id="most-visited-button"
-            class="disabled"
             menu="#most-visited-menu">
       <span i18n-content="mostvisited"></span>
       <img src="ntp/ntp_disclosure_triangle.png">
@@ -300,40 +303,20 @@ i18nTemplate.process(document, templateData);
 
   initializeLogin();
 
-  initializeSection('apps', MINIMIZED_APPS, Section.APPS);
-  initializeSection('most-visited', MINIMIZED_THUMB, Section.THUMB);
-  initializeSection('recently-closed', MINIMIZED_RECENT);
+  initializeSection('apps', MENU_APPS, Section.APPS);
+  initializeSection('most-visited', MENU_THUMB, Section.THUMB);
+  initializeSection('recently-closed', MENU_RECENT);
 
   updateSimpleSection('apps', Section.APPS);
   updateSimpleSection('most-visited', Section.THUMB);
-  var appsInitiallyVisible = !(shownSections & MINIMIZED_APPS);
-  var mostVisitedInitiallyVisible = !(shownSections & MINIMIZED_THUMB);
-  var recentlyClosedInitiallyVisible = !(shownSections & MINIMIZED_RECENT);
-  // Apps and recently closed start as hidden in the HTML, most visited is
-  // initially visible. Adapt to the change received from the prefs by forcing
-  // all three sections to update.
-  shownSections &= ~MINIMIZED_THUMB;
-  shownSections |= MINIMIZED_APPS | MINIMIZED_RECENT;
-  setSectionVisible('apps', Section.APPS, appsInitiallyVisible, MINIMIZED_APPS);
-  setSectionVisible(
-      'most-visited', Section.THUMB,
-      mostVisitedInitiallyVisible, MINIMIZED_THUMB);
-  setSectionVisible(
-      'recently-closed', undefined,
-      recentlyClosedInitiallyVisible, MINIMIZED_RECENT);
-
-  // This is insane, but we use the CSS class 'disabled' for both 'minimized'
-  // sections and sections that are actually disabled, as in not accessible in
-  // any way.
-  //
-  // The above code syncs up the DOM and shownSection wrt minimized. But we
-  // don't know until we receive the apps data whether the apps section will be
-  // disabled or not. So we need to add the 'disabled' class back to the apps
-  // section here. We remove it later, once we know for sure we want it to be
-  // enabled.
-  //
-  // See also: crbug.com/67273.
-  $('apps').classList.add('disabled');
+  var appsInitiallyMenu = shownSections & MENU_APPS;
+  var mostVisitedInitiallyMenu = shownSections & MENU_THUMB;
+  var recentlyClosedInitiallyMenu = shownSections & MENU_RECENT;
+  setSectionMenuMode('apps', Section.APPS, appsInitiallyMenu, MENU_APPS);
+  setSectionMenuMode('most-visited', Section.THUMB, mostVisitedInitiallyMenu,
+                     MENU_THUMB);
+  setSectionMenuMode('recently-closed', undefined, recentlyClosedInitiallyMenu,
+                     MENU_RECENT);
 
   layoutSections();
 </script>
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index f72fadd..877144c 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -21,29 +21,21 @@ 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();
 }
@@ -85,7 +77,7 @@ function addClosedMenuFooter(menu, sectionId, mask, opt_section) {
       function(e) {
         getSectionMenuButton(sectionId).hideMenu();
         e.preventDefault();
-        setSectionVisible(sectionId, opt_section, true, mask);
+        setSectionMenuMode(sectionId, opt_section, false, mask);
         shownSections &= ~mask;
         saveShownSections();
       });
@@ -97,7 +89,7 @@ function initializeSection(sectionId, mask, opt_section) {
   button.addEventListener(
     'click',
     function() {
-      setSectionVisible(sectionId, opt_section, false, mask);
+      setSectionMenuMode(sectionId, opt_section, true, mask);
       saveShownSections();
     });
 }
@@ -109,19 +101,19 @@ function updateSimpleSection(id, section) {
   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)
@@ -243,7 +235,7 @@ function renderRecentlyClosed() {
     parentEl.appendChild(createRecentItem(item));
     addRecentMenuItem(recentMenu, item);
   });
-  addClosedMenuFooter(recentMenu, 'recently-closed', MINIMIZED_RECENT);
+  addClosedMenuFooter(recentMenu, 'recently-closed', MENU_RECENT);
 
   layoutRecentlyClosed();
 }
@@ -332,7 +324,7 @@ function SectionLayoutInfo(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;
 
@@ -342,7 +334,8 @@ function SectionLayoutInfo(section) {
 
 // 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));
@@ -367,7 +360,7 @@ function updateMiniviewClipping(miniview) {
 
 // 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);
   }
@@ -486,7 +479,7 @@ function layoutSections() {
     }
   } 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 = '';
   }
 
@@ -518,6 +511,7 @@ function layoutSections() {
   if (cr.isChromeOS)
     $('closed-sections-bar').style.top = y + 'px';
 
+  updateMenuSections();
   updateAttributionDisplay(y);
 }
 
@@ -557,6 +551,24 @@ function getColorStopString(height, color) {
   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;
@@ -585,16 +597,16 @@ function showSection(section) {
     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 () {
@@ -642,11 +654,11 @@ function hideSection(section) {
 
     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');
       }
 
@@ -663,9 +675,9 @@ function hideSection(section) {
 }
 
 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') ||
@@ -686,15 +698,12 @@ function setShownSections(newShownSections) {
     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();
 }
 
@@ -707,14 +716,14 @@ function layoutRecentlyClosed() {
   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();
 }
 
 /**
diff --git a/chrome/browser/resources/ntp/apps.js b/chrome/browser/resources/ntp/apps.js
index 4dd8bc1..e61ebe0 100644
--- a/chrome/browser/resources/ntp/apps.js
+++ b/chrome/browser/resources/ntp/apps.js
@@ -66,12 +66,12 @@ function getAppsCallback(data) {
                                apps.createWebStoreClosedMenuElement());
   }
 
-  if (!data.showLauncher || (shownSections & MINIMIZED_APPS)) {
+  if (!data.showLauncher)
     appsSection.classList.add('disabled');
-  } else {
+  else
     appsSection.classList.remove('disabled');
-  }
-  addClosedMenuFooter(apps.menu, 'apps', MINIMIZED_APPS, Section.APPS);
+
+  addClosedMenuFooter(apps.menu, 'apps', MENU_APPS, Section.APPS);
 
   apps.loaded = true;
   if (apps.showPromo)
@@ -121,7 +121,7 @@ var apps = (function() {
 
   function launchApp(appId) {
     var appsSection = $('apps');
-    var expanded = !appsSection.classList.contains('hidden');
+    var expanded = !appsSection.classList.contains('collapsed');
     var element = document.querySelector(
         (expanded ? '.maxiview' : '.miniview') + ' a[app-id=' + appId + ']');
 
diff --git a/chrome/browser/resources/ntp/most_visited.css b/chrome/browser/resources/ntp/most_visited.css
index 2f875e2..cf930eb 100644
--- a/chrome/browser/resources/ntp/most_visited.css
+++ b/chrome/browser/resources/ntp/most_visited.css
@@ -274,6 +274,6 @@ html[dir=rtl] #most-visited-settings {
   right: auto;
 }
 
-#most-visited:not(.hidden) #most-visited-settings.has-blacklist {
+#most-visited:not(.collapsed) #most-visited-settings.has-blacklist {
   visibility: visible;
 }
diff --git a/chrome/browser/resources/ntp/most_visited.js b/chrome/browser/resources/ntp/most_visited.js
index 1f8b740..a2c56de 100644
--- a/chrome/browser/resources/ntp/most_visited.js
+++ b/chrome/browser/resources/ntp/most_visited.js
@@ -620,7 +620,7 @@ var MostVisited = (function() {
         }
       }
       addClosedMenuFooter(
-          this.menu, 'most-visited', MINIMIZED_THUMB, Section.THUMB);
+          this.menu, 'most-visited', MENU_THUMB, Section.THUMB);
     },
 
     handleClick_: function(e) {