Back button for the WebView-based sign-in flow.

The button state is being updated in the backButton event.
It remains hidden until the first such event and after each
click, so the <webview> can always control if the button is
needed at all.

BUG=462660

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

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

chrome/app/theme/theme_resources.grd

@@ -443,6 +443,8 @@
       <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" />

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

@@ -73,6 +73,28 @@ html[dir=rtl] #close-button-item {
   background-image: url(chrome://theme/IDR_LOGIN_CLOSE_BUTTTON_MASKED);
 }
 
+#back-button-item {
+  background: transparent none;
+  background-image: url(chrome://theme/IDR_LOGIN_BACK_BUTTTON);
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 18px;
+  left: 14px;
+  position: absolute;
+  top: 14px;
+  width: 18px;
+  z-index: 1;
+}
+
+html[dir=rtl] #close-button-item {
+  left: auto;
+  right: 14px;
+}
+
+#back-button-item:disabled {
+  background-image: url(chrome://theme/IDR_LOGIN_BACK_BUTTTON_MASKED);
+}
+
 .signin-text {
   color: #666;
   margin-top: 20px;

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

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

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

@@ -119,6 +119,8 @@ login.createScreen('GaiaSigninScreen', 'gaia-signin', function() {
           'dialogShown', this.onDialogShown_.bind(this));
       this.gaiaAuthHost_.addEventListener(
           'dialogHidden', this.onDialogHidden_.bind(this));
+      this.gaiaAuthHost_.addEventListener(
+          'backButton', this.onBackButton_.bind(this));
       this.gaiaAuthHost_.confirmPasswordCallback =
           this.onAuthConfirmPassword_.bind(this);
       this.gaiaAuthHost_.noPasswordCallback =
@@ -139,6 +141,11 @@ login.createScreen('GaiaSigninScreen', 'gaia-signin', function() {
         e.preventDefault();
       });
 
+      $('back-button-item').addEventListener('click', function(e) {
+        $('back-button-item').hidden = true;
+        $('signin-frame').back();
+        e.preventDefault();
+      }.bind(this));
       $('close-button-item').addEventListener('click', function(e) {
         this.cancel();
         e.preventDefault();
@@ -261,6 +268,8 @@ login.createScreen('GaiaSigninScreen', 'gaia-signin', function() {
       window.requestAnimationFrame(function() {
         chrome.send('loginVisible', ['gaia-loading']);
       });
+      $('back-button-item').disabled = false;
+      $('back-button-item').hidden = true;
       $('close-button-item').disabled = false;
       this.classList.toggle('loading', this.loading);
 
@@ -465,6 +474,7 @@ login.createScreen('GaiaSigninScreen', 'gaia-signin', function() {
      * @private
      */
     onDialogShown_: function() {
+      $('back-button-item').disabled = true;
       $('close-button-item').disabled = true;
     },
 
@@ -473,9 +483,18 @@ login.createScreen('GaiaSigninScreen', 'gaia-signin', function() {
      * @private
      */
     onDialogHidden_: function() {
+      $('back-button-item').disabled = false;
       $('close-button-item').disabled = false;
     },
 
+    /**
+     * Invoked when the auth host emits 'backButton' event.
+     * @private
+     */
+    onBackButton_: function(e) {
+      $('back-button-item').hidden = !e.detail;
+    },
+
     /**
      * Invoked when the user has successfully authenticated via SAML, the
      * principals API was not used and the auth host needs the user to confirm

chrome/browser/resources/gaia_auth_host/authenticator.js

@@ -356,8 +356,10 @@ cr.define('cr.login', function() {
       this.dispatchEvent(new Event('dialogShown'));
     } else if (msg.method == 'dialogHidden') {
       this.dispatchEvent(new Event('dialogHidden'));
+    } else if (msg.method == 'backButton') {
+      this.dispatchEvent(new CustomEvent('backButton', {detail: msg.show}));
     } else {
-      console.warning('Unrecognized message from GAIA: ' + msg.method);
+      console.warn('Unrecognized message from GAIA: ' + msg.method);
     }
   };
 

chrome/browser/ui/webui/chromeos/login/gaia_screen_handler.cc

@@ -332,6 +332,7 @@ void GaiaScreenHandler::DeclareLocalizedValues(
                IDS_CREATE_SUPERVISED_USER_FEATURE_NAME);
   builder->Add("consumerManagementEnrollmentSigninMessage",
                IDS_LOGIN_CONSUMER_MANAGEMENT_ENROLLMENT);
+  builder->Add("backButton", IDS_ACCNAME_BACK);
   builder->Add("closeButton", IDS_CLOSE);
 
   // Strings used by the SAML fatal error dialog.