Implement important sites dialog for desktop.

chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview 'settings-clear-browsing-data-dialog' allows the user to delete
  * browsing data that has been cached by Chromium.
  */
 Polymer({
   is: 'settings-clear-browsing-data-dialog',
 
   behaviors: [WebUIListenerBehavior],
 
   properties: {
     /**
      * Preferences state.
      */
     prefs: {
       type: Object,
       notify: true,
     },
 
     /**
+     * State of this dialog, either "clearBrowsingData" or "importantSites".
+     * @private
+     */
+    dialogState_: {
+      type: String,
+      value: 'clearBrowsingData',
+    },
+
+    /**
      * Results of browsing data counters, keyed by the suffix of
      * the corresponding data type deletion preference, as reported
      * by the C++ side.
      * @private {!Object<string>}
      */
     counters_: {
       type: Object,
       value: {
-        // Will be filled as results are reported.
+          // Will be filled as results are reported.

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

This formatting by "git cl format --js" seems odd, I would expect the comment to
be indented by 2 spaces. Should I file a clang-format bug?

[dschuyler, 2017/04/07 22:57:34]

I agree that's weird and I would expect a two space indent here.

[dullweber, 2017/04/10 10:59:50]

I submitted a bug for clang-format

       }

[dschuyler, 2017/04/07 22:57:34]

Hey that helps point out another issue that I missed before:
This |value| will be like a class-static value, instead of an instance (object)
value. Unless a class var is really desired (which should have a comment saying
so) this should instead be:

value: function() { return {}; },

So that it will be an instance var.
Here's a demo to illustrate the difference:
http://jsbin.com/gogonufazi/3/edit?html,console,output

[dullweber, 2017/04/10 10:59:50]

Ah, that looks interesting, thanks. I guess the same issue exists with the
default array for importantSites_? I fixed that one too.

     },
 
     /**
      * List of options for the dropdown menu.
      * @private {!DropdownMenuOptionList}
      */
     clearFromOptions_: {
       readOnly: true,
       type: Array,
       value: [
         {value: 0, name: loadTimeData.getString('clearDataHour')},
         {value: 1, name: loadTimeData.getString('clearDataDay')},
         {value: 2, name: loadTimeData.getString('clearDataWeek')},
         {value: 3, name: loadTimeData.getString('clearData4Weeks')},
         {value: 4, name: loadTimeData.getString('clearDataEverything')},
       ],
     },
 
     /** @private */
     clearingInProgress_: {
       type: Boolean,
       value: false,
     },
 
     /** @private */
     showHistoryDeletionDialog_: {
       type: Boolean,
       value: false,
     },
+
+    /** @private {!Array<ImportantSite>} */
+    importantSites_: {
+      type: Array,
+      value: [],
+    },
+
+    /** @private */
+    importantSitesFlagEnabled_: {
+      type: Boolean,
+      value: false,
+    },
+
   },
 
   /** @private {settings.ClearBrowsingDataBrowserProxy} */
   browserProxy_: null,
 
   /** @override */
   ready: function() {
     this.$.clearFrom.menuOptions = this.clearFromOptions_;
     this.addWebUIListener(
         'update-footer',
         this.updateFooter_.bind(this));
     this.addWebUIListener(
         'update-counter-text',
         this.updateCounterText_.bind(this));
   },
 
   /** @override */
   attached: function() {
     this.browserProxy_ =
         settings.ClearBrowsingDataBrowserProxyImpl.getInstance();
     this.browserProxy_.initialize().then(function() {
       this.$.dialog.showModal();
+      this.browserProxy_.fetchImportantSites().then(
+          this.receiveImportantSites.bind(this));
     }.bind(this));
   },
 
   /**
+   * @param {!ImportantSitesResponse} result
+   * @private
+   */
+  receiveImportantSites: function(result) {
+    this.importantSitesFlagEnabled_ = result.flagEnabled;
+    this.set('importantSites_', result.importantSites);
+  },
+
+  /**
    * Updates the footer to show only those sentences that are relevant to this
    * user.
    * @param {boolean} syncing Whether the user is syncing data.
    * @param {boolean} otherFormsOfBrowsingHistory Whether the user has other
    *     forms of browsing history in their account.
    * @private
    */
   updateFooter_: function(syncing, otherFormsOfBrowsingHistory) {
     this.$.googleFooter.hidden = !otherFormsOfBrowsingHistory;
     this.$.syncedDataSentence.hidden = !syncing;
     this.$.dialog.classList.add('fully-rendered');
   },
 
   /**
    * Updates the text of a browsing data counter corresponding to the given
    * preference.
    * @param {string} prefName Browsing data type deletion preference.
    * @param {string} text The text with which to update the counter
    * @private
    */
   updateCounterText_: function(prefName, text) {
     // Data type deletion preferences are named "browser.clear_data.<datatype>".
     // Strip the common prefix, i.e. use only "<datatype>".
     var matches = prefName.match(/^browser\.clear_data\.(\w+)$/);
     this.set('counters_.' + assert(matches[1]), text);
   },
 
   /**
+   * @param {string} currentDialogState The current dialog state.
+   * @return {boolean} Whether this is the clear browsing data dialog.
+   * @private
+   */
+  isClearBrowsingDataDialog_: function(currentDialogState) {
+    return currentDialogState == 'clearBrowsingData';
+  },
+
+  /**
+   * @param {string} currentDialogState The current dialog state.
+   * @return {boolean} Whether this is the important sites dialog.
+   * @private
+   */
+  isImportantSitesDialog_: function(currentDialogState) {
+    return currentDialogState == 'importantSites';
+  },
+
+  /** @private */
+  shouldShowImportantSites_: function() {
+    if (this.isImportantSitesDialog_(this.dialogState_))
+      return false;
+    if (!this.importantSitesFlagEnabled_)
+      return false;
+    if (!this.$.cookiesCheckbox.checked && !this.$.cacheCheckbox.checked) {
+      return false;
+    }
+    var haveImportantSites = this.importantSites_.length > 0;
+    chrome.send(
+        'metricsHandler:recordBooleanHistogram',
+        ['History.ClearBrowsingData.ImportantDialogShown', haveImportantSites]);
+    return haveImportantSites;
+  },
+
+  /**
    * Handles the tap on the Clear Data button.
    * @private
    */
   onClearBrowsingDataTap_: function() {
+    if (this.shouldShowImportantSites_()) {
+      this.dialogState_ = 'importantSites';
+      return;
+    }
+
     this.clearingInProgress_ = true;
 
-    this.browserProxy_.clearBrowsingData().then(
-      /**
-       * @param {boolean} shouldShowNotice Whether we should show the notice
-       *     about other forms of browsing history before closing the dialog.
-       */
-      function(shouldShowNotice) {
-        this.clearingInProgress_ = false;
-        this.showHistoryDeletionDialog_ = shouldShowNotice;
+    this.browserProxy_.clearBrowsingData(this.importantSites_)
+        .then(
+            /**
+             * @param {boolean} shouldShowNotice Whether we should show the
+             * notice about other forms of browsing history before closing the
+             * dialog.
+             */
+            function(shouldShowNotice) {
+              this.clearingInProgress_ = false;
+              this.showHistoryDeletionDialog_ = shouldShowNotice;
 
-        if (!shouldShowNotice)
-          this.$.dialog.close();
-      }.bind(this));
+              if (!shouldShowNotice)
+                this.$.dialog.close();
+            }.bind(this));
   },
 
   /** @private */
   onCancelTap_: function() {
     this.$.dialog.cancel();
   },
 
   /**
    * Handles the closing of the notice about other forms of browsing history.
    * @private
    */
   onHistoryDeletionDialogClose_: function() {
     this.showHistoryDeletionDialog_ = false;
     this.$.dialog.close();
   }
 });