[NTP] Explicitly hide MV tiles that are not visible

This will prevent keyboard navigation from reaching tiles that are not
visible.
Screencast: https://screencast.googleplex.com/cast/NTQ4MTM0NjE3MjQ1Mjg2NHxkYjlmMjExNy0zOQ

Bug: 889792
Change-Id: Id4c327417d97d9fa0b28f94fd3f98ddf97c4fc1d
Reviewed-on: https://chromium-review.googlesource.com/1252377
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: Ramya Nagarajan <ramyan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#595545}

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -103,13 +103,46 @@ var TileVisualType = {
   THUMBNAIL_FAILED: 8,
 };
 
+
+/**
+ * Timeout delay for the window.onresize event throttle. Set to 15 frame per
+ * second.
+ * @const {number}
+ */
+const RESIZE_TIMEOUT_DELAY = 66;
+
+
+/**
+ * Maximum number of tiles if custom links is enabled.
+ * @const {number}
+ */
+const MD_MAX_NUM_CUSTOM_LINK_TILES = 10;
+
+
 /**
- * Number of tiles per row for Material Design.
+ * Maximum number of tiles per row for Material Design.
  * @const {number}
  */
 const MD_MAX_TILES_PER_ROW = 5;
 
 
+/**
+ * Width of a tile for Material Design. Keep in sync with
+ * most_visited_single.css.
+ * @const {number}
+ */
+const MD_TILE_WIDTH = 112;
+
+
+/**
+ * Number of tiles that will always be visible for Material Design. Calculated
+ * by dividing minimum |--content-width| (see local_ntp.css) by |MD_TILE_WIDTH|
+ * and multiplying by 2 rows.
+ * @const {number}
+ */
+const MD_NUM_TILES_ALWAYS_VISIBLE = 6;
+
+
 /**
  * Number of lines to display in titles.
  * @type {number}
@@ -400,6 +433,9 @@ var swapInNewTiles = function() {
       cur.style.maxWidth =
           'calc(var(--md-tile-width) * ' + Math.ceil(cur.childNodes.length / 2);
     }
+
+    // Prevent keyboard navigation to tiles that are not visible.
+    updateTileVisibility();
   }
 
   // getComputedStyle causes the initial style (opacity 0) to be applied, so
@@ -414,6 +450,25 @@ var swapInNewTiles = function() {
   tiles = document.createElement('div');
 };
 
+
+/**
+ * Explicitly hide tiles that are not visible in order to prevent keyboard
+ * navigation.
+ */
+function updateTileVisibility() {
+  const allTiles =
+      document.querySelectorAll('#mv-tiles .' + CLASSES.MD_TILE_CONTAINER);
+  if (allTiles.length === 0)
+    return;
+
+  // Get the current number of tiles per row. Hide any tile after the first two
+  // rows.
+  const tilesPerRow = Math.trunc(document.body.offsetWidth / MD_TILE_WIDTH);
+  for (let i = MD_NUM_TILES_ALWAYS_VISIBLE; i < allTiles.length; i++)
+    allTiles[i].style.display = (i < tilesPerRow * 2) ? 'block' : 'none';
+}
+
+
 /**
  * Truncates titles that are longer than one line and appends an ellipsis. Text
  * overflow in CSS ("text-overflow: ellipsis") requires "overflow: hidden",
@@ -434,6 +489,7 @@ function truncateTitleText(titles) {
   }
 }
 
+
 /**
  * Handler for the 'show' message from the host page, called when it wants to
  * add a suggestion tile.
@@ -922,9 +978,20 @@ var init = function() {
 
   // Set the maximum number of tiles to show.
   if (isCustomLinksEnabled) {
-    maxNumTiles = 10;
+    maxNumTiles = MD_MAX_NUM_CUSTOM_LINK_TILES;
   }
 
+  // Throttle the resize event.
+  let resizeTimeout;
+  window.onresize = () => {
+    if (resizeTimeout)
+      return;
+    resizeTimeout = window.setTimeout(() => {
+      resizeTimeout = null;
+      updateTileVisibility();
+    }, RESIZE_TIMEOUT_DURATION);
+  };
+
   window.addEventListener('message', handlePostMessage);
 };