MD Settings: Convert reset profile banner to a dialog.

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

Index: chrome/browser/resources/settings/reset_page/reset_profile_banner.html
diff --git a/chrome/browser/resources/settings/reset_page/reset_profile_banner.html b/chrome/browser/resources/settings/reset_page/reset_profile_banner.html
index 16285e1dd91b1c9ca6587b1628ea56ad793da56f..dffea73a0e19df1d7aa1968ffbf9c52a2758d4c7 100644
--- a/chrome/browser/resources/settings/reset_page/reset_profile_banner.html
+++ b/chrome/browser/resources/settings/reset_page/reset_profile_banner.html
@@ -1,73 +1,31 @@
-<link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">

[dschuyler, 2017/02/15 00:24:19]

I know we used to import polymer.html first because we needed to, but I believe
we are able to alphabetize the imports now. Can these be alphabetized?

[dpapad, 2017/02/15 02:12:20]

I am not 100% sure that is accurate. The only reason it works with either order
in prod, is because some other element has already included polymer.html. If you
run this element in isolation in a test, polymer.html still needs to be the
first thing that is included (so that it configures Polymer correctly).

[dschuyler, 2017/02/15 20:26:17]

Thanks for pointing out the config.

 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="reset_browser_proxy.html">
-<link rel="import" href="reset_profile_dialog.html">
+<link rel="import" href="../route.html">
 
 <dom-module id="settings-reset-profile-banner">
   <template>
-      <style>
-        #banner-content {
-          background-color: white;
-          border: 1px solid #c8c8c8;
-          border-radius: 3px;
-          margin-bottom: 24px;
-        }
-
-        #top-row {
-          display: flex;
-          justify-content: flex-end;
-        }
-
-        #main-body {
-          align-items: center;
-          display: flex;
-          padding: 0 17px 17px;
-        }
-
-        #description {
-          -webkit-margin-start: 18px;
-          flex: 1;
-        }
-
-        #close {
-          height: 30px;
-        }
-
-        #reset {
-          -webkit-margin-start: 30px;
-          background-color: rgb(66, 133, 244);
-          color: white;
-          font-weight: 500;
-        }
-
-        a {
-          color: rgb(66, 133, 244);
-          text-decoration: none;
-        }
-      </style>
-    <div id="banner-content">
-      <div id="top-row">
-        <paper-icon-button icon="cr:clear" on-tap="onCloseTap_" id="close">
-        </paper-icon-button>
-      </div>
-      <div id="main-body">
+    <style include="settings-shared"></style>
+    <dialog is="cr-dialog" id="dialog" ignore-popstate>
+      <div class="title">$i18n{resetAutomatedDialogTitle}</div>
+      <div class="body">
         <span id="description">
           $i18n{resetProfileBannerDescription}
           <a id="learnMore"
              href="$i18nRaw{resetProfileBannerLearnMoreUrl}"
              target="_blank">$i18n{learnMore}</a>
         </span>
-        <paper-button id="reset" on-tap="showDialog_">
+      </div>
+      <div class="button-container">
+        <paper-button class="cancel-button" on-tap="onOkTap_" id="ok">
+          $i18n{ok}
+        </paper-button>
+        <paper-button class="action-button" on-tap="onResetTap_" id="reset">
           $i18n{resetProfileBannerButton}
         </paper-button>
       </div>
-    </div>
-    <template is="dom-if" if="[[showResetProfileDialog_]]" restamp>
-      <settings-reset-profile-dialog on-close="onDialogClose_">
-      </settings-reset-profile-dialog>
-    </template>
+    </dialog>
   </template>
   <script src="reset_profile_banner.js"></script>
 </dom-module>