AllSites: Update the clear data dialog to match new mocks.

New dialog gives more context about consequences of clearing data
such as calling out affects on installed apps.

Bug: 997258
Change-Id: I6642390f99765632e1dda7730946e68ddd0b9339
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1888554
Commit-Queue: Jarryd Goodman <jarrydg@chromium.org>
Reviewed-by: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#721839}

chrome/app/settings_strings.grdp

@@ -3699,6 +3699,18 @@
   <message name="IDS_SETTINGS_SITE_SETTINGS_SITE_CLEAR_STORAGE_CONFIRMATION" desc="Text for the dialog that warns about clearing storage used by a site.">
     All data stored by <ph name="SITE">$1<ex>www.example.com</ex></ph> will be deleted.
   </message>
+  <message name="IDS_SETTINGS_SITE_SETTINGS_SITE_CLEAR_STORAGE_CONFIRMATION_NEW" desc="Text for the dialog that warns about clearing storage used by a site.">
+    All data and cookies stored by <ph name="SITE">$1<ex>www.example.com</ex></ph> will be cleared.
+  </message>
+  <message name="IDS_SETTINGS_SITE_SETTINGS_SITE_CLEAR_STORAGE_SIGN_OUT" desc="Text for the dialog that warns about being signed out of site when clearing storage used by a site.">
+    You’ll be signed out of this site, including in open tabs
+  </message>
+  <message name="IDS_SETTINGS_SITE_SETTINGS_SITE_CLEAR_STORAGE_OFFLINE_DATA" desc="Text for the dialog that warns about loss of offline data when clearing all storage data.">
+    Any offline data will be cleared
+  </message>
+  <message name="IDS_SETTINGS_SITE_SETTINGS_SITE_CLEAR_STORAGE_APPS" desc="Text for the dialog that warns about loss of offline data for installed app when clearing all storage data for site.">
+    Offline data in installed app will also be cleared
+  </message>
   <message name="IDS_SETTINGS_SITE_SETTINGS_SITE_GROUP_RESET_DIALOG_TITLE" desc="Title of the dialog that warns about resetting all permissions for a group of sites.">
     Reset site permissions?
   </message>
@@ -3711,6 +3723,18 @@
   <message name="IDS_SETTINGS_SITE_SETTINGS_SITE_GROUP_DELETE_CONFIRMATION" desc="Text for the dialog that warns about clearing all storage data for a group of sites.">
     All data stored by <ph name="SITE_GROUP_NAME">$1<ex>google.co.uk</ex></ph> and any sites under it will be deleted. This includes cookies. You'll be signed out of these sites, including in open tabs.
   </message>
+  <message name="IDS_SETTINGS_SITE_SETTINGS_SITE_GROUP_DELETE_CONFIRMATION_NEW" desc="Text for the dialog that warns about clearing all storage data for a group of sites.">
+    All data and cookies stored by <ph name="SITE_GROUP_NAME">$1<ex>google.co.uk</ex></ph> and any sites under it will be cleared.
+  </message>
+  <message name="IDS_SETTINGS_SITE_SETTINGS_SITE_GROUP_DELETE_SIGN_OUT" desc="Text for the dialog that warns about being signed out when clearing all storage data.">
+    You’ll be signed out of these sites, including in open tabs
+  </message>
+  <message name="IDS_SETTINGS_SITE_SETTINGS_SITE_GROUP_DELETE_OFFLINE_DATA" desc="Text for the dialog that warns about loss of offline data when clearing all storage data.">
+    Any offline data will be cleared
+  </message>
+  <message name="IDS_SETTINGS_SITE_SETTINGS_SITE_GROUP_DELETE_APPS" desc="Text for the dialog that warns about installed apps losing offline data when clearing all storage data for the site group.">
+    Offline data in installed apps will also be cleared
+  </message>
   <message name="IDS_SETTINGS_SITE_SETTINGS_COOKIE_REMOVE_MULTIPLE" desc="Text for the dialog that warns about deleting all site data.">
     This will delete any data stored on your device for all the sites shown. Do you want to continue?
   </message>

chrome/browser/resources/settings/settings_resources.grd

@@ -106,12 +106,18 @@
                  file="site_settings/all_sites.js"
                  type="chrome_html"
                  preprocess="true" />
+      <structure name="IDR_SETTINGS_ALL_SITES_ICONS_HTML"
+                 file="site_settings/all_sites_icons.html"
+                 type="chrome_html" />
       <structure name="IDR_SETTINGS_SITE_ENTRY_HTML"
                  file="site_settings/site_entry.html"
                  type="chrome_html" />
       <structure name="IDR_SETTINGS_SITE_ENTRY_JS"
                  file="site_settings/site_entry.js"
                  type="chrome_html" />
+      <structure name="IDR_SETTINGS_CLEAR_STORAGE_DIALOG_CSS"
+                 file="site_settings/clear_storage_dialog_css.html"
+                 type="chrome_html" />
       <structure name="IDR_SETTINGS_CATEGORY_DEFAULT_SETTING_HTML"
                  file="site_settings/category_default_setting.html"
                  type="chrome_html" />

chrome/browser/resources/settings/site_settings/all_sites.html

@@ -4,10 +4,13 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="../global_scroll_target_behavior.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="all_sites_icons.html">
+<link rel="import" href="clear_storage_dialog_css.html">
 <link rel="import" href="site_entry.html">
 <link rel="import" href="site_settings_behavior.html">
 
@@ -133,6 +136,47 @@
         </cr-dialog>
       </template>
     </cr-lazy-render>
+
+    <!-- New version of confirm clear data dialog to show if storage
+         pressure UI flag is enabled. -->
+    <cr-lazy-render id="confirmClearDataNew">
+      <template>
+        <style include="clear-storage-dialog-shared"></style>
+        <cr-dialog close-text="$i18n{close}">
+          <div slot="title">
+            $i18n{siteSettingsSiteGroupDeleteDialogTitle}
+          </div>
+          <div slot="body">
+            [[getFormatString_(
+                '$i18nPolymer{siteSettingsSiteGroupDeleteConfirmationNew}',
+                actionMenuModel_.item.etldPlus1)]]
+            <div class="detail-list">
+              <div class="detail">
+                <iron-icon icon="all-sites:logout"></iron-icon>
+                $i18n{siteSettingsSiteGroupDeleteSignOut}
+              </div>
+              <div class="detail">
+                <iron-icon icon="all-sites:offline"></iron-icon>
+                $i18n{siteSettingsSiteGroupDeleteOfflineData}
+              </div>
+              <div class="detail">
+                <iron-icon icon="all-sites:apps"></iron-icon>
+                $i18n{siteSettingsSiteGroupDeleteApps}
+              </div>
+            </div>
+          </div>
+          <div slot="button-container">
+            <cr-button class="cancel-button" on-click="onCloseDialog_">
+              $i18n{cancel}
+            </cr-button>
+            <cr-button class="action-button" on-click="onClearData_">
+              $i18n{siteSettingsSiteClearStorage}
+            </cr-button>
+          </div>
+        </cr-dialog>
+      </template>
+    </cr-lazy-render>
+
   </template>
   <script src="all_sites.js"></script>
 </dom-module>

chrome/browser/resources/settings/site_settings/all_sites.js

@@ -108,6 +108,12 @@ Polymer({
      * @private
      */
     sortMethod_: String,
+
+    /** @private */
+    storagePressureFlagEnabled_: {
+      type: Boolean,
+      value: () => loadTimeData.getBoolean('enableStoragePressureUI'),
+    },
   },
 
   /** @private {?settings.LocalDataBrowserProxy} */
@@ -133,7 +139,7 @@ Polymer({
       this.selectedItem_ = event.detail;
     });
 
-    if (loadTimeData.getBoolean('enableStoragePressureUI')) {
+    if (this.storagePressureFlagEnabled_) {
       const sortParam = settings.getQueryParameters().get('sort');
       if (Object.values(this.sortMethods_).includes(sortParam)) {
         this.$.sortMethod.value = sortParam;
@@ -396,7 +402,11 @@ Polymer({
    */
   onConfirmClearData_: function(e) {
     e.preventDefault();
-    this.$.confirmClearData.get().showModal();
+    if (this.storagePressureFlagEnabled_) {
+      this.$.confirmClearDataNew.get().showModal();
+    } else {
+      this.$.confirmClearData.get().showModal();
+    }
   },
 
   /** @private */

chrome/browser/resources/settings/site_settings/all_sites_icons.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
+
+<iron-iconset-svg name="all-sites" size="20">
+  <svg>
+    <defs>
+      <g id="logout" width="24px" height="24px" viewBox="0 0 24 24"
+                                                         fill="#757575">
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path>
+        <path d="M0 0h24v24H0z" fill="none"></path>
+      </g>
+
+      <g id="offline" viewBox="0 0 24 24" width="24px" height="24px"
+                                                       fill="#757575">
+        <path clip-path="url(#b)" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm5 16H7v-2h10v2zm-6.7-4L7 10.7l1.4-1.4 1.9 1.9 5.3-5.3L17 7.3 10.3 14z"></path>
+      </g>
+
+      <g id="apps" width="24px" height="24px" viewBox="0 0 24 24"
+                                              fill="#757575">
+        <path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"></path>
+        <path d="M0 0h24v24H0z" fill="none"></path>
+      </g>
+    </defs>
+  </svg>
+</iron-iconset-svg>

chrome/browser/resources/settings/site_settings/clear_storage_dialog_css.html

+<dom-module id="clear-storage-dialog-shared">
+  <template>
+    <style>
+      .detail-list {
+        margin-top: 12px;
+      }
+
+      .detail {
+        align-items: center;
+        display: flex;
+        margin-bottom: 8px;
+      }
+
+      .detail iron-icon {
+        margin-inline-end: 16px;
+      }
+    </style>
+  </template>
+</dom-module>

chrome/browser/resources/settings/site_settings/site_details.html

@@ -14,6 +14,8 @@
 <link rel="import" href="../icons.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="all_sites_icons.html">
+<link rel="import" href="clear_storage_dialog_css.html">
 <link rel="import" href="constants.html">
 <link rel="import" href="site_details_permission.html">
 <link rel="import" href="site_settings_behavior.html">
@@ -57,6 +59,7 @@
     <!-- Confirm clear storage dialog. -->
     <cr-dialog id="confirmClearStorage" close-text="$i18n{close}"
         on-close="onClearStorageDialogClosed_">
+      <style include="clear-storage-dialog-shared"></style>
       <div slot="title">
         $i18n{siteSettingsSiteClearStorageDialogTitle}
       </div>
@@ -73,6 +76,41 @@
       </div>
     </cr-dialog>
 
+    <!-- New version of confirm clear data dialog to show if storage
+         pressure UI flag is enabled. -->
+    <cr-dialog id="confirmClearStorageNew" close-text="$i18n{close}"
+        on-close="onClearStorageDialogClosed_">
+      <style include="clear-storage-dialog-shared"></style>
+      <div slot="title">
+        $i18n{siteSettingsSiteClearStorageDialogTitle}
+      </div>
+      <div slot="body">
+        [[i18n('siteSettingsSiteClearStorageConfirmationNew', pageTitle)]]
+        <div class="detail-list">
+          <div class="detail">
+            <iron-icon icon="all-sites:logout"></iron-icon>
+            $i18n{siteSettingsSiteClearStorageSignOut}
+          </div>
+          <div class="detail">
+            <iron-icon icon="all-sites:offline"></iron-icon>
+            $i18n{siteSettingsSiteClearStorageOfflineData}
+          </div>
+          <div class="detail">
+            <iron-icon icon="all-sites:apps"></iron-icon>
+            $i18n{siteSettingsSiteClearStorageApps}
+          </div>
+        </div>
+      </div>
+      <div slot="button-container">
+        <cr-button class="cancel-button" on-click="onCloseDialog_">
+          $i18n{cancel}
+        </cr-button>
+        <cr-button class="action-button" on-click="onClearStorage_">
+          $i18n{siteSettingsSiteClearStorage}
+        </cr-button>
+      </div>
+    </cr-dialog>
+
     <div id="usage">
       <div class="settings-box first line-only">
         <h2 class="first">$i18n{siteSettingsUsage}</h2>

chrome/browser/resources/settings/site_settings/site_details.js

@@ -78,6 +78,12 @@ Polymer({
         return loadTimeData.getBoolean('enableInsecureContentContentSetting');
       }
     },
+
+    /** @private */
+    storagePressureFlagEnabled_: {
+      type: Boolean,
+      value: () => loadTimeData.getBoolean('enableStoragePressureUI'),
+    },
   },
 
   listeners: {
@@ -219,7 +225,11 @@ Polymer({
    */
   onConfirmClearStorage_: function(e) {
     e.preventDefault();
-    this.$.confirmClearStorage.showModal();
+    if (this.storagePressureFlagEnabled_) {
+      this.$.confirmClearStorageNew.showModal();
+    } else {
+      this.$.confirmClearStorage.showModal();
+    }
   },
 
   /**

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -3037,13 +3037,29 @@ void AddSiteSettingsStrings(content::WebUIDataSource* html_source,
      IDS_SETTINGS_SITE_SETTINGS_SITE_CLEAR_STORAGE},
     {"siteSettingsSiteClearStorageConfirmation",
      IDS_SETTINGS_SITE_SETTINGS_SITE_CLEAR_STORAGE_CONFIRMATION},
+    {"siteSettingsSiteClearStorageConfirmationNew",
+     IDS_SETTINGS_SITE_SETTINGS_SITE_CLEAR_STORAGE_CONFIRMATION_NEW},
     {"siteSettingsSiteClearStorageDialogTitle",
      IDS_SETTINGS_SITE_SETTINGS_SITE_CLEAR_STORAGE_DIALOG_TITLE},
+    {"siteSettingsSiteClearStorageSignOut",
+     IDS_SETTINGS_SITE_SETTINGS_SITE_CLEAR_STORAGE_SIGN_OUT},
+    {"siteSettingsSiteClearStorageOfflineData",
+     IDS_SETTINGS_SITE_SETTINGS_SITE_CLEAR_STORAGE_OFFLINE_DATA},
+    {"siteSettingsSiteClearStorageApps",
+     IDS_SETTINGS_SITE_SETTINGS_SITE_CLEAR_STORAGE_APPS},
     {"siteSettingsSiteGroupDelete", IDS_SETTINGS_SITE_SETTINGS_GROUP_DELETE},
     {"siteSettingsSiteGroupDeleteDialogTitle",
      IDS_SETTINGS_SITE_SETTINGS_SITE_GROUP_DELETE_DIALOG_TITLE},
     {"siteSettingsSiteGroupDeleteConfirmation",
      IDS_SETTINGS_SITE_SETTINGS_SITE_GROUP_DELETE_CONFIRMATION},
+    {"siteSettingsSiteGroupDeleteConfirmationNew",
+     IDS_SETTINGS_SITE_SETTINGS_SITE_GROUP_DELETE_CONFIRMATION_NEW},
+    {"siteSettingsSiteGroupDeleteSignOut",
+     IDS_SETTINGS_SITE_SETTINGS_SITE_GROUP_DELETE_SIGN_OUT},
+    {"siteSettingsSiteGroupDeleteOfflineData",
+     IDS_SETTINGS_SITE_SETTINGS_SITE_GROUP_DELETE_OFFLINE_DATA},
+    {"siteSettingsSiteGroupDeleteApps",
+     IDS_SETTINGS_SITE_SETTINGS_SITE_GROUP_DELETE_APPS},
     {"siteSettingsSiteGroupReset", IDS_SETTINGS_SITE_SETTINGS_GROUP_RESET},
     {"siteSettingsSiteGroupResetDialogTitle",
      IDS_SETTINGS_SITE_SETTINGS_SITE_GROUP_RESET_DIALOG_TITLE},

chrome/test/data/webui/settings/all_sites_tests.js

@@ -98,6 +98,7 @@ suite('AllSites', function() {
     // The code being tested changes the Route. Reset so that state is not
     // leaked across tests.
     settings.resetRouteForTesting();
+    loadTimeData.overrideValues({enableStoragePressureUI: false});
   });
 
   /**