Settings: Create new collapsible radio toggle element

Use the new element to create a new control for safebrowsing that includes their enhanced mode.

Bug: 1032584
Change-Id: Ife6184d1ed7d427eed64c2a65484e1c3af21588a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2074300
Commit-Queue: Sean Harrison <harrisonsean@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#747840}

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

@@ -6,6 +6,7 @@ import("//third_party/closure_compiler/compile_js.gni")
 
 js_type_check("closure_compile") {
   deps = [
+    ":collapse_radio_button",
     ":cookies_page",
     ":passwords_leak_detection_toggle",
     ":personalization_options",
@@ -22,6 +23,12 @@ js_type_check("closure_compile") {
   ]
 }
 
+js_library("collapse_radio_button") {
+  deps = [
+    "//ui/webui/resources/cr_elements/cr_radio_button:cr_radio_button_behavior",
+  ]
+}
+
 js_library("cookies_page") {
   deps = [
     "../site_settings:constants",

chrome/browser/resources/settings/privacy_page/collapse_radio_button.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_radio_button/cr_radio_button_behavior.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
+<link rel="import" href="../settings_shared_css.html">
+
+<dom-module id="settings-collapse-radio-button">
+  <template>
+    <style include="settings-shared cr-radio-button-style">
+      :host {
+        display: block;
+      }
+
+      #radioCollapse {
+        display: flex;
+        padding: 0;
+      }
+
+      iron-collapse {
+        margin-inline-end: var(--cr-section-indent-width);
+        margin-inline-start: var(--cr-section-indent-width);
+      }
+
+      #labelWrapper {
+        padding-bottom: 6px;
+        padding-top: 6px;
+      }
+    </style>
+
+    <div id="radioCollapse" class="settings-box first">
+      <div aria-checked$="[[getAriaChecked_(checked)]]"
+          aria-disabled$="[[getAriaDisabled_(disabled)]]"
+          aria-labelledby="label"
+          class="disc-wrapper"
+          id="button"
+          role="radio"
+          tabindex$="[[buttonTabIndex_]]"
+          on-keydown="onInputKeydown_">
+        <div class="disc-border"></div>
+        <div class="disc"></div>
+      </div>
+      <div id="labelWrapper">
+        <div id="label" aria-hidden="true">
+          [[label]]
+          <slot name="label"></slot>
+        </div>
+        <div hidden$="[[!subLabel]]" class="secondary">
+          [[subLabel]]
+          <slot name="sub-label"></slot>
+        </div>
+      </div>
+      <div class="separator"></div>
+      <cr-expand-button expanded="{{expanded}}"></cr-expand-button>
+    </div>
+
+    <iron-collapse opened="[[expanded]]">
+      <slot name="collapse"></slot>
+    </iron-collapse>
+
+  </template>
+  <script src="collapse_radio_button.js"></script>
+</dom-module>

chrome/browser/resources/settings/privacy_page/collapse_radio_button.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.
+
+Polymer({
+  is: 'settings-collapse-radio-button',
+
+  behaviors: [
+    CrRadioButtonBehavior,
+  ],
+
+  properties: {
+    expanded: {
+      type: Boolean,
+      notify: true,
+      value: false,
+    },
+
+    label: String,
+
+    subLabel: {
+      type: String,
+      value: '',  // Allows the $hidden= binding to run without being set.
+    },
+  },
+
+  observers: ['onCheckedChanged_(checked)'],
+
+  /** @private */
+  onCheckedChanged_() {
+    // The iron-collapse should open when a user selects the radio button.
+    this.expanded = this.checked;
+  },
+});

chrome/browser/resources/settings/privacy_page/security_page.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="collapse_radio_button.html">
 <link rel="import" href="passwords_leak_detection_toggle.html">
 <link rel="import" href="privacy_page_browser_proxy.html">
 <link rel="import" href="secure_dns.html">

chrome/browser/resources/settings/settings_resources.grd

@@ -844,6 +844,12 @@
                  file="privacy_page/passwords_leak_detection_toggle.js"
                  type="chrome_html"
                  preprocess="true" />
+      <structure name="IDR_SETTINGS_COLLAPSE_RADIO_BUTTON_HTML"
+                 file="privacy_page/collapse_radio_button.html"
+                 type="chrome_html" />
+      <structure name="IDR_SETTINGS_COLLAPSE_RADIO_BUTTON_JS"
+                 file="privacy_page/collapse_radio_button.js"
+                 type="chrome_html" />
       <structure name="IDR_SETTINGS_SECURE_DNS_HTML"
                  file="privacy_page/secure_dns.html"
                  type="chrome_html" />

chrome/browser/resources/settings/settings_shared_css.html

@@ -101,6 +101,7 @@
         color: var(--google-blue-500);
       }
 
+      collapse-radio-button,
       controlled-radio-button,
       cr-radio-button {
         min-height: var(--settings-row-min-height);

chrome/test/data/webui/settings/collapse_radio_button_tests.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.
+
+suite('CrCollapseRadioButton', function() {
+  /** @type {SettingsCollapseRadioButtonElement} */
+  let collapseRadioButton;
+
+  setup(function() {
+    PolymerTest.clearBody();
+    collapseRadioButton =
+        document.createElement('settings-collapse-radio-button');
+    document.body.appendChild(collapseRadioButton);
+    Polymer.dom.flush();
+  });
+
+  teardown(function() {
+    collapseRadioButton.remove();
+  });
+
+  test('openOnSelection', function() {
+    const collapse = collapseRadioButton.$$('iron-collapse');
+    collapseRadioButton.checked = false;
+    Polymer.dom.flush();
+    assertFalse(collapse.opened);
+    collapseRadioButton.checked = true;
+    Polymer.dom.flush();
+    assertTrue(collapse.opened);
+  });
+
+  test('closeOnDeselect', function() {
+    const collapse = collapseRadioButton.$$('iron-collapse');
+    collapseRadioButton.checked = true;
+    Polymer.dom.flush();
+    assertTrue(collapse.opened);
+    collapseRadioButton.checked = false;
+    Polymer.dom.flush();
+    assertFalse(collapse.opened);
+  });
+
+  // When the button is not selected clicking the expand icon should still
+  // open the iron collapse.
+  test('openOnExpandHit', function() {
+    const collapse = collapseRadioButton.$$('iron-collapse');
+    collapseRadioButton.checked = false;
+    Polymer.dom.flush();
+    assertFalse(collapse.opened);
+    collapseRadioButton.$$('cr-expand-button').click();
+    Polymer.dom.flush();
+    assertTrue(collapse.opened);
+  });
+
+  // When the button is selected clicking the expand icon should still close
+  // the iron collapse.
+  test('closeOnExpandHitWhenSelected', function() {
+    const collapse = collapseRadioButton.$$('iron-collapse');
+    collapseRadioButton.checked = true;
+    Polymer.dom.flush();
+    assertTrue(collapse.opened);
+    collapseRadioButton.$$('cr-expand-button').click();
+    Polymer.dom.flush();
+    assertFalse(collapse.opened);
+  });
+});

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

@@ -1954,6 +1954,29 @@ TEST_F('CrSettingsSearchTest', 'All', function() {
   mocha.run();
 });
 
+/**
+ * @constructor
+ * @extends {CrSettingsBrowserTest}
+ */
+function CrCollapseRadioButtonTest() {}
+
+CrCollapseRadioButtonTest.prototype = {
+  __proto__: CrSettingsBrowserTest.prototype,
+
+  /** @override */
+  browsePreload: 'chrome://settings/privacy_page/collapse_radio_button.html',
+
+  extraLibraries: CrSettingsBrowserTest.prototype.extraLibraries.concat([
+    '../test_util.js',
+    'collapse_radio_button_tests.js',
+  ]),
+};
+
+TEST_F('CrCollapseRadioButtonTest', 'All', function() {
+  mocha.run();
+});
+
+
 /**
  * @constructor
  * @extends {CrSettingsBrowserTest}