Implement important sites dialog for desktop.

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

 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.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-spinner/paper-spinner.html">
 <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">
 <link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="settings-clear-browsing-data-dialog">
   <template>
     <style include="settings-shared">
       #dialog:not(.fully-rendered) {
         visibility: hidden;
@@ skipping 53 matching lines @@
       }
 
       .clear-browsing-data-footer a {
         text-decoration: none;
       }
 
       #clearFrom {
         -webkit-margin-start: 0.5em;
       }
 
+      .title .secondary {
+        font-size: 86.67%; /* (13px / 15px) * 100 */

[dschuyler, 2017/04/11 23:49:32]

nit: two spaces between the ; and the /*

[dullweber, 2017/04/13 14:47:49]

Done.

+        padding-top: 8px;
+      }
+
       /* 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. */
       @media all and (max-height: 724px) {
         #dialog {
           /* crbug.com/652027: Show four and a *half* items in the list. */
           --cr-dialog-body-container: {
-            max-height: 280px; 
+            max-height: 280px;
           };
         }
       }
     </style>
 
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}"
         show-scroll-borders 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_)]]">

[dschuyler, 2017/04/11 23:49:32]

This looks like it is changing quite a bit of the guts of this dialog, putting
two dialogs in one <dialog> entry. Can this be made into two <dialog>'s instead?

[dullweber, 2017/04/13 14:47:49]

I build the dialog similar to the bluetooth_device_dialog which also uses a few
conditions to switch from one state to the next without closing and reopening
the whole thing.

I tried to rewrite the dialog into two dialogs but I currently have the problem
that I can't open a second dialog after I closed the first dialog. Everything
works fine if I just open the second dialog on top of the first. I guess the
cr_dialog somehow closes the whole clear_browsing_data_dialog component? Do you
know if there is a way to prevent the dialog from closing it's parent?

         <div class="row">
           $i18n{clearFollowingItemsFrom}
           <settings-dropdown-menu id="clearFrom"
               pref="{{prefs.browser.clear_data.time_period}}"
               menu-options="[[clearFromOptions_]]">
           </settings-dropdown-menu>
         </div>
         <settings-checkbox id="browsingCheckbox"
             pref="{{prefs.browser.clear_data.browsing_history}}"
             label="$i18n{clearBrowsingHistory}"
             sub-label="[[counters_.browsing_history]]"
             disabled="[[clearingInProgress_]]">
         </settings-checkbox>
         <settings-checkbox id="downloadCheckbox"
             pref="{{prefs.browser.clear_data.download_history}}"
             label="$i18n{clearDownloadHistory}"
             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}"
             disabled="[[clearingInProgress_]]">
         </settings-checkbox>
         <settings-checkbox
             pref="{{prefs.browser.clear_data.passwords}}"
             label="$i18n{clearPasswords}"
             sub-label="[[counters_.passwords]]"
             disabled="[[clearingInProgress_]]">
@@ skipping 10 matching lines @@
             sub-label="[[counters_.hosted_apps_data]]"
             disabled="[[clearingInProgress_]]">
         </settings-checkbox>
         <settings-checkbox
             pref="{{prefs.browser.clear_data.media_licenses}}"
             label="$i18n{clearMediaLicenses}"
             sub-label="[[counters_.media_licenses]]"
             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>
         </div>
         <div id="generalFooter" class="clear-browsing-data-footer">
           <iron-icon icon="settings:info"></iron-icon>
           <div class="footer-text">
             <span id="syncedDataSentence">$i18n{clearsSyncedData}</span>
             <span>$i18n{warnAboutNonClearedData}</span>
             <a id="clear-browser-data-old-learn-more-link"
                 href="$i18n{clearBrowsingDataLearnMoreUrl}"
                 target="_blank">$i18n{learnMore}</a>
           </div>
         </div>
       </div>
     </dialog>
 
     <template is="dom-if" if="[[showHistoryDeletionDialog_]]" restamp>
       <settings-history-deletion-dialog id="notice"
           on-close="onHistoryDeletionDialogClose_">
       </settings-history-deletion-dialog>
     </template>
   </template>
   <script src="clear_browsing_data_dialog.js"></script>
 </dom-module>