[MD settings] change ClearBrowsingData from a sub-page to a dialog

chrome/browser/resources/settings/clear_browsing_data_page/clear_browsing_data_page.html

Index: chrome/browser/resources/settings/clear_browsing_data_page/clear_browsing_data_page.html
diff --git a/chrome/browser/resources/settings/clear_browsing_data_page/clear_browsing_data_page.html b/chrome/browser/resources/settings/clear_browsing_data_page/clear_browsing_data_page.html
index b377621dd799ed0dc4caceb664c3769e42ab9bdb..29edcce765af103d857d335728b07b72269db71b 100644
--- a/chrome/browser/resources/settings/clear_browsing_data_page/clear_browsing_data_page.html
+++ b/chrome/browser/resources/settings/clear_browsing_data_page/clear_browsing_data_page.html
@@ -2,61 +2,80 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://md-settings/controls/settings_checkbox.html">
 <link rel="import" href="chrome://md-settings/controls/settings_dropdown_menu.html">
+<link rel="import" href="chrome://md-settings/settings_dialog_css.html">
 <link rel="import" href="chrome://md-settings/settings_shared_css.html">
 
 <dom-module id="settings-clear-browsing-data-page">
   <link rel="import" type="css" href="clear_browsing_data_page.css">
   <template>
+    <style include="settings-dialog"></style>
     <style include="settings-shared"></style>
-    <div class="settings-box block">
-      <span i18n-content="clearFollowingItemsFrom"></span>
-      <settings-dropdown-menu id="clearFrom"
-          pref="{{prefs.browser.clear_data.time_period}}"
-          menu-options="[[clearFromOptions_]]">
-      </settings-dropdown-menu>
-      <settings-checkbox id="browsingCheckbox"
-          pref="{{prefs.browser.clear_data.browsing_history}}"
-          i18n-values="label:clearBrowsingHistory">
-      </settings-checkbox>
-      <settings-checkbox id="downloadCheckbox"
-          pref="{{prefs.browser.clear_data.download_history}}"
-          i18n-values="label:clearDownloadHistory">
-      </settings-checkbox>
-      <settings-checkbox
-          pref="{{prefs.browser.clear_data.cache}}"
-          i18n-values="label:clearCache">
-      </settings-checkbox>
-      <settings-checkbox
-          pref="{{prefs.browser.clear_data.cookies}}"
-          i18n-values="label:clearCookies">
-      </settings-checkbox>
-      <settings-checkbox
-          pref="{{prefs.browser.clear_data.passwords}}"
-          i18n-values="label:clearPasswords">
-      </settings-checkbox>
-      <settings-checkbox
-          pref="{{prefs.browser.clear_data.form_data}}"
-          i18n-values="label:clearFormData">
-      </settings-checkbox>
-      <settings-checkbox
-          pref="{{prefs.browser.clear_data.hosted_apps_data}}"
-          i18n-values="label:clearHostedAppData">
-      </settings-checkbox>
-      <settings-checkbox
-          pref="{{prefs.browser.clear_data.content_licenses}}"
-          i18n-values="label:clearDeauthorizeContentLicenses">
-      </settings-checkbox>
-    <!-- TODO(dbeam): <setting-box> is not a real thing. Fix this. -->
-    </settings-box>
-      <span i18n-content="warnAboutNonClearedData"></span>
-      <span i18n-content="clearsSyncedData"></span>
-    </settings-box>
-    <settings-box>
-      <paper-button id="clearDataButton" class="action-button"
-          on-tap="onPerformClearBrowsingDataTap_"
-          i18n-content="clearBrowsingData">
-      </paper-button>
-    </div>
+    <paper-dialog modal id="clearBrowsingDataDialog" class="layout vertical"
+        on-iron-overlay-closed="onDialogClosed_">
+      <div id="dialog-content">
+        <div class="top-row">
+          <div class="title" i18n-content="clearBrowsingData"></div>
+          <paper-icon-button icon="clear" id="close" dialog-dismiss>
+          </paper-icon-button>
+        </div>
+        <div class="body">
+          <div class="explanation">
+            <div class="row">
+              <span class="start" i18n-content="clearFollowingItemsFrom"></span>
+              <settings-dropdown-menu id="clearFrom"
+                  pref="{{prefs.browser.clear_data.time_period}}"
+                  menu-options="[[clearFromOptions_]]" no-label-float>
+              </settings-dropdown-menu>
+            </div>
+            <settings-checkbox id="browsingCheckbox"
+                pref="{{prefs.browser.clear_data.browsing_history}}"
+                i18n-values="label:clearBrowsingHistory">
+            </settings-checkbox>
+            <settings-checkbox id="downloadCheckbox"
+                pref="{{prefs.browser.clear_data.download_history}}"
+                i18n-values="label:clearDownloadHistory">
+            </settings-checkbox>
+            <settings-checkbox
+                pref="{{prefs.browser.clear_data.cache}}"
+                i18n-values="label:clearCache">
+            </settings-checkbox>
+            <settings-checkbox
+                pref="{{prefs.browser.clear_data.cookies}}"
+                i18n-values="label:clearCookies">
+            </settings-checkbox>
+            <settings-checkbox
+                pref="{{prefs.browser.clear_data.passwords}}"
+                i18n-values="label:clearPasswords">
+            </settings-checkbox>
+            <settings-checkbox
+                pref="{{prefs.browser.clear_data.form_data}}"
+                i18n-values="label:clearFormData">
+            </settings-checkbox>
+            <settings-checkbox
+                pref="{{prefs.browser.clear_data.hosted_apps_data}}"
+                i18n-values="label:clearHostedAppData">
+            </settings-checkbox>
+            <settings-checkbox
+                pref="{{prefs.browser.clear_data.content_licenses}}"
+                i18n-values="label:clearDeauthorizeContentLicenses">
+            </settings-checkbox>
+          </div>
+          <div class="button-container">
+            <div class="action-buttons">
+              <paper-button class="cancel-button" i18n-content="cancel"
+                  dialog-dismiss></paper-button>
+              <paper-button class="action-button" id="clearDataButton"
+                  i18n-content="clearBrowsingData" dialog-confirm>
+              </paper-button>
+            </div>
+          </div>
+        </div>
+        <div class="feedback-bar">
+          <span i18n-content="warnAboutNonClearedData"></span>
+          <span i18n-content="clearsSyncedData"></span>
+        </div>
+      </div>
+    </paper-dialog>
   </template>
   <script src="clear_browsing_data_page.js"></script>
 </dom-module>