show focus state of customize dialog of ntp

add css for displaying focus state to customize dialog of ntp.
we can see focus state as outline.

Bug: 1119748
Change-Id: Ib2ad19ac421b61c3945d94e53ce36a6136bd9701
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2377180Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#802811}

AUTHORS

@@ -185,6 +185,7 @@ Changyeon Kim <cyzero.kim@samsung.com>
 Chanho Park <parkch98@gmail.com>
 Chansik Yun <chansik.yun@gmail.com>
 Chany Arpin-Plante <chany.arpin@gmail.com>
+Chanyong Moon <dev.chanyongmoon@gmail.com>
 Chaobin Zhang <zhchbin@gmail.com>
 Charles Vaughn <cvaughn@gmail.com>
 Cheng Zhao <zcbenz@gmail.com>

chrome/browser/resources/new_tab_page/customize_dialog.html

@@ -88,6 +88,11 @@
     flex-direction: column;
   }
 
+  #menuSelector {
+    margin-bottom: 2px;
+    margin-top: 2px;
+  }
+
   .menu-item {
     align-items: center;
     border-radius: 0 16px 16px 0;
@@ -110,11 +115,14 @@
     border-radius: 16px 0 0 16px;
   }
 
-  .menu-item:hover,
-  .menu-item:focus {
+  .menu-item:hover {
     background-color: var(--ntp-hover-background-color);
   }
 
+  .menu-item:focus {
+    box-shadow: var(--ntp-focus-shadow);
+  }
+
   .menu-item:active {
     background-color: var(--ntp-active-background-color);
   }
@@ -195,7 +203,7 @@
     <div id="bodyContainer">
       <div id="menuContainer">
         <div id="menu">
-          <iron-selector selected-attribute="selected"
+          <iron-selector id="menuSelector" selected-attribute="selected"
               attr-for-selected="page-name" selected="{{selectedPage_}}"
               on-keydown="onMenuItemKeyDown_">
             <div class="menu-item" page-name="backgrounds" tabindex="0">