Unified icon-buttons used in the new GAIA flow.

This CL introduces the 'gaia-icon-button' decorator, which can be applied to any
<button>.
All icon buttons introduced recently are <button is="gaia-icon-button">s now.

BUG=478545,472671
TEST=manual

Review URL: https://codereview.chromium.org/1133733003

Cr-Commit-Position: refs/heads/master@{#329284}

chrome/app/theme/theme_resources.grd

@@ -444,11 +444,6 @@
       <if expr="chromeos">
         <!-- TODO(nkostylev): This resource needs to be removed when cros login code is moved to ash. -->
         <structure type="chrome_scaled_image" name="IDR_LAUNCHER_BACKGROUND" file="cros/launcher_background.png" />
-        <structure type="chrome_scaled_image" name="IDR_LOGIN_BACK_BUTTTON" file="cros/login_back_button.png" />
-        <structure type="chrome_scaled_image" name="IDR_LOGIN_BACK_BUTTTON_MASKED" file="cros/login_back_button_masked.png" />
-        <structure type="chrome_scaled_image" name="IDR_LOGIN_CLOSE_BUTTTON" file="cros/login_close_button.png" />
-        <structure type="chrome_scaled_image" name="IDR_LOGIN_CLOSE_BUTTTON_MASKED" file="cros/login_close_button_masked.png" />
-        <structure type="chrome_scaled_image" name="IDR_LOGIN_CLOSE_BUTTTON_ON_WHITE" file="cros/login_close_button_on_white.png" />
         <structure type="chrome_scaled_image" name="IDR_LOGIN_PASSWORD_CAPS_LOCK" file="cros/login_password_capslock.png" />
       </if>
       <if expr="chromeos">

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

-<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
-<link rel="import" href="chrome://resources/polymer/core-icon-button/core-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/core-icon/core-icon.html">
+<link rel="import" href="chrome://resources/polymer/core-icons/core-icons.html">
 <link rel="import" href="chrome://resources/polymer/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
 
 <!--
   Simple paper- and core-icon- buttons which also triggers 'tap' event on keys
@@ -13,11 +14,19 @@
   </template>
 </polymer-element>
 
-<polymer-element name="gaia-core-icon-button" extends="core-icon-button"
-    on-keydown="onKeyDown" tabindex="0">
+<!--
+  Decorator for a <button>. When applied to a <button>, the button looks like
+  an icon from a material-design icons set. Icon's name should be specified in
+  'icon' attribute.
+
+  Example:
+    <button is="gaia-icon-button" icon="close"></button>
+-->
+<polymer-element name="gaia-icon-button" extends="button" attributes="icon"
+    on-mousedown="{{onMouseDown}}">
   <template>
-    <link rel="stylesheet" href="gaia_core_icon_button.css">
-    <shadow></shadow>
+    <link rel="stylesheet" href="gaia_icon_button.css">
+    <core-icon icon="{{icon}}" fit></core-icon>
   </template>
 </polymer-element>
 

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

@@ -10,10 +10,14 @@ Polymer('gaia-paper-button', {
   }
 });
 
-Polymer('gaia-core-icon-button', {
-  onKeyDown: function(e) {
-    if (!this.disabled && (e.keyCode == 13 || e.keyCode == 32))
-      this.fire('tap');
+Polymer('gaia-icon-button', {
+  ready: function() {
+    this.classList.add('custom-appearance');
+  },
+
+  onMouseDown: function(e) {
+    /* Prevents button focusing after mouse click. */
+    e.preventDefault();
   }
 });
 

chrome/browser/resources/chromeos/login/gaia_core_icon_button.css → chrome/browser/resources/chromeos/login/gaia_icon_button.css

@@ -3,6 +3,29 @@
  * found in the LICENSE file.
  */
 
-:host(:hover:not([disabled])) {
-  box-shadow: none;
+:host {
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  height: 24px;
+  margin: 0;
+  outline: none;
+  padding: 0;
+  width: 24px;
 }
+
+:host(:hover) {
+  cursor: pointer;
+}
+
+:host(:focus) {
+  background: rgba(0, 0, 0, .16);
+  border-color: transparent;
+  opacity: 0.75;
+}
+
+:host(:active) {
+  background: rgba(0, 0, 0, .12);
+  opacity: 1.0;
+}
+

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

@@ -18,14 +18,14 @@ core-icon[icon='warning'] {
 }
 
 #closeButton {
-  color: rgb(255, 255, 255);
+  color: white;
   position: absolute;
-  right: 0;
-  top: 0;
+  right: 10px;
+  top: 10px;
   z-index: 1;
 }
 
 :host-context(html[dir=rtl]) #closeButton {
-  left: 0;
+  left: 10px;
   right: auto;
 }

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

@@ -35,8 +35,6 @@
     attributes="email">
   <template>
     <link rel="stylesheet" href="gaia_password_changed.css">
-    <gaia-core-icon-button id="closeButton" icon="close" on-tap="{{onClose}}">
-    </gaia-core-icon-button>
     <core-animated-pages id="animatedPages" transitions="cross-fade-all" flex
         on-core-animated-pages-transition-end="{{onTransitionEnd}}">
       <section flex>
@@ -87,5 +85,8 @@
         </throbber-notice>
       </section>
     </core-animated-pages>
+    <button id="closeButton" is="gaia-icon-button" icon="close"
+        i18n-values="aria-label:closeButton" on-click="{{onClose}}">
+    </button>
   </template>
 </polymer-element>

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

@@ -11,15 +11,15 @@
 }
 
 #backButton {
-  color: rgb(255, 255, 255);
-  left: 0;
+  color: white;
+  left: 10px;
   position: absolute;
-  top: 0;
+  top: 10px;
   z-index: 1;
 }
 
 :host-context(html[dir=rtl]) #backButton {
   left: auto;
-  right: 0;
+  right: 10px;
   transform: scaleX(-1);
 }

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

@@ -37,9 +37,6 @@
     attributes="enterpriseInfo emailDomain">
   <template>
     <link rel="stylesheet" href="offline_gaia.css">
-    <gaia-core-icon-button id="backButton" icon="arrow-back"
-        on-tap="{{onBack}}">
-    </gaia-core-icon-button>
     <core-animated-pages id="animatedPages" transitions="slide-from-right"
         valueattr="id"
         on-core-animated-pages-transition-end="{{onTransitionEnd}}" flex>
@@ -91,5 +88,8 @@
         </gaia-card>
       </section>
     </core-animated-pages>
+    <button id="backButton" is="gaia-icon-button" icon="arrow-back"
+        i18n-values="aria-label:backButton" on-click="{{onBack}}">
+    </button>
   </template>
 </polymer-element>

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

@@ -122,8 +122,14 @@
   margin: 0 auto;
 }
 
+#oauth-enroll-cancel-button,
+#oauth-enroll-back-button {
+  position: absolute;
+  top: 10px;
+}
+
 #oauth-enroll-cancel-button {
-  background-image: url(chrome://theme/IDR_LOGIN_CLOSE_BUTTTON_ON_WHITE);
+  color: rgba(0, 0, 0, .54);
   right: 10px;
 }
 
@@ -132,13 +138,17 @@ html[dir=rtl] #oauth-enroll-cancel-button {
   right: auto;
 }
 
+#oauth-enrollment.saml #oauth-enroll-cancel-button {
+  color: rgba(0, 0, 0, .54);
+}
+
 .oauth-enroll-state-signin #oauth-enroll-cancel-button,
 .oauth-enroll-state-working #oauth-enroll-cancel-button {
-  background-image: url(chrome://theme/IDR_LOGIN_CLOSE_BUTTTON);
+  color: white;
 }
 
 #oauth-enroll-back-button {
-  background-image: url(chrome://theme/IDR_LOGIN_BACK_BUTTTON);
+  color: white;
   left: 10px;
 }
 

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

@@ -63,10 +63,9 @@
     <span id="oauth-saml-notice-message"></span>
   </div>
   <div id="oauth-enrollment-controls" class="step-controls"></div>
-  <button id="oauth-enroll-back-button"
-      class="custom-appearance custom-gaia-button" hidden
-      i18n-values="aria-label:backButton" tabindex="0"></button>
-  <button id="oauth-enroll-cancel-button"
-      class="custom-appearance custom-gaia-button oauth-enroll-button"
-      i18n-values="aria-label:closeButton" tabindex="0"></button>
+  <button id="oauth-enroll-back-button" is="gaia-icon-button" icon="arrow-back"
+      hidden i18n-values="aria-label:backButton" tabindex="0"></button>
+  <button id="oauth-enroll-cancel-button" is="gaia-icon-button" icon="close"
+      class="oauth-enroll-button" i18n-values="aria-label:closeButton"
+      tabindex="0"></button>
 </div>

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

@@ -118,18 +118,9 @@ login.createScreen('OAuthEnrollmentScreen', 'oauth-enrollment', function() {
       $('oauth-enroll-success-card').addEventListener(
           'buttonclick', doneCallback);
 
-      $('oauth-enroll-cancel-button').addEventListener('mousedown',
-                                                       function(e) {
-        e.preventDefault();
-      });
-
       $('oauth-enroll-cancel-button').addEventListener('click',
                                                        this.cancel.bind(this));
 
-      $('oauth-enroll-back-button').addEventListener('mousedown', function(e) {
-        e.preventDefault();
-      });
-
       $('oauth-enroll-back-button').addEventListener('click',
           (function(e) {
             $('oauth-enroll-back-button').hidden = true;

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

@@ -65,67 +65,30 @@ throbber-notice {
   display: none;
 }
 
-.custom-gaia-button {
-  background: transparent none;
-  background-position: center;
-  background-repeat: no-repeat;
-  border-radius: 50%;
-  height: 24px;
+#close-button-item,
+#back-button-item {
+  color: white;
   position: absolute;
   top: 10px;
-  width: 24px;
   z-index: 1;
 }
 
-.custom-gaia-button:hover {
-  cursor: pointer;
-}
-
-.custom-gaia-button:focus {
-  background: rgba(0,0,0,.16);
-  background-position: center;
-  background-repeat: no-repeat;
-  opacity: 0.75;
-}
-
- /* Even more specificity than button.custom-appearance:focus:focus */
-.custom-gaia-button:focus:focus:focus {
-   border-color: transparent;
-}
-
-.custom-gaia-button:active {
-  background: rgba(0,0,0,.12);
-  background-position: center;
-  background-repeat: no-repeat;
-  opacity: 1.0;
+#close-button-item:disabled,
+#back-button-item:disabled {
+  color: rgb(127, 127, 127);
 }
 
 #close-button-item {
-  background-image: url(chrome://theme/IDR_LOGIN_CLOSE_BUTTTON);
   right: 10px;
 }
 
-html[dir=rtl] #close-button-item {
+#back-button-item {
   left: 10px;
-  right: auto;
-}
-
-.loading #close-button-item,
-.new-gaia-flow .full-width #close-button-item {
-  background-image: url(chrome://theme/IDR_LOGIN_CLOSE_BUTTTON_ON_WHITE);
 }
 
-.loading.auth-completed #close-button-item {
-  display: none;
-}
-
-#close-button-item:disabled {
-  background-image: url(chrome://theme/IDR_LOGIN_CLOSE_BUTTTON_MASKED);
-}
-
-#back-button-item {
-  background-image: url(chrome://theme/IDR_LOGIN_BACK_BUTTTON);
+html[dir=rtl] #close-button-item {
   left: 10px;
+  right: auto;
 }
 
 html[dir=rtl] #back-button-item {
@@ -134,12 +97,17 @@ html[dir=rtl] #back-button-item {
   right: 10px;
 }
 
+.loading #close-button-item,
+.new-gaia-flow .full-width #close-button-item {
+  color: rgba(0, 0, 0, .54);
+}
+
 .new-gaia-flow .full-width #back-button-item {
   display: none;
 }
 
-#back-button-item:disabled {
-  background-image: url(chrome://theme/IDR_LOGIN_BACK_BUTTTON_MASKED);
+.loading.auth-completed #close-button-item {
+  display: none;
 }
 
 .signin-text {
@@ -248,7 +216,7 @@ webview#signin-frame.show {
 }
 
 #createSupervisedUserSeparator {
-  background-color: rgba(128,128,128,0.3);
+  background-color: rgba(128, 128, 128, 0.3);
   height: 1px;
   width: 200px;
 }

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

@@ -44,8 +44,8 @@
   <div id="saml-notice-container" hidden>
     <span id="saml-notice-message"></span>
   </div>
-  <button id="back-button-item" class="custom-appearance custom-gaia-button"
-      hidden i18n-values="aria-label:backButton" tabindex="0"></button>
-  <button id="close-button-item" class="custom-appearance custom-gaia-button"
-      hidden i18n-values="aria-label:closeButton" tabindex="0"></button>
+  <button id="back-button-item" is="gaia-icon-button" icon="arrow-back" hidden
+      i18n-values="aria-label:backButton" tabindex="0"></button>
+  <button id="close-button-item" is="gaia-icon-button" icon="close" hidden
+      i18n-values="aria-label:closeButton" tabindex="0"></button>
 </div>

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

@@ -179,20 +179,12 @@ login.createScreen('GaiaSigninScreen', 'gaia-signin', function() {
         e.preventDefault();
       });
 
-      $('back-button-item').addEventListener('mousedown', function(e) {
-        e.preventDefault();
-      });
-
       $('back-button-item').addEventListener('click', function(e) {
         $('back-button-item').hidden = true;
         $('signin-frame').back();
         e.preventDefault();
       });
 
-      $('close-button-item').addEventListener('mousedown', function(e) {
-        e.preventDefault();
-      });
-
       $('close-button-item').addEventListener('click', function(e) {
         this.cancel();
         e.preventDefault();

ui/login/oobe.css

@@ -34,15 +34,16 @@ button {
 
 /* Follow same focus coloring as in widgets.css */
 /* Do not apply this style to restricted button state. */
-button.custom-appearance:not(.button-restricted):not(.button-fancy) {
+button.custom-appearance:not(.button-restricted):not(.button-fancy):not(
+    [is="gaia-icon-button"]) {
   -webkit-transition: border-color 200ms;
   border: 1px solid transparent;
   /* Don't grey out disabled buttons. */
   color: buttontext !important;
 }
 
-/* ':focus' used twice to increase specificity. */
-button.custom-appearance:focus:focus {
+/* ':focus' used three times to increase specificity. */
+button.custom-appearance:focus:focus:focus {
   border-color: rgb(77, 144, 254);
 }