Add an accordian effect to NTP.

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;
 
 var loading = true;
 
 function updateSimpleSection(id, section) {
   if (shownSections & section)
     $(id).classList.remove('hidden');
   else
     $(id).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();
 }
 
 var recentItems = [];
 
 function renderRecentlyClosed() {
   // Remove all existing items and create new items.
   var recentElement = $('recently-closed');
   var parentEl = recentElement.lastElementChild;
   parentEl.textContent = '';
 
@@ skipping 47 matching lines @@
 
   var oldLayoutMode = layoutMode;
   var b = useSmallGrid();
   layoutMode = b ? LayoutMode.SMALL : LayoutMode.NORMAL
 
   if (layoutMode != oldLayoutMode){
     mostVisited.useSmallGrid = b;
     mostVisited.layout();
     renderRecentlyClosed();
   }
+
+  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.scrollingHeight = 0;
+
+  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;
+};
+
+// Layout the sections in a modified accordian. The header and miniview, if

[arv (Not doing code reviews), 2010/08/31 21:13:59]

accordion

+// visible are fixed within the viewport. If there is an expanded section, its
+// it scrolls.
+//
+// =============================
+// | collapsed section         |  <- Any collapsed sections are fixed position.
+// | and miniview              |
+// |---------------------------|
+// | expanded section          |
+// |                           |  <- There can be one expanded section and it
+// | and maxiview              |     is absolutely positioned so that it can
+// |                           |     scroll "underneath" the fixed elements.
+// |                           |
+// |---------------------------|
+// | another collapsed section |
+// |---------------------------|
+//
+// We want the main frame scrollbar to be the one that scrolls the expanded
+// region. To get this effect, we make the fixed elements position:fixed and the
+// scrollable element position:absolute. We also artificially increase the
+// height of the document so that it is possible to scroll down enough to
+// display the end of the document, even with any fixed elements at the bottom
+// of the viewport.
+//
+// There is a final twist: If the intrinsic height of the expanded section is
+// less than the available height (because the window is tall), any collapsed
+// sections sinch up and sit below the expanded section. This is so that we
+// don't have a bunch of dead whitespace in the case of expanded sections that
+// aren't very tall.
+function layoutSections() {
+  var sections = SectionLayoutInfo.getAll();
+  var expandedSection = null;
+  var headerHeight = 0;
+  var footerHeight = 0;
+
+  // Calculate the height of the fixed elements above the expanded section. Also
+  // take note of the expanded section, if there is one.
+  var i;
+  var section;
+  for (i = 0; section = sections[i]; i++) {
+    headerHeight += section.fixedHeight;
+    if (section.expanded) {
+      expandedSection = section;
+      i++;
+      break;
+    }
+  }
+
+  // Calculate the height of the fixed elements below the expanded section, if
+  // any.
+  for (; section = sections[i]; i++) {
+    footerHeight += section.fixedHeight;
+  }
+
+  // Determine the height to use for the expanded section. If there isn't enough
+  // space to show the expanded section completely, this will be the available
+  // height. Otherwise, we use the intrinsic height of the expanded section.
+  var expandedSectionHeight;
+  if (expandedSection) {
+    var flexHeight = window.innerHeight - headerHeight - footerHeight;
+    if (flexHeight < expandedSection.scrollingHeight) {
+      expandedSectionHeight = flexHeight;
+
+      // Also, artificially expand the height of the document so that we can see
+      // the entire expanded section.
+      //
+      // TODO(aa): Where does this come from? It is the difference between what
+      // we set document.body.style.height to and what
+      // document.body.scrollHeight measures afterward. I expect them to be the
+      // same if document.body has no margins.

[arv (Not doing code reviews), 2010/08/31 21:13:59]

I think we had a padding or margin on the body to make room for the
attribution...

+      var fudge = 44;
+      document.body.style.height =
+          headerHeight +
+          expandedSection.scrollingHeight +
+          footerHeight +
+          fudge +
+          'px';
+    } else {
+      expandedSectionHeight = expandedSection.scrollingHeight;
+      document.body.style.height = '';
+    }
+  }
+
+  // Now position all the elements.
+  var y = 0;
+  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;
+      }
+    }
+
+    if (section.maxiview) {
+      section.maxiview.style.top = y + 'px';
+      if (section == expandedSection) {
+        y += expandedSectionHeight;
+      }
+    }
+  }
 }
 
 window.addEventListener('resize', handleWindowResize);
 
 var sectionToElementMap;
 function getSectionElement(section) {
   if (!sectionToElementMap) {
     sectionToElementMap = {};
     for (var key in Section) {
       sectionToElementMap[Section[key]] =
@@ skipping 40 matching lines @@
  * 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]);
   }
+  layoutSections();
 }
 
 // Recently closed
 
 function layoutRecentlyClosed() {
   var recentElement = $('recently-closed');
   // We cannot use clientWidth here since the width has a transition.
   var availWidth = useSmallGrid() ? 692 : 920;
   var parentEl = recentElement.lastElementChild;
 
@@ skipping 136 matching lines @@
   var lines = [];
   var start = log[0][1];
 
   for (var i = 0; i < log.length; i++) {
     lines.push((log[i][1] - start) + ': ' + log[i][0]);
   }
 
   console.log(lines.join('\n'));
 }
 
-// Updates the visibility of the menu items.
-function updateOptionMenu() {
-  var menuItems = $('option-menu').children;
-  for (var i = 0; i < menuItems.length; i++) {
-    var item = menuItems[i];
-    var command = item.getAttribute('command');
-    if (command == 'show' || command == 'hide') {
-      var section = Section[item.getAttribute('section')];
-      var visible = shownSections & section;
-      item.setAttribute('command', visible ? 'hide' : 'show');
-    }
-  }
-}
-
 // We apply the size class here so that we don't trigger layout animations
 // onload.
 
 handleWindowResize();
 
 var localStrings = new LocalStrings();
 
 ///////////////////////////////////////////////////////////////////////////////
 // Things we know are not needed at startup go below here
 
@@ skipping 79 matching lines @@
 
 /**
  * This handles the option menu.
  * @param {Element} button The button element.
  * @param {Element} menu The menu element.
  * @constructor
  */
 function OptionMenu(button, menu) {
   this.button = button;
   this.menu = menu;
+  this.button.onclick = bind(this.handleClick, this);
   this.button.onmousedown = bind(this.handleMouseDown, this);
   this.button.onkeydown = bind(this.handleKeyDown, this);
   this.boundHideMenu_ = bind(this.hide, this);
   this.boundMaybeHide_ = bind(this.maybeHide_, this);
   this.menu.onmouseover = bind(this.handleMouseOver, this);
   this.menu.onmouseout = bind(this.handleMouseOut, this);
   this.menu.onmouseup = bind(this.handleMouseUp, this);
 }
 
 OptionMenu.prototype = {
   show: function() {
-    updateOptionMenu();
     this.positionMenu_();
     this.menu.style.display = 'block';
     this.button.classList.add('open');
     this.button.focus();
 
     // Listen to document and window events so that we hide the menu when the
     // user clicks outside the menu or tabs away or the whole window is blurred.
     document.addEventListener('focus', this.boundMaybeHide_, true);
     document.addEventListener('mousedown', this.boundMaybeHide_, true);
   },
 
   positionMenu_: function() {
-    this.menu.style.top = this.button.getBoundingClientRect().bottom + 'px';
+    var rect = this.button.getBoundingClientRect();
+    this.menu.style.top = rect.bottom + 'px';
+    this.menu.style.right = (document.body.clientWidth - rect.right) + 'px'
   },
 
   hide: function() {
     this.menu.style.display = 'none';
     this.button.classList.remove('open');
     this.setSelectedIndex(-1);
 
     document.removeEventListener('focus', this.boundMaybeHide_, true);
     document.removeEventListener('mousedown', this.boundMaybeHide_, true);
   },
@@ skipping 15 matching lines @@
   },
 
   handleMouseDown: function(e) {
     if (this.isShown()) {
       this.hide();
     } else {
       this.show();
     }
   },
 
+  handleClick: function(e) {
+    e.stopPropagation();
+  },
+
   handleMouseOver: function(e) {
     var el = e.target;
     if (!el.hasAttribute('command')) {
       this.setSelectedIndex(-1);
     } else {
       var index = Array.prototype.indexOf.call(this.menu.children, el);
       this.setSelectedIndex(index);
     }
   },
 
@@ skipping 91 matching lines @@
   executeItem: function(item) {
     var command = item.getAttribute('command');
     if (command in this.commands) {
       this.commands[command].call(this, item);
     }
 
     this.hide();
   }
 };
 
-// TODO(aa): The 'clear-all-blacklisted' feature needs to move into a menu in
-// the most visited section.
-/*
-var optionMenu = new OptionMenu($('option-button'), $('option-menu'));
+var optionMenu = new OptionMenu(
+    document.querySelector('#most-visited-section h2 .settings'),
+    $('option-menu'));
 optionMenu.commands = {
   'clear-all-blacklisted' : function() {
     mostVisited.clearAllBlacklisted();
     chrome.send('getMostVisited');
-  },
-  'show': function(item) {
-    var section = Section[item.getAttribute('section')];
-    showSection(section);
-    saveShownSections();
-  },
-  'hide': function(item) {
-    var section = Section[item.getAttribute('section')];
-    hideSection(section);
-    saveShownSections();
   }
 };
-*/
 
 $('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.noexpand) {
     return;
   }
 
   var section = p.getAttribute('section');
   if (section) {
-    if (shownSections & Section[section])
+    if (shownSections & Section[section]) {
       hideSection(Section[section]);
-    else
-      showSection(Section[section]);
+    } else {
+      for (var p in Section) {
+        if (p == section)
+          showSection(Section[p]);
+        else
+          hideSection(Section[p]);
+      }
+    }
+    layoutSections();
     saveShownSections();
   }
 });
 
 function handleIfEnterKey(f) {
   return function(e) {
     if (e.keyIdentifier == 'Enter') {
       f(e);
     }
   };
@@ skipping 171 matching lines @@
  * make sure we don't send the initial sync message to the backend unless the
  * backend told us that the sync code is present.
  */
 function callGetSyncMessageIfSyncIsPresent() {
   if (document.documentElement.getAttribute('syncispresent') == 'true') {
     chrome.send('GetSyncMessage');
   }
 }
 
 function hideAllMenus() {
-  // TODO(aa): See comment in definition of optionMenu.
-  //optionMenu.hide();
+  optionMenu.hide();
 }
 
 window.addEventListener('blur', hideAllMenus);
 window.addEventListener('keydown', function(e) {
   if (e.keyIdentifier == 'Alt' || e.keyIdentifier == 'Meta') {
     hideAllMenus();
   }
 }, true);
 
 // Tooltip for elements that have text that overflows.
@@ skipping 35 matching lines @@
   while (el.hasChildNodes()) {
     span.appendChild(el.firstChild);
   }
   el.appendChild(span);
 }
 
 updateAttribution();
 
 var mostVisited = new MostVisited(
     $('most-visited'),
-    $('most-visited-section').getElementsByClassName('miniview')[0],
+    document.querySelector('#most-visited-section .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();
   }
 }