MD Settings: Creating a <settings-dialog> element.

The new element uses the Light DOM to get populated. Example
<my-new-dialog>
  <settings-dialog>
    <div class='title'>Title goes here</div>
    <div class='body'>Dialog body goes here</div>
    <div class='button-container'>buttons go here</div>
    <div class='footer'>footer content goes here</div>
  <settings-dialog>
</my-new-dialog>

Using the new dialog achieves code re-use for
 1) Positioning title, body and button-container and footer.
 2) Providing an 'x' close button at the top right.

BUG=591585

Review URL: https://codereview.chromium.org/1758973002

Cr-Commit-Position: refs/heads/master@{#379369}

chrome/browser/resources/settings/on_startup_page/startup_urls_page.html

@@ -1,13 +1,11 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dialog.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
-<link rel="import" href="chrome://md-settings/settings_dialog_css.html">
+<link rel="import" href="chrome://md-settings/settings_dialog.html">
 <link rel="import" href="chrome://md-settings/settings_shared_css.html">
 
 <dom-module id="settings-startup-urls-page">
   <link rel="import" type="css" href="on_startup_shared.css">
   <template>
-    <style include="settings-dialog"></style>
     <style include="settings-shared"></style>
     <div class="list-frame vertical-list">
       <template is="dom-repeat" items="[[startupPages_]]">
@@ -29,32 +27,23 @@
       </div>
     </div>
 
-    <paper-dialog modal id="addUrlDialog" class="layout vertical">
-      <div id="dialog-content">
-        <div class="top-row">
-          <div class="title" i18n-content="onStartupAddNewPage"></div>
-          <paper-icon-button icon="clear" on-tap="onCancelTap_" id="close">
-          </paper-icon-button>
-        </div>
-        <div class="body">
-          <div class="explanation">
-            <paper-input class="flex" always-float-label
-                i18n-values="label:onStartupSiteUrl" value="{{newUrl_}}">
-            </paper-input>
-          </div>
-          <div class="button-container">
-            <div class="action-buttons">
-              <paper-button class="cancel-button" on-tap="onCancelTap_"
-                  id="cancel" i18n-content="cancel"></paper-button>
-              <paper-button class="action-button" on-tap="onAddTap_"
-                  i18n-content="add" disabled="[[!isAddEnabled_(newUrl_)]]">
-              </paper-button>
-            </div>
-          </div>
+    <settings-dialog id="addUrlDialog">
+      <div class="title" i18n-content="onStartupAddNewPage"></div>
+      <div class="body">
+        <paper-input class="flex" always-float-label
+            i18n-values="label:onStartupSiteUrl" value="{{newUrl_}}">
+        </paper-input>
+      </div>
+      <div class="button-container">
+        <div class="action-buttons">
+          <paper-button class="cancel-button" on-tap="onCancelTap_"
+              id="cancel" i18n-content="cancel"></paper-button>
+          <paper-button class="action-button" on-tap="onAddTap_"
+              i18n-content="add" disabled="[[!isAddEnabled_(newUrl_)]]">
+          </paper-button>
         </div>
       </div>
-    </paper-dialog>
-
+    </settings-dialog>
   </template>
   <script src="startup_urls_page.js"></script>
 </dom-module>

chrome/browser/resources/settings/reset_page/powerwash_dialog.html

@@ -2,37 +2,28 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dialog.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="chrome://md-settings/settings_dialog_css.html">
+<link rel="import" href="chrome://md-settings/settings_dialog.html">
+<link rel="import" href="chrome://md-settings/settings_shared_css.html">
 
 <dom-module id="settings-powerwash-dialog">
   <link rel="import" type="css" href="reset_page_dialog.css">
   <template>
-    <style include="settings-dialog"></style>
-    <paper-dialog modal id="dialog">
-      <div id="dialog-content">
-        <div class="top-row">
-          <span class="title" i18n-content="powerwashDialogTitle"></span>
-          <paper-icon-button icon="clear" on-tap="onCancelTap_" id="close">
-          </paper-icon-button>
-        </div>
-        <div class="body">
-          <div class="explanation">
-            <span i18n-content="powerwashDialogExplanation"></span>
-            <a i18n-values="href:powerwashLearnMoreUrl"
-                i18n-content="learnMore" target="_blank"></a>
-          </div>
-          <div class="button-container">
-            <paper-button class="cancel-button" on-tap="onCancelTap_"
-                id="cancel" i18n-content="cancel"></paper-button>
-            <paper-button class="action-button" id="powerwash"
-                on-tap="onRestartTap_" i18n-content="powerwashDialogButton">
-            </paper-button>
-          </div>
-        </div>
+    <style include="settings-shared"></style>
+    <settings-dialog id="dialog">
+      <div class="title" i18n-content="powerwashDialogTitle"></div>
+      <div class="body">
+        <span i18n-content="powerwashDialogExplanation"></span>
+        <a i18n-values="href:powerwashLearnMoreUrl"
+            i18n-content="learnMore" target="_blank"></a>
       </div>
-    </paper-dialog>
+      <div class="button-container">
+        <paper-button class="cancel-button" on-tap="onCancelTap_"
+            id="cancel" i18n-content="cancel"></paper-button>
+        <paper-button class="action-button" id="powerwash"
+            on-tap="onRestartTap_" i18n-content="powerwashDialogButton">
+        </paper-button>
+      </div>
+    </settings-dialog>
   </template>
   <script src="powerwash_dialog.js"></script>
 </dom-module>

chrome/browser/resources/settings/reset_page/reset_page_dialog.css

@@ -2,10 +2,6 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-paper-button {
-  margin: 0;
-}
-
 a {
   color: rgb(66, 133, 244);
   text-decoration: none;

chrome/browser/resources/settings/reset_page/reset_profile_dialog.css

@@ -2,11 +2,7 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-paper-dialog {
-  width: 500px;
-}
-
-#feedbackBar {
+.footer {
   background-color: rgb(236, 236, 236);
   margin: 0;
   padding: 20px;

chrome/browser/resources/settings/reset_page/reset_profile_dialog.html

@@ -2,39 +2,30 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dialog.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
-<link rel="import" href="chrome://md-settings/settings_dialog_css.html">
+<link rel="import" href="chrome://md-settings/settings_dialog.html">
+<link rel="import" href="chrome://md-settings/settings_shared_css.html">
 
 <dom-module id="settings-reset-profile-dialog">
   <link rel="import" type="css" href="reset_page_dialog.css">
   <link rel="import" type="css" href="reset_profile_dialog.css">
   <template>
-    <style include="settings-dialog"></style>
-    <paper-dialog modal id="dialog">
-      <div id="dialog-content">
-        <div class="top-row">
-          <span class="title" i18n-content="resetPageTitle"></span>
-          <paper-icon-button icon="clear" on-tap="onCancelTap_" id="close">
-          </paper-icon-button>
-        </div>
-        <div class="body">
-          <div class="explanation">
-            <span i18n-content="resetPageExplanation"></span>
-            <a i18n-values="href:resetPageLearnMoreUrl"
-                i18n-content="learnMore" target="_blank"></a>
-          </div>
-          <div class="button-container">
-            <paper-spinner id="resetSpinner"></paper-spinner>
-            <paper-button class="cancel-button" on-tap="onCancelTap_"
-                id="cancel" i18n-content="cancel"></paper-button>
-            <paper-button class="action-button" on-tap="onResetTap_"
-                id="reset" i18n-content="resetPageCommit"></paper-button>
-          </div>
-        </div>
+    <style include="settings-shared"></style>
+    <settings-dialog id="dialog">
+      <div class="title" i18n-content="resetPageTitle"></div>
+      <div class="body">
+        <span i18n-content="resetPageExplanation"></span>
+        <a i18n-values="href:resetPageLearnMoreUrl"
+            i18n-content="learnMore" target="_blank"></a>
+      </div>
+      <div class="button-container">
+        <paper-spinner id="resetSpinner"></paper-spinner>
+        <paper-button class="cancel-button" on-tap="onCancelTap_"
+            id="cancel" i18n-content="cancel"></paper-button>
+        <paper-button class="action-button" on-tap="onResetTap_"
+            id="reset" i18n-content="resetPageCommit"></paper-button>
       </div>
-      <div id="feedbackBar">
+      <div class="footer">
         <paper-checkbox id="sendSettings" i18n-content="resetPageFeedback"
             checked on-change="onSendSettingsChange_"></paper-checkbox>
         <div id="settings">
@@ -43,7 +34,7 @@
           </template>
         </div>
       </div>
-    </paper-dialog>
+    </settings-dialog>
   </template>
   <script src="reset_profile_dialog.js"></script>
 </dom-module>

chrome/browser/resources/settings/reset_page/reset_profile_dialog.js

@@ -17,6 +17,7 @@ Polymer({
     feedbackInfo_: String,
   },
 
+  /** @override */
   attached: function() {
     cr.define('SettingsResetPage', function() {
       return {
@@ -33,6 +34,13 @@ Polymer({
     }.bind(this));
   },
 
+  /** @override */
+  ready: function() {
+    this.addEventListener('iron-overlay-canceled', function() {
+      chrome.send('onHideResetProfileDialog');
+    });
+  },
+
   dispatchResetDoneEvent: function() {
     this.dispatchEvent(new CustomEvent('reset-done'));
   },
@@ -44,8 +52,7 @@ Polymer({
 
   /** @private */
   onCancelTap_: function() {
-    this.$.dialog.close();
-    chrome.send('onHideResetProfileDialog');
+    this.$.dialog.cancel();
   },
 
   /** @private */

chrome/browser/resources/settings/search_engines_page/search_engine_dialog.html

@@ -2,52 +2,41 @@
 <link rel="import" href="chrome://md-settings/i18n_setup.html">
 <link rel="import" href="chrome://md-settings/search_engines_page/search_engines_browser_proxy.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dialog.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
-<link rel="import" href="chrome://md-settings/settings_dialog_css.html">
+<link rel="import" href="chrome://md-settings/settings_dialog.html">
 <link rel="import" href="chrome://md-settings/settings_shared_css.html">
 
 <dom-module id="settings-search-engine-dialog">
   <template>
-    <style include="settings-dialog"></style>
     <style include="settings-shared"></style>
-    <paper-dialog modal id="dialog">
-      <div id="dialog-content">
-        <div class="top-row">
-          <span class="title">[[dialogTitle_]]</span>
-          <paper-icon-button icon="clear" on-tap="cancel_" id="close">
-          </paper-icon-button>
-        </div>
-        <div class="body">
-          <div class="explanation">
-            <paper-input always-float-label id="searchEngine"
-                i18n-values="label:searchEnginesSearchEngine;error-message:searchEnginesNotValid"
-                value="{{searchEngine_}}" on-focus="validate_"
-                on-input="validate_">
-            </paper-input>
-            <paper-input always-float-label id="keyword"
-                i18n-values="label:searchEnginesKeyword;error-message:searchEnginesNotValid"
-                value="{{keyword_}}" on-focus="validate_" on-input="validate_">
-            </paper-input>
-            <paper-input always-float-label id="queryUrl"
-                i18n-values="label:searchEnginesQueryURLExplanation;error-message:searchEnginesNotValid"
-                value="{{queryUrl_}}" on-focus="validate_" on-input="validate_"
-                disabled$="[[model.urlLocked]]">
-            </paper-input>
-          </div>
-          <div class="button-container">
-            <paper-button class="cancel-button" on-tap="cancel_"
-                i18n-content="cancel" id="cancel"></paper-button>
-            <paper-button id="actionButton" class="action-button"
-                on-tap="onActionButtonTap_">
-              [[actionButtonText_]]
-            </paper-button>
-          </div>
-        </div>
+    <settings-dialog id="dialog">
+      <div class="title">[[dialogTitle_]]</div>
+      <div class="body">
+        <paper-input always-float-label id="searchEngine"
+            i18n-values="label:searchEnginesSearchEngine;error-message:searchEnginesNotValid"
+            value="{{searchEngine_}}" on-focus="validate_"
+            on-input="validate_">
+        </paper-input>
+        <paper-input always-float-label id="keyword"
+            i18n-values="label:searchEnginesKeyword;error-message:searchEnginesNotValid"
+            value="{{keyword_}}" on-focus="validate_" on-input="validate_">
+        </paper-input>
+        <paper-input always-float-label id="queryUrl"
+            i18n-values="label:searchEnginesQueryURLExplanation;error-message:searchEnginesNotValid"
+            value="{{queryUrl_}}" on-focus="validate_" on-input="validate_"
+            disabled$="[[model.urlLocked]]">
+        </paper-input>
       </div>
-    </paper-dialog>
+      <div class="button-container">
+        <paper-button class="cancel-button" on-tap="cancel_"
+            i18n-content="cancel" id="cancel"></paper-button>
+        <paper-button id="actionButton" class="action-button"
+            on-tap="onActionButtonTap_">
+          [[actionButtonText_]]
+        </paper-button>
+      </div>
+    </settings-dialog>
   </template>
   <script src="search_engine_dialog.js"></script>
 </dom-module>

chrome/browser/resources/settings/search_engines_page/search_engine_dialog.js

@@ -68,6 +68,10 @@ Polymer({
           loadTimeData.getString('searchEnginesAddSearchEngine');
       this.actionButtonText_ = loadTimeData.getString('add');
     }
+
+    this.addEventListener('iron-overlay-canceled', function() {
+      this.browserProxy_.searchEngineEditCancelled();
+    }.bind(this));
   },
 
   /** @override */
@@ -80,8 +84,7 @@ Polymer({
 
   /** @private */
   cancel_: function() {
-    this.browserProxy_.searchEngineEditCancelled();
-    this.$.dialog.close();
+    this.$.dialog.cancel();
   },
 
   /** @private */