Print Preview WebUI: replace paper-radio-group with cr-radio-group

Bug: 888922
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I7ab9988ec40f715979cf94ec2d8fd94e87723d4f
Reviewed-on: https://chromium-review.googlesource.com/c/1277868
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#602232}

chrome/browser/resources/print_preview/new/pages_settings.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/cr_radio_group/cr_radio_group.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
 <link rel="import" href="../data/document_info.html">
 <link rel="import" href="../print_preview_utils.html">
 <link rel="import" href="input_behavior.html">
@@ -15,7 +15,7 @@
   <template>
     <style include="print-preview-shared">
       :host {
-        --paper-radio-group-item-padding: 0;
+        --cr-radio-group-item-padding: 0;
       }
 
       :host([error-state_='0']) #pageSettingsCustomInput,
@@ -44,15 +44,12 @@
     <print-preview-settings-section>
       <span id="title" slot="title">$i18n{pagesLabel}</span>
       <div slot="controls" id="controls">
-        <paper-radio-group selectable="cr-radio-button" class="radio"
-            disabled$="[[controlsDisabled_]]"
+        <cr-radio-group class="radio" disabled="[[controlsDisabled_]]"
             selected="{{optionSelected_}}">
           <cr-radio-button name="[[pagesValueEnum_.ALL]]" id="allRadioButton"
-              disabled$="[[controlsDisabled_]]"
               label="$i18n{optionAllPages}">
           </cr-radio-button>
           <cr-radio-button id="customRadioButton"
-              disabled$="[[controlsDisabled_]]"
               name="[[pagesValueEnum_.CUSTOM]]"
               on-blur="onCustomRadioBlur_"
               on-click="onCustomRadioClick_"
@@ -69,7 +66,7 @@
                     documentInfo.pageCount)]]">
             </cr-input>
           </cr-radio-button>
-        </paper-radio-group>
+        </cr-radio-group>
       </div>
     </print-preview-settings-section>
   </template>

chrome/browser/resources/print_preview/new/pages_settings.js

@@ -79,7 +79,6 @@ Polymer({
     controlsDisabled_: {
       type: Boolean,
       computed: 'computeControlsDisabled_(disabled, hasError_)',
-      observer: 'onControlsDisabledChanged_',
     },
 
     /** @private {number} */
@@ -333,8 +332,10 @@ Polymer({
   /** @private */
   onOptionSelectedChange_: function() {
     if (this.optionSelected_ === PagesValue.CUSTOM) {
-      /** @type {!CrInputElement} */ (this.$.pageSettingsCustomInput)
-          .inputElement.focus();
+      this.async(() => {
+        /** @type {!CrInputElement} */ (this.$.pageSettingsCustomInput)
+            .inputElement.focus();
+      });
     }
   },
 
@@ -415,16 +416,6 @@ Polymer({
         .inputElement.focus();
   },
 
-  /** @private */
-  onControlsDisabledChanged_: function() {
-    if (!this.controlsDisabled_) {
-      if (this.optionSelected_ === PagesValue.CUSTOM)
-        this.$.allRadioButton.tabIndex = -1;
-      else
-        this.$.customRadioButton.tabIndex = -1;
-    }
-  },
-
   /**
    * Gets a tab index for the custom input if it can be tabbed to.
    * @return {number}

chrome/test/data/webui/print_preview/pages_settings_test.js

@@ -254,7 +254,7 @@ cr.define('pages_settings_test', function() {
     // the "all" radio button.
     test(assert(TestNames.ClearInput), function() {
       const input = pagesSection.$.pageSettingsCustomInput.inputElement;
-      const radioGroup = pagesSection.$$('paper-radio-group');
+      const radioGroup = pagesSection.$$('cr-radio-group');
       assertEquals(pagesSection.pagesValueEnum_.ALL, radioGroup.selected);
       return setupInput('1-2', 3)
           .then(function() {
@@ -301,7 +301,7 @@ cr.define('pages_settings_test', function() {
     test(assert(TestNames.TabOrder), function() {
       documentInfo.updatePageCount(3);
 
-      const radioGroup = pagesSection.$$('paper-radio-group');
+      const radioGroup = pagesSection.$$('cr-radio-group');
       const customRadio = pagesSection.$.customRadioButton;
       const allRadio = pagesSection.$.allRadioButton;
       const input = pagesSection.$.pageSettingsCustomInput;
@@ -317,7 +317,7 @@ cr.define('pages_settings_test', function() {
         assertEquals(!allSelected, allRadio.tabIndex === -1);
       };
 
-      let whenFocused = test_util.eventToPromise('focus', radioGroup);
+      const whenFocused = test_util.eventToPromise('focus', allRadio);
       // Focus the radio group.
       radioGroup.focus();
       return whenFocused
@@ -326,7 +326,8 @@ cr.define('pages_settings_test', function() {
             validateTabOrder(true);
 
             // Down arrow, to switch to custom.
-            whenFocused = test_util.eventToPromise('focus', input.inputElement);
+            const whenFocused =
+                test_util.eventToPromise('focus', input.inputElement);
             MockInteractions.keyEventOn(
                 allRadio, 'keydown', 40, [], 'ArrowDown');
             return whenFocused;
@@ -394,7 +395,7 @@ cr.define('pages_settings_test', function() {
 
     test(assert(TestNames.ClickingCustomFocusesInput), function() {
       const input = pagesSection.$.pageSettingsCustomInput.inputElement;
-      const radioGroup = pagesSection.$$('paper-radio-group');
+      const radioGroup = pagesSection.$$('cr-radio-group');
       assertEquals(pagesSection.pagesValueEnum_.ALL, radioGroup.selected);
 
       // Click the custom input and set a valid value.
@@ -508,7 +509,7 @@ cr.define('pages_settings_test', function() {
     // print.
     test(assert(TestNames.EnterOnInputTriggersPrint), function() {
       const input = pagesSection.$.pageSettingsCustomInput.inputElement;
-      const radioGroup = pagesSection.$$('paper-radio-group');
+      const radioGroup = pagesSection.$$('cr-radio-group');
       const whenPrintReceived =
           test_util.eventToPromise('keydown', pagesSection);