Minor upgrade UI fixes

1. Hide Cancel button as per mocks
2. Fix Upgrade complete string
3. Surface a (changing) line of output from the upgrade process above
the indeterminate progress bar.
4. Indeterminate progress bar is slower moving to indicate glacial
upgrade pace.

Bug: 1024693
Change-Id: Ifface2a6be35ae64440993b0d58a64cce571e2e6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2065253Reviewed-by: David Munro <davidmunro@google.com>
Commit-Queue: Nicholas Verne <nverne@chromium.org>
Cr-Commit-Position: refs/heads/master@{#743859}

chrome/app/chromeos_strings.grdp

@@ -3703,8 +3703,8 @@
   <message name="IDS_CROSTINI_UPGRADER_UPGRADE_BUTTON" desc="Label for the button in the Crostini upgrader dialog to begin upgrading Linux.">
     Upgrade
   </message>
-  <message name="IDS_CROSTINI_UPGRADER_LAUNCH_BUTTON" desc="Label for the button in the Crostini upgrader dialog to launch the Linux terminal after upgrading Linux.">
-    Launch
+  <message name="IDS_CROSTINI_UPGRADER_DONE_BUTTON" desc="Label for the button in the Crostini upgrader dialog to indicate upgrading Linux is complete.">
+    Done
   </message>
     <message name="IDS_CROSTINI_UPGRADER_RESTORE_BUTTON" desc="Label for the button in the Crostini upgrader dialog to restore a backup if there was an error upgrading Linux.">
     Restore
@@ -3740,7 +3740,7 @@
     This may take up to 30 minutes.
   </message>
   <message name="IDS_CROSTINI_UPGRADER_SUCCEEDED_TITLE" desc="Title of the Crostini upgrader when the upgrade is finished successfully.">
-    Upgrading Linux
+    Upgrade complete
   </message>
   <message name="IDS_CROSTINI_UPGRADER_SUCCEEDED" desc="Text shown by the Crostini upgrader when the upgrade is finished successfully.">
     Linux has been successfully upgraded.

chrome/browser/chromeos/crostini/crostini_manager.cc

@@ -2552,7 +2552,10 @@ void CrostiniManager::OnUpgradeContainerProgress(
   std::vector<std::string> progress_messages;
   progress_messages.reserve(signal.progress_messages().size());
   for (const auto& msg : signal.progress_messages()) {
-    progress_messages.push_back(msg);
+    if (!msg.empty()) {
+      // Blank lines aren't sent to observers.
+      progress_messages.push_back(msg);
+    }
   }
 
   ContainerId container_id(signal.vm_name(), signal.container_name());

chrome/browser/chromeos/crostini/crostini_upgrader.cc

@@ -298,11 +298,13 @@ void CrostiniUpgrader::OnUpgradeContainerProgress(
       break;
     case UpgradeContainerProgressStatus::SUCCEEDED:
       for (auto& observer : upgrader_observers_) {
+        observer.OnUpgradeProgress(messages);
         observer.OnUpgradeSucceeded();
       }
       break;
     case UpgradeContainerProgressStatus::FAILED:
       for (auto& observer : upgrader_observers_) {
+        observer.OnUpgradeProgress(messages);
         observer.OnUpgradeFailed();
       }
       break;

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

@@ -46,9 +46,21 @@
     line-height: 18px;
   }
 
+  #progress-submessage {
+    color: var(--google-grey-600);
+    flex-grow: 1;
+    font-family: Roboto;
+    font-size: 13px;
+    line-height: 18px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   paper-progress {
     --paper-progress-active-color: var(--cros-default-button-color);
     --paper-progress-container-color: rgba(var(--google-blue-600-rgb), .24);
+    --paper-progress-indeterminate-cycle-duration: 10s;
     margin-top: 36px;
     width: 100%;
   }
@@ -73,12 +85,16 @@
 
     <!-- Prompt message.  Has Learn More link.-->
     <div id="prompt-message" hidden="[[!isState_(state_, State.PROMPT)]]">
-      <span>[[getProgressMessage_(state_)]]</span>
+      <span>[[getProgressMessage_(state_)]] </span>
       <a href="$i18n{learnMoreUrl}" target="_blank">$i18n{learnMore}</a>
     </div>
     <!-- Progress message. -->
     <div id="progress-message" hidden="[[isState_(state_, State.PROMPT)]]">
       <span>[[getProgressMessage_(state_)]]</span>
+      <div id = "progress-submessage"
+          hidden="[[!isState_(state_, State.UPGRADING)]]">
+        <span>[[lastProgressLine_]]</span>
+      </div>
     </div>
     <!-- Progress bar containers. Depending on the current state, only one
       of them is visible. -->

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

@@ -72,6 +72,24 @@ Polymer({
       value: [],
     },
 
+    /** @private */
+    progressLineNumber_: {
+      type: Number,
+      value: 0,
+    },
+
+    /** @private */
+    lastProgressLine_: {
+      type: String,
+      value: '',
+    },
+
+    /** @private */
+    progressLineDisplayMs_: {
+      type: Number,
+      value: 300,
+    },
+
     /**
      * Enable the html template to use State.
      * @private
@@ -125,6 +143,10 @@ Polymer({
         assert(this.state_ === State.UPGRADING);
         this.progressMessages_.push(...progressMessages);
         this.upgradeProgress_ = this.progressMessages_.length;
+
+        if (this.progressLineNumber_ < this.upgradeProgress_) {
+          this.updateProgressLine_();
+        }
       }),
       callbackRouter.onUpgradeSucceeded.addListener(() => {
         assert(this.state_ === State.UPGRADING);
@@ -160,7 +182,7 @@ Polymer({
     ];
 
     document.addEventListener('keyup', event => {
-      if (event.key == 'Escape') {
+      if (event.key == 'Escape' && this.canCancel_(this.state_)) {
         this.onCancelButtonClick_();
         event.preventDefault();
       }
@@ -213,12 +235,11 @@ Polymer({
         break;
       case State.PRECHECKS_FAILED:
       case State.ERROR:
+      case State.OFFER_RESTORE:
       case State.SUCCEEDED:
         this.closeDialog_();
         break;
       case State.CANCELING:
-        // Although cancel button has been disabled, we can reach here if users
-        // press <esc> key.
         break;
       default:
         assertNotReached();
@@ -288,10 +309,12 @@ Polymer({
    */
   canCancel_(state) {
     switch (state) {
+      case State.UPGRADING:  // TODO(nverne): remove once we have OK from UX.
       case State.BACKUP:
       case State.RESTORE:
       case State.BACKUP_SUCCEEDED:
       case State.CANCELING:
+      case State.SUCCEEDED:
         return false;
     }
     return true;
@@ -352,7 +375,7 @@ Polymer({
       case State.ERROR:
         return loadTimeData.getString('cancel');
       case State.SUCCEEDED:
-        return loadTimeData.getString('launch');
+        return loadTimeData.getString('done');
       case State.OFFER_RESTORE:
         return loadTimeData.getString('restore');
     }
@@ -428,7 +451,8 @@ Polymer({
   getErrorMessage_(state) {
     // TODO(nverne): Surface error messages once we have better details.
     let messageId = null;
-    return messageId ? loadTimeData.getString(messageId) : '';
+    return messageId ? loadTimeData.getString(messageId) :
+                       this.lastProgressLine_;
   },
 
   /**
@@ -462,4 +486,12 @@ Polymer({
     return 'images/linux_illustration.png';
   },
 
+  updateProgressLine_() {
+    if (this.progressLineNumber_ < this.upgradeProgress_) {
+      this.lastProgressLine_ =
+          this.progressMessages_[this.progressLineNumber_++];
+      var t = setTimeout(
+          this.updateProgressLine_.bind(this), this.progressLineDisplayMs_);
+    }
+  },
 });

chrome/browser/ui/webui/chromeos/crostini_upgrader/crostini_upgrader_ui.cc

@@ -43,7 +43,7 @@ void AddStringResources(content::WebUIDataSource* source) {
       {"retry", IDS_CROSTINI_INSTALLER_RETRY_BUTTON},
       {"close", IDS_APP_CLOSE},
       {"cancel", IDS_APP_CANCEL},
-      {"launch", IDS_CROSTINI_UPGRADER_LAUNCH_BUTTON},
+      {"done", IDS_CROSTINI_UPGRADER_DONE_BUTTON},
       {"restore", IDS_CROSTINI_UPGRADER_RESTORE_BUTTON},
       {"learnMore", IDS_LEARN_MORE},