WebUI: removing X close button for most instances of cr-dialog

Bug: 806990
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I88014d77169c3b6f75c5905fa4219b8be92e6fa4
Reviewed-on: https://chromium-review.googlesource.com/1060265Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#559330}

chrome/browser/resources/md_extensions/options_dialog.html

@@ -48,7 +48,7 @@
     </style>
 
     <cr-dialog id="dialog" close-text="$i18n{close}"
-        on-close="onClose_">
+        on-close="onClose_" show-close-button>
       <div slot="title">
         <div id="icon-and-name-wrapper">
           <img id="icon" src="[[data_.iconUrl]]"

chrome/browser/resources/md_user_manager/error_dialog.html

@@ -16,7 +16,7 @@
         word-wrap: break-word;
       }
     </style>
-    <cr-dialog id="dialog">
+    <cr-dialog id="dialog" show-close-button>
       <div slot="body">
         <div id="message">[[message_]]</div>
       </div>

chrome/browser/resources/print_preview/new/advanced_settings_dialog.html

@@ -16,7 +16,7 @@
   <style include="print-preview-shared search-dialog button cr-hidden-style">
   </style>
   <template>
-    <cr-dialog id="dialog" on-close="onCloseOrCancel_">
+    <cr-dialog id="dialog" on-close="onCloseOrCancel_" show-close-button>
       <div slot="title">
         <div>[[i18n('advancedSettingsDialogTitle', destination.displayName)]]
         </div>

chrome/browser/resources/print_preview/new/destination_dialog.html

@@ -104,7 +104,7 @@
         padding: 12px 0;
       }
     </style>
-    <cr-dialog id="dialog" on-close="onCloseOrCancel_">
+    <cr-dialog id="dialog" on-close="onCloseOrCancel_" show-close-button>
       <div slot="title">
         <div>$i18n{destinationSearchTitle}</div>
         <div class="user-info" hidden$="[[!userInfo.loggedIn]]">

chrome/browser/resources/print_preview/new/provisional_destination_resolver.html

@@ -58,7 +58,7 @@
         margin: 0 3px 10px;
       }
     </style>
-    <cr-dialog id="dialog" on-close="onCancel_">
+    <cr-dialog id="dialog" on-close="onCancel_" show-close-button>
       <div slot="body">
         <p class="message">
           [[getPermissionMessage_(state_, destination_.extensionName)]]

chrome/test/data/webui/cr_elements/cr_dialog_test.js

@@ -248,4 +248,41 @@ suite('cr-dialog', function() {
     dialog.dispatchEvent(e);
     assertFalse(e.defaultPrevented);
   });
+
+  test('dialog close button shown when showCloseButton is true', function() {
+    document.body.innerHTML = `
+      <cr-dialog show-close-button>
+        <div slot="title">title</div>
+      </cr-dialog>`;
+
+    const dialog = document.body.querySelector('cr-dialog');
+    dialog.showModal();
+    assertTrue(dialog.open);
+
+    // The paper-icon-button-light is the hidden element which is the
+    // parentElement of the button.
+    assertFalse(dialog.getCloseButton().parentElement.hidden);
+    assertEquals(
+        'block',
+        window.getComputedStyle(dialog.getCloseButton().parentElement).display);
+    dialog.getCloseButton().click();
+    assertFalse(dialog.open);
+  });
+
+  test('dialog close button hidden when showCloseButton is false', function() {
+    document.body.innerHTML = `
+      <cr-dialog>
+        <div slot="title">title</div>
+      </cr-dialog>`;
+
+    const dialog = document.body.querySelector('cr-dialog');
+    dialog.showModal();
+
+    // The paper-icon-button-light is the hidden element which is the
+    // parentElement of the button.
+    assertTrue(dialog.getCloseButton().parentElement.hidden);
+    assertEquals(
+        'none',
+        window.getComputedStyle(dialog.getCloseButton().parentElement).display);
+  });
 });

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html

@@ -142,7 +142,7 @@
             <slot name="title"></slot>
           </div>
           <paper-icon-button-light id="closeContainer" class="icon-clear"
-              hidden$="[[noCancel]]">
+              hidden$="[[!showCloseButton]]">
             <button id="close" aria-label$="[[closeText]]"
                 on-tap="cancel" on-keypress="onCloseKeypress_">
             </button>

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js

@@ -52,13 +52,19 @@ Polymer({
     },
 
     /**
-     * True if the dialog should not be able to be cancelled, which will hide
-     * the 'x' button and prevent 'Escape' key presses from closing the dialog.
+     * True if the dialog should not be able to be cancelled, which will prevent
+     * 'Escape' key presses from closing the dialog.
      */
     noCancel: {
       type: Boolean,
       value: false,
     },
+
+    // True if dialog should show the 'X' close button.
+    showCloseButton: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   listeners: {