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/resources/settings/site_settings_page/site_settings_page.js

@@ -9,23 +9,6 @@
  */
 
 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').
-   * @private
-   */
-  function defaultSettingLabel(setting, enabled, disabled, other) {
-    if (setting == settings.ContentSetting.BLOCK) {
-      return disabled;
-    }
-    if (setting == settings.ContentSetting.ALLOW) {
-      return enabled;
-    }
-    return other || enabled;
-  }
-
   /**
    * @typedef{{
    *   route: string,
@@ -40,11 +23,20 @@ cr.define('settings', function() {
    */
   let CategoryListItem;
 
+  const Id = settings.ContentSettingsTypes;
+
+  /**
+   * @type {?Map<!settings.ContentSettingsTypes, !settings.CategoryListItem>}
+   */
+  let categoryItemMap = null;
+
   /**
    * @return {!Map<!settings.ContentSettingsTypes, !settings.CategoryListItem>}
    */
-  function buildCategoryItemMap() {
-    const Id = settings.ContentSettingsTypes;
+  function getCategoryItemMap() {
+    if (categoryItemMap !== null) {
+      return categoryItemMap;
+    }
 
     // The following list is ordered alphabetically by |id|. The order in which
     // these appear in the UI is determined elsewhere in this file.
@@ -302,25 +294,47 @@ cr.define('settings', function() {
       },
     ];
 
-    return new Map(categoryList.map(item => [item.id, item]));
+    categoryItemMap = new Map(categoryList.map(item => [item.id, item]));
+    return categoryItemMap;
+  }
+
+  /**
+   * @param {!Array<!settings.ContentSettingsTypes>} orderedIdList
+   * @return {!Array<!settings.CategoryListItem>}
+   */
+  function buildItemListFromIds(orderedIdList) {
+    const map = getCategoryItemMap();
+    const orderedList = [];
+    for (const id of orderedIdList) {
+      const item = map.get(id);
+      if (item.shouldShow === undefined || item.shouldShow()) {
+        orderedList.push(item);
+      }
+    }
+    return orderedList;
   }
 
   Polymer({
     is: 'settings-site-settings-page',
 
-    behaviors: [
-      SiteSettingsBehavior, WebUIListenerBehavior, I18nBehavior,
-      settings.RouteObserverBehavior
-    ],
+    behaviors: [settings.RouteObserverBehavior],
 
     properties: {
-      /** @private {!Array<!settings.CategoryListItem>} */
-      categoryList_: {
-        type: Array,
+      /**
+       * @private {{
+       *   all: (!Array<!settings.CategoryListItem>|undefined),
+       *   permissionsBasic: (!Array<!settings.CategoryListItem>|undefined),
+       *   permissionsAdvanced: (!Array<!settings.CategoryListItem>|undefined),
+       *   contentBasic: (!Array<!settings.CategoryListItem>|undefined),
+       *   contentAdvanced: (!Array<!settings.CategoryListItem>|undefined)
+       * }}
+       */
+      lists_: {
+        type: Object,
         value: function() {
-          const Id = settings.ContentSettingsTypes;
-          // Ordered according to how these should appear in the UI.
-          const orderedIdList = [
+          if (!loadTimeData.getBoolean('privacySettingsRedesignEnabled')) {
+            return {
+              all: buildItemListFromIds([
                 Id.COOKIES,
                 Id.GEOLOCATION,
                 Id.CAMERA,
@@ -353,18 +367,53 @@ cr.define('settings', function() {
                 Id.BLUETOOTH_SCANNING,
                 Id.AR,
                 Id.VR,
-          ];
-
-          const map = buildCategoryItemMap();
-          const orderedList = [];
-          for (const id of orderedIdList) {
-            const item = map.get(id);
-            if (item.shouldShow === undefined || item.shouldShow()) {
-              orderedList.push(item);
+              ]),
+            };
           }
+
+          return {
+            permissionsBasic: buildItemListFromIds([
+              Id.GEOLOCATION,
+              Id.CAMERA,
+              Id.MIC,
+              Id.NOTIFICATIONS,
+              Id.BACKGROUND_SYNC,
+            ]),
+            permissionsAdvanced: buildItemListFromIds([
+              Id.SENSORS,
+              Id.AUTOMATIC_DOWNLOADS,
+              Id.UNSANDBOXED_PLUGINS,
+              Id.PROTOCOL_HANDLERS,
+              Id.MIDI_DEVICES,
+              Id.USB_DEVICES,
+              Id.SERIAL_PORTS,
+              Id.NATIVE_FILE_SYSTEM_WRITE,
+              Id.HID_DEVICES,
+              Id.CLIPBOARD,
+              Id.PAYMENT_HANDLER,
+              Id.BLUETOOTH_SCANNING,
+              Id.AR,
+              Id.VR,
+            ]),
+            contentBasic: buildItemListFromIds([
+              Id.COOKIES,
+              Id.JAVASCRIPT,
+              Id.PLUGINS,
+              Id.IMAGES,
+              Id.POPUPS,
+            ]),
+            contentAdvanced: buildItemListFromIds([
+              Id.SOUND,
+              Id.ADS,
+              Id.ZOOM_LEVELS,
+              'pdfDocuments',
+              // <if expr="chromeos">
+              Id.PROTECTED_CONTENT,
+              // </if>
+              Id.MIXEDSCRIPT,
+            ]),
+          };
         }
-          return orderedList;
-        },
       },
 
       /** @type {!Map<string, (string|Function)>} */
@@ -376,13 +425,19 @@ cr.define('settings', function() {
       /** @private */
       privacySettingsRedesignEnabled_: {
         type: Boolean,
-        value: loadTimeData.getBoolean('privacySettingsRedesignEnabled'),
+        value: function() {
+          return loadTimeData.getBoolean('privacySettingsRedesignEnabled');
+        },
       },
 
+      /** @private */
+      permissionsExpanded_: Boolean,
+
+      /** @private */
+      contentExpanded_: Boolean,
+
       /* @private */
-      noRecentSitePermissions_: {
-        type: Boolean,
-      },
+      noRecentSitePermissions_: Boolean,
     },
 
     /**
@@ -394,89 +449,22 @@ cr.define('settings', function() {
       // 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.
-
-      // Register the allSites route manually, since it is not part of the
-      // |categoryList_|.
-      /** @type {!Array<{id: string, route: string}>} */ const list =
-          this.categoryList_.slice();
-      list.push({id: 'allSites', route: 'SITE_SETTINGS_ALL'});
-
-      for (const item of list) {
-        const route = settings.routes[item.route];
-        this.focusConfig.set(route.path, () => this.async(() => {
-          cr.ui.focusWithoutInk(assert(this.$$(`#${item.id}`)));
-        }));
-      }
-    },
-
-    /** @override */
-    ready() {
-      this.metricsBrowserProxy_ =
-          settings.MetricsBrowserProxyImpl.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));
-
-      // 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.focusConfig.set(settings.routes.SITE_SETTINGS_ALL.path, () => {
+        cr.ui.focusWithoutInk(assert(this.$$('#allSites')));
       });
-      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);
-          });
+    /** @private */
+    onSiteSettingsAllClick_(event) {
+      this.navigateToRoute_('SITE_SETTINGS_ALL');
     },
 
     /**
-     * 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
+     * @param {!CustomEvent<string>} event
      * @private
      */
-    updateDefaultValueLabel_(category, setting) {
-      if (!this.isConnected) {
-        // Do nothing if the element has been detached from the DOM (happens in
-        // tests).
-        return;
-      }
-
-      const element = this.$$(`#${category}`);
-      const index = this.$$('dom-repeat').indexForElement(element);
-      const dataItem = this.categoryList_[index];
-      const subLabel = defaultSettingLabel(
-          setting,
-          dataItem.enabledLabel ? this.i18n(dataItem.enabledLabel) : '',
-          dataItem.disabledLabel ? this.i18n(dataItem.disabledLabel) : '',
-          dataItem.otherLabel ? this.i18n(dataItem.otherLabel) : null);
-      this.set(`categoryList_.${index}.subLabel`, subLabel);
+    onSiteSettingsItemClick_(event) {
+      this.navigateToRoute_(event.detail);
     },
 
     /**
@@ -510,18 +498,17 @@ cr.define('settings', function() {
 
     /**
      * Navigate to the route specified in the event dataset.
-     * @param {!Event} event The tap event.
+     * @param {string} routeName The name of the route to navigate to.
      * @private
      */
-    onTapNavigate_(event) {
-      const dataSet =
-          /** @type {{route: string}} */ (event.currentTarget.dataset);
-      this.metricsBrowserProxy_.recordSettingsPageHistogram(
-          settings.SettingsPageInteractions['PRIVACY_' + dataSet.route]);
-      settings.Router.getInstance().navigateTo(settings.routes[dataSet.route]);
+    navigateToRoute_(routeName) {
+      settings.MetricsBrowserProxyImpl.getInstance()
+          .recordSettingsPageHistogram(
+              settings.SettingsPageInteractions['PRIVACY_' + routeName]);
+      settings.Router.getInstance().navigateTo(settings.routes[routeName]);
     },
   });
 
   // #cr_define_end
-  return {CategoryListItem, defaultSettingLabel};
+  return {CategoryListItem};
 });

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",

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

@@ -9,14 +9,22 @@ suite('SiteSettingsPage', function() {
   /** @type {SettingsSiteSettingsPageElement} */
   let page;
 
-  setup(function() {
+  suiteSetup(function() {
+    loadTimeData.overrideValues({
+      privacySettingsRedesignEnabled: false,
+    });
+  });
+
+  function setupPage() {
     testBrowserProxy = new TestMetricsBrowserProxy();
     settings.MetricsBrowserProxyImpl.instance_ = testBrowserProxy;
     PolymerTest.clearBody();
     page = document.createElement('settings-site-settings-page');
     document.body.appendChild(page);
     Polymer.dom.flush();
-  });
+  }
+
+  setup(setupPage);
 
   teardown(function() {
     page.remove();
@@ -55,288 +63,62 @@ suite('SiteSettingsPage', function() {
             settings.ContentSetting.IMPORTANT_CONTENT, 'a', 'b', 'c'));
   });
 
-  test('LogAllSiteSettingsPageClicks', async function() {
-    page.$$('#allSites').click();
-    let result =
+  async function testClicks(listElement) {
+    const triggers = listElement.shadowRoot.querySelectorAll('cr-link-row');
+    assertTrue(triggers.length > 0);
+    const domRepeat = listElement.$$('dom-repeat').template;
+    for (const trigger of triggers) {
+      const data = Polymer.Templatize.modelForElement(domRepeat, trigger);
+      assertTrue(!!data);
+      trigger.click();
+      const result =
           await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
       assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_ALL, result);
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.COOKIES}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_COOKIES,
-        result);
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.GEOLOCATION}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_LOCATION,
-        result);
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.CAMERA}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_CAMERA, result);
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.MIC}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_MICROPHONE,
-        result);
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.SENSORS}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_SENSORS,
-        result);
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.NOTIFICATIONS}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_NOTIFICATIONS,
-        result);
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.JAVASCRIPT}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_JAVASCRIPT,
-        result);
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.PLUGINS}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_FLASH, result);
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.IMAGES}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_IMAGES, result);
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.POPUPS}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_POPUPS, result);
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.BACKGROUND_SYNC}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_BACKGROUND_SYNC,
-        result);
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.SOUND}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_SOUND, result);
-
-    if (loadTimeData.getBoolean('enableSafeBrowsingSubresourceFilter')) {
-      settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-      testBrowserProxy.reset();
-
-      page.$$(`#${settings.ContentSettingsTypes.ADS}`).click();
-      result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-      assertEquals(
-          settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_ADS, result);
-    }
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.AUTOMATIC_DOWNLOADS}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions
-            .PRIVACY_SITE_SETTINGS_AUTOMATIC_DOWNLOADS,
-        result);
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.UNSANDBOXED_PLUGINS}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions
-            .PRIVACY_SITE_SETTINGS_UNSANDBOXED_PLUGINS,
-        result);
-
-    if (!loadTimeData.getBoolean('isGuest')) {
-      settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-      testBrowserProxy.reset();
-
-      page.$$(`#${settings.ContentSettingsTypes.PROTOCOL_HANDLERS}`).click();
-      result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-      assertEquals(
-          settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_HANDLERS,
-          result);
-    }
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.MIDI_DEVICES}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_MIDI_DEVICES,
-        result);
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.ZOOM_LEVELS}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_ZOOM_LEVELS,
-        result);
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.USB_DEVICES}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_USB_DEVICES,
-        result);
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.SERIAL_PORTS}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_SERIAL_PORTS,
-        result);
-
-    if (loadTimeData.getBoolean('enableNativeFileSystemWriteContentSetting')) {
-      settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-      testBrowserProxy.reset();
-
-      page.$$(`#${settings.ContentSettingsTypes.NATIVE_FILE_SYSTEM_WRITE}`)
-          .click();
-      result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-      assertEquals(
-          settings.SettingsPageInteractions
-              .PRIVACY_SITE_SETTINGS_NATIVE_FILE_SYSTEM_WRITE,
-          result);
-    }
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$('#pdfDocuments').click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_PDF_DOCUMENTS,
+          settings.SettingsPageInteractions[`PRIVACY_${data.item.route}`],
           result);
-
       settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
       testBrowserProxy.reset();
-
-    if (cr.isChromeOS) {
-      page.$$(`#${settings.ContentSettingsTypes.PROTECTED_CONTENT}`).click();
-      result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-      assertEquals(
-          settings.SettingsPageInteractions
-              .PRIVACY_SITE_SETTINGS_PROTECTED_CONTENT,
-          result);
     }
-
-    settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-    testBrowserProxy.reset();
-
-    page.$$(`#${settings.ContentSettingsTypes.CLIPBOARD}`).click();
-    result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-    assertEquals(
-        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_CLIPBOARD,
-        result);
-
-    if (loadTimeData.getBoolean('enablePaymentHandlerContentSetting')) {
-      settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-      testBrowserProxy.reset();
-
-      page.$$(`#${settings.ContentSettingsTypes.PAYMENT_HANDLER}`).click();
-      result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-      assertEquals(
-          settings.SettingsPageInteractions
-              .PRIVACY_SITE_SETTINGS_PAYMENT_HANDLER,
-          result);
   }
 
-    if (loadTimeData.getBoolean('enableInsecureContentContentSetting')) {
-      settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-      testBrowserProxy.reset();
-
-      page.$$(`#${settings.ContentSettingsTypes.MIXEDSCRIPT}`).click();
-      result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
+  test('LogAllSiteSettingsPageClicks', async function() {
+    // Test the allSites case.
+    page.$$('#allSites').click();
+    const result =
+        await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
     assertEquals(
-          settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_MIXEDSCRIPT,
-          result);
-    }
-
-    if (loadTimeData.getBoolean('enableExperimentalWebPlatformFeatures')) {
+        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_ALL, result);
     settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
     testBrowserProxy.reset();
 
-      page.$$(`#${settings.ContentSettingsTypes.BLUETOOTH_SCANNING}`).click();
-      result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-      assertEquals(
-          settings.SettingsPageInteractions
-              .PRIVACY_SITE_SETTINGS_BLUETOOTH_SCANNING,
-          result);
-    }
+    // Test all remaining items.
+    const lists =
+        page.shadowRoot.querySelectorAll('settings-site-settings-list');
+    assertEquals(1, lists.length);
+    await testClicks(lists[0]);
+  });
 
-    if (loadTimeData.getBoolean('enableWebXrContentSetting')) {
-      settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
-      testBrowserProxy.reset();
+  test('LogAllSiteSettingsPageClicks_Redesign', async function() {
+    loadTimeData.overrideValues({
+      privacySettingsRedesignEnabled: true,
+    });
+    setupPage();
 
-      page.$$(`#${settings.ContentSettingsTypes.AR}`).click();
-      result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
+    // Test the allSites case.
+    page.$$('#allSites').click();
+    const result =
+        await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
     assertEquals(
-          settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_AR, result);
-
-
+        settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_ALL, result);
     settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
     testBrowserProxy.reset();
 
-      page.$$(`#${settings.ContentSettingsTypes.VR}`).click();
-      result = await testBrowserProxy.whenCalled('recordSettingsPageHistogram');
-      assertEquals(
-          settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_VR, result);
+    // Test all remaining items (which are spread over four separate lists).
+    const lists =
+        page.shadowRoot.querySelectorAll('settings-site-settings-list');
+    assertEquals(4, lists.length);
+    for (const list of lists) {
+      await testClicks(list);
     }
   });
 });