Local NTP: Render two rows of Most Visited tiles.

chrome/browser/resources/local_ntp/local_ntp.js

 // Copyright 2013 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.
 
 (function() {
 <include src="../../../../ui/webui/resources/js/assert.js">
 
 /**
  * True if this a Google page and not some other search provider.  Used to
  * determine whether to show the logo and fakebox.
@@ skipping 22 matching lines @@
   FAKEBOX_FOCUS: 'fakebox-focused', // Applies focus styles to the fakebox
   FAVICON: 'mv-favicon',
   FILLER: 'mv-filler', // filler tiles
   GOOGLE_PAGE: 'google-page', // shows the Google logo and fakebox
   HIDE_BLACKLIST_BUTTON: 'mv-x-hide', // hides blacklist button during animation
   HIDE_NOTIFICATION: 'mv-notice-hide',
   HIDE_TILE: 'mv-tile-hide', // hides tiles on small browser width
   HOVERED: 'hovered',
   PENDING_SUGGESTIONS_CONTAINER: 'pending-suggestions-container',
   PAGE: 'mv-page', // page tiles
+  ROW: 'mv-row',  // tile row
   SEARCH: 'search',
   SELECTED: 'selected', // a selected suggestion (if any)
   SUGGESTION: 'suggestion',
   SUGGESTION_CONTENTS: 'suggestion-contents',
   SUGGESTIONS_BOX: 'suggestions-box',
   THUMBNAIL: 'mv-thumb',
   TILE: 'mv-tile',
   TITLE: 'mv-title'
 };
 
@@ skipping 69 matching lines @@
  */
 var tiles = [];
 
 /**
  * The last blacklisted tile if any, which by definition should not be filler.
  * @type {?Tile}
  */
 var lastBlacklistedTile = null;
 
 /**
- * The index of the last blacklisted tile, if any. Used to determine where to
- * re-insert a tile on undo.
- * @type {number}
- */
-var lastBlacklistedIndex = -1;
-
-/**
  * True if a page has been blacklisted and we're waiting on the
  * onmostvisitedchange callback. See onMostVisitedChange() for how this
  * is used.
  * @type {boolean}
  */
 var isBlacklisting = false;
 
 /**
- * True if a blacklist has been undone and we're waiting on the
- * onmostvisitedchange callback. See onMostVisitedChange() for how this
- * is used.
- * @type {boolean}
- */
-var isUndoing = false;
-
-/**
- * Current number of tiles shown based on the window width, including filler.
+ * Current number of tiles columns shown based on the window width, including
+ * those that just contain filler.
  * @type {number}
  */
-var numTilesShown = 0;
+var numColumnsShown = 0;
 
 /**
  * The browser embeddedSearch.newTabPage object.
  * @type {Object}
  */
 var ntpApiHandle;
 
 /**
  * Possible background-colors of a non-custom theme. Used to determine whether
  * the homepage should be updated to support custom or non-custom themes.
  * @type {!Array.<string>}
  * @const
  */
 var WHITE = ['rgba(255,255,255,1)', 'rgba(0,0,0,0)'];
 
 /**
  * Should be equal to mv-tile's -webkit-margin-start + width.
  * @type {number}
  * @const
  */
 var TILE_WIDTH = 160;
 
 /**
  * The height of the most visited section.
  * @type {number}
  * @const
  */
-var MOST_VISITED_HEIGHT = 156;
+var MOST_VISITED_HEIGHT = 296;
 
 /** @type {number} @const */
-var MAX_NUM_TILES_TO_SHOW = 4;
+var MAX_NUM_TILES_TO_SHOW = 8;
 
 /** @type {number} @const */
-var MIN_NUM_TILES_TO_SHOW = 2;
+var MIN_NUM_COLUMNS = 2;
+
+/** @type {number} @const */
+var MAX_NUM_COLUMNS = 4;
+
+/** @type {number} @const */
+var NUM_ROWS = 2;
 
 /**
  * Minimum total padding to give to the left and right of the most visited
  * section. Used to determine how many tiles to show.
  * @type {number}
  * @const
  */
 var MIN_TOTAL_HORIZONTAL_PADDING = 188;
 
 /**
@@ skipping 60 matching lines @@
   attributionImage.src = url;
 }
 
 /**
  * Handles a new set of Most Visited page data.
  */
 function onMostVisitedChange() {
   var pages = ntpApiHandle.mostVisited;
 
   if (isBlacklisting) {
-    // If this was called as a result of a blacklist, add a new replacement
-    // (possibly filler) tile at the end and trigger the blacklist animation.
-    var replacementTile = createTile(pages[MAX_NUM_TILES_TO_SHOW - 1]);
-
-    tiles.push(replacementTile);
-    tilesContainer.appendChild(replacementTile.elem);
-
+    // Trigger the blacklist animation and re-render the tiles when it
+    // completes.
     var lastBlacklistedTileElement = lastBlacklistedTile.elem;
     lastBlacklistedTileElement.addEventListener(
         'webkitTransitionEnd', blacklistAnimationDone);
     lastBlacklistedTileElement.classList.add(CLASSES.BLACKLIST);
-    // In order to animate the replacement tile sliding into place, it must
-    // be made visible.
-    updateTileVisibility(numTilesShown + 1);
 
-  } else if (isUndoing) {
-    // If this was called as a result of an undo, re-insert the last blacklisted
-    // tile in its old location and trigger the undo animation.
-    tiles.splice(
-        lastBlacklistedIndex, 0, lastBlacklistedTile);
-    var lastBlacklistedTileElement = lastBlacklistedTile.elem;
-    tilesContainer.insertBefore(
-        lastBlacklistedTileElement,
-        tilesContainer.childNodes[lastBlacklistedIndex]);
-    lastBlacklistedTileElement.addEventListener(
-        'webkitTransitionEnd', undoAnimationDone);
-    // Force the removal to happen synchronously.
-    lastBlacklistedTileElement.scrollTop;
-    lastBlacklistedTileElement.classList.remove(CLASSES.BLACKLIST);
   } else {
     // Otherwise render the tiles using the new data without animation.
     tiles = [];
     for (var i = 0; i < MAX_NUM_TILES_TO_SHOW; ++i) {
       tiles.push(createTile(pages[i]));
     }
     renderTiles();
   }
 }
 
 /**
- * Renders the current set of tiles without animation.
+ * Renders the current set of tiles.
  */
 function renderTiles() {
-  removeChildren(tilesContainer);
-  for (var i = 0, length = tiles.length; i < length; ++i) {
-    tilesContainer.appendChild(tiles[i].elem);
+  var rows = tilesContainer.children;
+  for (var i = 0; i < rows.length; ++i) {
+    removeChildren(rows[i]);
+  }
+
+  for (var i = 0, length = tiles.length;
+       i < Math.min(length, numColumnsShown * NUM_ROWS); ++i) {
+    rows[Math.floor(i / numColumnsShown)].appendChild(tiles[i].elem);
   }
 }
 
 /**
  * Creates a Tile with the specified page data. If no data is provided, a
  * filler Tile is created.
  * @param {Object} page The page data.
  * @return {Tile} The new Tile.
  */
 function createTile(page) {
@@ skipping 60 matching lines @@
     tileElement.classList.add(CLASSES.FILLER);
     return new Tile(tileElement);
   }
 }
 
 /**
  * Generates a function to be called when the page with the corresponding RID
  * is blacklisted.
  * @param {number} rid The RID of the page being blacklisted.
  * @return {function(Event)} A function which handles the blacklisting of the
- *     page by displaying the notification, updating state variables, and
- *     notifying Chrome.
+ *     page by updating state variables and notifying Chrome.
  */
 function generateBlacklistFunction(rid) {
   return function(e) {
     // Prevent navigation when the page is being blacklisted.
     e.stopPropagation();
 
-    showNotification();
     isBlacklisting = true;
     tilesContainer.classList.add(CLASSES.HIDE_BLACKLIST_BUTTON);
     lastBlacklistedTile = getTileByRid(rid);
-    lastBlacklistedIndex = tiles.indexOf(lastBlacklistedTile);
     ntpApiHandle.deleteMostVisitedItem(rid);
   };
 }
 
 /**
  * Shows the blacklist notification and triggers a delay to hide it.
  */
 function showNotification() {
   notification.classList.remove(CLASSES.HIDE_NOTIFICATION);
   notification.classList.remove(CLASSES.DELAYED_HIDE_NOTIFICATION);
   notification.scrollTop;
   notification.classList.add(CLASSES.DELAYED_HIDE_NOTIFICATION);
 }
 
 /**
  * Hides the blacklist notification.
  */
 function hideNotification() {
   notification.classList.add(CLASSES.HIDE_NOTIFICATION);
 }
 
 /**
- * Handles the end of the blacklist animation by removing the blacklisted tile.
+ * Handles the end of the blacklist animation by showing the notification and
+ * re-rendering the new set of tiles.
  */
 function blacklistAnimationDone() {
-  tiles.splice(lastBlacklistedIndex, 1);
-  removeNode(lastBlacklistedTile.elem);
-  updateTileVisibility(numTilesShown);
+  showNotification();
   isBlacklisting = false;
   tilesContainer.classList.remove(CLASSES.HIDE_BLACKLIST_BUTTON);
   lastBlacklistedTile.elem.removeEventListener(
       'webkitTransitionEnd', blacklistAnimationDone);
+  // Need to call explicitly to re-render the tiles, since the initial
+  // onmostvisitedchange issued by the blacklist function only triggered
+  // the animation.
+  onMostVisitedChange();
 }
 
 /**
  * Handles a click on the notification undo link by hiding the notification and
  * informing Chrome.
  */
 function onUndo() {
   hideNotification();
   var lastBlacklistedRID = lastBlacklistedTile.rid;
-  if (typeof lastBlacklistedRID != 'undefined') {
-    isUndoing = true;
+  if (typeof lastBlacklistedRID != 'undefined')
     ntpApiHandle.undoMostVisitedDeletion(lastBlacklistedRID);
-  }
 }
 
 /**
- * Handles the end of the undo animation by removing the extraneous end tile.
- */
-function undoAnimationDone() {
-  isUndoing = false;
-  tiles.splice(tiles.length - 1, 1);
-  removeNode(tilesContainer.lastElementChild);
-  updateTileVisibility(numTilesShown);
-  lastBlacklistedTile.elem.removeEventListener(
-      'webkitTransitionEnd', undoAnimationDone);
-}
-
-/**
  * Handles a click on the restore all notification link by hiding the
  * notification and informing Chrome.
  */
 function onRestoreAll() {
   hideNotification();
   ntpApiHandle.undoAllMostVisitedDeletions();
 }
 
 /**
  * Handles a resize by vertically centering the most visited section
- * and triggering the tile show/hide animation if necessary.
+ * and re-rendering the tiles if the number of columns has changed.
  */
 function onResize() {
   // The Google page uses a fixed layout instead.
   if (!isGooglePage) {
     var clientHeight = document.documentElement.clientHeight;
     topMarginElement.style.marginTop =
         Math.max(0, (clientHeight - MOST_VISITED_HEIGHT) / 2) + 'px';
   }
   var clientWidth = document.documentElement.clientWidth;
-  var numTilesToShow = Math.floor(
+  var numColumnsToShow = Math.floor(
       (clientWidth - MIN_TOTAL_HORIZONTAL_PADDING) / TILE_WIDTH);
-  numTilesToShow = Math.max(MIN_NUM_TILES_TO_SHOW, numTilesToShow);
-  if (numTilesToShow != numTilesShown) {
-    updateTileVisibility(numTilesToShow);
-    numTilesShown = numTilesToShow;
+  numColumnsToShow = Math.max(MIN_NUM_COLUMNS,
+                              Math.min(MAX_NUM_COLUMNS, numColumnsToShow));
+  if (numColumnsToShow != numColumnsShown) {
+    numColumnsShown = numColumnsToShow;
+    renderTiles();
   }
 }
 
-/**
- * Triggers an animation to show the first numTilesToShow tiles and hide the
- * remaining.
- * @param {number} numTilesToShow The number of tiles to show.
- */
-function updateTileVisibility(numTilesToShow) {
-  for (var i = 0, length = tiles.length; i < length; ++i) {
-    tiles[i].elem.classList.toggle(CLASSES.HIDE_TILE, i >= numTilesToShow);
-  }
-}
-
 /**
  * Returns the tile corresponding to the specified page RID.
  * @param {number} rid The page RID being looked up.
  * @return {Tile} The corresponding tile.
  */
 function getTileByRid(rid) {
   for (var i = 0, length = tiles.length; i < length; ++i) {
     var tile = tiles[i];
     if (tile.rid == rid)
       return tile;
@@ skipping 871 matching lines @@
  */
 function init() {
   iframePool = new IframePool();
   iframePool.init();
   topMarginElement = $(IDS.TOP_MARGIN);
   tilesContainer = $(IDS.TILES);
   notification = $(IDS.NOTIFICATION);
   attribution = $(IDS.ATTRIBUTION);
   ntpContents = $(IDS.NTP_CONTENTS);
 
+  for (var i = 0; i < NUM_ROWS; i++) {
+    var row = document.createElement('div');
+    row.classList.add(CLASSES.ROW);
+    tilesContainer.appendChild(row);
+  }
+
   if (isGooglePage) {
     document.body.classList.add(CLASSES.GOOGLE_PAGE);
     var logo = document.createElement('div');
     logo.id = IDS.LOGO;
 
     fakebox = document.createElement('div');
     fakebox.id = IDS.FAKEBOX;
     fakebox.innerHTML =
         '<input autocomplete="off" tabindex="-1" aria-hidden="true">' +
         '<div id=cursor></div>';
@@ skipping 39 matching lines @@
       // Interpret onsubmit with an empty query as an ESC key press.
       hideActiveSuggestions();
       updateNtpVisibility(true);
     }
   };
   $qs('.' + CLASSES.ACTIVE_SUGGESTIONS_CONTAINER).dir =
       searchboxApiHandle.rtl ? 'rtl' : 'ltr';
   $qs('.' + CLASSES.PENDING_SUGGESTIONS_CONTAINER).dir =
       searchboxApiHandle.rtl ? 'rtl' : 'ltr';
 
-  if (!document.webkitHidden)
-    window.addEventListener('resize', addDelayedTransitions);
-  else
-    document.addEventListener('webkitvisibilitychange', addDelayedTransitions);
-
   if (fakebox) {
     // Listener for updating the fakebox focus.
     document.body.onclick = function(event) {
       if (isFakeboxClick(event)) {
         document.body.classList.add(CLASSES.FAKEBOX_FOCUS);
         searchboxApiHandle.startCapturingKeyStrokes();
       } else {
         document.body.classList.remove(CLASSES.FAKEBOX_FOCUS);
         searchboxApiHandle.stopCapturingKeyStrokes();
       }
     };
 
     // Set the cursor alignment based on language directionality.
     $(IDS.CURSOR).style[searchboxApiHandle.rtl ? 'right' : 'left'] = '9px';
   }
 }
 
-/**
- * Applies webkit transitions to NTP elements which need to be delayed until
- * after the page is made visible and any initial resize has occurred.  This is
- * to prevent animations from triggering when the NTP is shown.
- */
-function addDelayedTransitions() {
-  if (fakebox) {
-    fakebox.style.webkitTransition =
-        '-webkit-transform 100ms linear, width 200ms ease';
-  }
-
-  tilesContainer.style.webkitTransition = 'width 200ms';
-  window.removeEventListener('resize', addDelayedTransitions);
-  document.removeEventListener('webkitvisibilitychange', addDelayedTransitions);
-}
-
 document.addEventListener('DOMContentLoaded', init);
 window.addEventListener('message', handleMessage, false);
 window.addEventListener('blur', function() {
   if (activeBox)
     activeBox.clearHover();
 }, false);
 })();