Implement important sites dialog for desktop.

chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html

Index: chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html
diff --git a/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html b/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html
index 93472c082c91fe5e2e3c5c990cf0ad9237a15240..b8f8a3a0310773e970e8ee7a1f4c9e955a381f2b 100644
--- a/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html
+++ b/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html
@@ -6,6 +6,7 @@
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="clear_browsing_data_browser_proxy.html">
 <link rel="import" href="history_deletion_dialog.html">
+<link rel="import" href="../controls/important_site_checkbox.html">
 <link rel="import" href="../controls/settings_checkbox.html">
 <link rel="import" href="../controls/settings_dropdown_menu.html">
 <link rel="import" href="../icons.html">
@@ -85,6 +86,14 @@
         -webkit-margin-start: 0.5em;
       }
 
+      .title {
+        margin: 12px 0;
+      }
+
+      .title .secondary {
+        font-size: 80%;

[dschuyler, 2017/04/07 00:02:06]

This size change is unexpected. Please help me see where this is spec'd in the
UX design?
(I don't want to say it's right or wrong without more information).

[dullweber, 2017/04/07 09:39:21]

You're right, it shouldn't be 80%. 
text_defaults_md.css defines the default font-size as 81.25%. According to the
mocks the subtitle should be the same font-size as other normal text. 

+      }
+
       /* Cap the height on smaller screens to avoid unfavorable clipping.
        * Replace the bottom margin with padding to avoid the gap between
        * the scrollbar and the bottom separator. */
@@ -100,8 +109,14 @@
     </style>
 
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}" ignore-popstate>
-      <div class="title">$i18n{clearBrowsingData}</div>
-      <div class="body">
+      <div class="title">
+        $i18n{clearBrowsingData}
+        <div class="secondary"
+            hidden$="[[!isImportantSitesDialog_(dialogState_)]]">
+          $i18n{importantSitesSubtitle}
+        </div>
+      </div>
+      <div class="body" hidden$="[[!isClearBrowsingDataDialog_(dialogState_)]]">
         <div class="row">
           $i18n{clearFollowingItemsFrom}
           <settings-dropdown-menu id="clearFrom"
@@ -121,13 +136,13 @@
             sub-label="[[counters_.download_history]]"
             disabled="[[clearingInProgress_]]">
         </settings-checkbox>
-        <settings-checkbox
+        <settings-checkbox id="cacheCheckbox"
             pref="{{prefs.browser.clear_data.cache}}"
             label="$i18n{clearCache}"
             sub-label="[[counters_.cache]]"
             disabled="[[clearingInProgress_]]">
         </settings-checkbox>
-        <settings-checkbox
+        <settings-checkbox id="cookiesCheckbox"
             pref="{{prefs.browser.clear_data.cookies}}"
             label="$i18n{clearCookies}"
             sub-label="$i18n{clearCookiesCounter}"
@@ -158,16 +173,35 @@
             disabled="[[clearingInProgress_]]">
         </settings-checkbox>
       </div>
+      <template is="dom-if" if="[[isImportantSitesDialog_(dialogState_)]]">
+        <div class="body">
+          <template is="dom-repeat" items="[[importantSites_]]">
+            <div class="row">
+              <important-site-checkbox
+                  site="[[item]]"
+                  disabled="[[clearingInProgress_]]">
+              </important-site-checkbox>
+            </div>
+          </template>
+        </div>
+      </template>
       <div class="button-container">
         <paper-spinner active="[[clearingInProgress_]]"></paper-spinner>
         <paper-button class="cancel-button" disabled="[[clearingInProgress_]]"
             on-tap="onCancelTap_">$i18n{cancel}</paper-button>
         <paper-button class="action-button" disabled="[[clearingInProgress_]]"
             on-tap="onClearBrowsingDataTap_">
-          $i18n{clearBrowsingData}
+          <template is="dom-if"
+              if="[[isClearBrowsingDataDialog_(dialogState_)]]">
+            $i18n{clearBrowsingData}
+          </template>
+          <template is="dom-if" if="[[isImportantSitesDialog_(dialogState_)]]">
+            $i18n{importantSitesConfirm}
+          </template>
         </paper-button>
       </div>
-      <div class="footer">
+      <div class="footer"
+          hidden$="[[!isClearBrowsingDataDialog_(dialogState_)]]">
         <div id="googleFooter" class="clear-browsing-data-footer">
           <iron-icon icon="settings:googleg"></iron-icon>
           <div class="footer-text">$i18nRaw{otherFormsOfBrowsingHistory}</div>