[NTP] Rebalance tiles if there are more than 5

Screenshots:
https://screenshot.googleplex.com/871EngQdhMQ.png
https://screenshot.googleplex.com/nUQPvKxaBiR.png

Bug: 851194
Change-Id: I97e8474bc79b18d579aaeb3c13e202dd1c7748b0
Reviewed-on: https://chromium-review.googlesource.com/1154196
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: Mathieu Perreault <mathp@chromium.org>
Cr-Commit-Position: refs/heads/master@{#579249}

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -7,6 +7,16 @@
 'use strict';
 
 
+/**
+ * Enum for ids.
+ * @enum {string}
+ * @const
+ */
+const IDS = {
+  MV_TILES: 'mv-tiles',  // Most Visited tiles container.
+};
+
+
 /**
  * Enum for classnames.
  * @enum {string}
@@ -84,6 +94,13 @@ var MAX_NUM_TILES = 8;
 var MAX_NUM_CUSTOM_LINKS = 10;
 
 
+/**
+ * Number of tiles per row for Material Design.
+ * @const {number}
+ */
+const MD_MAX_TILES_PER_ROW = 5;
+
+
 /**
  * Number of lines to display in titles.
  * @type {number}
@@ -315,6 +332,16 @@ var swapInNewTiles = function() {
   // Add new tileset.
   cur.id = 'mv-tiles';
   parent.appendChild(cur);
+
+  // If this is Material Design, re-balance the tiles if there are more than
+  // |MD_MAX_TILES_PER_ROW| in order to make even rows.
+  if (isMDEnabled) {
+    if (cur.childNodes.length > MD_MAX_TILES_PER_ROW) {
+      cur.style.maxWidth =
+          'calc(var(--md-tile-width) * ' + Math.ceil(cur.childNodes.length / 2);
+    }
+  }
+
   // getComputedStyle causes the initial style (opacity 0) to be applied, so
   // that when we then set it to 1, that triggers the CSS transition.
   if (fadeIn) {