ChromeOS: Implement Update screen of material design OOBE.

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

Index: chrome/browser/resources/chromeos/login/oobe_screen_update.js
diff --git a/chrome/browser/resources/chromeos/login/oobe_screen_update.js b/chrome/browser/resources/chromeos/login/oobe_screen_update.js
index 1fa14c9797c99356c9785b0d447dbb915dc893ce..a79011c5a6b6cd070dd5771af0400dd22900641f 100644
--- a/chrome/browser/resources/chromeos/login/oobe_screen_update.js
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_update.js
@@ -55,6 +55,7 @@ login.createScreen('UpdateScreen', 'update', function() {
       this.context.addObserver(CONTEXT_KEY_CANCEL_UPDATE_SHORTCUT_ENABLED,
                                function(enabled) {
         $('update-cancel-hint').hidden = !enabled;
+        $('oobe-update-md').cancelAllowed = enabled;
       });
     },
 
@@ -73,8 +74,9 @@ login.createScreen('UpdateScreen', 'update', function() {
       // It's safe to act on the accelerator even if it's disabled on official
       // builds, since Chrome will just ignore this user action in that case.
       var updateCancelHint = $('update-cancel-hint').firstElementChild;
-      updateCancelHint.textContent =
-          loadTimeData.getString('cancelledUpdateMessage');
+      var message = loadTimeData.getString('cancelledUpdateMessage');
+      updateCancelHint.textContent = message;
+      $('oobe-update-md').setCancelHint(message);
       this.send(login.Screen.CALLBACK_USER_ACTED,
                 USER_ACTION_CANCEL_UPDATE_SHORTCUT);
     },
@@ -85,6 +87,7 @@ login.createScreen('UpdateScreen', 'update', function() {
      */
     setUpdateProgress: function(progress) {
       $('update-progress-bar').value = progress;
+      $('oobe-update-md').progressValue = progress;
     },
 
     /**
@@ -94,6 +97,8 @@ login.createScreen('UpdateScreen', 'update', function() {
     showEstimatedTimeLeft: function(visible) {
       $('progress-message').hidden = visible;
       $('estimated-time-left').hidden = !visible;
+      $('oobe-update-md').estimatedTimeLeftShown = visible;
+      $('oobe-update-md').progressMessageShown = !visible;
     },
 
     /**
@@ -116,8 +121,10 @@ login.createScreen('UpdateScreen', 'update', function() {
       } else {
         message = loadTimeData.getString('downloadingTimeLeftSmall');
       }
-      $('estimated-time-left').textContent =
+      var formattedMessage =
         loadTimeData.getStringF('downloading', message);

[michaelpg, 2016/10/05 21:51:41]

nit: 4-space indent

[Alexander Alekseev, 2016/10/05 22:06:23]

Done.

+      $('estimated-time-left').textContent = formattedMessage;
+      $('oobe-update-md').estimatedTimeLeft = formattedMessage;
     },
 
     /**
@@ -127,6 +134,8 @@ login.createScreen('UpdateScreen', 'update', function() {
     showProgressMessage: function(visible) {
       $('estimated-time-left').hidden = visible;
       $('progress-message').hidden = !visible;
+      $('oobe-update-md').estimatedTimeLeftShown = !visible;
+      $('oobe-update-md').progressMessageShown = visible;
     },
 
     /**
@@ -135,6 +144,7 @@ login.createScreen('UpdateScreen', 'update', function() {
      */
     setProgressMessage: function(message) {
       $('progress-message').innerText = message;
+      $('oobe-update-md').progressMessage = message;
     },
 
     /**
@@ -143,6 +153,7 @@ login.createScreen('UpdateScreen', 'update', function() {
      */
     setUpdateMessage: function(message) {
       $('update-upper-label').textContent = message;
+      $('oobe-update-md').updateUpperLabel = message;
     },
 
     /**
@@ -152,6 +163,32 @@ login.createScreen('UpdateScreen', 'update', function() {
     showUpdateCurtain: function(visible) {
       $('update-screen-curtain').hidden = !visible;
       $('update-screen-main').hidden = visible;
-    }
+      $('oobe-update-md').checkingForUpdate = visible;
+    },
+
+    /**
+     * This method takes care of switching to material-design OOBE.
+     * @private
+     */
+    setMDMode_: function() {
+      var useMDOobe = (loadTimeData.getString('newOobeUI') == 'on');
+      $('oobe-update-md').hidden = !useMDOobe;
+      $('oobe-update').hidden = useMDOobe;
+    },
+
+    /**
+     * Event handler that is invoked just before the screen is shown.
+     * @param {object} data Screen init payload.

[michaelpg, 2016/10/05 21:51:41]

no param

[Alexander Alekseev, 2016/10/05 22:06:23]

Done.

+     */
+    onBeforeShow: function() {
+      this.setMDMode_();
+    },
+
+    /**
+     * Updates localized content of the screen that is not updated via template.
+     */
+    updateLocalizedContent: function() {
+      this.setMDMode_();
+    },
   };
 });