[NTP] Fix flickering issue on custom background dialog

This CL modify a few event listener, using keydown event instead of
keyup event making the arrow key interaction between tiles will not
propagate to the menu. With this CL, when hitting arrow key on the tile
will not move the scroll unless it has to eg. the next focus item located
outside the current viewpoint.

Screencast:
https://screencast.googleplex.com/cast/NDgzNTA4MjMwOTIwNjAxNnw5NjFlYmFkZC0zNA

Bug: 872601
Change-Id: I352a28dbc0a05779818ee27fd9df563114caf6c2
Reviewed-on: https://chromium-review.googlesource.com/1187236Reviewed-by: Kristi Park <kristipark@chromium.org>
Commit-Queue: Weilun Shi <sweilun@chromium.org>
Cr-Commit-Position: refs/heads/master@{#585917}

chrome/browser/resources/local_ntp/custom_backgrounds.js

@@ -496,11 +496,11 @@ customBackgrounds.showCollectionSelectionDialog = function(collectionsSource) {
     };
 
     tile.onclick = tileInteraction;
-    tile.onkeyup = function(event) {
-      event.preventDefault();
-      event.stopPropagation();
+    tile.onkeydown = function(event) {
 
       if (event.keyCode === customBackgrounds.KEYCODES.ENTER) {
+        event.preventDefault();
+        event.stopPropagation();
         tileInteraction(event);
       }
 
@@ -515,6 +515,8 @@ customBackgrounds.showCollectionSelectionDialog = function(collectionsSource) {
         target = customBackgrounds.getNextTile(0, 1, this.dataset.tile_num);
       }
       if (target) {
+        event.preventDefault();
+        event.stopPropagation();
         target.focus();
       }
     };
@@ -667,11 +669,11 @@ customBackgrounds.showImageSelectionDialog = function(dialogTitle) {
             this.dataset.attributionActionUrl);
       }
     };
-    tile.onkeyup = function(event) {
-      event.preventDefault();
-      event.stopPropagation();
+    tile.onkeydown = function(event) {
 
       if (event.keyCode === customBackgrounds.KEYCODES.ENTER) {
+        event.preventDefault();
+        event.stopPropagation();
         tileInteraction(event);
       }
 
@@ -686,6 +688,8 @@ customBackgrounds.showImageSelectionDialog = function(dialogTitle) {
         target = customBackgrounds.getNextTile(0, 1, this.dataset.tile_num);
       }
       if (target) {
+        event.preventDefault();
+        event.stopPropagation();
         target.focus();
       }
     };
@@ -1137,11 +1141,12 @@ customBackgrounds.initCustomBackgrounds = function() {
   };
 
   // On any arrow key event in the tiles area, focus the first tile.
-  $(customBackgrounds.IDS.TILES).onkeyup = function(event) {
+  $(customBackgrounds.IDS.TILES).onkeydown = function(event) {
     if (event.keyCode === customBackgrounds.KEYCODES.LEFT ||
         event.keyCode === customBackgrounds.KEYCODES.UP ||
         event.keyCode === customBackgrounds.KEYCODES.RIGHT ||
         event.keyCode === customBackgrounds.KEYCODES.DOWN) {
+      event.preventDefault();
       if ($(customBackgrounds.IDS.MENU)
               .classList.contains(
                   customBackgrounds.CLASSES.COLLECTION_DIALOG)) {