Crostini upgrader: hide illustration

Hide the illustration when there's a progress bar. This is to stop the
visual noise when the illustration moves downwards.

Bug: 1103505
Change-Id: I9d144abe21207ff3ab0fec0f7258d15eea317db0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2321887
Auto-Submit: Nicholas Verne <nverne@chromium.org>
Commit-Queue: David Munro <davidmunro@google.com>
Reviewed-by: David Munro <davidmunro@google.com>
Cr-Commit-Position: refs/heads/master@{#792527}

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

@@ -77,7 +77,6 @@
     justify-content: flex-end;
     margin: 32px 0;
   }
-
 </style>
 
 <div id="main">
@@ -127,7 +126,8 @@
   </div>
 
   <img id="[[getIllustrationStyle_(state_)]]"
-      src="[[getIllustrationURI_(state_)]]" alt="">
+      src="[[getIllustrationURI_(state_)]]" alt=""
+      hidden="[[hideIllustration_(state_)]]">
   <div id="backup-checkbox" hidden="[[!isState_(state_, State.PROMPT)]]">
     <cr-checkbox checked="{{backupCheckboxChecked_}}" >
       <p class="checkbox-text">

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

@@ -529,6 +529,20 @@ Polymer({
     return 'images/linux_illustration.png';
   },
 
+  /**
+   * @param {State} state
+   * @return {boolean}
+   * @private
+   */
+  hideIllustration_(state) {
+    switch (state) {
+      case State.BACKUP:
+      case State.UPGRADING:
+        return true;
+    }
+    return false;
+  },
+
   /** @private */
   updateProgressLine_() {
     if (this.progressLineNumber_ < this.upgradeProgress_) {