OOBE: Extract checking and downloading update into a separate element

The element is to be used during the OOBE update and update required screen.
This CL also changes the browser tests for the update screen to be
in-line with the new extracted component. The "G" iron-icon with size 24
is removed and the common icon size is being used as in other OOBE screens.

Bug: 1048607
Change-Id: I69f9969f8600f5a6b91919e40d65f61305afe605
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2056818
Commit-Queue: Saurabh Nijhara <snijhara@google.com>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#744728}

chrome/browser/chromeos/login/test/js_checker.cc

@@ -274,6 +274,14 @@ void JSChecker::ExpectHasNoAttribute(
   ExpectFalse(ElementHasAttributeCondition(attribute, element_ids));
 }
 
+void JSChecker::ExpectElementText(
+    const std::string& content,
+    std::initializer_list<base::StringPiece> element_ids) {
+  const std::string element_path = GetOobeElementPath(element_ids);
+  const std::string expression = element_path + ".textContent.trim()";
+  ExpectEQ(expression, content);
+}
+
 void JSChecker::ClickOnPath(
     std::initializer_list<base::StringPiece> element_ids) {
   ExpectVisiblePath(element_ids);

chrome/browser/chromeos/login/test/js_checker.h

@@ -133,6 +133,10 @@ class JSChecker {
       const std::string& attribute,
       std::initializer_list<base::StringPiece> element_ids);
 
+  // Expect that the indicated UI element has particular text content.
+  void ExpectElementText(const std::string& content,
+                         std::initializer_list<base::StringPiece> element_ids);
+
   // Fires a native 'click' event on the indicated UI element. Prefer using
   // native 'click' event as it works on both polymer and native UI elements.
   void ClickOnPath(std::initializer_list<base::StringPiece> element_ids);

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

+/* Copyright 2020 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+.progress-message {
+  color: var(--oobe-subheader-text-color);
+  margin-top: 32px;
+}
+
+.update-illustration {
+  height: 264px;
+  width: 264px;
+}

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

+<!-- Copyright 2020 The Chromium Authors. All rights reserved.
+     Use of this source code is governed by a BSD-style license that can be
+     found in the LICENSE file. -->
+
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+
+<!--
+  UI for checking and downloading updates as part of the update process.
+  'indeterminate' paper-progress will recalculate styles on every frame
+  when OOBE is loaded (even when another screen is open).
+  So we make it 'indeterminate' only when the checking for updates dialog is
+  shown, and make set to false when dialog is hidden.
+
+  Example:
+      <checking-downloading-update> </checking-downloading-update>
+
+  Attributes:
+    'checkingForUpdate' - Whether the screen is currently checking for updates.
+                          Shows the checking for updates dialog and hides the
+                          downloading dialog.
+    'progressValue' - Progress bar percent value.
+    'estimatedTimeLeft' - Time left for the update to complete download.
+    'estimatedTimeLeftShown' - True if estimatedTimeLeft is to be shown.
+    'progressMessage' - Message informing update status.
+    'progressMessageShown' - True if progressMessage is to be shown.
+    'updateCompleted' - True if update is completed and probably manual action
+                        is required.
+    'cancelAllowed' - True if update cancellation is allowed.
+    'checkingForUpdatesMsg' - ID of localized string shown while checking for
+                              updates.
+    'cancelHint' - ID of the localized string for update cancellation message.
+-->
+
+<dom-module id="checking-downloading-update">
+  <template>
+    <link rel="stylesheet" href="oobe_dialog_host.css">
+    <link rel="stylesheet" href="oobe_flex_layout.css">
+    <link rel="stylesheet" href="checking_downloading_update.css">
+    <oobe-dialog hidden="[[!checkingForUpdate]]"
+        title-key="checkingForUpdates"
+        aria-live="polite" id="checking-for-updates-dialog" footer-shrinkable
+        full-screen-dialog>
+      <hd-iron-icon slot="oobe-icon"
+          icon1x="oobe-32:googleg" icon2x="oobe-64:googleg">
+      </hd-iron-icon>
+      <div slot="subtitle" class="update-subtitle" id="checkingForUpdatesMsg">
+        [[i18nDynamic(locale, checkingForUpdatesMsg)]]
+      </div>
+      <div slot="subtitle" class="update-subtitle" hidden="[[!cancelAllowed]]"
+          id="checkingForUpdateCancelHint">
+        [[i18nDynamic(locale, cancelHint)]]
+      </div>
+      <paper-progress slot="progress" id="checking-progress"
+          indeterminate="[[checkingForUpdate]]">
+      </paper-progress>
+      <div slot="footer" class="flex layout vertical center-justified center">
+        <img class="update-illustration oobe-illustration"
+            srcset="images/1x/updating_1x.svg 1x,
+                    images/2x/updating_2x.svg 2x">
+      </div>
+    </oobe-dialog>
+
+    <oobe-dialog footer-shrinkable id="updating-dialog"
+        title-key="updatingScreenTitle"
+        hidden="[[checkingForUpdate]]"
+        aria-live="polite" full-screen-dialog>
+      <hd-iron-icon slot="oobe-icon"
+          icon1x="oobe-32:googleg" icon2x="oobe-64:googleg">
+      </hd-iron-icon>
+      <div slot="subtitle" class="update-subtitle"
+          hidden="[[updateCompleted]]">
+        [[i18nDynamic(locale, 'installingUpdateDesc')]]
+      </div>
+      <div slot="subtitle" class="update-subtitle" id="updatingCancelHint"
+          hidden="[[isNotAllowedOrUpdateCompleted_(cancelAllowed,
+                                                   updateCompleted)]]">
+        [[i18nDynamic(locale, cancelHint)]]
+      </div>
+      <div id="update-complete-msg" slot="subtitle" class="update-subtitle"
+          hidden="[[!updateCompleted]]">
+        [[i18nDynamic(locale, 'updateCompeletedMsg')]]
+      </div>
+      <paper-progress id="updating-progress" slot="progress" min="0" max="100"
+          value="[[progressValue]]" hidden="[[updateCompleted]]">
+      </paper-progress>
+      <div slot="footer" class="flex layout vertical">
+        <div id="estimated-time-left" class="progress-message"
+            hidden="[[isNotAllowedOrUpdateCompleted_(estimatedTimeLeftShown,
+                                                     updateCompleted)]]">
+          [[estimatedTimeLeft]]
+        </div>
+        <div id="progress-message" class="progress-message"
+            hidden="[[isNotAllowedOrUpdateCompleted_(progressMessageShown,
+                                                     updateCompleted)]]">
+          [[progressMessage]]
+        </div>
+        <div class="flex layout vertical center-justified center">
+          <img class="update-illustration oobe-illustration"
+              srcset="images/1x/updating_1x.svg 1x,
+                      images/2x/updating_2x.svg 2x">
+        </div>
+      </div>
+    </oobe-dialog>
+  </template>
+</dom-module>

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

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview Polymer element for displaying material design Update screen.
+ */
+
+Polymer({
+  is: 'checking-downloading-update',
+
+  behaviors: [OobeI18nBehavior, OobeDialogHostBehavior],
+
+  properties: {
+    /**
+     * Shows "Checking for update ..." section and hides "Updating..." section.
+     */
+    checkingForUpdate: {
+      type: Boolean,
+      value: true,
+    },
+
+    /**
+     * Progress bar percent.
+     */
+    progressValue: {
+      type: Number,
+      value: 0,
+    },
+
+    /**
+     * Message "3 minutes left".
+     */
+    estimatedTimeLeft: {
+      type: String,
+    },
+
+    /**
+     * Shows estimatedTimeLeft.
+     */
+    estimatedTimeLeftShown: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * Message "33 percent done".
+     */
+    progressMessage: {
+      type: String,
+    },
+
+    /**
+     * Shows progressMessage.
+     */
+    progressMessageShown: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * True if update is fully completed and, probably manual action is
+     * required.
+     */
+    updateCompleted: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * If update cancellation is allowed.
+     */
+    cancelAllowed: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * ID of the localized string shown while checking for updates.
+     */
+    checkingForUpdatesMsg: String,
+
+    /**
+     * ID of the localized string for update cancellation message.
+     */
+    cancelHint: String,
+  },
+
+  onBeforeShow() {
+    this.behaviors.forEach((behavior) => {
+      if (behavior.onBeforeShow)
+        behavior.onBeforeShow.call(this);
+    });
+  },
+
+  /**
+   * Calculates visibility of UI element. Returns true if element is hidden.
+   * @param {Boolean} isAllowed Element flag that marks it visible.
+   * @param {Boolean} updateCompleted If update is completed and all
+   * intermediate status elements are hidden.
+   */
+  isNotAllowedOrUpdateCompleted_(isAllowed, updateCompleted) {
+    return !isAllowed || updateCompleted;
+  },
+});

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

@@ -15,6 +15,7 @@
 <include src="network_select_login.html">
 <include src="update_required_card.html">
 <include src="offline_ad_login.html">
+<include src="checking_downloading_update.html">
 <include src="active_directory_password_change.html">
 <include src="arc_terms_of_service.html">
 <include src="oobe_a11y_option.html">

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

@@ -24,6 +24,7 @@
 // <include src="network_select_login.js">
 // <include src="update_required_card.js">
 // <include src="offline_ad_login.js">
+// <include src="checking_downloading_update.js">
 // <include src="active_directory_password_change.js">
 // <include src="oobe_a11y_option.js">
 // <include src="oobe_adb_sideloading_screen.js">

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

@@ -50,5 +50,6 @@
 <include src="update_required_card.html">
 <include src="packaged_license_screen.html">
 <include src="gesture_navigation.html">
+<include src="checking_downloading_update.html">
 
 <script src="chrome://oobe/custom_elements.js"></script>

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

@@ -61,3 +61,4 @@
 // <include src="update_required_card.js">
 // <include src="packaged_license_screen.js">
 // <include src="gesture_navigation.js">
+// <include src="checking_downloading_update.js">

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

@@ -38,8 +38,7 @@ login.createScreen('UpdateScreen', 'update', function() {
      * Cancels the screen.
      */
     cancel() {
-      $('oobe-update-md')
-          .setCancelHint(loadTimeData.getString('cancelledUpdateMessage'));
+      $('oobe-update-md').cancelHint = 'cancelledUpdateMessage';
       this.send(
           login.Screen.CALLBACK_USER_ACTED, USER_ACTION_CANCEL_UPDATE_SHORTCUT);
     },

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

@@ -3,58 +3,38 @@
      found in the LICENSE file. -->
 
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 
-<iron-iconset-svg name="oobe-update" size="24">
-  <svg>
-    <defs>
-      <!-- The Google "G" icon (copied from settings). -->
-      <g id="googleg">
-        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"></path>
-        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"></path>
-        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"></path>
-        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"></path>
-        <path fill="none" d="M1 1h22v22H1z"></path>
-      </g>
-    </defs>
-  </svg>
-</iron-iconset-svg>
-
 <dom-module id="oobe-update-md">
   <template>
     <link rel="stylesheet" href="oobe_dialog_host.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <link rel="stylesheet" href="oobe_update.css">
-    <oobe-dialog hidden="[[!checkingForUpdate]]" tabindex="0"
-        title-key="checkingForUpdates"
-        aria-live="polite" id="checking-for-updates-dialog" footer-shrinkable
-        full-screen-dialog>
-      <iron-icon icon="oobe-update:googleg" slot="oobe-icon"></iron-icon>
-      <div slot="subtitle" class="update-subtitle" id="checkingForUpdatesMsg"
-          i18n-content="checkingForUpdatesMsg">
-      </div>
-      <div slot="subtitle" class="update-subtitle" id="checkingForUpdateCancelHint"
-          i18n-content="cancelUpdateHint" hidden="[[!cancelAllowed]]">
-      </div>
-      <paper-progress slot="progress" id="checking-progress"
-          hidden="[[!checkingForUpdate]]">
-      </paper-progress>
-      <div slot="footer" class="flex layout vertical center-justified center">
-        <img class="update-illustration oobe-illustration"
-            srcset="images/1x/updating_1x.svg 1x,
-                    images/2x/updating_2x.svg 2x">
-      </div>
-    </oobe-dialog>
+    <checking-downloading-update id="checking-downloading-update"
+        full-screen-dialog
+        hidden="[[requiresPermissionForCellular]]"
+        checking-for-update="[[checkingForUpdate]]"
+        cancel-allowed="[[cancelAllowed]]"
+        update-completed="[[updateCompleted]]"
+        progress-value="[[progressValue]]"
+        estimated-time-left-shown="[[estimatedTimeLeftShown]]"
+        estimated-time-left="[[estimatedTimeLeft]]"
+        progress-message-shown="[[progressMessageShown]]"
+        progress-message="[[progressMessage]]"
+        checking-for-updates-msg="checkingForUpdatesMsg"
+        cancel-hint="[[cancelHint]]">
+    </checking-downloading-update>
     <oobe-dialog hidden="[[!requiresPermissionForCellular]]" tabindex="0"
         subtitle-key="updateOverCellularPromptMessage"
         aria-live="polite" has-buttons footer-shrinkable
         id="cellular-permission-dialog">
-      <iron-icon icon="oobe-update:googleg" slot="oobe-icon"></iron-icon>
+      <hd-iron-icon slot="oobe-icon"
+          icon1x="oobe-32:googleg" icon2x="oobe-64:googleg">
+      </hd-iron-icon>
       <h1 slot="title">
-          [[i18nRecursive(locale, 'updateOverCellularPromptTitle',
-                          'productName')]]
+        [[i18nRecursive(locale, 'updateOverCellularPromptTitle',
+                        'productName')]]
       </h1>
       <div slot="footer" class="flex layout vertical center-justified center">
         <img class="update-illustration oobe-illustration"
@@ -68,43 +48,5 @@
             on-tap="onNextClicked_"></oobe-next-button>
       </div>
     </oobe-dialog>
-    <oobe-dialog footer-shrinkable id="updating-dialog"
-        title-key="updatingScreenTitle"
-        hidden="[[hideUpdatingScreen_(checkingForUpdate,
-                                      requiresPermissionForCellular)]]"
-        tabindex="0" aria-live="polite">
-      <iron-icon icon="oobe-update:googleg" slot="oobe-icon"></iron-icon>
-      <div slot="subtitle" class="update-subtitle"
-          i18n-content="installingUpdateDesc"
-          hidden="[[updateCompleted]]"></div>
-      <div slot="subtitle" class="update-subtitle" id="updatingCancelHint"
-          i18n-content="cancelUpdateHint"
-          hidden="[[isNotAllowedOrUpdateCompleted_(cancelAllowed,
-                                                   updateCompleted)]]">
-      </div>
-      <div id="update-complete-msg" slot="subtitle" class="update-subtitle"
-          i18n-content="updateCompeletedMsg" hidden="[[!updateCompleted]]">
-      </div>
-      <paper-progress id="updating-progress" slot="progress" min="0" max="100"
-          value="[[progressValue]]" hidden="[[updateCompleted]]">
-      </paper-progress>
-      <div slot="footer" class="flex layout vertical">
-        <div id="estimated-time-left" class="progress-message"
-            hidden="[[isNotAllowedOrUpdateCompleted_(estimatedTimeLeftShown,
-                                                     updateCompleted)]]">
-          [[estimatedTimeLeft]]
-        </div>
-        <div id="progress-message" class="progress-message"
-            hidden="[[isNotAllowedOrUpdateCompleted_(progressMessageShown,
-                                                     updateCompleted)]]">
-          [[progressMessage]]
-        </div>
-        <div class="flex layout vertical center-justified center">
-          <img class="update-illustration oobe-illustration"
-              srcset="images/1x/updating_1x.svg 1x,
-                      images/2x/updating_2x.svg 2x">
-        </div>
-      </div>
-    </oobe-dialog>
   </template>
 </dom-module>

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

@@ -81,6 +81,14 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    /**
+     * ID of the localized string for update cancellation message.
+     */
+    cancelHint: {
+      type: String,
+      value: 'cancelUpdateHint',
+    },
   },
 
   onBeforeShow() {
@@ -88,33 +96,6 @@ Polymer({
       if (behavior.onBeforeShow)
         behavior.onBeforeShow.call(this);
     });
-    // 'indeterminate' paper-progress will recalculate styles on every frame
-    // wnen OOBE is loaded (even when another screen is open).
-    // So we make it 'indeterminate' only right before screen is shown, and
-    // make it hidden when its container dialog is hidden.
-    this.$['checking-progress'].indeterminate = true;
-  },
-
-  /**
-   * This updates "Cancel Update" message.
-   */
-  setCancelHint(message) {
-    this.$.checkingForUpdateCancelHint.textContent = message;
-    this.$.updatingCancelHint.textContent = message;
-  },
-
-  /**
-   * Calculates visibility of UI element. Returns true if element is hidden.
-   * @param {Boolean} isAllowed Element flag that marks it visible.
-   * @param {Boolean} updateCompleted If update is completed and all
-   * intermediate status elements are hidden.
-   */
-  isNotAllowedOrUpdateCompleted_(isAllowed, updateCompleted) {
-    return !isAllowed || updateCompleted;
-  },
-
-  hideUpdatingScreen_(checkingForUpdate, requiresPermissionForCellular) {
-    return checkingForUpdate || requiresPermissionForCellular;
   },
 
   onBackClicked_() {