Add collapsible radio toggle to the cookies page

This CL adds the visual elements but omits most of the plumbing necessary to combine all the prefs controlled by this toggle.  That will come in a follow up CL.

Bug: 1032584
Change-Id: I9c4770d88a91774fcd9efa65832ff3b07a3b8d71
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2092591
Commit-Queue: Theodore Olsauskas-Warren <sauski@google.com>
Auto-Submit: Sean Harrison <harrisonsean@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#748487}

chrome/app/settings_strings.grdp

@@ -1987,6 +1987,45 @@
   <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_CONTROLS" desc="Title of the general cookies control section.">
+    General Settings
+  </message>
+  <message name="IDS_SETTINGS_COOKIES_ALLOW_ALL" desc="Label for allow all cookies radio toggle">
+    Allow all cookies
+  </message>
+  <message name="IDS_SETTINGS_COOKIES_ALLOW_ALL_BULLET_ONE" desc="Description for the first bullet of allow all cookies radio toggle">
+    Sites can use cookies to improve your browsing experience, for example, to keep you signed in or remembering items in your shopping cart.
+  </message>
+  <message name="IDS_SETTINGS_COOKIES_ALLOW_ALL_BULLET_TWO" desc="Description for the first bullet of allow all cookies radio toggle">
+    Sites can use cookies to see your browsing activity across different sites, for example, to personalize ads.
+  </message>
+  <message name="IDS_SETTINGS_COOKIES_BLOCK_THIRD_PARTY_INCOGNITO" desc="Label for block third party cookies in incognito radio toggle">
+    Block third-party cookies in Incognito
+  </message>
+  <message name="IDS_SETTINGS_COOKIES_BLOCK_THIRD_PARTY_INCOGNITO_BULLET_ONE" desc="Description for the first bullet of block third party cookies in incognito radio toggle">
+    Sites can use cookies to improve your browsing experience, for example, to keep you signed in or remembering items in your shopping cart.
+  </message>
+  <message name="IDS_SETTINGS_COOKIES_BLOCK_THIRD_PARTY_INCOGNITO_BULLET_TWO" desc="Description for the first bullet of block third party cookies in incognito radio toggle">
+    While in incognito, sites can't use your cookies to see your browsing activity across different sites, for example, to personalize ads. Some sites may not work properly.
+  </message>
+  <message name="IDS_SETTINGS_COOKIES_BLOCK_THIRD_PARTY" desc="Label for block third party cookies radio toggle">
+    Block third-party cookies
+  </message>
+  <message name="IDS_SETTINGS_COOKIES_BLOCK_THIRD_PARTY_BULLET_ONE" desc="Description for the first bullet of block third party cookies radio toggle">
+    Sites can use cookies to improve your browsing experience, for example, to keep you signed in or remembering items in your shopping cart.
+  </message>
+  <message name="IDS_SETTINGS_COOKIES_BLOCK_THIRD_PARTY_BULLET_TWO" desc="Description for the first bullet of block third party cookies radio toggle">
+    Sites can't use your cookies to see your browsing activity across different sites, for example, to personalize ads.  Some sites may not work properly.
+  </message>
+  <message name="IDS_SETTINGS_COOKIES_BLOCK_ALL" desc="Label for block all cookies radio toggle">
+    Block all cookies (not recommended)
+  </message>
+  <message name="IDS_SETTINGS_COOKIES_BLOCK_ALL_BULLET_ONE" desc="Description for the first bullet of block all cookies radio toggle">
+    Sites can't use cookies to improve your browsing experience, for example, to keep you signed in or remembering items in your shopping cart. Many sites may not work properly.
+  </message>
+  <message name="IDS_SETTINGS_COOKIES_BLOCK_ALL_BULLET_TWO" desc="Description for the first bullet of block all cookies radio toggle">
+    Sites can't use your cookies to see your browsing activity across different sites, for example, to personalize ads.  Many sites may not work properly.
+  </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

@@ -38,6 +38,9 @@ NOTE: Chrome OS icons go in ./chromeos/os_icons.html.
         <path d="M15.5 7.5V7c0-.98-.5-1.5-1.5-1.5h-.5c-.276 0-.5-.224-.5-.5V3c0-.98-1-1-1-1C6.3 2 1.712 6.77 2.014 12.54c.265 5.046 4.4 9.18 9.448 9.446C17.23 22.288 22 17.7 22 12v-1c0-.553-.447-1-1-1h-1.998c-.277 0-.502-.225-.502-.502V9c0-.938-.48-1.48-1.5-1.5h-1.5zm-9.706 4.972c-1.057.2-1.966-.71-1.766-1.766.112-.587.592-1.067 1.18-1.178 1.055-.2 1.965.71 1.764 1.765-.11.588-.59 1.068-1.178 1.18zm1.734-5.178c-.2-1.057.71-1.966 1.766-1.766.587.11 1.067.59 1.178 1.178.2 1.057-.708 1.966-1.765 1.766-.587-.11-1.068-.59-1.18-1.178zm3.766 12.178c-1.057.2-1.966-.71-1.766-1.766.112-.587.592-1.067 1.18-1.178 1.056-.2 1.965.71 1.764 1.766-.11.587-.59 1.067-1.178 1.178zM11.5 14c-.828 0-1.5-.67-1.5-1.5s.672-1.5 1.5-1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5zm5 2c-.828 0-1.5-.67-1.5-1.5s.672-1.5 1.5-1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" fill-rule="evenodd"></path>
       </g>
 
+      <!-- Cookies Settings SVG -->
+      <g id="block"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"></path></g>
+
       <!-- The Google "G" icon in the Clear Browsing Data dialog. -->
       <g id="googleg">
         <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"></path>

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

@@ -32,6 +32,7 @@ js_library("collapse_radio_button") {
 
 js_library("cookies_page") {
   deps = [
+    "../prefs:prefs_behavior",
     "../site_settings:constants",
     "//ui/webui/resources/js:load_time_data",
   ]

chrome/browser/resources/settings/privacy_page/cookies_page.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="do_not_track_toggle.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
+<link rel="import" href="../icons.html">
+<link rel="import" href="../prefs/prefs.html">
+<link rel="import" href="../prefs/prefs_behavior.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="../site_settings/category_setting_exceptions.html">
 <link rel="import" href="../site_settings/constants.html">
+<link rel="import" href="collapse_radio_button.html">
+<link rel="import" href="do_not_track_toggle.html">
+
 
 <dom-module id="settings-cookies-page">
   <template>
@@ -11,8 +19,91 @@
       img {
         width: 100%;
       }
+
+      .block {
+        display: block;
+      }
+
+      .bullet-line {
+        align-items: center;
+        display: flex;
+        padding-bottom: 10px;
+        padding-top: 10px;
+      }
+
+      .bullet-line > div {
+        padding-inline-start: var(--cr-button-edge-spacing);
+      }
     </style>
     <img src="../images/cookies_banner.svg">
+    <div class="settings-box block first">
+      <h2>$i18n{cookiePageGeneralControls}</h2>
+      <cr-radio-group selected="[[selectCookiesControlRadio_]]"
+          selectable-elements="cr-radio-button, settings-collapse-radio-button"
+          on-selected-changed="onCookiesControlRadioChange_">
+        <settings-collapse-radio-button
+            name="[[cookiesControlEnum_.ALLOW_ALL]]"
+            label="$i18n{cookiePageAllowAll}">
+          <div slot="collapse">
+            <div class="bullet-line">
+              <iron-icon icon="settings:cookie"></iron-icon>
+              <div class="secondary">$i18n{cookiePageAllowAllBulOne}</div>
+            </div>
+            <div class="bullet-line">
+              <iron-icon icon="settings:cookie"></iron-icon>
+              <div class="secondary">$i18n{cookiePageAllowAllBulTwo}</div>
+            </div>
+          </div>
+        </settings-collapse-radio-button>
+        <settings-collapse-radio-button
+            name="[[cookiesControlEnum_.BLOCK_THIRD_INCOGNITO]]"
+            label="$i18n{cookiePageBlockThirdIncognito}">
+          <div slot="collapse">
+            <div class="bullet-line">
+              <iron-icon icon="settings:cookie"></iron-icon>
+              <div class="secondary">
+                    $i18n{cookiePageBlockThirdIncognitoBulOne}
+              </div>
+            </div>
+            <div class="bullet-line">
+              <iron-icon icon="settings:block"></iron-icon>
+              <div class="secondary">
+                    $i18n{cookiePageBlockThirdIncognitoBulTwo}
+              </div>
+            </div>
+          </div>
+        </settings-collapse-radio-button>
+        <settings-collapse-radio-button
+            name="[[cookiesControlEnum_.BLOCK_THIRD]]"
+            label="$i18n{cookiePageBlockThird}">
+          <div slot="collapse">
+            <div class="bullet-line">
+              <iron-icon icon="settings:cookie"></iron-icon>
+              <div class="secondary">$i18n{cookiePageBlockThirdBulOne}</div>
+            </div>
+            <div class="bullet-line">
+              <iron-icon icon="settings:block"></iron-icon>
+              <div class="secondary">$i18n{cookiePageBlockThirdBulTwo}</div>
+            </div>
+          </div>
+        </settings-collapse-radio-button>
+        <settings-collapse-radio-button
+            name="[[cookiesControlEnum_.BLOCK_ALL]]"
+            label="$i18n{cookiePageBlockAll}">
+          <div slot="collapse">
+            <div class="bullet-line">
+              <iron-icon icon="settings:block"></iron-icon>
+              <div class="secondary">$i18n{cookiePageBlockAllBulOne}</div>
+            </div>
+            <div class="bullet-line">
+              <iron-icon icon="settings:block"></iron-icon>
+              <div class="secondary">$i18n{cookiePageBlockAllBulTwo}</div>
+            </div>
+          </div>
+        </settings-collapse-radio-button>
+      </cr-radio-group>
+    </div>
+
     <div class="settings-box first">
       <h2>$i18n{cookiesManageSiteSpecificExceptions}</h2>
     </div>

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

@@ -8,9 +8,25 @@
  * settings.
  */
 
+(function() {
+/**
+ * Enumeration of all cookies radio controls.
+ * @enum {string}
+ */
+const CookiesControl = {
+  ALLOW_ALL: 'allow-all',
+  BLOCK_THIRD_INCOGNITO: 'block-third-incognito',
+  BLOCK_THIRD: 'block-third',
+  BLOCK_ALL: 'block-all',
+};
+
 Polymer({
   is: 'settings-cookies-page',
 
+  behaviors: [
+    PrefsBehavior,
+  ],
+
   properties: {
     /**
      * Preferences state.
@@ -20,9 +36,25 @@ Polymer({
       notify: true,
     },
 
+    /**
+     * Valid cookie states.
+     * @private
+     */
+    cookiesControlEnum_: {
+      type: Object,
+      value: CookiesControl,
+    },
+
+    /** @private {!CookiesControl} */
+    selectSafeBrowsingRadio_: {
+      type: String,
+      value: CookiesControl.BLOCK_THIRD_INCOGNITO,
+    },
+
     /**
      * @private {!settings.ContentSettingsTypes}
      */
     ContentSettingsTypes: {type: Object, value: settings.ContentSettingsTypes},
   },
 });
+})();

chrome/browser/resources/settings/settings_resources.grd

@@ -834,7 +834,8 @@
                  allowexternalscript= "true" />
       <structure name="IDR_SETTINGS_COOKIES_PAGE_JS"
                  file="privacy_page/cookies_page.js"
-                 type="chrome_html" />
+                 type="chrome_html"
+                 preprocess="true" />
       <structure name="IDR_SETTINGS_DO_NOT_TRACK_TOGGLE_HTML"
                  file="privacy_page/do_not_track_toggle.html"
                  type="chrome_html" />

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

@@ -1363,6 +1363,24 @@ void AddSiteSettingsStrings(content::WebUIDataSource* html_source,
     {"siteSettingsCameraLabel", IDS_SETTINGS_SITE_SETTINGS_CAMERA_LABEL},
     {"cookiePageTitle", IDS_SETTINGS_COOKIES_PAGE},
     {"cookiePageDescription", IDS_SETTINGS_COOKIES_PAGE_DESCRIPTION},
+    {"cookiePageGeneralControls", IDS_SETTINGS_COOKIES_CONTROLS},
+    {"cookiePageAllowAll", IDS_SETTINGS_COOKIES_ALLOW_ALL},
+    {"cookiePageAllowAllBulOne", IDS_SETTINGS_COOKIES_ALLOW_ALL_BULLET_ONE},
+    {"cookiePageAllowAllBulTwo", IDS_SETTINGS_COOKIES_ALLOW_ALL_BULLET_TWO},
+    {"cookiePageBlockThirdIncognito",
+     IDS_SETTINGS_COOKIES_BLOCK_THIRD_PARTY_INCOGNITO},
+    {"cookiePageBlockThirdIncognitoBulOne",
+     IDS_SETTINGS_COOKIES_BLOCK_THIRD_PARTY_INCOGNITO_BULLET_ONE},
+    {"cookiePageBlockThirdIncognitoBulTwo",
+     IDS_SETTINGS_COOKIES_BLOCK_THIRD_PARTY_INCOGNITO_BULLET_TWO},
+    {"cookiePageBlockThird", IDS_SETTINGS_COOKIES_BLOCK_THIRD_PARTY},
+    {"cookiePageBlockThirdBulOne",
+     IDS_SETTINGS_COOKIES_BLOCK_THIRD_PARTY_BULLET_ONE},
+    {"cookiePageBlockThirdBulTwo",
+     IDS_SETTINGS_COOKIES_BLOCK_THIRD_PARTY_BULLET_TWO},
+    {"cookiePageBlockAll", IDS_SETTINGS_COOKIES_BLOCK_ALL},
+    {"cookiePageBlockAllBulOne", IDS_SETTINGS_COOKIES_BLOCK_ALL_BULLET_ONE},
+    {"cookiePageBlockAllBulTwo", IDS_SETTINGS_COOKIES_BLOCK_ALL_BULLET_TWO},
     {"cookiesManageSiteSpecificExceptions",
      IDS_SETTINGS_COOKIES_SITE_SPECIFIC_EXCEPTIONS},
     {"siteSettingsCategoryCookies", IDS_SETTINGS_SITE_SETTINGS_COOKIES},