WebUI[MD-refresh]: create cr-radio-button to match spec.

This CL creates a new cr-radio-button element with the MD-refresh spec.
This CL also replaces all paper-radio-button within Settings with
cr-radio-button.

Most of the cr-radio-button's functionalities and styles are encapsulated
in separate files in a shared location, so that the controlled-radio-button
element in settings can reuse them.

There will be a follow-up CL to then replace all of paper-radio-button's
usage outside of Settings.

Bug: 840527
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I4fc47fa0b8186b5d6ef0a3b678cc68bbc58a8e3d
Reviewed-on: https://chromium-review.googlesource.com/1053299
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#558620}

chrome/browser/resources/settings/about_page/channel_switcher_dialog.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
 <link rel="import" href="about_page_browser_proxy.html">
 <link rel="import" href="../settings_shared_css.html">
@@ -21,17 +21,17 @@
         <!-- TODO(dbeam): this can be policy-controlled. Show this in the UI.
              https://www.chromium.org/administrators/policy-list-3#ChromeOsReleaseChannel
         -->
-        <paper-radio-group
+        <paper-radio-group selectable="cr-radio-button"
             on-paper-radio-group-changed="onChannelSelectionChanged_">
-          <paper-radio-button name="[[browserChannelEnum_.STABLE]]">
+          <cr-radio-button name="[[browserChannelEnum_.STABLE]]">
             $i18n{aboutChannelDialogStable}
-          </paper-radio-button>
-          <paper-radio-button name="[[browserChannelEnum_.BETA]]">
+          </cr-radio-button>
+          <cr-radio-button name="[[browserChannelEnum_.BETA]]">
             $i18n{aboutChannelDialogBeta}
-          </paper-radio-button>
-          <paper-radio-button name="[[browserChannelEnum_.DEV]]">
+          </cr-radio-button>
+          <cr-radio-button name="[[browserChannelEnum_.DEV]]">
             $i18n{aboutChannelDialogDev}
-          </paper-radio-button>
+          </cr-radio-button>
         </paper-radio-group>
         <iron-selector id="warningSelector">
           <div>

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

@@ -33,6 +33,7 @@ js_library("controlled_radio_button") {
     ":pref_control_behavior",
     "../prefs:pref_util",
     "//third_party/polymer/v1_0/components-chromium/iron-a11y-keys-behavior:iron-a11y-keys-behavior-extracted",
+    "//ui/webui/resources/cr_elements/cr_radio_button:cr_radio_button_behavior",
     "//ui/webui/resources/js:assert",
   ]
   externs_list = [ "$externs_path/settings_private.js" ]

chrome/browser/resources/settings/controls/controlled_radio_button.html

 <link rel="import" href="chrome://resources/html/polymer.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/cr_elements/policy/cr_policy_pref_indicator.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
 <link rel="import" href="pref_control_behavior.html">
@@ -8,109 +10,15 @@
 
 <dom-module id="controlled-radio-button">
   <template>
-    <style include="settings-shared">
-      :host {
-        --ink-to-circle: calc((var(--paper-radio-button-ink-size) -
-                               var(--paper-radio-button-size)) / 2);
-        @apply --settings-actionable;
-        align-items: center;
-        display: flex;
-        outline: none;
-      }
-
-      #labelWrapper {
-        -webkit-margin-start: var(--paper-radio-button-label-spacing, 10px);
-        flex: 1;
-      }
-
-      #label {
-        color: var(--paper-radio-button-label-color, var(--primary-text-color));
-      }
-
-      .circle,
-      .disc,
-      .disc-wrapper,
-      paper-ripple {
-        border-radius: 50%;
-      }
-
-      .disc-wrapper {
-        height: var(--paper-radio-button-ink-size);
-        margin: 0 calc(-1 * var(--ink-to-circle));
-        position: relative;
-        width: var(--paper-radio-button-ink-size);
-      }
-
-      .circle,
-      .disc {
-        box-sizing: border-box;
-        height: var(--paper-radio-button-size);
-        left: var(--ink-to-circle);
-        position: absolute;
-        top: var(--ink-to-circle);
-        width: var(--paper-radio-button-size);
-      }
-
-      .circle {
-        border: 2px solid var(--paper-radio-button-unchecked-color,
-                              var(--primary-text-color));
-      }
-
-      :host([checked]) .circle {
-        border-color: var(--paper-radio-button-checked-color,
-                          var(--primary-color));
-      }
-
-      .disc {
-        background-color: var(--paper-radio-button-unchecked-background-color,
-                              transparent);
-        transform: scale(0);
-        transition: border-color 200ms, transform 200ms;
-      }
-
-      :host([checked]) .disc {
-        background-color: var(--paper-radio-button-checked-color,
-                              var(--primary-color));
-        transform: scale(0.5);
-      }
-
-      paper-ripple {
-        color: var(--paper-radio-button-unchecked-ink-color,
-                   var(--primary-text-color));
-        opacity: .6;
-      }
-
-      :host([checked]) paper-ripple {
-        color: var(--paper-radio-button-checked-ink-color,
-                   var(--primary-text-color));
-      }
-
-      :host(:not([disabled])) {
-        @apply --settings-actionable;
-      }
-
+    <style include="settings-shared cr-radio-button-style">
       :host([disabled]) {
-        /* Disable pointer events for this whole element, as outer on-tap gets
-         * triggered when clicking/tapping anywhere in :host. */
-        pointer-events: none;
-      }
-
-      :host([disabled]) :-webkit-any(.circle, .disc) {
-        opacity: .5;
-      }
-
-      :host([disabled]) .circle {
-        border-color: var(--paper-radio-button-unchecked-color,
-                          var(--primary-text-color));
-      }
-
-      :host([disabled][checked]) .disc {
-        background-color: var(--paper-radio-button-unchecked-color,
-                              var(--primary-text-color));
+        opacity: 1;
       }
 
+      /* Disc and label should be transluscent, but not the policy indicator. */
+      :host([disabled]) .disc-wrapper,
       :host([disabled]) #labelWrapper {
-        opacity: .65;
+        opacity: var(--cr-disabled-opacity);
       }
 
       cr-policy-pref-indicator {
@@ -122,9 +30,8 @@
     </style>
 
     <div class="disc-wrapper">
-      <div class="circle"></div>
+      <div class="disc-border"></div>
       <div class="disc"></div>
-      <paper-ripple center hold-down="[[pressed_]]"></paper-ripple>
     </div>
 
     <div id="labelWrapper">

chrome/browser/resources/settings/controls/controlled_radio_button.js

@@ -7,17 +7,10 @@ Polymer({
 
   behaviors: [
     PrefControlBehavior,
-    Polymer.IronA11yKeysBehavior,
+    CrRadioButtonBehavior,
   ],
 
   properties: {
-    checked: {
-      type: Boolean,
-      value: false,
-      reflectToAttribute: true,
-      observer: 'checkedChanged_',
-    },
-
     disabled: {
       type: Boolean,
       computed: 'computeDisabled_(pref.*)',
@@ -25,44 +18,10 @@ Polymer({
       observer: 'disabledChanged_',
     },
 
-    label: {
-      type: String,
-      value: '',  // Allows the hidden$= binding to run without being set.
-    },
-
     name: {
       type: String,
       notify: true,
     },
-
-    /** @private */
-    pressed_: Boolean,
-  },
-
-  hostAttributes: {
-    'aria-disabled': 'false',
-    'aria-checked': 'false',
-    role: 'radio',
-    tabindex: 0,
-  },
-
-  listeners: {
-    'blur': 'updatePressed_',
-    'down': 'updatePressed_',
-    'focus': 'updatePressed_',
-    'up': 'updatePressed_',
-  },
-
-  keyBindings: {
-    // This is mainly for screenreaders, which can perform actions on things
-    // that aren't focused (only focused things get synthetic click/tap events).
-    'enter:keyup': 'click',
-    'space:keyup': 'click',
-  },
-
-  /** @private */
-  checkedChanged_: function() {
-    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
   },
 
   /**
@@ -104,15 +63,4 @@ Polymer({
     e.preventDefault();
     e.stopPropagation();
   },
-
-  /**
-   * @param {!Event} e
-   * @private
-   */
-  updatePressed_: function(e) {
-    if (this.disabled)
-      return;
-
-    this.pressed_ = ['down', 'focus'].includes(e.type);
-  },
 });

chrome/browser/resources/settings/controls/settings_radio_group.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
 <link rel="import" href="pref_control_behavior.html">
 <link rel="import" href="../prefs/pref_util.html">
 <link rel="import" href="../settings_shared_css.html">
@@ -11,7 +11,7 @@
     <style include="settings-shared"></style>
     <div>[[label]]</div>
     <paper-radio-group selected="{{selected}}"
-        selectable="paper-radio-button, controlled-radio-button">
+        selectable="cr-radio-button, controlled-radio-button">
       <slot></slot>
     </paper-radio-group>
   </template>

chrome/browser/resources/settings/device_page/pointers.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
 <link rel="import" href="../controls/settings_radio_group.html">
 <link rel="import" href="../controls/settings_slider.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
-<link rel="import" href="device_page_browser_proxy.html">
 <link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="device_page_browser_proxy.html">
 
 <dom-module id="settings-pointers">
   <template>
@@ -79,17 +79,17 @@
         <div class="list-frame">
           <settings-radio-group
               pref="{{prefs.settings.touchpad.natural_scroll}}">
-            <paper-radio-button name="false">
+            <cr-radio-button name="false">
               $i18n{traditionalScrollLabel}
-            </paper-radio-button>
-            <paper-radio-button name="true">
+            </cr-radio-button>
+            <cr-radio-button name="true">
               $i18n{naturalScrollLabel}
               <a href="$i18n{naturalScrollLearnMoreLink}" target="_blank"
                   on-click="onLearnMoreLinkActivated_"
                   on-keydown="onLearnMoreLinkActivated_">
                 $i18n{naturalScrollLearnMore}
               </a>
-            </paper-radio-button>
+            </cr-radio-button>
           </settings-radio-group>
         </div>
       </div>

chrome/browser/resources/settings/people_page/lock_screen.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
@@ -43,8 +44,8 @@
         display: block;
       }
 
-      paper-radio-button {
-        --paper-radio-button-label: {
+      cr-radio-button {
+        --cr-radio-button-label: {
           display: flex;
           line-height: 154%;  /* Apply 20px line-height to paper radio button
                                  text to match rest of settings line-heights. */
@@ -94,14 +95,13 @@
           <div class="list-frame" >
             <paper-radio-group id="unlockType"
                 disabled$="[[quickUnlockDisabledByPolicy_]]"
-                selected="{{selectedUnlockType}}">
-              <paper-radio-button name="password" class="list-item underbar">
+                selected="{{selectedUnlockType}}" selectable="cr-radio-button">
+              <cr-radio-button name="password" class="list-item underbar">
                 <div class="start">
                   $i18n{lockScreenPasswordOnly}
                 </div>
-              </paper-radio-button>
-              <paper-radio-button name="pin+password"
-                  class="list-item">
+              </cr-radio-button>
+              <cr-radio-button name="pin+password" class="list-item">
                 <div id="pinPasswordDiv" class="start">
                   $i18n{lockScreenPinOrPassword}
                 </div>
@@ -116,7 +116,7 @@
                     </paper-button>
                   </div>
                 </template>
-              </paper-radio-button>
+              </cr-radio-button>
             </paper-radio-group>
           </div>
         </div>

chrome/browser/resources/settings/people_page/sync_page.html

@@ -5,12 +5,12 @@
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.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_toggle/cr_toggle.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
 <link rel="import" href="sync_browser_proxy.html">
 <link rel="import" href="../privacy_page/personalization_options.html">
@@ -373,13 +373,14 @@
             <paper-radio-group disabled$="[[syncPrefs.encryptAllData]]"
                 selected="[[selectedEncryptionRadio_(
                     syncPrefs.passphraseTypeIsCustom)]]"
+                selectable="cr-radio-button"
                 on-paper-radio-group-changed=
                     "onEncryptionRadioSelectionChanged_">
-              <paper-radio-button name="encrypt-with-google"
+              <cr-radio-button name="encrypt-with-google"
                   class="list-item" disabled="[[syncPrefs.encryptAllData]]">
                 $i18n{encryptWithGoogleCredentialsLabel}
-              </paper-radio-button>
-              <paper-radio-button name="encrypt-with-passphrase"
+              </cr-radio-button>
+              <cr-radio-button name="encrypt-with-passphrase"
                   class="list-item" disabled="[[syncPrefs.encryptAllData]]">
                 <template is="dom-if" if="[[syncPrefs.fullEncryptionBody]]">
                   <span>[[syncPrefs.fullEncryptionBody]]</span>
@@ -389,7 +390,7 @@
                     $i18nRaw{encryptWithSyncPassphraseLabel}
                   </span>
                 </template>
-              </paper-radio-button>
+              </cr-radio-button>
             </paper-radio-group>
             <div id="reset-sync-message-box" class="list-item"
                 hidden="[[!syncPrefs.encryptAllData]]">

chrome/browser/resources/settings/settings_shared_css.html

@@ -105,24 +105,15 @@
         color: var(--google-blue-500);
       }
 
-      controlled-radio-button,
-      paper-radio-button {
-        --paper-radio-button-checked-color: var(--google-blue-500);
-        --paper-radio-button-label-spacing: 22px;
-        --paper-radio-button-radio-container: {
-          flex-shrink: 0;
-        };
-        --paper-radio-button-unchecked-color: var(--paper-grey-600);
-        -webkit-margin-start: 2px;
-        align-items: center;
-        display: flex;
-        min-height: var(--settings-row-min-height);
-      }
-
       paper-radio-group {
         width: 100%;
       }
 
+      paper-radio-group:focus {
+        background-color: var(--google-grey-300);
+        outline: none;
+      }
+
       /* See also: .no-min-width below. */
       .text-elide {
         @apply --cr-text-elide;

chrome/browser/resources/settings/settings_vars_css.html

@@ -53,9 +53,6 @@
     --iron-icon-height: var(--cr-icon-size);
     --iron-icon-width: var(--cr-icon-size);
 
-    --paper-radio-button-ink-size: 40px;
-    --paper-radio-button-label-color: inherit;
-    --paper-radio-button-size: 16px;
     --paper-radio-group-item-padding: 0;
 
     --paper-tabs-selection-bar-color: var(--paper-blue-500);

chrome/test/data/webui/cr_elements/cr_elements_browsertest.js

@@ -350,3 +350,27 @@ CrElementsCheckboxTest.prototype = {
 TEST_F('CrElementsCheckboxTest', 'All', function() {
   mocha.run();
 });
+
+/**
+ * @constructor
+ * @extends {CrElementsBrowserTest}
+ */
+function CrElementsRadioButtonTest() {}
+
+CrElementsRadioButtonTest.prototype = {
+  __proto__: CrElementsBrowserTest.prototype,
+
+  /** @override */
+  browsePreload:
+      'chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html',
+
+  /** @override */
+  extraLibraries: CrElementsBrowserTest.prototype.extraLibraries.concat([
+    '../settings/test_util.js',
+    'cr_radio_button_test.js',
+  ]),
+};
+
+TEST_F('CrElementsRadioButtonTest', 'All', function() {
+  mocha.run();
+});

chrome/test/data/webui/cr_elements/cr_radio_button_test.js

+// Copyright 2018 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('cr-radio-button', function() {
+  let radioButton;
+
+  setup(function() {
+    PolymerTest.clearBody();
+    document.body.innerHTML = `
+      <cr-radio-button>label</cr-radio-button>
+    `;
+
+    radioButton = document.querySelector('cr-radio-button');
+  });
+
+  function assertChecked() {
+    assertTrue(radioButton.hasAttribute('checked'));
+    assertEquals('true', radioButton.getAttribute('aria-checked'));
+    assertTrue(
+        getComputedStyle(radioButton.$$('.disc')).backgroundColor !=
+        'rgba(0, 0, 0, 0)');
+  }
+
+  function assertNotChecked() {
+    assertFalse(radioButton.hasAttribute('checked'));
+    assertEquals('false', radioButton.getAttribute('aria-checked'));
+    assertEquals(
+        'rgba(0, 0, 0, 0)',
+        getComputedStyle(radioButton.$$('.disc')).backgroundColor);
+  }
+
+  function assertDisabled() {
+    assertEquals('-1', radioButton.getAttribute('tabindex'));
+    assertTrue(radioButton.hasAttribute('disabled'));
+    assertEquals('true', radioButton.getAttribute('aria-disabled'));
+    assertEquals('none', getComputedStyle(radioButton).pointerEvents);
+    assertTrue('1' != getComputedStyle(radioButton).opacity);
+  }
+
+  function assertNotDisabled() {
+    assertEquals('0', radioButton.getAttribute('tabindex'));
+    assertFalse(radioButton.hasAttribute('disabled'));
+    assertEquals('false', radioButton.getAttribute('aria-disabled'));
+    assertEquals('1', getComputedStyle(radioButton).opacity);
+  }
+
+  // Setting selection by mouse/keyboard is paper-radio-group's job, so
+  // these tests simply set states programatically and make sure the element
+  // is visually correct.
+  test('Checked', function() {
+    assertNotChecked();
+    radioButton.checked = true;
+    assertChecked();
+    radioButton.checked = false;
+    assertNotChecked();
+  });
+
+  test('Disabled', function() {
+    assertNotDisabled();
+    radioButton.disabled = true;
+    assertDisabled();
+    radioButton.disabled = false;
+    assertNotChecked();
+  });
+
+  test('Ripple', function() {
+    assertFalse(!!radioButton.$$('paper-ripple'));
+    radioButton.fire('focus');
+    assertTrue(!!radioButton.$$('paper-ripple'));
+    assertTrue(radioButton.$$('paper-ripple').holdDown);
+    radioButton.fire('pointerup');
+    assertFalse(radioButton.$$('paper-ripple').holdDown);
+  });
+});

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

@@ -912,8 +912,7 @@ cr.define('settings_about_page', function() {
           dialog = document.createElement('settings-channel-switcher-dialog');
           document.body.appendChild(dialog);
 
-          radioButtons =
-              dialog.shadowRoot.querySelectorAll('paper-radio-button');
+          radioButtons = dialog.shadowRoot.querySelectorAll('cr-radio-button');
           assertEquals(3, radioButtons.length);
           return browserProxy.whenCalled('getChannelInfo');
         });

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

@@ -450,10 +450,8 @@ cr.define('device_page_tests', function() {
      * @param {boolean} expected
      */
     function expectNaturalScrollValue(pointersPage, expected) {
-      const naturalScrollOff =
-          pointersPage.$$('paper-radio-button[name="false"]');
-      const naturalScrollOn =
-          pointersPage.$$('paper-radio-button[name="true"]');
+      const naturalScrollOff = pointersPage.$$('cr-radio-button[name="false"]');
+      const naturalScrollOn = pointersPage.$$('cr-radio-button[name="true"]');
       assertTrue(!!naturalScrollOff);
       assertTrue(!!naturalScrollOn);
 
@@ -567,8 +565,7 @@ cr.define('device_page_tests', function() {
         expectNaturalScrollValue(pointersPage, false);
 
         // Tapping the link shouldn't enable the radio button.
-        const naturalScrollOn =
-            pointersPage.$$('paper-radio-button[name="true"]');
+        const naturalScrollOn = pointersPage.$$('cr-radio-button[name="true"]');
         const a = naturalScrollOn.querySelector('a');
 
         MockInteractions.tap(a);

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

@@ -78,9 +78,9 @@ cr.define('settings_people_page_sync_page', function() {
       Polymer.dom.flush();
 
       encryptWithGoogle =
-          syncPage.$$('paper-radio-button[name="encrypt-with-google"]');
+          syncPage.$$('cr-radio-button[name="encrypt-with-google"]');
       encryptWithPassphrase =
-          syncPage.$$('paper-radio-button[name="encrypt-with-passphrase"]');
+          syncPage.$$('cr-radio-button[name="encrypt-with-passphrase"]');
       assertTrue(!!encryptWithGoogle);
       assertTrue(!!encryptWithPassphrase);
     });

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

@@ -177,16 +177,17 @@ cr.define('settings_people_page_quick_unlock', function() {
       const noneRadioButton = null;
 
       /**
-       * Asserts that only the given radio button is active and all of the
-       * others are inactive.
+       * Asserts that only the given radio button is checked and all of the
+       * others are unchecked.
        * @param {Element} radioButton
        */
-      function assertRadioButtonActive(radioButton) {
+      function assertRadioButtonChecked(radioButton) {
         function doAssert(element, name) {
           if (radioButton == element)
-            assertTrue(element.active, 'Expected ' + name + ' to be active');
+            assertTrue(element.checked, 'Expected ' + name + ' to be checked');
           else
-            assertFalse(element.active, 'Expected ' + name + ' to be inactive');
+            assertFalse(
+                element.checked, 'Expected ' + name + ' to be unchecked');
         }
 
         doAssert(passwordRadioButton, 'passwordButton');
@@ -263,9 +264,9 @@ cr.define('settings_people_page_quick_unlock', function() {
               });
 
           passwordRadioButton =
-              getFromElement('paper-radio-button[name="password"]');
+              getFromElement('cr-radio-button[name="password"]');
           pinPasswordRadioButton =
-              getFromElement('paper-radio-button[name="pin+password"]');
+              getFromElement('cr-radio-button[name="pin+password"]');
 
           done();
         });
@@ -275,7 +276,7 @@ cr.define('settings_people_page_quick_unlock', function() {
       // quickUnlockPrivate calls.
       test('ShowingScreenDoesNotModifyPrefs', function() {
         assertTrue(getLockScreenPref());
-        assertRadioButtonActive(passwordRadioButton);
+        assertRadioButtonChecked(passwordRadioButton);
         assertDeepEquals([], quickUnlockPrivateApi.activeModes);
       });
 
@@ -301,11 +302,11 @@ cr.define('settings_people_page_quick_unlock', function() {
       // prefs.
       test('TappingButtonsChangesUnderlyingState', function() {
         function togglePin() {
-          assertRadioButtonActive(passwordRadioButton);
+          assertRadioButtonChecked(passwordRadioButton);
 
           // Tap pin+password button.
           MockInteractions.tap(pinPasswordRadioButton);
-          assertRadioButtonActive(pinPasswordRadioButton);
+          assertRadioButtonChecked(pinPasswordRadioButton);
           assertTrue(isSetupPinButtonVisible());
           assertDeepEquals([], quickUnlockPrivateApi.activeModes);
 
@@ -314,7 +315,7 @@ cr.define('settings_people_page_quick_unlock', function() {
 
           // Tap password button and verify quick unlock is disabled.
           MockInteractions.tap(passwordRadioButton);
-          assertRadioButtonActive(passwordRadioButton);
+          assertRadioButtonChecked(passwordRadioButton);
           assertFalse(isSetupPinButtonVisible());
           assertDeepEquals([], quickUnlockPrivateApi.activeModes);
         }
@@ -334,11 +335,11 @@ cr.define('settings_people_page_quick_unlock', function() {
       // will update to show quick unlock is active.
       test('EnablingQuickUnlockChangesButtonState', function() {
         setActiveModes([QuickUnlockMode.PIN]);
-        assertRadioButtonActive(pinPasswordRadioButton);
+        assertRadioButtonChecked(pinPasswordRadioButton);
         assertTrue(isSetupPinButtonVisible());
 
         setActiveModes([]);
-        assertRadioButtonActive(passwordRadioButton);
+        assertRadioButtonChecked(passwordRadioButton);
         assertDeepEquals([], quickUnlockPrivateApi.activeModes);
       });
 
@@ -349,11 +350,11 @@ cr.define('settings_people_page_quick_unlock', function() {
             0,
             fakeUma.getHistogramValue(
                 LockScreenProgress.CHOOSE_PIN_OR_PASSWORD));
-        assertRadioButtonActive(passwordRadioButton);
+        assertRadioButtonChecked(passwordRadioButton);
 
         MockInteractions.tap(pinPasswordRadioButton);
         assertTrue(isSetupPinButtonVisible());
-        assertRadioButtonActive(pinPasswordRadioButton);
+        assertRadioButtonChecked(pinPasswordRadioButton);
 
         Polymer.dom.flush();
         MockInteractions.tap(getFromElement('#setupPinButton'));

ui/webui/resources/cr_elements/BUILD.gn

@@ -10,11 +10,13 @@ group("closure_compile") {
     "chromeos/cr_picture:closure_compile",
     "chromeos/network:closure_compile",
     "cr_action_menu:closure_compile",
+    "cr_checkbox:closure_compile",
     "cr_dialog:closure_compile",
     "cr_drawer:closure_compile",
     "cr_expand_button:closure_compile",
     "cr_link_row:closure_compile",
     "cr_profile_avatar_selector:closure_compile",
+    "cr_radio_button:closure_compile",
     "cr_toast:closure_compile",
     "cr_toggle:closure_compile",
     "policy:closure_compile",

ui/webui/resources/cr_elements/compiled_resources2.gyp

@@ -10,11 +10,13 @@
         'chromeos/cr_picture/compiled_resources2.gyp:*',
         'chromeos/network/compiled_resources2.gyp:*',
         'cr_action_menu/compiled_resources2.gyp:*',
+        'cr_checkbox/compiled_resources2.gyp:*',
         'cr_dialog/compiled_resources2.gyp:*',
         'cr_drawer/compiled_resources2.gyp:*',
         'cr_expand_button/compiled_resources2.gyp:*',
         'cr_link_row/compiled_resources2.gyp:*',
         'cr_profile_avatar_selector/compiled_resources2.gyp:*',
+        'cr_radio_button/compiled_resources2.gyp:*',
         'cr_toast/compiled_resources2.gyp:*',
         'cr_toggle/compiled_resources2.gyp:*',
         'policy/compiled_resources2.gyp:*',

ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-ripple-behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+<link rel="import" href="../shared_vars_css.html">
+
 <!--
 List of customizable styles:
 
@@ -36,7 +37,7 @@ List of customizable styles:
 
       :host([disabled]) {
         cursor: initial;
-        opacity: 0.38;
+        opacity: var(--cr-disabled-opacity);
         pointer-events: none;
       }
 

ui/webui/resources/cr_elements/cr_radio_button/BUILD.gn

+# Copyright 2018 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.
+
+import("//third_party/closure_compiler/compile_js.gni")
+
+js_type_check("closure_compile") {
+  deps = [
+    ":cr_radio_button",
+  ]
+}
+
+js_library("cr_radio_button") {
+  deps = [
+    ":cr_radio_button_behavior",
+  ]
+}
+
+js_library("cr_radio_button_behavior") {
+  deps = [
+    "//third_party/polymer/v1_0/components-chromium/iron-a11y-keys-behavior:iron-a11y-keys-behavior-extracted",
+    "//third_party/polymer/v1_0/components-chromium/paper-behaviors:paper-ripple-behavior-extracted",
+  ]
+}

ui/webui/resources/cr_elements/cr_radio_button/compiled_resources2.gyp

+# Copyright 2018 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.
+{
+  'targets': [
+    {
+      'target_name': 'cr_radio_button',
+      'dependencies': [
+        'cr_radio_button_behavior'
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'cr_radio_button_behavior',
+      'dependencies': [
+        '<(DEPTH)/third_party/polymer/v1_0/components-chromium/iron-a11y-keys-behavior/compiled_resources2.gyp:iron-a11y-keys-behavior-extracted',
+        '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-behaviors/compiled_resources2.gyp:paper-ripple-behavior-extracted',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+  ],
+}

ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+<link rel="import" href="../shared_vars_css.html">
+<link rel="import" href="cr_radio_button_behavior.html">
+<link rel="import" href="cr_radio_button_style_css.html">
+
+<dom-module id="cr-radio-button">
+  <template>
+    <style include="cr-radio-button-style"></style>
+
+    <div class="disc-wrapper">
+      <div class="disc-border"></div>
+      <div class="disc"></div>
+    </div>
+
+    <div id="labelWrapper">
+      <span id="label" hidden$="[[!label]]">[[label]]</span>
+      <slot></slot>
+    </div>
+  </template>
+  <script src="cr_radio_button.js"></script>
+</dom-module>

ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button.js

+// Copyright 2018 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: 'cr-radio-button',
+
+  behaviors: [
+    CrRadioButtonBehavior,
+  ],
+});

ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_behavior.html

+<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-ripple-behavior.html">
+<script src="cr_radio_button_behavior.js"></script>

ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_behavior.js

+// Copyright 2018 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.
+
+/**
+ * @fileoverview Behavior for cr-radio-button-like elements.
+ */
+
+/** @polymerBehavior */
+var CrRadioButtonBehaviorImpl = {
+  properties: {
+    checked: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+      observer: 'checkedChanged_',
+    },
+
+    disabled: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+      observer: 'disabledChanged_',
+    },
+
+    label: {
+      type: String,
+      value: '',  // Allows the hidden$= binding to run without being set.
+    },
+  },
+
+  listeners: {
+    'focus': 'onFocus_',
+    'blur': 'cancelRipple_',
+    'pointerup': 'cancelRipple_',
+  },
+
+  hostAttributes: {
+    'aria-disabled': 'false',
+    'aria-checked': 'false',
+    role: 'radio',
+    tabindex: 0,
+  },
+
+  keyBindings: {
+    // This is mainly for screenreaders, which can perform actions on things
+    // that aren't focused (only focused things get synthetic click/tap events).
+    'enter:keyup': 'onSelectKeyUp_',
+    'space:keyup': 'onSelectKeyUp_',
+  },
+
+  /** @private */
+  checkedChanged_: function() {
+    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+  },
+
+  /**
+   * @param {boolean} current
+   * @param {boolean} previous
+   * @private
+   */
+  disabledChanged_: function(current, previous) {
+    if (previous === undefined && !this.disabled)
+      return;
+
+    this.setAttribute('tabindex', this.disabled ? -1 : 0);
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  },
+
+  /** @private */
+  onFocus_: function() {
+    this.ensureRipple();
+    this.$$('paper-ripple').holdDown = true;
+  },
+
+  /**
+   * @param {!{detail: {keyboardEvent: !Event}}} e
+   * @private
+   */
+  onSelectKeyUp_: function(e) {
+    // If ripple is disabled, or focus is on a link, don't propagate to the
+    // parent paper-radio-group to avoid incorrect selection.
+    if (this.disabled || e.detail.keyboardEvent.target.tagName == 'A')
+      return;
+
+    this.click();
+  },
+
+  /** @private */
+  cancelRipple_: function() {
+    this.ensureRipple();
+    this.$$('paper-ripple').holdDown = false;
+  },
+
+  // customize the element's ripple
+  _createRipple: function() {
+    this._rippleContainer = this.$$('.disc-wrapper');
+    let ripple = Polymer.PaperRippleBehavior._createRipple();
+    ripple.id = 'ink';
+    ripple.setAttribute('recenters', '');
+    ripple.classList.add('circle', 'toggle-ink');
+    return ripple;
+  },
+};
+
+
+/** @polymerBehavior */
+const CrRadioButtonBehavior = [
+  Polymer.IronA11yKeysBehavior,
+  Polymer.PaperRippleBehavior,
+  CrRadioButtonBehaviorImpl,
+];
\ No newline at end of file

ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+<link rel="import" href="../shared_vars_css.html">
+
+<!-- Common radio-button styling for Material Design WebUI. -->
+<dom-module id="cr-radio-button-style">
+  <template>
+    <style>
+      :host {
+        --cr-radio-button-ink-size: 40px;
+        --cr-radio-button-size: 16px;
+        --cr-radio-button-checked-color: var(--google-blue-600);
+
+        --ink-to-circle: calc((var(--cr-radio-button-ink-size) -
+                               var(--cr-radio-button-size)) / 2);
+        align-items: center;
+        display: flex;
+        flex-shrink: 0;
+        min-height: 48px;
+        outline: none;
+      }
+
+      :host([disabled]) {
+        opacity: var(--cr-disabled-opacity);
+        /* Disable pointer events for this whole element, as outer on-tap gets
+         * triggered when clicking/tapping anywhere in :host. */
+        pointer-events: none;
+      }
+
+      :host(:not([disabled])) {
+        cursor: pointer;
+      }
+
+      #labelWrapper {
+        -webkit-margin-start: var(--cr-radio-button-label-spacing, 20px);
+        flex: 1;
+
+        @apply --cr-radio-button-label;
+      }
+
+      #label {
+        color: inherit;
+      }
+
+      .disc-border,
+      .disc,
+      .disc-wrapper,
+      paper-ripple {
+        border-radius: 50%;
+      }
+
+      .disc-wrapper {
+        height: var(--cr-radio-button-ink-size);
+        margin: 0 calc(-1 * var(--ink-to-circle));
+        position: relative;
+        width: var(--cr-radio-button-ink-size);
+      }
+
+      .disc-border,
+      .disc {
+        box-sizing: border-box;
+        height: var(--cr-radio-button-size);
+        left: var(--ink-to-circle);
+        position: absolute;
+        top: var(--ink-to-circle);
+        width: var(--cr-radio-button-size);
+      }
+
+      .disc-border {
+        border: 2px solid var(--google-grey-700);
+      }
+
+      :host([checked]) .disc-border {
+        border-color: var(--cr-radio-button-checked-color);
+      }
+
+      .disc {
+        background-color: transparent;
+        transform: scale(0);
+        transition: border-color 200ms, transform 200ms;
+      }
+
+      :host([checked]) .disc {
+        background-color: var(--cr-radio-button-checked-color);
+        transform: scale(0.5);
+      }
+
+      paper-ripple {
+        --paper-ripple-opacity: 0.1;
+        color: var(--google-grey-900);
+      }
+
+      :host([checked]) paper-ripple {
+        color: var(--google-blue-600);
+      }
+    </style>
+  </template>
+</dom-module>

ui/webui/resources/cr_elements/cr_toggle/cr_toggle.html

@@ -14,7 +14,7 @@
 
       :host([disabled]) {
         cursor: initial;
-        opacity: 0.38;
+        opacity: var(--cr-disabled-opacity);
         pointer-events: none;
       }
 

ui/webui/resources/cr_elements/shared_style_css.html

@@ -54,11 +54,11 @@
         min-height: 1px;
       }
 
-      [selectable]:focus,
-      [selectable] > :focus {
+      [selectable]:not(paper-radio-group):focus,
+      [selectable]:not(paper-radio-group) > :focus {
         @apply --cr-selectable-focus;
       }
-      [selectable] > * {
+      [selectable]:not(paper-radio-group) > * {
         @apply --cr-actionable;
       }
 

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -119,6 +119,7 @@
     --cr-container-shadow-max-opacity: 1;
 
     /** MD Refresh Styles */
+    --cr-disabled-opacity: 0.38;
     --google-blue-600: #1A73E8;
     --google-grey-200: #E8EAED;
     --google-grey-400: #BDC1C6;

ui/webui/resources/cr_elements_resources.grdp

@@ -78,6 +78,26 @@
              file="../../webui/resources/cr_elements/cr_link_row/cr_link_row.js"
              type="chrome_html"
              compress="gzip" />
+  <structure name="IDR_CR_ELEMENTS_CR_RADIO_BUTTON_HTML"
+             file="../../webui/resources/cr_elements/cr_radio_button/cr_radio_button.html"
+             type="chrome_html"
+             compress="gzip" />
+  <structure name="IDR_CR_ELEMENTS_CR_RADIO_BUTTON_JS"
+             file="../../webui/resources/cr_elements/cr_radio_button/cr_radio_button.js"
+             type="chrome_html"
+             compress="gzip" />
+  <structure name="IDR_CR_ELEMENTS_CR_RADIO_BUTTON_BEHAVIOR_HTML"
+             file="../../webui/resources/cr_elements/cr_radio_button/cr_radio_button_behavior.html"
+             type="chrome_html"
+             compress="gzip" />
+  <structure name="IDR_CR_ELEMENTS_CR_RADIO_BUTTON_BEHAVIOR_JS"
+             file="../../webui/resources/cr_elements/cr_radio_button/cr_radio_button_behavior.js"
+             type="chrome_html"
+             compress="gzip" />
+  <structure name="IDR_CR_ELEMENTS_CR_RADIO_BUTTON_STYLE_CSS_HTML"
+             file="../../webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html"
+             type="chrome_html"
+             compress="gzip" />
   <if expr="chromeos">
     <structure name="IDR_CR_ELEMENTS_CHROMEOS_CR_PICTURE_CR_CAMERA_HTML"
                file="../../webui/resources/cr_elements/chromeos/cr_picture/cr_camera.html"