[NTP] Correct arrow key navigation through tiles

Make arrow key navigation through tiles not depend on the pixel width
of the dialog. When using the up and down keys first search for a tile
in the indicated direction that's in a different row ('top' is
different) then the tile that's in the same column ('left' is the same).

Bug: 896630
Change-Id: Ie5c9f7ebffba521dad1b8056626573c5015b3a36
Reviewed-on: https://chromium-review.googlesource.com/c/1335956Reviewed-by: Kristi Park <kristipark@chromium.org>
Commit-Queue: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#608389}

chrome/browser/resources/local_ntp/custom_backgrounds.js

@@ -391,17 +391,29 @@ customBackgrounds.getTilesWide = function() {
  * @param {string} current Number of the current tile.
  */
 customBackgrounds.getNextTile = function(deltaX, deltaY, current) {
-  let tilesWide = customBackgrounds.getTilesWide();
-
-  var targetNum = parseInt(current) + deltaX + (deltaY * tilesWide);
-
+  let idPrefix = 'coll_tile_';
   if ($(customBackgrounds.IDS.MENU)
           .classList.contains(customBackgrounds.CLASSES.IMAGE_DIALOG)) {
-    return $('img_tile_' + targetNum);
+    idPrefix = 'img_tile_';
   }
-  if ($(customBackgrounds.IDS.MENU)
-          .classList.contains(customBackgrounds.CLASSES.COLLECTION_DIALOG)) {
-    return $('coll_tile_' + targetNum);
+
+  if (deltaX != 0) {
+    let target = parseInt(current) + deltaX;
+    return $(idPrefix + target);
+  } else if (deltaY != 0) {
+    let target = parseInt(current);
+    let nextTile = $(idPrefix + target);
+    let startingTop = nextTile.getBoundingClientRect().top;
+    let startingLeft = nextTile.getBoundingClientRect().left;
+
+    // Search until a tile in a different row and the same column is found.
+    while (nextTile &&
+           (nextTile.getBoundingClientRect().top == startingTop ||
+            nextTile.getBoundingClientRect().left != startingLeft)) {
+      target += deltaY;
+      nextTile = $(idPrefix + target);
+    }
+    return nextTile;
   }
 };