MD Settings: Convert reset profile banner to a dialog.

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

-<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>