Using checking-downloading-update polymer element for Update Required

Screen

This CL makes the the update required screen use the checking-
downloading-update polymer element so that the UI for this process
remains in sync with the Update Screen which also uses the same element.
A new property for controlling the download message in the dialog is
added in the element as it is different for the UpdateRequiredScreen as
per the UI mocks.

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

chrome/app/chromeos_strings.grdp

@@ -2330,6 +2330,9 @@
   <message name="IDS_UPDATE_REQUIRED_SCREEN_OPEN_NETWORK_SETTINGS" desc="Label for network configuration button on the update required dialog on the login screen to open network settings so that the user can connect to a network.">
     Open network settings
   </message>
+  <message name="IDS_UPDATE_REQUIRED_UPDATING_MESSAGE" desc="The message of the update required dialog on the login screen to inform the user that the device is updating and will restart after the update is complete.">
+    Device will restart when updates are complete.
+  </message>
 
   <!-- Genius App -->
   <message name="IDS_GENIUS_APP_NAME" desc="Name of the genius app in the app shelf">

chrome/browser/chromeos/login/screens/update_required_screen_browsertest.cc

@@ -36,7 +36,7 @@ namespace {
 constexpr char kUpdateRequiredScreen[] = "update-required-card";
 constexpr char kUpdateRequiredDialog[] = "update-required-dialog";
 constexpr char kUpdateRequiredUpdateButton[] = "update-button";
-constexpr char kUpdateRequiredUpdatingDialog[] = "update-process-dialog";
+constexpr char kUpdateProcess[] = "checking-downloading-update";
 constexpr char kUpdateRequiredEolDialog[] = "eol-dialog";
 
 chromeos::OobeUI* GetOobeUI() {
@@ -168,8 +168,7 @@ IN_PROC_BROWSER_TEST_F(UpdateRequiredScreenTest, TestCaptivePortal) {
   SetUpdateEngineStatus(update_engine::Operation::UPDATE_AVAILABLE);
 
   test::OobeJS().ExpectVisible(kUpdateRequiredScreen);
-  test::OobeJS().ExpectVisiblePath(
-      {kUpdateRequiredScreen, kUpdateRequiredUpdatingDialog});
+  test::OobeJS().ExpectVisiblePath({kUpdateRequiredScreen, kUpdateProcess});
 }
 
 IN_PROC_BROWSER_TEST_F(UpdateRequiredScreenTest, TestEolReached) {

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

@@ -21,16 +21,20 @@
                           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.
+    'estimatedTimeLeft' - Time left in seconds for the update to complete
+                          download.
+    'hasEstimate' - True if estimated time left is to be shown.
+    'defaultProgressMessage' - Message showing either estimated time left or
+                               default update status.
     '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
+    'checkingForUpdatesKey' - ID of localized string shown while checking for
                               updates.
-    'cancelHint' - ID of the localized string for update cancellation message.
+    'downloadingUpdatesKey' - ID of localized string shown while update is being
+                             downloaded.
+    'cancelHintKey' - ID of the localized string for update cancellation
+                      message.
 -->
 
 <dom-module id="checking-downloading-update">
@@ -46,11 +50,11 @@
           icon1x="oobe-32:googleg" icon2x="oobe-64:googleg">
       </hd-iron-icon>
       <div slot="subtitle" class="update-subtitle" id="checkingForUpdatesMsg">
-        [[i18nDynamic(locale, checkingForUpdatesMsg)]]
+        [[i18nDynamic(locale, checkingForUpdatesKey)]]
       </div>
       <div slot="subtitle" class="update-subtitle" hidden="[[!cancelAllowed]]"
           id="checkingForUpdateCancelHint">
-        [[i18nDynamic(locale, cancelHint)]]
+        [[i18nDynamic(locale, cancelHintKey)]]
       </div>
       <paper-progress slot="progress" id="checking-progress"
           indeterminate="[[checkingForUpdate]]">
@@ -64,37 +68,24 @@
 
     <oobe-dialog footer-shrinkable id="updating-dialog"
         title-key="updatingScreenTitle"
-        hidden="[[checkingForUpdate]]"
+        hidden="[[isCheckingOrUpdateCompleted_(checkingForUpdate,
+                                               updateCompleted)]]"
         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 slot="subtitle">
+        <div>[[i18nDynamic(locale, downloadingUpdatesKey)]]</div>
+        <div hidden="[[!cancelAllowed]]">
+          [[i18nDynamic(locale, cancelHintKey)]]
+        </div>
       </div>
       <paper-progress id="updating-progress" slot="progress" min="0" max="100"
-          value="[[progressValue]]" hidden="[[updateCompleted]]">
+          value="[[progressValue]]">
       </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 id="progress-message" class="progress-message">
+          [[progressMessage_]]
         </div>
         <div class="flex layout vertical center-justified center">
           <img class="update-illustration oobe-illustration"
@@ -103,5 +94,14 @@
         </div>
       </div>
     </oobe-dialog>
+
+    <oobe-dialog footer-shrinkable id="update-complete-dialog"
+        hidden="[[!updateCompleted]]" subtitle-key="updateCompeletedMsg"
+        aria-live="polite" full-screen-dialog>
+      <hd-iron-icon slot="oobe-icon"
+          icon1x="oobe-32:googleg" icon2x="oobe-64:googleg">
+      </hd-iron-icon>
+    </oobe-dialog>
+
   </template>
 </dom-module>

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

@@ -29,16 +29,14 @@ Polymer({
     },
 
     /**
-     * Message "3 minutes left".
+     * Estimated time left in seconds.
      */
-    estimatedTimeLeft: {
-      type: String,
-    },
+    estimatedTimeLeft: {type: Number, value: 0},
 
     /**
      * Shows estimatedTimeLeft.
      */
-    estimatedTimeLeftShown: {
+    hasEstimate: {
       type: Boolean,
       value: false,
     },
@@ -46,18 +44,10 @@ Polymer({
     /**
      * Message "33 percent done".
      */
-    progressMessage: {
+    defaultProgressMessage: {
       type: String,
     },
 
-    /**
-     * Shows progressMessage.
-     */
-    progressMessageShown: {
-      type: Boolean,
-      value: false,
-    },
-
     /**
      * True if update is fully completed and, probably manual action is
      * required.
@@ -78,12 +68,35 @@ Polymer({
     /**
      * ID of the localized string shown while checking for updates.
      */
-    checkingForUpdatesMsg: String,
+    checkingForUpdatesKey: String,
+
+    /**
+     * ID of the localized string shown while update is being downloaded.
+     */
+    downloadingUpdatesKey: String,
 
     /**
      * ID of the localized string for update cancellation message.
      */
-    cancelHint: String,
+    cancelHintKey: String,
+
+    /**
+     * Message "3 minutes left".
+     */
+    estimatedTimeLeftMsg_: {
+      type: String,
+      computed: 'computeEstimatedTimeLeftMsg_(estimatedTimeLeft)',
+    },
+
+    /**
+     * Message showing either estimated time left or default update status".
+     */
+    progressMessage_: {
+      type: String,
+      computed:
+          'computeProgressMessage_(hasEstimate, defaultProgressMessage, ' +
+          'estimatedTimeLeftMsg_)',
+    },
   },
 
   onBeforeShow() {
@@ -93,13 +106,44 @@ Polymer({
     });
   },
 
+  computeProgressMessage_(
+      hasEstimate, defaultProgressMessage, estimatedTimeLeftMsg_) {
+    if (hasEstimate)
+      return estimatedTimeLeftMsg_;
+    return defaultProgressMessage;
+  },
+
+  /**
+   * Sets estimated time left until download will complete.
+   */
+  computeEstimatedTimeLeftMsg_(estimatedTimeLeft) {
+    let seconds = estimatedTimeLeft;
+    let minutes = Math.ceil(seconds / 60);
+    var message = '';
+    if (minutes > 60) {
+      message = loadTimeData.getString('downloadingTimeLeftLong');
+    } else if (minutes > 55) {
+      message = loadTimeData.getString('downloadingTimeLeftStatusOneHour');
+    } else if (minutes > 20) {
+      message = loadTimeData.getStringF(
+          'downloadingTimeLeftStatusMinutes', Math.ceil(minutes / 5) * 5);
+    } else if (minutes > 1) {
+      message =
+          loadTimeData.getStringF('downloadingTimeLeftStatusMinutes', minutes);
+    } else {
+      message = loadTimeData.getString('downloadingTimeLeftSmall');
+    }
+    return loadTimeData.getStringF('downloading', message);
+  },
+
   /**
-   * Calculates visibility of UI element. Returns true if element is hidden.
-   * @param {Boolean} isAllowed Element flag that marks it visible.
+   * Calculates visibility of the updating dialog.
+   * @param {Boolean} checkingForUpdate If the screen is currently checking
+   * for updates.
    * @param {Boolean} updateCompleted If update is completed and all
    * intermediate status elements are hidden.
    */
-  isNotAllowedOrUpdateCompleted_(isAllowed, updateCompleted) {
-    return !isAllowed || updateCompleted;
+  isCheckingOrUpdateCompleted_(checkingForUpdate, updateCompleted) {
+    return checkingForUpdate || updateCompleted;
   },
 });

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

@@ -61,7 +61,6 @@ login.createScreen('UpdateScreen', 'update', function() {
      */
     showEstimatedTimeLeft(visible) {
       $('oobe-update-md').estimatedTimeLeftShown = visible;
-      $('oobe-update-md').progressMessageShown = !visible;
     },
 
     /**
@@ -69,23 +68,7 @@ login.createScreen('UpdateScreen', 'update', function() {
      * @param {number} seconds Time left in seconds.
      */
     setEstimatedTimeLeft(seconds) {
-      var minutes = Math.ceil(seconds / 60);
-      var message = '';
-      if (minutes > 60) {
-        message = loadTimeData.getString('downloadingTimeLeftLong');
-      } else if (minutes > 55) {
-        message = loadTimeData.getString('downloadingTimeLeftStatusOneHour');
-      } else if (minutes > 20) {
-        message = loadTimeData.getStringF(
-            'downloadingTimeLeftStatusMinutes', Math.ceil(minutes / 5) * 5);
-      } else if (minutes > 1) {
-        message = loadTimeData.getStringF(
-            'downloadingTimeLeftStatusMinutes', minutes);
-      } else {
-        message = loadTimeData.getString('downloadingTimeLeftSmall');
-      }
-      $('oobe-update-md').estimatedTimeLeft =
-          loadTimeData.getStringF('downloading', message);
+      $('oobe-update-md').estimatedTimeLeft = seconds;
     },
 
     /**
@@ -97,7 +80,6 @@ login.createScreen('UpdateScreen', 'update', function() {
       var visible = !!message;
       $('oobe-update-md').progressMessage = message;
       $('oobe-update-md').estimatedTimeLeftShown = !visible;
-      $('oobe-update-md').progressMessageShown = visible;
     },
 
     /**

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

@@ -18,12 +18,12 @@
         cancel-allowed="[[cancelAllowed]]"
         update-completed="[[updateCompleted]]"
         progress-value="[[progressValue]]"
-        estimated-time-left-shown="[[estimatedTimeLeftShown]]"
+        has-estimate="[[estimatedTimeLeftShown]]"
         estimated-time-left="[[estimatedTimeLeft]]"
-        progress-message-shown="[[progressMessageShown]]"
-        progress-message="[[progressMessage]]"
-        checking-for-updates-msg="checkingForUpdatesMsg"
-        cancel-hint="[[cancelHint]]">
+        default-progress-message="[[progressMessage]]"
+        checking-for-updates-key="checkingForUpdatesMsg"
+        cancel-hint-key="[[cancelHint]]"
+        downloading-updates-key="installingUpdateDesc">
     </checking-downloading-update>
     <oobe-dialog hidden="[[!requiresPermissionForCellular]]" tabindex="0"
         subtitle-key="updateOverCellularPromptMessage"

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

@@ -38,10 +38,11 @@ Polymer({
     },
 
     /**
-     * Message "3 minutes left".
+     * Estimated time left in seconds.
      */
     estimatedTimeLeft: {
-      type: String,
+      type: Number,
+      value: 0,
     },
 
     /**
@@ -58,13 +59,6 @@ Polymer({
       type: String,
     },
 
-    /**
-     * Shows progressMessage.
-     */
-    progressMessageShown: {
-      type: Boolean,
-    },
-
     /**
      * True if update is fully completed and, probably manual action is
      * required.

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

@@ -87,23 +87,7 @@ login.createScreen('UpdateRequiredScreen', 'update-required', function() {
      * @param {number} seconds Time left in seconds.
      */
     setEstimatedTimeLeft(seconds) {
-      var minutes = Math.ceil(seconds / 60);
-      var message = '';
-      if (minutes > 60) {
-        message = loadTimeData.getString('downloadingTimeLeftLong');
-      } else if (minutes > 55) {
-        message = loadTimeData.getString('downloadingTimeLeftStatusOneHour');
-      } else if (minutes > 20) {
-        message = loadTimeData.getStringF(
-            'downloadingTimeLeftStatusMinutes', Math.ceil(minutes / 5) * 5);
-      } else if (minutes > 1) {
-        message = loadTimeData.getStringF(
-            'downloadingTimeLeftStatusMinutes', minutes);
-      } else {
-        message = loadTimeData.getString('downloadingTimeLeftSmall');
-      }
-      $('update-required-card').estimatedTimeLeft =
-          loadTimeData.getStringF('downloading', message);
+      $('update-required-card').estimatedTimeLeft = seconds;
     },
 
     /**

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

@@ -50,35 +50,19 @@
       </div>
     </oobe-dialog>
 
-    <oobe-dialog hidden="[[showOn_(ui_state, 'update-process')]]" has-buttons
-        id="update-process-dialog">
-      <h1 slot="title" hidden="[[!updateProgressUnavailable]]">
-        [[i18nDynamic(locale,'checkingForUpdatesTitle')]]
-      </h1>
-      <paper-progress slot="progress" indeterminate
-          hidden="[[!updateProgressUnavailable]]">
-      </paper-progress>
-
-      <h1 slot="title" hidden="[[updateProgressUnavailable]]">
-        [[i18nDynamic(locale,'updatingTitle')]]
-      </h1>
-      <paper-progress slot="progress" min="0" max="100"
-          value="[[updateProgressValue]]"
-          hidden="[[updateProgressUnavailable]]">
-      </paper-progress>
-
-      <div slot="footer" hidden="[[updateProgressUnavailable]]"
-          class="flex layout vertical">
-        <div id="estimated-time-left" class="progress-message"
-            hidden="[[!estimatedTimeLeftVisible]]">
-          [[estimatedTimeLeft]]
-        </div>
-        <div id="progress-message" class="progress-message"
-            hidden="[[!updateProgressMessage]]">
-          [[updateProgressMessage]]
-        </div>
-      </div>
-    </oobe-dialog>
+    <checking-downloading-update id="checking-downloading-update"
+        hidden="[[showOn_(ui_state, 'update-process',
+                'update-completed-need-reboot')]]"
+        checking-for-update="[[updateProgressUnavailable]]"
+        update-completed="[[!showOn_(ui_state,
+                          'update-completed-need-reboot')]]"
+        progress-value="[[updateProgressValue]]"
+        has-estimate="[[estimatedTimeLeftVisible]]"
+        estimated-time-left="[[estimatedTimeLeft]]"
+        default-progress-message="[[updateProgressMessage]]"
+        checking-for-updates-key="updatingMessage"
+        downloading-updates-key="updatingMessage">
+    </checking-downloading-update>
 
     <oobe-dialog hidden="[[showOn_(ui_state, 'update-need-permission')]]"
         has-buttons title-key="updateRequiredTitle"
@@ -118,11 +102,6 @@
       </div>
     </oobe-dialog>
 
-    <oobe-dialog
-        hidden="[[showOn_(ui_state, 'update-completed-need-reboot')]]"
-        id="update-completed-dialog" subtitle-key="rebootNeededMessage">
-    </oobe-dialog>
-
     <oobe-dialog
         hidden="[[showOn_(ui_state, 'eol')]]" id="eol-dialog"
         title-key="eolTitle"

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

@@ -26,10 +26,11 @@ Polymer({
     deviceName: {type: String, value: ''},
 
     /**
-     * Message "3 minutes left".
+     * Estimated time left in seconds.
      */
     estimatedTimeLeft: {
-      type: String,
+      type: Number,
+      value: 0,
     },
 
     ui_state: {type: String},

chrome/browser/ui/webui/chromeos/login/update_required_screen_handler.cc

@@ -43,10 +43,9 @@ void UpdateRequiredScreenHandler::DeclareLocalizedValues(
                IDS_UPDATE_REQUIRED_SCREEN_OPEN_NETWORK_SETTINGS);
   builder->Add("updateButtonCaption", IDS_UPDATE_REQUIRED_SCREEN_START_UPDATE);
   builder->Add("rebootNeededMessage", IDS_UPDATE_COMPLETED);
-
   builder->Add("checkingForUpdatesTitle", IDS_CHECKING_FOR_UPDATES);
   builder->Add("updatingTitle", IDS_UPDATING_SCREEN_TITLE);
-
+  builder->Add("updatingMessage", IDS_UPDATE_REQUIRED_UPDATING_MESSAGE);
   builder->Add("downloading", IDS_DOWNLOADING);
   builder->Add("downloadingTimeLeftLong", IDS_DOWNLOADING_TIME_LEFT_LONG);
   builder->Add("downloadingTimeLeftStatusOneHour",