[NTP] Clicking on the customize this page dialog will not close the dialog

Adding an additional div container on top of the "customize this page"
dialog can make sure the dialog will close only when we click outside
the dialog. Also, clicking on the disabled option will no longer close
the dialog.

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

chrome/browser/resources/local_ntp/custom_backgrounds.css

@@ -68,9 +68,13 @@ html[dir=rtl] #edit-bg {
   bottom: 44px;
   box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
   left: auto;
-  padding: 0 0 16px 0;
+  padding: 0;
   position: fixed;
   right: 16px;
+}
+
+#edit-bg-menu {
+  padding: 0 0 16px 0;
   width: 325px;
 }
 
@@ -212,7 +216,7 @@ html[dir=rtl] .bg-option-text {
 /* The width is decided by the longest text length plus 16px margin on the
 right, so that every text can stay on its row even on the smallest window */
 @media (max-width: 356px) {
-  #edit-bg-dialog {
+  #edit-bg-menu {
     width: 232px;
   }
 }

chrome/browser/resources/local_ntp/custom_backgrounds.js

@@ -81,6 +81,7 @@ customBackgrounds.IDS = {
   EDIT_BG_DIALOG: 'edit-bg-dialog',
   EDIT_BG_DIVIDER: 'edit-bg-divider',
   EDIT_BG_GEAR: 'edit-bg-gear',
+  EDIT_BG_MENU: 'edit-bg-menu',
   MSG_BOX: 'message-box',
   MSG_BOX_MSG: 'message-box-message',
   MSG_BOX_LINK: 'message-box-link',
@@ -822,8 +823,9 @@ customBackgrounds.init = function(showErrorNotification) {
 
   // Find the first menu option that is not hidden or disabled.
   let findFirstMenuOption = () => {
-    for (let i = 1; i < editDialog.children.length; i++) {
-      let option = editDialog.children[i];
+    let editMenu = $(customBackgrounds.IDS.EDIT_BG_MENU);
+    for (let i = 1; i < editMenu.children.length; i++) {
+      let option = editMenu.children[i];
       if (option.classList.contains(customBackgrounds.CLASSES.OPTION)
           && !option.hidden && !option.classList.contains(
               customBackgrounds.CLASSES.OPTION_DISABLED)) {
@@ -855,7 +857,7 @@ customBackgrounds.init = function(showErrorNotification) {
     editDialog.close();
   };
   editDialog.onclick = function(event) {
-    if (event.target == editDialog)
+    if (event.target === editDialog)
       editDialogInteraction();
   };
   editDialog.onkeydown = function(event) {
@@ -909,8 +911,12 @@ customBackgrounds.initCustomLinksItems = function() {
     ntpApiHandle.logEvent(BACKGROUND_CUSTOMIZATION_LOG_TYPE
                               .NTP_CUSTOMIZE_RESTORE_SHORTCUTS_CLICKED);
   };
-  $(customBackgrounds.IDS.CUSTOM_LINKS_RESTORE_DEFAULT).onclick =
-      customLinksRestoreDefaultInteraction;
+  $(customBackgrounds.IDS.CUSTOM_LINKS_RESTORE_DEFAULT).onclick = () => {
+    if (!$(customBackgrounds.IDS.CUSTOM_LINKS_RESTORE_DEFAULT).classList.
+        contains(customBackgrounds.CLASSES.OPTION_DISABLED)) {
+      customLinksRestoreDefaultInteraction();
+    }
+  };
   $(customBackgrounds.IDS.CUSTOM_LINKS_RESTORE_DEFAULT).onkeydown = function(
       event) {
     if (event.keyCode === customBackgrounds.KEYCODES.ENTER) {
@@ -984,7 +990,12 @@ customBackgrounds.initCustomBackgrounds = function(showErrorNotification) {
         BACKGROUND_CUSTOMIZATION_LOG_TYPE.NTP_CUSTOMIZE_LOCAL_IMAGE_CLICKED);
   };
 
-  $(customBackgrounds.IDS.UPLOAD_IMAGE).onclick = uploadImageInteraction;
+  $(customBackgrounds.IDS.UPLOAD_IMAGE).onclick = () => {
+    if (!$(customBackgrounds.IDS.UPLOAD_IMAGE).classList.contains(
+        customBackgrounds.CLASSES.OPTION_DISABLED)) {
+      uploadImageInteraction();
+    }
+  } ;
   $(customBackgrounds.IDS.UPLOAD_IMAGE).onkeydown = function(event) {
     if (event.keyCode === customBackgrounds.KEYCODES.ENTER) {
       uploadImageInteraction(event);
@@ -1013,7 +1024,12 @@ customBackgrounds.initCustomBackgrounds = function(showErrorNotification) {
     ntpApiHandle.logEvent(BACKGROUND_CUSTOMIZATION_LOG_TYPE
                               .NTP_CUSTOMIZE_RESTORE_BACKGROUND_CLICKED);
   };
-  $(customBackgrounds.IDS.RESTORE_DEFAULT).onclick = restoreDefaultInteraction;
+  $(customBackgrounds.IDS.RESTORE_DEFAULT).onclick = () => {
+    if (!$(customBackgrounds.IDS.RESTORE_DEFAULT).classList.contains(
+        customBackgrounds.CLASSES.OPTION_DISABLED)) {
+      restoreDefaultInteraction();
+    }
+  };
   $(customBackgrounds.IDS.RESTORE_DEFAULT).onkeydown = function(event) {
     if (event.keyCode === customBackgrounds.KEYCODES.ENTER) {
       restoreDefaultInteraction(event);

chrome/browser/resources/local_ntp/local_ntp.html

@@ -96,24 +96,26 @@
   </div>
 
   <dialog div id="edit-bg-dialog">
-    <div id="edit-bg-title"></div>
-    <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 id="edit-bg-menu">
+      <div id="edit-bg-title"></div>
+      <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" tabindex="0">
+        <div class="bg-option-img"></div>
+        <div id="edit-bg-upload-image-text" class="bg-option-text"></div>
+      </div>
+      <div id="edit-bg-divider"></div>
+      <div id="custom-links-restore-default" class="bg-option bg-option-disabled" tabindex="0">
+        <div class="bg-option-img"></div>
+        <div id="custom-links-restore-default-text" class="bg-option-text"></div>
+      </div>
+      <div id="edit-bg-restore-default" class="bg-option bg-option-disabled" tabindex="0">
+        <div class="bg-option-img"></div>
+        <div id="edit-bg-restore-default-text" class="bg-option-text"></div>
       </div>
-    </div>
-    <div id="edit-bg-upload-image" class="bg-option" tabindex="0">
-      <div class="bg-option-img"></div>
-      <div id="edit-bg-upload-image-text" class="bg-option-text"></div>
-    </div>
-    <div id="edit-bg-divider"></div>
-    <div id="custom-links-restore-default" class="bg-option bg-option-disabled" tabindex="0">
-      <div class="bg-option-img"></div>
-      <div id="custom-links-restore-default-text" class="bg-option-text"></div>
-    </div>
-    <div id="edit-bg-restore-default" class="bg-option bg-option-disabled" tabindex="0">
-      <div class="bg-option-img"></div>
-      <div id="edit-bg-restore-default-text" class="bg-option-text"></div>
     </div>
   </dialog>