Login WebUI: gaia-button, replace paper-button with cr-button

Replaces 'tap' event with 'click' for gaia-button's.

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

chrome/browser/chromeos/login/enterprise_enrollment_browsertest.cc

@@ -678,7 +678,7 @@ IN_PROC_BROWSER_TEST_F(ActiveDirectoryJoinTest,
                                    "legacy", kAdTestUser, "password");
   WaitForMessage(&message_queue, "\"ShowADJoinError\"");
   enrollment_ui_.WaitForStep(test::ui::kEnrollmentStepADJoinError);
-  test::OobeJS().TapOnPath({kEnrollmentUI, kAdErrorCard, kSubmitButton});
+  test::OobeJS().ClickOnPath({kEnrollmentUI, kAdErrorCard, kSubmitButton});
   enrollment_ui_.WaitForStep(test::ui::kEnrollmentStepADJoin);
 }
 

chrome/browser/chromeos/login/password_change_browsertest.cc

@@ -143,7 +143,7 @@ IN_PROC_BROWSER_TEST_F(PasswordChangeTest, MigrateOldCryptohome) {
   // Fill out and submit the old password passed to the stub authenticator.
   test::OobeJS().TypeIntoPath("old user password",
                               {"gaia-password-changed", "oldPasswordInput"});
-  test::OobeJS().TapOnPath(
+  test::OobeJS().ClickOnPath(
       {"gaia-password-changed", "oldPasswordInputForm", "button"});
 
   // User session should start, and whole OOBE screen is expected to be hidden,
@@ -169,7 +169,7 @@ IN_PROC_BROWSER_TEST_F(PasswordChangeTest, RetryOnWrongPassword) {
   // Fill out and submit the old password passed to the stub authenticator.
   test::OobeJS().TypeIntoPath("incorrect old user password",
                               {"gaia-password-changed", "oldPasswordInput"});
-  test::OobeJS().TapOnPath(
+  test::OobeJS().ClickOnPath(
       {"gaia-password-changed", "oldPasswordInputForm", "button"});
 
   // Expect the UI to report failure.
@@ -189,7 +189,7 @@ IN_PROC_BROWSER_TEST_F(PasswordChangeTest, RetryOnWrongPassword) {
   // Submit the correct password.
   test::OobeJS().TypeIntoPath("old user password",
                               {"gaia-password-changed", "oldPasswordInput"});
-  test::OobeJS().TapOnPath(
+  test::OobeJS().ClickOnPath(
       {"gaia-password-changed", "oldPasswordInputForm", "button"});
 
   // User session should start, and whole OOBE screen is expected to be hidden,
@@ -213,7 +213,7 @@ IN_PROC_BROWSER_TEST_F(PasswordChangeTest, SkipDataRecovery) {
       true, {"gaia-password-changed", "oldPasswordCard"});
 
   // Click forgot password link.
-  test::OobeJS().TapOnPath({"gaia-password-changed", "forgot-password-link"});
+  test::OobeJS().ClickOnPath({"gaia-password-changed", "forgot-password-link"});
 
   test::OobeJS().CreateVisibilityWaiter(
       false, {"gaia-password-changed", "oldPasswordCard"});
@@ -223,7 +223,7 @@ IN_PROC_BROWSER_TEST_F(PasswordChangeTest, SkipDataRecovery) {
       {"gaia-password-changed", "proceedAnywayBtn"});
 
   // Click "Proceed anyway".
-  test::OobeJS().TapOnPath({"gaia-password-changed", "proceedAnywayBtn"});
+  test::OobeJS().ClickOnPath({"gaia-password-changed", "proceedAnywayBtn"});
 
   // User session should start, and whole OOBE screen is expected to be hidden,
   OobeWindowVisibilityWaiter(false).Wait();
@@ -246,7 +246,7 @@ IN_PROC_BROWSER_TEST_F(PasswordChangeTest, TryAgainAfterForgetLinkClick) {
       true, {"gaia-password-changed", "oldPasswordCard"});
 
   // Click forgot password link.
-  test::OobeJS().TapOnPath({"gaia-password-changed", "forgot-password-link"});
+  test::OobeJS().ClickOnPath({"gaia-password-changed", "forgot-password-link"});
 
   test::OobeJS().CreateVisibilityWaiter(
       false, {"gaia-password-changed", "oldPasswordCard"});
@@ -256,7 +256,7 @@ IN_PROC_BROWSER_TEST_F(PasswordChangeTest, TryAgainAfterForgetLinkClick) {
       {"gaia-password-changed", "proceedAnywayBtn"});
 
   // Go back to old password input by clicking Try Again.
-  test::OobeJS().TapOnPath({"gaia-password-changed", "try-again-link"});
+  test::OobeJS().ClickOnPath({"gaia-password-changed", "try-again-link"});
 
   test::OobeJS().CreateVisibilityWaiter(
       true, {"gaia-password-changed", "oldPasswordCard"});
@@ -264,7 +264,7 @@ IN_PROC_BROWSER_TEST_F(PasswordChangeTest, TryAgainAfterForgetLinkClick) {
   // Enter and submit the correct password.
   test::OobeJS().TypeIntoPath("old user password",
                               {"gaia-password-changed", "oldPasswordInput"});
-  test::OobeJS().TapOnPath(
+  test::OobeJS().ClickOnPath(
       {"gaia-password-changed", "oldPasswordInputForm", "button"});
 
   // User session should start, and whole OOBE screen is expected to be hidden,
@@ -289,7 +289,7 @@ IN_PROC_BROWSER_TEST_F(PasswordChangeTest, ClosePasswordChangedDialog) {
   test::OobeJS().TypeIntoPath("old user password",
                               {"gaia-password-changed", "oldPasswordInput"});
   // Click the close button.
-  test::OobeJS().TapOnPath(
+  test::OobeJS().ClickOnPath(
       {"gaia-password-changed", "navigation", "closeButton"});
 
   OobeWindowVisibilityWaiter(false).Wait();

chrome/browser/chromeos/login/test/active_directory_login_mixin.cc

@@ -228,7 +228,7 @@ void ActiveDirectoryLoginMixin::SubmitActiveDirectoryCredentials(
                               {kGaiaSigninId, kAdOfflineAuthId, kAdUserInput});
   test::OobeJS().TypeIntoPath(
       password, {kGaiaSigninId, kAdOfflineAuthId, kAdPasswordInput});
-  test::OobeJS().TapOnPath({kGaiaSigninId, kAdOfflineAuthId, kAdCredsButton});
+  test::OobeJS().ClickOnPath({kGaiaSigninId, kAdOfflineAuthId, kAdCredsButton});
 }
 
 // Sets username and password for the Active Directory login and submits it.
@@ -242,7 +242,7 @@ void ActiveDirectoryLoginMixin::SubmitActiveDirectoryPasswordChangeCredentials(
                               {kPasswordChangeId, kAdNewPassword1Input});
   test::OobeJS().TypeIntoPath(new_password2,
                               {kPasswordChangeId, kAdNewPassword2Input});
-  test::OobeJS().TapOnPath(
+  test::OobeJS().ClickOnPath(
       {kPasswordChangeId, kPasswordChangeFormId, kFormButtonId});
 }
 

chrome/browser/chromeos/login/test/enrollment_ui_mixin.cc

@@ -111,12 +111,12 @@ void EnrollmentUIMixin::ExpectErrorMessage(int error_message_id,
 }
 
 void EnrollmentUIMixin::RetryAfterError() {
-  OobeJS().TapOnPath(kEnrollmentErrorRetryButtonPath);
+  OobeJS().ClickOnPath(kEnrollmentErrorRetryButtonPath);
   WaitForStep(ui::kEnrollmentStepSignin);
 }
 
 void EnrollmentUIMixin::LeaveDeviceAttributeErrorScreen() {
-  OobeJS().TapOnPath(kEnrollmentDeviceAttributesErrorButtonPath);
+  OobeJS().ClickOnPath(kEnrollmentDeviceAttributesErrorButtonPath);
 }
 
 void EnrollmentUIMixin::SubmitDeviceAttributes(const std::string& asset_id,

chrome/browser/chromeos/login/test/offline_gaia_test_mixin.cc

@@ -115,7 +115,7 @@ void OfflineGaiaTestMixin::SubmitGaiaAuthOfflineForm(
       ->Wait();
   test::OobeJS().TypeIntoPath(user_email,
                               {"gaia-signin", "offline-gaia", "emailInput"});
-  test::OobeJS().TapOnPath(
+  test::OobeJS().ClickOnPath(
       {"gaia-signin", "offline-gaia", "email-input-form", "button"});
   test::OobeJS()
       .CreateDisplayedWaiter(false,
@@ -127,7 +127,7 @@ void OfflineGaiaTestMixin::SubmitGaiaAuthOfflineForm(
       ->Wait();
   test::OobeJS().TypeIntoPath(password,
                               {"gaia-signin", "offline-gaia", "passwordInput"});
-  test::OobeJS().TapOnPath(
+  test::OobeJS().ClickOnPath(
       {"gaia-signin", "offline-gaia", "password-input-form", "button"});
 }
 

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

@@ -6,38 +6,25 @@
   display: inline-block;
 }
 
-paper-button {
-  background-color: var(--google-blue-500);
-  color: white;
-  font-size: 14px;
-  min-width: 90px;
-}
-
-:host([type='link']) paper-button,
-:host([type='dialog']) paper-button {
+:host([link]) cr-button {
   background-color: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
   color: var(--google-blue-600);
-  margin: 0;
+  font-weight: 400;
+  margin: 0 -0.57em;
   min-width: 0;
 }
 
-:host([type='link']) paper-button[focused],
-:host([type='dialog']) paper-button[focused] {
+:host([link]) cr-button:focus {
   background-color: rgba(66, 133, 244, 0.12);
 }
 
-:host([type='link']) paper-button[disabled],
-:host([type='dialog']) paper-button[disabled] {
-  color: rgb(168,168,168);
+:host-context(.focus-outline-visible):host([link]) cr-button:focus {
+  font-weight: 500;
 }
 
-:host([type='dialog']) paper-button {
-  padding: 8px 12px;
-}
-
-:host([type='link']) paper-button {
-  border-radius: 0;
-  margin-left: -0.57em;
-  margin-right: -0.57em;
-  text-transform: none;
+:host([link]) cr-button[disabled] {
+  color: rgb(168, 168, 168);
 }

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

@@ -4,32 +4,29 @@
 
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.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-styles/color.html">
 
 <!--
   Material design buttons that mimic GAIA's buttons.
 
   Example:
-    <gaia-button type="dialog"></gaia-button>
+    <gaia-button link></gaia-button>
 
   Attributes:
-    'type' - there are three kinds of button: regular blue button (none type
-             provided), dialog button (type="dialog") and a button that looks
-             more like a link (type="link").
+    'link' - there are two kinds of button: regular blue button and a button
+             that looks more like a link.
     'disabled' - button is disabled when the attribute is set.
 -->
 <dom-module id="gaia-button">
   <link rel="stylesheet" href="gaia_button.css">
 
   <template>
-    <div on-click="onClick_" on-tap="onClick_">
-      <paper-button id="button" disabled="[[disabled]]"
-          on-focused-changed="focusedChanged_">
-        <slot></slot>
-      </paper-button>
-    </div>
+    <cr-button id="button" disabled="[[disabled]]" on-click="onClick_"
+        noink$="[[link]]">
+      <slot></slot>
+    </cr-button>
   </template>
 </dom-module>
 

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

@@ -2,26 +2,22 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/** @enum {string} */
-const GaiaButtonType = {
-  NONE: '',
-  LINK: 'link',
-  DIALOG: 'dialog',
-};
-
 Polymer({
   is: 'gaia-button',
 
   properties: {
-    disabled: {type: Boolean, value: false, reflectToAttribute: true},
+    disabled: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+    },
 
-    /** @type GaiaButtonType */
-    type: {
-      type: String,
-      value: GaiaButtonType.NONE,
+    link: {
+      type: Boolean,
+      value: false,
       reflectToAttribute: true,
-      observer: 'typeChanged_'
-    }
+      observer: 'onLinkChanged_',
+    },
   },
 
   focus: function() {
@@ -29,45 +25,47 @@ Polymer({
   },
 
   /** @private */
-  focusedChanged_: function() {
-    if (this.type == GaiaButtonType.LINK || this.type == GaiaButtonType.DIALOG)
-      return;
-    this.$.button.raised = this.$.button.focused;
+  onLinkChanged_: function() {
+    this.$.button.classList.toggle('action-button', !this.link);
   },
 
-  /** @private */
-  typeChanged_: function() {
-    if (this.type == GaiaButtonType.LINK)
-      this.$.button.setAttribute('noink', '');
-    else
-      this.$.button.removeAttribute('noink');
-  },
-
-  /** @private */
+  /**
+   * @param {!Event} e
+   * @private
+   */
   onClick_: function(e) {
-    if (this.disabled)
+    if (this.disabled) {
       e.stopPropagation();
-  }
+    }
+  },
 });
 
 Polymer({
   is: 'gaia-icon-button',
 
   properties: {
-    disabled: {type: Boolean, value: false, reflectToAttribute: true},
+    disabled: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+    },
 
     icon: String,
 
-    ariaLabel: String
+    ariaLabel: String,
   },
 
   focus: function() {
     this.$.iconButton.focus();
   },
 
-  /** @private */
+  /**
+   * @param {!Event} e
+   * @private
+   */
   onClick_: function(e) {
-    if (this.disabled)
+    if (this.disabled) {
       e.stopPropagation();
-  }
+    }
+  },
 });

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

@@ -31,7 +31,7 @@
     <div on-keydown="onKeyDown_">
       <slot id="inputs" name="inputs"></slot>
       <div class="horizontal-reverse justified layout center">
-        <gaia-button id="button" on-tap="onButtonClicked_" class="self-end"
+        <gaia-button id="button" on-click="onButtonClicked_" class="self-end"
             hidden="[[!buttonText]]">
           <span>[[buttonText]]</span>
         </gaia-button>

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

@@ -66,10 +66,9 @@
               <div slot="label" i18n-content="oldPasswordHint"></div>
               <div slot="error" i18n-content="oldPasswordIncorrect"></div>
             </gaia-input>
-            <gaia-button id="forgot-password-link" type="link"
-                on-tap="onForgotPasswordClicked_"
-                i18n-content="forgotOldPasswordButtonText">
-            </gaia-button>
+            <gaia-button id="forgot-password-link"
+                on-click="onForgotPasswordClicked_"
+                i18n-content="forgotOldPasswordButtonText" link></gaia-button>
           </gaia-input-form>
         </gaia-card>
       </neon-animatable>
@@ -84,13 +83,10 @@
               </p>
             </div>
             <div class="horizontal layout justified center">
-              <gaia-button id="try-again-link" type="link"
-                  on-tap="onTryAgainClicked_"
-                  i18n-content="passwordChangedTryAgain">
-              </gaia-button>
-              <gaia-button id="proceedAnywayBtn" on-tap="onProceedClicked_"
-                  i18n-content="proceedAnywayButton">
-              </gaia-button>
+              <gaia-button id="try-again-link" on-click="onTryAgainClicked_"
+                  i18n-content="passwordChangedTryAgain" link></gaia-button>
+              <gaia-button id="proceedAnywayBtn" on-click="onProceedClicked_"
+                  i18n-content="proceedAnywayButton"></gaia-button>
             </div>
           </div>
         </gaia-card>

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

@@ -55,7 +55,7 @@
         </div>
       </div>
       <div class="self-stretch horizontal-reverse layout justified center">
-        <gaia-button id="submitButton" on-tap="buttonClicked_"
+        <gaia-button id="submitButton" on-click="buttonClicked_"
             hidden$="[[!buttonLabel]]">
           <span>[[buttonLabel]]</span>
         </gaia-button>

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

@@ -135,9 +135,8 @@
               error-message="[[i18nDynamic(locale, 'adLoginInvalidPassword')]]">
           </cr-input>
           <div class="flex layout horizontal start-justified">
-            <gaia-button id="moreOptionsBtn" type="link"
-                on-tap="onMoreOptionsClicked_" hidden="[[!isDomainJoin]]"
-                disabled="[[disabled]]">
+            <gaia-button id="moreOptionsBtn" on-click="onMoreOptionsClicked_"
+                hidden="[[!isDomainJoin]]" disabled="[[disabled]]" link>
               [[i18nDynamic(locale, 'adJoinMoreOptions')]]
             </gaia-button>
           </div>

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

@@ -97,7 +97,7 @@
                   [[i18nDynamic(locale, 'offlineLoginInvalidPassword')]]
                 </div>
               </gaia-input>
-              <gaia-button type="link" on-tap="onForgotPasswordClicked_">
+              <gaia-button on-click="onForgotPasswordClicked_" link>
                 [[i18nDynamic(locale, 'offlineLoginForgotPasswordBtn')]]
               </gaia-button>
             </gaia-input-form>

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

@@ -56,10 +56,9 @@ Events:
       <gaia-input-form id="samlInterstitialForm"
                        on-submit="onSamlPageNextClicked_"
                        i18n-values="button-text:samlInterstitialNextBtn">
-        <gaia-button id="changeAccountLink" type="link"
-                     on-tap="onSamlPageChangeAccountClicked_"
-                     i18n-content="samlInterstitialChangeAccountLink">
-        </gaia-button>
+        <gaia-button id="changeAccountLink"
+            on-click="onSamlPageChangeAccountClicked_"
+            i18n-content="samlInterstitialChangeAccountLink" link></gaia-button>
       </gaia-input-form>
 
       <img id="logo-img" src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90"