Support tab navigation for custom backgrounds UI

Allow users to interact with the custom backgrounds UI with
only the keyboard.

Bug: 851173
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ic442995e2a68d147942ad7625ea0e8a202e40137
Reviewed-on: https://chromium-review.googlesource.com/1097576
Commit-Queue: Kyle Milka <kmilka@chromium.org>
Reviewed-by: Marc Treib <treib@chromium.org>
Cr-Commit-Position: refs/heads/master@{#567316}

chrome/browser/resources/local_ntp/custom_backgrounds.css

@@ -94,7 +94,7 @@
 
 #bg-sel-menu-overlay {
   background-color: rgba(255, 255, 255, .75);
-  display: none;
+  border: none;
   height: 100%;
   left: 0;
   position: fixed;

chrome/browser/resources/local_ntp/local_ntp.html

@@ -74,27 +74,27 @@
     </div>
     <div id="attribution"><div id="attribution-text"></div></div>
 
-    <div id="edit-bg" hidden>
+    <div id="edit-bg" tabindex="0" hidden>
       <button id="edit-bg-gear"></button>
     </div>
 
     <div id="edit-bg-overlay">
       <div id="edit-bg-dialog">
         <div id="edit-bg-title"></div>
-        <div id="edit-bg-google-photos" class="bg-option">
+        <div id="edit-bg-google-photos" class="bg-option" tabindex="0" hidden>
           <div class="bg-option-img"></div>
           <div id="edit-bg-google-photos-text" class="bg-option-text"></div>
         </div>
-        <div id="edit-bg-default-wallpapers" class="bg-option">
+        <div id="edit-bg-default-wallpapers" class="bg-option" tabindex="0">
           <div class="bg-option-img"></div>
           <div id="edit-bg-default-wallpapers-text" class="bg-option-text">
           </div>
         </div>
-        <div id="edit-bg-upload-image" class="bg-option">
+        <div id="edit-bg-upload-image" class="bg-option" tabindex="0" hidden>
           <div class="bg-option-img"></div>
           <div id="edit-bg-upload-image-text" class="bg-option-text"></div>
         </div>
-        <div id="edit-bg-restore-default" class="bg-option">
+        <div id="edit-bg-restore-default" class="bg-option" tabindex="0">
           <div class="bg-option-img"></div>
           <div id="edit-bg-restore-default-text" class="bg-option-text"></div>
         </div>
@@ -103,7 +103,7 @@
 
   </div>
 
-  <div id="bg-sel-menu-overlay">
+  <dialog id="bg-sel-menu-overlay">
     <div id="bg-sel-menu">
       <div id="bg-sel-title-bar">
       <div id="bg-sel-back"></div>
@@ -119,7 +119,7 @@
         <div id="bg-sel-footer-done"></div>
       </div>
     </div>
-  </div>
+  </dialog>
 
   <dialog id="voice-overlay-dialog" class="overlay-dialog">
     <div id="voice-overlay" class="overlay-hidden">

chrome/browser/resources/local_ntp/local_ntp.js

@@ -276,7 +276,6 @@ function getIsThemeDark() {
   return luminance >= 128;
 }
 
-
 /**
  * Updates the NTP based on the current theme.
  * @private
@@ -307,21 +306,6 @@ function renderTheme() {
   if (configData.isGooglePage) {
     $('edit-bg').hidden =
         !configData.isCustomBackgroundsEnabled || !info.usingDefaultTheme;
-    $('edit-bg').onclick = function(event) {
-      var collElement = $('ntp-collection-loader');
-      if (collElement) {
-        collElement.parentNode.removeChild(collElement);
-      }
-      // Load the NTPBackgroundCollections script. It'll create a global
-      // variable name "coll" which is a dict of background collections data.
-      var collScript = document.createElement('script');
-      collScript.id = 'ntp-collection-loader';
-      collScript.src =
-          'chrome-search://local-ntp/ntp-background-collections.js';
-      document.body.appendChild(collScript);
-    };
-    if (configData.isCustomBackgroundsEnabled && info.usingDefaultTheme)
-      customBackgrounds.initCustomBackgrounds();
   }
 }
 
@@ -825,6 +809,9 @@ function init() {
       enableMDIcons();
     }
 
+    if (configData.isCustomBackgroundsEnabled)
+      customBackgrounds.initCustomBackgrounds();
+
     // Set up the fakebox (which only exists on the Google NTP).
     ntpApiHandle.oninputstart = onInputStart;
     ntpApiHandle.oninputcancel = onInputCancel;

chrome/test/data/local_ntp/local_ntp_browsertest.html

@@ -92,7 +92,7 @@
 
   </div>
 
-  <div id="bg-sel-menu-overlay">
+  <dialog id="bg-sel-menu-overlay">
     <div id="bg-sel-menu">
       <div id="bg-sel-title-bar">
       <div id="bg-sel-back"></div>
@@ -108,7 +108,7 @@
         <div id="bg-sel-footer-done"></div>
       </div>
     </div>
-  </div>
+  </dialog>
 
     <dialog id="voice-overlay-dialog" class="overlay-dialog">
       <div id="voice-overlay" class="overlay-hidden">