Settings: Group site settings permissions under expandable sections.

Specifically, when the PrivacySettingsRedesign flag is on:
 - Split content settings types to two categories "permissions"
   and "content settings"
 - Within each category show 5 items by default, and place all remaining
   items within an expandable section.

Achieved by introducing a new settings-site-settings-list custom
element, and moving some logic previously in site-settings-page to
the new element.

The old codepath where PrivacySettingsRedesign is off, is also
leveraging the newly introduced settings-site-settings-list element.

Bug: 1032584
Change-Id: Id7c7b3d01aa319371374ae1379ea617703934abb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2065338
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#744075}

chrome/app/settings_strings.grdp

@@ -2632,6 +2632,15 @@
   <message name="IDS_SETTINGS_SITE_SETTINGS_PERMISSIONS" desc="The Permissions header, used to group together permissions, such as Geolocation, on the Site Details page.">
     Permissions
   </message>
+  <message name="IDS_SETTINGS_SITE_SETTINGS_PERMISSIONS_MORE" desc="The text on the button used to toggle the display of additional permission settings.">
+    Additional permissions
+  </message>
+  <message name="IDS_SETTINGS_SITE_SETTINGS_CONTENT" desc="The Content header, used to group together website content settings, such as Cookies and JavaScript on the Site Details page.">
+    Content
+  </message>
+  <message name="IDS_SETTINGS_SITE_SETTINGS_CONTENT_MORE" desc="The text on the button used to toggle the display of additional content settings.">
+    Additional content settings
+  </message>
   <message name="IDS_SETTINGS_SITE_SETTINGS_SOURCE_DRM_DISABLED" desc="A label shown when the protected content / protected media identifier permission on the Site Details page is disabled because the user has turned off using unique identifiers to access protected content.">
     To change this setting, first <ph name="BEGIN_LINK">&lt;a target="_blank" href="$1"&gt;</ph>turn on identifiers<ph name="END_LINK">&lt;/a&gt;</ph>
   </message>

chrome/browser/resources/settings/settings_resources.grd

@@ -985,6 +985,12 @@
                  file="site_settings_page/site_settings_page.js"
                  type="chrome_html"
                  preprocess="true" />
+      <structure name="IDR_SETTINGS_SITE_SETTINGS_LIST_HTML"
+                 file="site_settings_page/site_settings_list.html"
+                 type="chrome_html" />
+      <structure name="IDR_SETTINGS_SITE_SETTINGS_LIST_JS"
+                 file="site_settings_page/site_settings_list.js"
+                 type="chrome_html" />
       <structure name="IDR_SETTINGS_SITE_SETTINGS_PREFS_BROWSER_PROXY_HTML"
                  file="site_settings/site_settings_prefs_browser_proxy.html"
                  type="chrome_html" />

chrome/browser/resources/settings/site_settings_page/BUILD.gn

@@ -7,6 +7,7 @@ import("//third_party/closure_compiler/compile_js.gni")
 js_type_check("closure_compile") {
   deps = [
     ":recent_site_permissions",
+    ":site_settings_list",
     ":site_settings_page",
   ]
 }
@@ -29,12 +30,20 @@ js_library("site_settings_page") {
     "..:route",
     "..:router",
     "../site_settings:constants",
-    "../site_settings:site_settings_behavior",
-    "../site_settings:site_settings_prefs_browser_proxy",
     "//ui/webui/resources/js:assert",
     "//ui/webui/resources/js:cr",
-    "//ui/webui/resources/js:i18n_behavior",
     "//ui/webui/resources/js:load_time_data",
+    "//ui/webui/resources/js/cr/ui:focus_without_ink",
+  ]
+}
+
+js_library("site_settings_list") {
+  deps = [
+    "..:route",
+    "../site_settings:constants",
+    "../site_settings:site_settings_prefs_browser_proxy",
+    "//ui/webui/resources/js:assert",
+    "//ui/webui/resources/js:i18n_behavior",
     "//ui/webui/resources/js:web_ui_listener_behavior",
     "//ui/webui/resources/js/cr/ui:focus_without_ink",
   ]
@@ -43,9 +52,20 @@ js_library("site_settings_page") {
 # TODO(crbug.com/1026426): Fix and enable.
 #js_type_check("closure_compile_module") {
 #  is_polymer3 = true
-#  deps = [ ":site_settings_page.m" ]
+#  deps = [
+#    ":site_settings_list.m",
+#    ":site_settings_page.m",
+# ]
 #}
 
+js_library("site_settings_list.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/settings/site_settings_page/site_settings_list.m.js" ]
+  deps = [
+    # TODO: Fill those in.
+  ]
+  extra_deps = [ ":site_settings_list_module" ]
+}
+
 js_library("site_settings_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/site_settings_page/site_settings_page.m.js" ]
   deps = [
@@ -57,7 +77,16 @@ js_library("site_settings_page.m") {
 import("//tools/polymer/polymer.gni")
 
 group("polymer3_elements") {
-  deps = [ ":site_settings_page_module" ]
+  deps = [
+    ":site_settings_list_module",
+    ":site_settings_page_module",
+  ]
+}
+
+polymer_modulizer("site_settings_list") {
+  js_file = "site_settings_list.js"
+  html_file = "site_settings_list.html"
+  html_type = "dom-module"
 }
 
 polymer_modulizer("site_settings_page") {

chrome/browser/resources/settings/site_settings_page/site_settings_list.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
+<link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/html/assert.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
+<link rel="import" href="../icons.html">
+<link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="../site_settings/site_settings_prefs_browser_proxy.html">
+
+<dom-module id="settings-site-settings-list">
+  <template>
+    <style include="settings-shared">
+      cr-link-row {
+        --cr-icon-button-margin-start: 20px;
+      }
+
+      /* Remove border-top added by .hr for the 1st cr-link-row. */
+      cr-link-row:first-of-type {
+        border-top: none;
+      }
+    </style>
+    <template is="dom-repeat" items="[[categoryList]]">
+      <cr-link-row class="hr two-line" data-route$="[[item.route]]"
+          id="[[item.id]]" label="[[i18n(item.label)]]"
+          on-click="onClick_" start-icon="[[item.icon]]"
+          sub-label="[[item.subLabel]]"
+          role-description="$i18n{subpageArrowRoleDescription}"></cr-link-row>
+    </template>
+  </template>
+  <script src="site_settings_list.js"></script>
+</dom-template>

chrome/browser/resources/settings/site_settings_page/site_settings_list.js

+// Copyright 2020 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.
+
+cr.define('settings', function() {
+  /**
+   * @param {string} setting Value from settings.ContentSetting.
+   * @param {string} enabled Non-block label ('feature X not allowed').
+   * @param {string} disabled Block label (likely just, 'Blocked').
+   * @param {?string} other Tristate value (maybe, 'session only').
+   */
+  function defaultSettingLabel(setting, enabled, disabled, other) {
+    if (setting == settings.ContentSetting.BLOCK) {
+      return disabled;
+    }
+    if (setting == settings.ContentSetting.ALLOW) {
+      return enabled;
+    }
+
+    return other || enabled;
+  }
+
+  Polymer({
+    is: 'settings-site-settings-list',
+
+    behaviors: [WebUIListenerBehavior, I18nBehavior],
+
+    properties: {
+      /** @type {!Array<!settings.CategoryListItem>} */
+      categoryList: Array,
+
+      /** @type {!Map<string, (string|Function)>} */
+      focusConfig: {
+        type: Object,
+        observer: 'focusConfigChanged_',
+      },
+    },
+
+    /** @type {?settings.SiteSettingsPrefsBrowserProxy} */
+    browserProxy: null,
+
+    /**
+     * @param {!Map<string, string>} newConfig
+     * @param {?Map<string, string>} oldConfig
+     * @private
+     */
+    focusConfigChanged_(newConfig, oldConfig) {
+      // focusConfig is set only once on the parent, so this observer should
+      // only fire once.
+      assert(!oldConfig);
+
+      // Populate the |focusConfig| map of the parent <settings-animated-pages>
+      // element, with additional entries that correspond to subpage trigger
+      // elements residing in this element's Shadow DOM.
+      for (const item of this.categoryList) {
+        const route = settings.routes[item.route];
+        this.focusConfig.set(route.path, () => this.async(() => {
+          cr.ui.focusWithoutInk(assert(this.$$(`#${item.id}`)));
+        }));
+      }
+    },
+
+    /** @override */
+    ready() {
+      this.browserProxy_ =
+          settings.SiteSettingsPrefsBrowserProxyImpl.getInstance();
+
+      for (const item of this.categoryList) {
+        // Default labels are not applicable to ZOOM_LEVELS or PDF.
+        if (item.id === settings.ContentSettingsTypes.ZOOM_LEVELS ||
+            item.id === 'pdfDocuments') {
+          continue;
+        }
+
+        this.refreshDefaultValueLabel_(item.id);
+      }
+
+      this.addWebUIListener(
+          'contentSettingCategoryChanged',
+          this.refreshDefaultValueLabel_.bind(this));
+
+      const hasProtocolHandlers = this.categoryList.some(item => {
+        return item.id === settings.ContentSettingsTypes.PROTOCOL_HANDLERS;
+      });
+
+      if (hasProtocolHandlers) {
+        // The protocol handlers have a separate enabled/disabled notifier.
+        this.addWebUIListener('setHandlersEnabled', enabled => {
+          this.updateDefaultValueLabel_(
+              settings.ContentSettingsTypes.PROTOCOL_HANDLERS,
+              enabled ? settings.ContentSetting.ALLOW :
+                        settings.ContentSetting.BLOCK);
+        });
+        this.browserProxy_.observeProtocolHandlersEnabledState();
+      }
+    },
+
+    /**
+     * @param {!settings.ContentSettingsTypes} category The category to refresh
+     *     (fetch current value + update UI)
+     * @private
+     */
+    refreshDefaultValueLabel_(category) {
+      this.browserProxy_.getDefaultValueForContentType(category).then(
+          defaultValue => {
+            this.updateDefaultValueLabel_(category, defaultValue.setting);
+          });
+    },
+
+    /**
+     * Updates the DOM for the given |category| to display a label that
+     * corresponds to the given |setting|.
+     * @param {!settings.ContentSettingsTypes} category
+     * @param {!settings.ContentSetting} setting
+     * @private
+     */
+    updateDefaultValueLabel_(category, setting) {
+      const element = this.$$(`#${category}`);
+      if (!element) {
+        // |category| is not part of this list.
+        return;
+      }
+
+      const index = this.$$('dom-repeat').indexForElement(element);
+      const dataItem = this.categoryList[index];
+      this.set(
+          `categoryList.${index}.subLabel`,
+          defaultSettingLabel(
+              setting,
+              dataItem.enabledLabel ? this.i18n(dataItem.enabledLabel) : '',
+              dataItem.disabledLabel ? this.i18n(dataItem.disabledLabel) : '',
+              dataItem.otherLabel ? this.i18n(dataItem.otherLabel) : null));
+    },
+
+    /**
+     * @param {!Event} event
+     * @private
+     */
+    onClick_(event) {
+      const dataSet =
+          /** @type {{route: string}} */ (event.currentTarget.dataset);
+      this.fire('site-settings-item-click', dataSet.route);
+    },
+  });
+
+  // #cr_define_end
+  return {defaultSettingLabel};
+});

chrome/browser/resources/settings/site_settings_page/site_settings_page.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
-<link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
-<link rel="import" href="chrome://resources/html/i18n_behavior.html">
-<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
-<link rel="import" href="../icons.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../router.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="../site_settings/constants.html">
-<link rel="import" href="../site_settings/site_settings_behavior.html">
-<link rel="import" href="../site_settings/site_settings_prefs_browser_proxy.html">
-<link rel="import" href="recent_site_permissions.html">
 <link rel="import" href="../metrics_browser_proxy.html">
+<link rel="import" href="recent_site_permissions.html">
+<link rel="import" href="site_settings_list.html">
 
 <dom-module id="settings-site-settings-page">
   <template>
-    <style include="settings-shared">
-      cr-link-row {
-        --cr-icon-button-margin-start: 20px;
-      }
-
-      /* Add min-height to prevent shifting as sublabels load. */
-      .two-line {
-        --cr-section-min-height: var(--cr-section-two-line-min-height);
-      }
-
-      /* Remove border-top added by .hr for the 1st cr-link-row. */
-      .settings-box + cr-link-row {
-        border-top: none;
-      }
-    </style>
+    <style include="settings-shared"></style>
     <template is="dom-if" if="[[!privacySettingsRedesignEnabled_]]">
       <div class="settings-box first line-only">
         <h2 class="first">$i18n{siteSettingsAllSites}</h2>
@@ -50,18 +33,57 @@
     <cr-link-row data-route="SITE_SETTINGS_ALL" id="allSites"
         class$="[[getClassForSiteSettingsAllLink_(noRecentSitePermissions_)]]"
         label="$i18n{siteSettingsAllSitesDescription}"
-        on-click="onTapNavigate_"
+        on-click="onSiteSettingsAllClick_"
         role-description="$i18n{subpageArrowRoleDescription}"></cr-link-row>
     <div class="settings-box first line-only">
       <h2>$i18n{siteSettingsPermissions}</h2>
     </div>
 
-    <template is="dom-repeat" items="[[categoryList_]]">
-      <cr-link-row class="hr two-line" data-route$="[[item.route]]"
-          id="[[item.id]]" label="[[i18n(item.label)]]"
-          on-click="onTapNavigate_" start-icon="[[item.icon]]"
-          sub-label="[[item.subLabel]]"
-          role-description="$i18n{subpageArrowRoleDescription}"></cr-link-row>
+    <template is="dom-if" if="[[!privacySettingsRedesignEnabled_]]">
+      <settings-site-settings-list
+          category-list="[[lists_.all]]"
+          focus-config="[[focusConfig]]"
+          on-site-settings-item-click="onSiteSettingsItemClick_">
+      </settings-site-settings-list>
+    </template>
+
+    <template is="dom-if" if="[[privacySettingsRedesignEnabled_]]">
+      <settings-site-settings-list
+          category-list="[[lists_.permissionsBasic]]"
+          focus-config="[[focusConfig]]"
+          on-site-settings-item-click="onSiteSettingsItemClick_">
+      </settings-site-settings-list>
+      <cr-expand-button class="settings-box"
+          expanded="{{permissionsExpanded_}}">
+        <div>$i18n{siteSettingsPermissionsMore}</div>
+      </cr-expand-button>
+      <iron-collapse opened="[[permissionsExpanded_]]">
+        <settings-site-settings-list
+            category-list="[[lists_.permissionsAdvanced]]"
+            focus-config="[[focusConfig]]"
+            on-site-settings-item-click="onSiteSettingsItemClick_">
+        </settings-site-settings-list>
+      </iron-collapse>
+
+      <div class="settings-box first line-only">
+        <h2>$i18n{siteSettingsContent}</h2>
+      </div>
+      <settings-site-settings-list
+          category-list="[[lists_.contentBasic]]"
+          focus-config="[[focusConfig]]"
+          on-site-settings-item-click="onSiteSettingsItemClick_">
+      </settings-site-settings-list>
+      <cr-expand-button class="settings-box"
+          expanded="{{contentExpanded_}}">
+        <div>$i18n{siteSettingsContentMore}</div>
+      </cr-expand-button>
+      <iron-collapse opened="[[contentExpanded_]]">
+        <settings-site-settings-list
+            category-list="[[lists_.contentAdvanced]]"
+            focus-config="[[focusConfig]]"
+            on-site-settings-item-click="onSiteSettingsItemClick_">
+        </settings-site-settings-list>
+      </iron-collapse>
     </template>
   </template>
   <script src="site_settings_page.js"></script>

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

@@ -1455,6 +1455,10 @@ void AddSiteSettingsStrings(content::WebUIDataSource* html_source,
     {"siteSettingsUsage", IDS_SETTINGS_SITE_SETTINGS_USAGE},
     {"siteSettingsUsageNone", IDS_SETTINGS_SITE_SETTINGS_USAGE_NONE},
     {"siteSettingsPermissions", IDS_SETTINGS_SITE_SETTINGS_PERMISSIONS},
+    {"siteSettingsPermissionsMore",
+     IDS_SETTINGS_SITE_SETTINGS_PERMISSIONS_MORE},
+    {"siteSettingsContent", IDS_SETTINGS_SITE_SETTINGS_CONTENT},
+    {"siteSettingsContentMore", IDS_SETTINGS_SITE_SETTINGS_CONTENT_MORE},
     {"siteSettingsSourceExtensionAllow",
      IDS_PAGE_INFO_PERMISSION_ALLOWED_BY_EXTENSION},
     {"siteSettingsSourceExtensionBlock",