Redesign Privacy Settings Card

As part of the Privacy Settings Redesign, controls which are currently
present on the main privacy card have been moved to subpages. This CL
adjusts the main privacy card to contain links to these subpages and
remove any now duplicated controls.

All of the changes in this CL are hidden behind the
privacySettingsRedesign flag. Test have been added to ensure the
existing behaviour is preserved when the flag is off.

Bug: 1032584
Change-Id: I174cd6b404c9d704165e3a8d7991e8429088dbe7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2088233
Commit-Queue: Theodore Olsauskas-Warren <sauski@google.com>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#747092}

chrome/app/settings_strings.grdp

@@ -1618,10 +1618,16 @@
   <message name="IDS_SETTINGS_PERMISSIONS" desc="Name of the settings page which allows users to manage permissions and site content settings">
     Permissions and content settings
   </message>
+  <message name="IDS_SETTINGS_PERMISSIONS_DESCRIPTION" desc="Description of the controls available on the permisisons and site content settings page">
+    Control what information websites can use and what content they can show you
+  </message>
   <message name="IDS_SETTINGS_SECURITY" desc="Name of the settings page which allows
   users to manage security settings">
     Security
   </message>
+  <message name="IDS_SETTINGS_SECURITY_DESCRIPTION" desc="Description of the controls available on the security settings page">
+    Safe Browsing and advanced security settings
+  </message>
   <message name="IDS_SETTINGS_SECURITY_ADVANCED_SECTION_LABEL" desc="Name of the section in the
     security settings page which groups advanced security settings">
     Advanced security
@@ -1895,6 +1901,9 @@
   <message name="IDS_SETTINGS_COOKIES_PAGE" desc="Title of the cookies settings page">
     Cookies
   </message>
+  <message name="IDS_SETTINGS_COOKIES_PAGE_DESCRIPTION" desc="Description of the settings page which controls cookie settings">
+    Allows websites to remember your visit and track you across the web
+  </message>
   <message name="IDS_SETTINGS_COOKIES_SITE_SPECIFIC_EXCEPTIONS" desc="Title of cookies page section for managing site specific cookie settings">
     Manage site specific exceptions
   </message>

chrome/browser/resources/settings/icons.html

@@ -47,6 +47,11 @@ NOTE: Chrome OS icons go in ./chromeos/os_icons.html.
         <path fill="none" d="M1 1h22v22H1z"></path>
       </g>
 
+      <!-- Permissions & Content Settings SVG -->
+      <g id="permissions">
+        <path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"></path>
+      </g>
+
       <!-- Protected Content SVG -->
       <g id="protected-content">
         <path d="M10,15 L6,11.1783439 L7.41,9.83121019 L10,12.2961783 L16.59,6 L18,7.3566879 L10,15 Z M21,3 L3,3 C1.89,3 1,3.89 1,5 L1,17 C1,18.1 1.89,19 3,19 L8,19 L8,21 L16,21 L16,19 L21,19 C22.1,19 22.99,18.1 22.99,17 L23,5 C23,3.89 22.1,3 21,3 Z M21,17 L3,17 L3,5 L21,5 L21,17 Z"></path>

chrome/browser/resources/settings/privacy_page/privacy_page.js

@@ -208,28 +208,45 @@ cr.define('settings', function() {
         type: Object,
         value() {
           const map = new Map();
-          // <if expr="use_nss_certs">
-          if (settings.routes.CERTIFICATES) {
-            map.set(settings.routes.CERTIFICATES.path, '#manageCertificates');
-          }
-          // </if>
-          if (settings.routes.SITE_SETTINGS) {
-            map.set(
-                settings.routes.SITE_SETTINGS.path,
-                '#site-settings-subpage-trigger');
-          }
 
-          if (settings.routes.SITE_SETTINGS_SITE_DATA) {
-            map.set(
-                settings.routes.SITE_SETTINGS_SITE_DATA.path,
-                '#site-data-trigger');
+          if (this.privacySettingsRedesignEnabled_) {
+            if (settings.routes.SECURITY) {
+              map.set(settings.routes.SECURITY.path, '#securityLinkRow');
+            }
+
+            if (settings.routes.COOKIES) {
+              map.set(settings.routes.COOKIES.path, '#cookiesLinkRow');
+            }
+
+            if (settings.routes.SITE_SETTINGS) {
+              map.set(
+                  settings.routes.SITE_SETTINGS.path, '#permissionsLinkRow');
+            }
+          } else {
+            // <if expr="use_nss_certs">
+            if (settings.routes.CERTIFICATES) {
+              map.set(settings.routes.CERTIFICATES.path, '#manageCertificates');
+            }
+            // </if>
+            if (settings.routes.SITE_SETTINGS) {
+              map.set(
+                  settings.routes.SITE_SETTINGS.path,
+                  '#site-settings-subpage-trigger');
+            }
+
+            if (settings.routes.SITE_SETTINGS_SITE_DATA) {
+              map.set(
+                  settings.routes.SITE_SETTINGS_SITE_DATA.path,
+                  '#site-data-trigger');
+            }
+
+            if (settings.routes.SECURITY_KEYS) {
+              map.set(
+                  settings.routes.SECURITY_KEYS.path,
+                  '#security-keys-subpage-trigger');
+            }
           }
 
-          if (settings.routes.SECURITY_KEYS) {
-            map.set(
-                settings.routes.SECURITY_KEYS.path,
-                '#security-keys-subpage-trigger');
-          }
           return map;
         },
       },
@@ -269,6 +286,38 @@ cr.define('settings', function() {
           'sync-status-changed', this.handleSyncStatus_.bind(this));
     },
 
+    /**
+     * @return {Element}
+     * @private
+     */
+    getControlForSiteSettingsSubpage_() {
+      return this.$$(
+          this.privacySettingsRedesignEnabled_ ?
+              '#permissionsLinkRow' :
+              '#site-settings-subpage-trigger');
+    },
+
+    /**
+     * @return {Element}
+     * @private
+     */
+    getControlForCertificatesSubpage_() {
+      return this.$$(
+          this.privacySettingsRedesignEnabled_ ? '#securityLinkRow' :
+                                                 '#manageCertificates');
+    },
+
+    /**
+     * @return {Element}
+     * @private
+     */
+    getControlForSecurityKeysSubpage_() {
+      return this.$$(
+          this.privacySettingsRedesignEnabled_ ?
+              '#securityLinkRow' :
+              '#security-keys-subpage-trigger');
+    },
+
     /**
      * @return {boolean}
      * @private
@@ -483,6 +532,13 @@ cr.define('settings', function() {
           settings.routes.CLEAR_BROWSER_DATA);
     },
 
+    /** @private */
+    onCookiesClick_() {
+      this.metricsBrowserProxy_.recordSettingsPageHistogram(
+          settings.SettingsPageInteractions.PRIVACY_SITE_SETTINGS_COOKIES);
+      settings.Router.getInstance().navigateTo(settings.routes.COOKIES);
+    },
+
     /** @private */
     onDialogClosed_() {
       settings.Router.getInstance().navigateTo(
@@ -490,6 +546,11 @@ cr.define('settings', function() {
       cr.ui.focusWithoutInk(assert(this.$.clearBrowsingData));
     },
 
+    /** @private */
+    onPermissionsPageClick_() {
+      settings.Router.getInstance().navigateTo(settings.routes.SITE_SETTINGS);
+    },
+
     /** @private */
     onSecurityKeysTap_() {
       this.metricsBrowserProxy_.recordSettingsPageHistogram(
@@ -497,6 +558,11 @@ cr.define('settings', function() {
       settings.Router.getInstance().navigateTo(settings.routes.SECURITY_KEYS);
     },
 
+    /** @private */
+    onSecurityPageClick_() {
+      settings.Router.getInstance().navigateTo(settings.routes.SECURITY);
+    },
+
     /** @private */
     getProtectedContentLabel_(value) {
       return value ? this.i18n('siteSettingsProtectedContentEnable') :

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

@@ -1032,7 +1032,9 @@ void AddPrivacyStrings(content::WebUIDataSource* html_source,
       {"doNotTrack", IDS_SETTINGS_ENABLE_DO_NOT_TRACK},
       {"doNotTrackDialogTitle", IDS_SETTINGS_ENABLE_DO_NOT_TRACK_DIALOG_TITLE},
       {"permissionsPageTitle", IDS_SETTINGS_PERMISSIONS},
+      {"permissionsPageDescription", IDS_SETTINGS_PERMISSIONS_DESCRIPTION},
       {"securityPageTitle", IDS_SETTINGS_SECURITY},
+      {"securityPageDescription", IDS_SETTINGS_SECURITY_DESCRIPTION},
       {"securityPageAdvancedSectionLabel",
        IDS_SETTINGS_SECURITY_ADVANCED_SECTION_LABEL},
       {"advancedProtectionProgramTitle",
@@ -1336,6 +1338,7 @@ void AddSiteSettingsStrings(content::WebUIDataSource* html_source,
     {"siteSettingsCategoryCamera", IDS_SETTINGS_SITE_SETTINGS_CAMERA},
     {"siteSettingsCameraLabel", IDS_SETTINGS_SITE_SETTINGS_CAMERA_LABEL},
     {"cookiePageTitle", IDS_SETTINGS_COOKIES_PAGE},
+    {"cookiePageDescription", IDS_SETTINGS_COOKIES_PAGE_DESCRIPTION},
     {"cookiesManageSiteSpecificExceptions",
      IDS_SETTINGS_COOKIES_SITE_SPECIFIC_EXCEPTIONS},
     {"siteSettingsCategoryCookies", IDS_SETTINGS_SITE_SETTINGS_COOKIES},

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

@@ -938,6 +938,11 @@ TEST_F('CrSettingsPrivacyPageTest', 'PrivacyPageTests', function() {
   mocha.run();
 });
 
+TEST_F('CrSettingsPrivacyPageTest', 'PrivacyPageRedesignTests', function() {
+  settings_privacy_page.registerPrivacyPageRedesignTests();
+  mocha.run();
+});
+
 // TODO(crbug.com/1043665): flaky crash on Linux Tests (dbg).
 TEST_F(
     'CrSettingsPrivacyPageTest', 'DISABLED_PrivacyPageSoundTests', function() {

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

@@ -15,6 +15,12 @@ cr.define('settings_privacy_page', function() {
       /** @type {SettingsPrivacyPageElement} */
       let page;
 
+      suiteSetup(function() {
+        loadTimeData.overrideValues({
+          privacySettingsRedesignEnabled: false,
+        });
+      });
+
       setup(function() {
         testMetricsBrowserProxy = new TestMetricsBrowserProxy();
         settings.MetricsBrowserProxyImpl.instance_ = testMetricsBrowserProxy;
@@ -117,6 +123,12 @@ cr.define('settings_privacy_page', function() {
       /** @type {SettingsPrivacyPageElement} */
       let page;
 
+      suiteSetup(function() {
+        loadTimeData.overrideValues({
+          privacySettingsRedesignEnabled: false,
+        });
+      });
+
       setup(function() {
         testBrowserProxy = new TestPrivacyPageBrowserProxy();
         settings.PrivacyPageBrowserProxyImpl.instance_ = testBrowserProxy;
@@ -141,6 +153,12 @@ cr.define('settings_privacy_page', function() {
       /** @type {SettingsPrivacyPageElement} */
       let page;
 
+      suiteSetup(function() {
+        loadTimeData.overrideValues({
+          privacySettingsRedesignEnabled: false,
+        });
+      });
+
       setup(function() {
         const testBrowserProxy = new TestPrivacyPageBrowserProxy();
         settings.PrivacyPageBrowserProxyImpl.instance_ = testBrowserProxy;
@@ -182,8 +200,9 @@ cr.define('settings_privacy_page', function() {
       });
 
       test('safeBrowsingReportingToggle', function() {
-        const safeBrowsingToggle = page.$.safeBrowsingToggle;
-        const safeBrowsingReportingToggle = page.$.safeBrowsingReportingToggle;
+        const safeBrowsingToggle = page.$$('#safeBrowsingToggle');
+        const safeBrowsingReportingToggle =
+            page.$$('#safeBrowsingReportingToggle');
         assertTrue(safeBrowsingToggle.checked);
         assertFalse(safeBrowsingReportingToggle.disabled);
         assertTrue(safeBrowsingReportingToggle.checked);
@@ -201,6 +220,76 @@ cr.define('settings_privacy_page', function() {
         assertFalse(safeBrowsingReportingToggle.disabled);
         assertTrue(safeBrowsingReportingToggle.checked);
       });
+
+      test('ElementVisibility', async function() {
+        await test_util.flushTasks();
+        assertFalse(test_util.isChildVisible(page, '#cookiesLinkRow'));
+        assertFalse(test_util.isChildVisible(page, '#securityLinkRow'));
+        assertFalse(test_util.isChildVisible(page, '#permissionsLinkRow'));
+
+        assertTrue(test_util.isChildVisible(page, '#clearBrowsingData'));
+        assertTrue(
+            test_util.isChildVisible(page, '#site-settings-subpage-trigger'));
+        assertTrue(test_util.isChildVisible(page, '#moreExpansion'));
+
+        page.$$('#moreExpansion').click();
+
+        assertTrue(test_util.isChildVisible(page, '#safeBrowsingToggle'));
+        assertTrue(
+            test_util.isChildVisible(page, '#passwordsLeakDetectionToggle'));
+        assertTrue(
+            test_util.isChildVisible(page, '#safeBrowsingReportingToggle'));
+        assertTrue(test_util.isChildVisible(page, '#doNotTrack'));
+        assertTrue(test_util.isChildVisible(page, '#canMakePaymentToggle'));
+        if (loadTimeData.getBoolean('enableSecurityKeysSubpage')) {
+          assertTrue(
+              test_util.isChildVisible(page, '#security-keys-subpage-trigger'));
+        }
+      });
+    });
+  }
+
+  function registerPrivacyPageRedesignTests() {
+    suite('PrivacyPageRedesignEnabled', function() {
+      /** @type {SettingsPrivacyPageElement} */
+      let page;
+
+      suiteSetup(function() {
+        loadTimeData.overrideValues({
+          privacySettingsRedesignEnabled: true,
+        });
+      });
+
+      setup(function() {
+        PolymerTest.clearBody();
+        page = document.createElement('settings-privacy-page');
+        document.body.appendChild(page);
+        return test_util.flushTasks();
+      });
+
+      teardown(function() {
+        page.remove();
+      });
+
+      test('ElementVisibility', function() {
+        assertTrue(test_util.isChildVisible(page, '#clearBrowsingData'));
+        assertTrue(test_util.isChildVisible(page, '#cookiesLinkRow'));
+        assertTrue(test_util.isChildVisible(page, '#securityLinkRow'));
+        assertTrue(test_util.isChildVisible(page, '#permissionsLinkRow'));
+
+        ['#site-settings-subpage-trigger',
+         '#moreExpansion',
+         '#safeBrowsingToggle',
+         '#passwordsLeakDetectionToggle',
+         '#safeBrowsingToggle',
+         '#safeBrowsingReportingToggle',
+         '#doNotTrack',
+         '#canMakePaymentToggle',
+         '#security-keys-subpage-trigger',
+        ].forEach(selector => {
+          assertFalse(test_util.isChildVisible(page, selector));
+        });
+      });
     });
   }
 
@@ -225,6 +314,12 @@ cr.define('settings_privacy_page', function() {
             .queryEffectiveChildren('#block-autoplay-setting');
       }
 
+      suiteSetup(function() {
+        loadTimeData.overrideValues({
+          privacySettingsRedesignEnabled: false,
+        });
+      });
+
       setup(() => {
         loadTimeData.overrideValues({enableBlockAutoplayContentSetting: true});
 
@@ -325,6 +420,7 @@ cr.define('settings_privacy_page', function() {
   return {
     registerNativeCertificateManagerTests,
     registerPrivacyPageTests,
+    registerPrivacyPageRedesignTests,
     registerPrivacyPageSoundTests,
     registerUMALoggingTests,
   };