[NTP] Center the background picker

Remove the overlay element, and instead make the menu itself a
dialog. This results in the picker being centered properly.

Bug: 855198
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: Ic77afee81667d9267a87362a80debfa2724bc05e
Reviewed-on: https://chromium-review.googlesource.com/1112063Reviewed-by: Mathieu Perreault <mathp@chromium.org>
Commit-Queue: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#569865}

chrome/browser/resources/local_ntp/custom_backgrounds.css

@@ -118,19 +118,13 @@
   white-space: nowrap;
 }
 
-#bg-sel-menu-overlay {
+#bg-sel-menu::backdrop {
   background-color: rgba(255, 255, 255, .75);
-  border: none;
-  height: 100%;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 1000;
 }
 
 #bg-sel-menu {
   background-color: #fff;
+  border: none;
   border-radius: 4px;
   bottom: 0;
   box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
@@ -138,6 +132,7 @@
   height: 400px;
   left: 0;
   margin: auto;
+  padding: 0 0 0 0;
   position: absolute;
   right: 0;
   top: 0;

chrome/browser/resources/local_ntp/custom_backgrounds.js

@@ -37,7 +37,6 @@ customBackgrounds.IDS = {
   EDIT_BG_OVERLAY: 'edit-bg-overlay',
   MENU: 'bg-sel-menu',
   OPTIONS_TITLE: 'edit-bg-title',
-  OVERLAY: 'bg-sel-menu-overlay',
   RESTORE_DEFAULT: 'edit-bg-restore-default',
   RESTORE_DEFAULT_TEXT: 'edit-bg-restore-default-text',
   REFRESH_TEXT: 'bg-sel-refresh-text',
@@ -97,18 +96,16 @@ customBackgrounds.resetSelectionDialog = function() {
  */
 customBackgrounds.showCollectionSelectionDialog = function() {
   var tileContainer = $(customBackgrounds.IDS.TILES);
-  var overlay = $(customBackgrounds.IDS.OVERLAY);
+  var menu = $(customBackgrounds.IDS.MENU);
 
-  if (!overlay.open)
-    overlay.showModal();
+  if (!menu.open)
+    menu.showModal();
 
   // Create dialog header
   $(customBackgrounds.IDS.TITLE).textContent =
       configData.translatedStrings.selectChromeWallpaper;
-  $(customBackgrounds.IDS.MENU)
-      .classList.add(customBackgrounds.CLASSES.COLLECTION_DIALOG);
-  $(customBackgrounds.IDS.MENU)
-      .classList.remove(customBackgrounds.CLASSES.IMAGE_DIALOG);
+  menu.classList.add(customBackgrounds.CLASSES.COLLECTION_DIALOG);
+  menu.classList.remove(customBackgrounds.CLASSES.IMAGE_DIALOG);
 
   // Create dialog tiles
   for (var i = 0; i < coll.length; ++i) {
@@ -146,7 +143,7 @@ customBackgrounds.showCollectionSelectionDialog = function() {
             coll_img[0].collectionId == tile.dataset.id) {
           customBackgrounds.showImageSelectionDialog(tile.dataset.name);
         } else {
-          overlay.close();
+          menu.close();
           customBackgrounds.resetSelectionDialog();
         }
       };
@@ -169,9 +166,9 @@ customBackgrounds.showCollectionSelectionDialog = function() {
   $(customBackgrounds.IDS.DONE).textContent =
       configData.translatedStrings.selectionDone;
 
-  overlay.onclick = function(event) {
-    if (event.target == overlay) {
-      overlay.close();
+  menu.onclick = function(event) {
+    if (event.target == menu) {
+      menu.close();
       customBackgrounds.resetSelectionDialog();
     }
   };
@@ -210,15 +207,13 @@ customBackgrounds.showImageSelectionDialog = function(dialogTitle) {
   var backButton = $(customBackgrounds.IDS.BACK);
   var dailyRefresh = $(customBackgrounds.IDS.REFRESH_TOGGLE);
   var doneButton = $(customBackgrounds.IDS.DONE);
-  var overlay = $(customBackgrounds.IDS.OVERLAY);
+  var menu = $(customBackgrounds.IDS.MENU);
   var selectedTile = null;
   var tileContainer = $(customBackgrounds.IDS.TILES);
 
   $(customBackgrounds.IDS.TITLE).textContent = dialogTitle;
-  $(customBackgrounds.IDS.MENU)
-      .classList.remove(customBackgrounds.CLASSES.COLLECTION_DIALOG);
-  $(customBackgrounds.IDS.MENU)
-      .classList.add(customBackgrounds.CLASSES.IMAGE_DIALOG);
+  menu.classList.remove(customBackgrounds.CLASSES.COLLECTION_DIALOG);
+  menu.classList.add(customBackgrounds.CLASSES.IMAGE_DIALOG);
 
   for (var i = 0; i < coll_img.length; ++i) {
     var tile = document.createElement('div');
@@ -270,7 +265,7 @@ customBackgrounds.showImageSelectionDialog = function(dialogTitle) {
     if (!selectedTile)
       return;
 
-    overlay.close();
+    menu.close();
     window.chrome.embeddedSearch.newTabPage.setBackgroundURL(
         selectedTile.dataset.url);
     customBackgrounds.resetSelectionDialog();
@@ -413,7 +408,7 @@ customBackgrounds.initCustomBackgrounds = function() {
       if ($(customBackgrounds.IDS.MENU)
               .classList.contains(
                   customBackgrounds.CLASSES.COLLECTION_DIALOG)) {
-        $(customBackgrounds.IDS.OVERLAY).close();
+        $(customBackgrounds.IDS.MENU).close();
         $(customBackgrounds.IDS.EDIT_BG).focus();
       } else {
         customBackgrounds.resetSelectionDialog();

chrome/browser/resources/local_ntp/local_ntp.html

@@ -103,8 +103,7 @@
 
   </div>
 
-  <dialog id="bg-sel-menu-overlay">
-    <div id="bg-sel-menu">
+    <dialog id="bg-sel-menu">
       <div id="bg-sel-title-bar">
       <div id="bg-sel-back"></div>
       <div id="bg-sel-title"></div>
@@ -118,8 +117,7 @@
         <div id="bg-sel-refresh-text"></div>
         <div id="bg-sel-footer-done"></div>
       </div>
-    </div>
-  </dialog>
+    </dialog>
 
   <dialog id="voice-overlay-dialog" class="overlay-dialog">
     <div id="voice-overlay" class="overlay-hidden">

chrome/test/data/local_ntp/local_ntp_browsertest.html

@@ -92,21 +92,19 @@
 
   </div>
 
-  <dialog id="bg-sel-menu-overlay">
-    <div id="bg-sel-menu">
-      <div id="bg-sel-title-bar">
-      <div id="bg-sel-back"></div>
-      <div id="bg-sel-title"></div>
-      </div>
-      <div id="bg-sel-tiles"></div>
-      <div id="bg-sel-footer">
-        <label id="bg-daily-refresh" class="switch">
-          <input type="checkbox">
-          <span class="toggle"></span>
-        </label>
-        <div id="bg-sel-refresh-text"></div>
-        <div id="bg-sel-footer-done"></div>
-      </div>
+  <dialog id="bg-sel-menu">
+    <div id="bg-sel-title-bar">
+    <div id="bg-sel-back"></div>
+    <div id="bg-sel-title"></div>
+    </div>
+    <div id="bg-sel-tiles"></div>
+    <div id="bg-sel-footer">
+      <label id="bg-daily-refresh" class="switch">
+        <input type="checkbox">
+        <span class="toggle"></span>
+      </label>
+      <div id="bg-sel-refresh-text"></div>
+      <div id="bg-sel-footer-done"></div>
     </div>
   </dialog>