crostini: Installer config page should have a back button

... instead of the cancel button.

Bug: 1016195
Change-Id: I018874940dbfb72e6c99e6fedc7c8222866db4ea
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2059619
Commit-Queue: Jason Lin <lxj@google.com>
Reviewed-by: Julian Watson <juwa@google.com>
Reviewed-by: David Munro <davidmunro@google.com>
Cr-Commit-Position: refs/heads/master@{#742082}

chrome/app/chromeos_strings.grdp

@@ -3571,6 +3571,9 @@
   <message name="IDS_CROSTINI_INSTALLER_NEXT_BUTTON" desc="Label for the button in the Crostini installer dialog to progress to the next page.">
     Next
   </message>
+  <message name="IDS_CROSTINI_INSTALLER_BACK_BUTTON" desc="Label for the button in the Crostini installer dialog to go back to the previous page.">
+    Back
+  </message>
   <message name="IDS_CROSTINI_INSTALLER_INSTALL_BUTTON" desc="Label for the button in the Crostini installer dialog to begin installing Linux.">
     Install
   </message>

chrome/browser/resources/chromeos/crostini_installer/app.html

@@ -139,12 +139,12 @@
   <div id="button-container">
     <cr-button class="cancel-button" on-click="onCancelButtonClick_"
         disabled="[[eq_(state_, State.CANCELING)]]">
-      $i18n{cancel}
+      [[getCancelButtonLabel_(state_)]]
     </cr-button>
     <cr-button id="next" class="action-button" on-click="onNextButtonClick_"
         aria-describedby="title" aria-details="prompt-message"
         hidden="[[!showNextButton_(state_)]]">
-      [[getNextButtonLabel_()]]
+      $i18n{next}
     </cr-button>
     <cr-button id="install" class="action-button"
         on-click="onInstallButtonClick_" aria-describedby="title"

chrome/browser/resources/chromeos/crostini_installer/app.js

@@ -225,10 +225,12 @@ Polymer({
   onCancelButtonClick_() {
     switch (this.state_) {
       case State.PROMPT:
-      case State.CONFIGURE:
         BrowserProxy.getInstance().handler.cancelBeforeStart();
         this.closeDialog_();
         break;
+      case State.CONFIGURE:
+        this.state_ = State.PROMPT;
+        break;
       case State.INSTALLING:
         this.state_ = State.CANCELING;
         BrowserProxy.getInstance().handler.cancel();
@@ -323,14 +325,6 @@ Polymer({
     return this.configurePageAccessible_() && state === State.PROMPT;
   },
 
-  /**
-   * @returns {string}
-   * @private
-   */
-  getNextButtonLabel_() {
-    return loadTimeData.getString('next');
-  },
-
   /**
    * @param {State} state
    * @returns {string}
@@ -504,4 +498,10 @@ Polymer({
       this.usernameError_ = '';
     }
   },
+
+  /** @private */
+  getCancelButtonLabel_(state) {
+    return loadTimeData.getString(
+        state === State.CONFIGURE ? 'back' : 'cancel');
+  }
 });

chrome/browser/ui/webui/chromeos/crostini_installer/crostini_installer_ui.cc

@@ -34,6 +34,7 @@ namespace {
 void AddStringResources(content::WebUIDataSource* source) {
   static constexpr webui::LocalizedString kStrings[] = {
       {"next", IDS_CROSTINI_INSTALLER_NEXT_BUTTON},
+      {"back", IDS_CROSTINI_INSTALLER_BACK_BUTTON},
       {"install", IDS_CROSTINI_INSTALLER_INSTALL_BUTTON},
       {"retry", IDS_CROSTINI_INSTALLER_RETRY_BUTTON},
       {"close", IDS_APP_CLOSE},

chrome/test/data/webui/chromeos/crostini_installer_app_test.js

@@ -106,6 +106,12 @@ suite('<crostini-installer-app>', () => {
     expectEquals(fakeBrowserProxy.handler.getCallCount('install'), 0);
 
     await clickNext();
+    expectFalse(app.$$('#configure-message').hidden);
+    await clickCancel();  // Back to the prompt page.
+    expectFalse(app.$$('#prompt-message').hidden);
+
+    await clickNext();
+    expectFalse(app.$$('#configure-message').hidden);
     await clickInstall();
     await fakeBrowserProxy.handler.whenCalled('install').then(
         ([diskSize, username]) => {