OOBE WebUI: oobe-back-button, replace paper-button with cr-button

This CL replaces tap event usages with click for oobe-back-button
elements.

Bug: 967793
Change-Id: I32d95983f80b025acaf75bb4f2390ec97eeae430
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1658837
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#670165}

chrome/browser/chromeos/login/enterprise_enrollment_browsertest.cc

@@ -707,7 +707,7 @@ IN_PROC_BROWSER_TEST_F(ActiveDirectoryJoinTest,
   test::OobeJS().TapOnPath({kEnrollmentUI, kAdDialog, kSkipButton});
   CheckActiveDirectoryCredentialsShown();
   CheckConfigurationSelectionVisible(false);
-  test::OobeJS().TapOnPath({kEnrollmentUI, kAdDialog, kAdBackToUnlockButton});
+  test::OobeJS().ClickOnPath({kEnrollmentUI, kAdDialog, kAdBackToUnlockButton});
   CheckActiveDirectoryUnlockConfigurationShown();
 
   // Enter wrong unlock password.

chrome/browser/chromeos/login/saml/saml_browsertest.cc

@@ -497,7 +497,7 @@ IN_PROC_BROWSER_TEST_F(SamlTest, SamlUI) {
   content::ExecuteScriptAsync(
       GetLoginUI()->GetWebContents(),
       test::GetOobeElementPath({"gaia-signin", "signin-back-button"}) +
-          ".fire('tap');");
+          ".fire('click');");
 
   // Auth flow should change back to Gaia.
   std::string message;

chrome/browser/chromeos/login/screens/update_screen_browsertest.cc

@@ -638,7 +638,7 @@ IN_PROC_BROWSER_TEST_F(UpdateScreenTest, UpdateOverCellularRejected) {
       {"oobe-update-md", "checking-for-updates-dialog"});
   test::OobeJS().ExpectHiddenPath({"oobe-update-md", "updating-dialog"});
 
-  test::OobeJS().TapOnPath({"oobe-update-md", "cellular-permission-back"});
+  test::OobeJS().ClickOnPath({"oobe-update-md", "cellular-permission-back"});
 
   WaitForScreenResult();
   EXPECT_EQ(UpdateScreen::Result::UPDATE_ERROR, last_screen_result_.value());

chrome/browser/chromeos/login/webview_login_browsertest.cc

@@ -277,7 +277,7 @@ IN_PROC_BROWSER_TEST_F(WebviewLoginTest, BackButton) {
   ExpectPasswordPage();
 
   // Click back to identifier page.
-  test::OobeJS().TapOnPath({"gaia-signin", "signin-back-button"});
+  test::OobeJS().ClickOnPath({"gaia-signin", "signin-back-button"});
   WaitForGaiaPageBackButtonUpdate();
   ExpectIdentifierPage();
   // Click next to password page, user id is remembered.
@@ -351,7 +351,7 @@ IN_PROC_BROWSER_TEST_F(WebviewLoginTest, StoragePartitionHandling) {
 
   // Press the back button at a sign-in screen without pre-existing users to
   // start a new sign-in attempt.
-  test::OobeJS().TapOnPath({"gaia-signin", "signin-back-button"});
+  test::OobeJS().ClickOnPath({"gaia-signin", "signin-back-button"});
   WaitForGaiaPageBackButtonUpdate();
   // Expect that we got back to the identifier page, as there are no known users
   // so the sign-in screen will not display user pods.
@@ -1022,7 +1022,7 @@ IN_PROC_BROWSER_TEST_F(WebviewProxyAuthLoginTest, DISABLED_ProxyAuthTransfer) {
   // start a new sign-in attempt.
   // This will re-load gaia, rotating the StoragePartition. The new
   // StoragePartition must also have the proxy auth details.
-  test::OobeJS().TapOnPath({"gaia-signin", "signin-back-button"});
+  test::OobeJS().ClickOnPath({"gaia-signin", "signin-back-button"});
   WaitForGaiaPageBackButtonUpdate();
   // Expect that we got back to the identifier page, as there are no known users
   // so the sign-in screen will not display user pods.

chrome/browser/resources/chromeos/login/arc_terms_of_service.html

@@ -62,7 +62,8 @@
         </div>
       </div>
       <div slot="bottom-buttons" class="flex layout horizontal">
-        <oobe-back-button id="arc-tos-back-button" on-tap="onBack_"></oobe-back-button>
+        <oobe-back-button id="arc-tos-back-button" on-click="onBack_">
+        </oobe-back-button>
         <div class="flex">
         </div>
         <oobe-text-button id="arc-tos-skip-button" border on-tap="onSkip_"

chrome/browser/resources/chromeos/login/demo_preferences.html

@@ -73,7 +73,7 @@
         </div>
       </div>
       <div slot="bottom-buttons" class="layout horizontal justified">
-        <oobe-back-button on-tap="onBackClicked_"></oobe-back-button>
+        <oobe-back-button on-click="onBackClicked_"></oobe-back-button>
         <oobe-text-button inverse on-tap="onNextClicked_">
           <div>
             [[i18nDynamic(locale, 'demoPreferencesNextButtonLabel')]]

chrome/browser/resources/chromeos/login/demo_setup.html

@@ -51,7 +51,7 @@
             images/alert-illustration_2x.svg 2x">
       </div>
       <div slot="bottom-buttons" class="layout horizontal justified">
-        <oobe-back-button inverse on-tap="onCloseClicked_"
+        <oobe-back-button inverse on-click="onCloseClicked_"
             disabled="[[isPowerwashRequired_]]"></oobe-back-button>
         <oobe-text-button id="retryButton" on-tap="onRetryClicked_"
             inverse hidden="[[isPowerwashRequired_]]">

chrome/browser/resources/chromeos/login/enterprise_enrollment.js

@@ -237,8 +237,8 @@ Polymer({
     this.navigation_.addEventListener('close', this.cancel.bind(this));
     this.navigation_.addEventListener('refresh', this.cancel.bind(this));
 
-    this.$['oobe-signin-back-button']
-        .addEventListener('tap', this.onBackButtonClicked_.bind(this));
+    this.$['oobe-signin-back-button'].addEventListener(
+        'click', this.onBackButtonClicked_.bind(this));
 
 
     this.$['oauth-enroll-learn-more-link']

chrome/browser/resources/chromeos/login/offline_ad_login.html

@@ -144,9 +144,9 @@
         </div>
       </div>
       <div slot="bottom-buttons" class="layout horizontal" hidden="[[loading]]">
-        <oobe-back-button id="backToUnlockButton" on-tap="onBackToUnlock_"
+        <oobe-back-button id="backToUnlockButton" on-click="onBackToUnlock_"
             disabled="[[disabled]]" hidden></oobe-back-button>
-        <oobe-back-button id="backButton" on-tap="onBackButton_"
+        <oobe-back-button id="backButton" on-click="onBackButton_"
             hidden="[[isDomainJoin]]"></oobe-back-button>
         <div class="flex"></div>
         <oobe-next-button id="nextButton" on-tap="onSubmit_"

chrome/browser/resources/chromeos/login/offline_gaia.html

@@ -106,7 +106,7 @@
       </div>
       <div slot="bottom-buttons" class="flex layout horizontal">
         <oobe-back-button id="offline-gaia-back-button"
-            on-tap="onBackButtonClicked_"></oobe-back-button>
+            on-click="onBackButtonClicked_"></oobe-back-button>
         <div class="flex">
         </div>
       </div>

chrome/browser/resources/chromeos/login/oobe_back_button.css

@@ -2,7 +2,7 @@
    Use of this source code is governed by a BSD-style license that can be
    found in the LICENSE file. */
 
-paper-button {
+cr-button {
   padding-inline-end: 16px;
   padding-inline-start: 8px;
 }

chrome/browser/resources/chromeos/login/oobe_buttons.html

@@ -2,6 +2,7 @@
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file. -->
 
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
@@ -74,12 +75,12 @@
   Text is blue, background is white.
 
   Example:
-    <oobe-back-button on-tap="handleOnTap_"></oobe-back-button>
+    <oobe-back-button on-click="handleOnClick_"></oobe-back-button>
 
   (Note that there is no space between opening and closing tag.)
 
   Content is optional, "Back" and "Next" will be used if not specified.
-    <oobe-back-button on-tap="handleOnTap_">
+    <oobe-back-button on-click="handleOnClick_">
       Continue
     </oobe-back-button>
 
@@ -92,11 +93,11 @@
   <template>
     <style include="iron-flex iron-flex-alignment iron-positioning"></style>
     <link rel="stylesheet" href="oobe_iron_flex_layout_fix.css">
-    <style include="paper-button-style cr-icons cr-shared-style"></style>
+    <style include="cr-icons cr-shared-style"></style>
     <link rel="stylesheet" href="oobe_fonts.css">
     <link rel="stylesheet" href="oobe_text_buttons.css">
     <link rel="stylesheet" href="oobe_back_button.css">
-    <paper-button id="button" on-tap="onClick_" disabled="[[disabled]]"
+    <cr-button id="button" on-click="onClick_" disabled="[[disabled]]"
         aria-label$="[[labelForAria]]">
       <div class="flex horizontal layout start center">
         <hd-iron-icon
@@ -107,7 +108,7 @@
           <div id="text" i18n-content="back"></div>
         </slot>
       </div>
-    </paper-button>
+    </cr-button>
   </template>
 </dom-module>
 

chrome/browser/resources/chromeos/login/oobe_buttons.js

@@ -42,7 +42,11 @@ Polymer({
   is: 'oobe-back-button',
 
   properties: {
-    disabled: {type: Boolean, value: false, reflectToAttribute: true},
+    disabled: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+    },
 
     /* Note that we are not using "aria-label" property here, because
      * we want to pass the label value but not actually declare it as an
@@ -55,10 +59,15 @@ Polymer({
     this.$.button.focus();
   },
 
+  /**
+   * @param {!Event} e
+   * @private
+   */
   onClick_: function(e) {
-    if (this.disabled)
+    if (this.disabled) {
       e.stopPropagation();
     }
+  },
 });
 
 Polymer({

chrome/browser/resources/chromeos/login/oobe_eula.html

@@ -78,7 +78,8 @@
         </div>
       </div>
       <div slot="bottom-buttons" class="flex layout horizontal">
-        <oobe-back-button on-tap="onEulaBackButtonPressed_"></oobe-back-button>
+        <oobe-back-button on-click="onEulaBackButtonPressed_">
+        </oobe-back-button>
         <div class="flex">
         </div>
         <oobe-text-button id="acceptButton" inverse on-tap="eulaAccepted_"

chrome/browser/resources/chromeos/login/oobe_network.html

@@ -24,7 +24,7 @@
         </network-select-login>
       </div>
       <div slot="bottom-buttons" class="layout horizontal justified">
-        <oobe-back-button on-tap="onBackClicked_"></oobe-back-button>
+        <oobe-back-button on-click="onBackClicked_"></oobe-back-button>
         <oobe-next-button id="nextButton" disabled="[[!isConnected_]]"
             on-tap="onNextClicked_"></oobe-next-button>
       </div>

chrome/browser/resources/chromeos/login/oobe_update.html

@@ -59,7 +59,7 @@
       </div>
       <div slot="bottom-buttons" class="layout horizontal justified">
         <oobe-back-button id="cellular-permission-back" inverse
-            on-tap="onBackClicked_"></oobe-back-button>
+            on-click="onBackClicked_"></oobe-back-button>
         <oobe-next-button id="cellular-permission-next" inverse
             on-tap="onNextClicked_"></oobe-next-button>
       </div>

chrome/browser/resources/chromeos/login/screen_error_message.js

@@ -105,7 +105,7 @@ login.createScreen('ErrorMessageScreen', 'error-message', function() {
 
       var self = this;
       $('error-message-back-button')
-          .addEventListener('tap', this.cancel.bind(this));
+          .addEventListener('click', this.cancel.bind(this));
 
       $('error-message-md-reboot-button').addEventListener('tap', function(e) {
         self.send(login.Screen.CALLBACK_USER_ACTED, USER_ACTION_REBOOT);

chrome/browser/resources/chromeos/login/screen_gaia_signin.js

@@ -266,7 +266,7 @@ Polymer({
         'identifierEntered', this.onIdentifierEnteredMessage_.bind(this));
 
     this.$['signin-back-button'].addEventListener(
-        'tap', this.onBackButtonClicked_.bind(this));
+        'click', this.onBackButtonClicked_.bind(this));
     this.$['offline-gaia'].addEventListener(
         'offline-gaia-cancel', this.cancel.bind(this));
 

chrome/browser/resources/chromeos/login/supervision_onboarding.html

@@ -105,7 +105,7 @@
         <div id="supervision-onboarding-flow-buttons" slot="bottom-buttons"
             class="layout horizontal end-justified">
           <oobe-back-button id="supervision-onboarding-back-button"
-              hidden="[[hideBackButton_]]" on-tap="onBack_">
+              hidden="[[hideBackButton_]]" on-click="onBack_">
             <div i18n-content="supervisionOnboardingBackButtonLabel"></div>
           </oobe-back-button>
           <div class="flex">