crostini: tweak installer username config page UI

The UI tweak is based on the mock [1] and spec [2].

[1] https://docs.google.com/presentation/d/1BrYiEWolfwVwX1Z-4W7c1BgJNjnn7DZZ5lJTs-mFcxI/edit?ts=5e0ebd8b#slide=id.g7c663e3687_0_12
[2] https://drive.google.com/file/d/1323cL3Bv-H-R1L_u50wNezGhFWTbP5rE/view

Bug: 1016195
Change-Id: Ic6f4094e567825dbd6223e271483abaa748bb284
Test: manually with crostini-username flag on
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2032760
Commit-Queue: Jason Lin <lxj@google.com>
Auto-Submit: Jason Lin <lxj@google.com>
Reviewed-by: Joel Hockey <joelhockey@chromium.org>
Cr-Commit-Position: refs/heads/master@{#738464}

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

@@ -61,11 +61,20 @@
       flex-direction: row;
       justify-content: space-between;
   }
+
   div.outer {
       align-items: stretch;
       display: flex;
       flex-direction: column;
   }
+
+  #configure-message-title {
+    margin-bottom: 46px;
+  }
+
+  #username {
+    width: 264px;
+  }
 </style>
 
 <div id="main">
@@ -82,9 +91,8 @@
       <a href="$i18n{learnMoreUrl}" target="_blank">$i18n{learnMore}</a>
     </div>
     <div id="configure-message" hidden="[[!eq_(state_, State.CONFIGURE)]]">
-      <div>$i18n{configureMessage}</div>
+      <div id="configure-message-title">[[getConfigureMessageTitle_()]]</div>
       <div hidden="[[!showUsernameSelection_()]]">
-        <div>$i18n{usernameMessage}</div>
         <cr-input label="Username" id="username" type="text"
                   value="{{username_}}" maxlength="[[MAX_USERNAME_LENGTH]]"
                   invalid="[[!eq_(usernameError_, '')]]"
@@ -120,7 +128,10 @@
       <paper-progress class="progress-bar" indeterminate></paper-progress>
     </div>
   </div>
-  <img id="img-linux-illustration" src="images/linux_illustration.png" alt="">
+  <!-- TODO(crbug.com/1043067): Should show an error image for state "error".
+      -->
+  <img id="img-linux-illustration" src="images/linux_illustration.png" alt=""
+      hidden="[[eq_(state_, State.CONFIGURE)]]">
   <div id="button-container">
     <cr-button class="cancel-button" on-click="onCancelButtonClick_"
         disabled="[[eq_(state_, State.CANCELING)]]">

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

@@ -204,6 +204,7 @@ Polymer({
   onNextButtonClick_() {
     assert(this.state_ === State.PROMPT);
     this.state_ = State.CONFIGURE;
+    this.$.install.focus();
   },
 
   /** @private */
@@ -470,6 +471,17 @@ Polymer({
     return loadTimeData.getBoolean('crostiniCustomUsername');
   },
 
+  /**
+   * @private
+   */
+  getConfigureMessageTitle_() {
+    // If the flags only allow username config, then we show a username specific
+    // subtitle instead of a generic configure subtitle.
+    if (this.showUsernameSelection_() && !this.showDiskResizing_())
+      return loadTimeData.getString('usernameMessage');
+    return loadTimeData.getString('configureMessage');
+  },
+
   /** @private */
   onUsernameChanged_(username, oldUsername) {
     if (UNAVAILABLE_USERNAMES.includes(username)) {