[NTP] Fix rebalancing for the shortcuts on window resize

getTilesPerRow_() only checked the grid's maximum number of tiles per
row when detecting if the tiles needed to be rebalanced. Therefore, if
the window's maximum tiles per row was less, the tiles were not
rebalanced.

Use the lesser of the two maximums when detecting if the tiles need to
be rebalanced.

Screencast: https://drive.google.com/open?id=19amLd8JRyzLSzBeA4Ypt7PIZYlaqhaIz

Bug: 961203
Change-Id: I3200a043b40b3282a61a7512e00e6b6ae4ebbd15
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1603209
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#658367}

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -237,14 +237,20 @@ class Grid {
     this.tileWidth_ = 0;
     /** @private {number} */
     this.tilesAlwaysVisible_ = 0;
-    /** @private {number} */
+    /**
+     * The maximum number of tiles per row allowed by the grid parameters.
+     * @private {number}
+     */
     this.maxTilesPerRow_ = 0;
     /** @private {number} */
     this.maxTiles_ = 0;
 
     /** @private {number} */
     this.gridWidth_ = 0;
-    /** @private {number} */
+    /**
+     * The maximum number of tiles per row allowed by the window width.
+     * @private {number}
+     */
     this.maxTilesPerRowWindow_ = 0;
 
     /** @private {?Element} */
@@ -393,17 +399,24 @@ class Grid {
 
 
   /**
-   * Returns the number of tiles per row. This may be balanced if there are more
-   * than |this.maxTilesPerRow_| in order to make even rows.
+   * Returns the number of tiles per row. This may be balanced in order to make
+   * even rows.
    * @return {number} The number of tiles per row.
    * @private
    */
   getTilesPerRow_() {
-    const tilesPerRow = (this.tiles_.length > this.maxTilesPerRow_) ?
-        Math.ceil(this.tiles_.length / 2) :
-        this.tiles_.length;
-    // The number of tiles cannot exceed the max allowed by the window size.
-    return Math.min(tilesPerRow, this.maxTilesPerRowWindow_);
+    const maxTilesPerRow =
+        Math.min(this.maxTilesPerRow_, this.maxTilesPerRowWindow_);
+    if (this.tiles_.length >= maxTilesPerRow * 2) {
+      // We have enough for two full rows, so just return the max.
+      return maxTilesPerRow;
+    } else if (this.tiles_.length > maxTilesPerRow) {
+      // We have have a little more than one full row, so we need to rebalance.
+      return Math.ceil(this.tiles_.length / 2);
+    } else {
+      // We have (less than) a full row, so just return the tiles we have.
+      return this.tiles_.length;
+    }
   }
 
 

chrome/test/data/local_ntp/most_visited_browsertest.js

@@ -321,6 +321,44 @@ test.mostVisited.testGridResizeRtl = function() {
 };
 
 
+/**
+ * Tests if the grid rebalances correctly when the window is resized.
+ */
+test.mostVisited.testGridResizeRebalance = function() {
+  const params = {  // Used to override the default grid parameters.
+    tileHeight: 10,
+    tileWidth: 10,
+    tilesAlwaysVisible: 6,
+    maxTilesPerRow: 5,
+    maxTiles: 10
+  };
+
+  window.innerWidth = 50;
+  // Create a grid a full row.
+  let container = document.createElement('div');
+  let expectedLayout = [
+    'translate(0px, 0px)', 'translate(10px, 0px)', 'translate(20px, 0px)',
+    'translate(30px, 0px)', 'translate(40px, 0px)'
+  ];
+  test.mostVisited.initGridWithAdd(container, params, 5);
+  assertEquals('50px', container.style.width);
+  test.mostVisited.assertLayout(container, expectedLayout);
+  test.mostVisited.assertVisibility(container, 0);
+
+  // Shrink the window so that only 4 tiles can fit in a row.
+  window.innerWidth = 40;
+  // The tiles should rebalance.
+  let expectedLayoutRebalance = [
+    'translate(0px, 0px)', 'translate(10px, 0px)', 'translate(20px, 0px)',
+    'translate(5px, 10px)', 'translate(15px, 10px)'
+  ];
+  test.mostVisited.grid.onResize();
+  assertEquals('30px', container.style.width);
+  test.mostVisited.assertLayout(container, expectedLayoutRebalance);
+  test.mostVisited.assertVisibility(container, 0);
+};
+
+
 /**
  * Tests if all tiles except the add button can be reordered.
  */