ChromeOS: Powerwash UI update

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

 // Copyright (c) 2012 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 Device reset screen implementation.
  */
 
 login.createScreen('ResetScreen', 'reset', function() {
   var USER_ACTION_CANCEL_RESET = 'cancel-reset';
@@ skipping 64 matching lines @@
               announceAccessibleMessage(
                 loadTimeData.getString('resetRevertSpinnerMessage'));
             }
           }
       );
 
       this.context.addObserver(
           CONTEXT_KEY_IS_OFFICIAL_BUILD,
           function(isOfficial) {
             $('powerwash-help-link').setAttribute('hidden', !isOfficial);
+            $('oobe-reset-md').isOfficial_ = isOfficial;
           }
       );
       this.context.addObserver(
           CONTEXT_KEY_ROLLBACK_CHECKED,
           function(rollbackChecked) {
             self.setRollbackOptionView();
           }
       );
       this.context.addObserver(
           CONTEXT_KEY_ROLLBACK_AVAILABLE,
@@ skipping 62 matching lines @@
       buttons.push(cancelButton);
 
       return buttons;
     },
 
     /**
      * Returns a control which should receive an initial focus.
      */
     get defaultControl() {
       // choose
+      if (this.isMDMode_())
+        return $('oobe-reset-md');
       if (this.context.get(CONTEXT_KEY_SCREEN_STATE,
                            this.RESET_SCREEN_STATE.RESTART_REQUIRED) ==
           this.RESET_SCREEN_STATE.RESTART_REQUIRED)
         return $('reset-restart-button');
       if (this.context.get(CONTEXT_KEY_IS_CONFIRMATIONAL_VIEW, false))
         return $('reset-confirm-commit');
       return $('reset-toconfirm-button');
     },
 
     /**
      * Cancels the reset and drops the user back to the login screen.
      */
     cancel: function() {
       if (this.context.get(CONTEXT_KEY_IS_CONFIRMATIONAL_VIEW, false)) {
         $('reset').send(login.Screen.CALLBACK_USER_ACTED,
                         USER_ACTION_RESET_CONFIRM_DISMISSED);
         return;
       }
       this.send(login.Screen.CALLBACK_USER_ACTED, USER_ACTION_CANCEL_RESET);
     },
 
     /**
+     * This method takes care of switching to material-design OOBE.
+     * @private
+     */
+    setMDMode_: function() {
+      var useMDOobe = this.isMDMode_();
+      $('oobe-reset-md').hidden = !useMDOobe;
+      $('reset-confirm-overlay-md').hidden = !useMDOobe;
+      $('oobe-reset').hidden = useMDOobe;
+      $('reset-confirm-overlay').hidden = useMDOobe;
+      if (useMDOobe) {
+        $('reset').setAttribute('md-mode', 'true');
+        $('overlay-reset').setAttribute('md-mode', 'true');
+      } else {
+        $('reset').removeAttribute('md-mode');
+        $('overlay-reset').removeAttribute('md-mode');
+      }
+    },
+
+    /**
+     * Returns if material-design flag is used.
+     * @private
+     */
+    isMDMode_: function() {
+      return loadTimeData.getString('newOobeUI') == 'on';
+    },
+
+    /**
      * Event handler that is invoked just before the screen in shown.
      * @param {Object} data Screen init payload.
      */
     onBeforeShow: function(data) {
+      this.setMDMode_();
     },
 
     /**
-      * Sets css style for corresponding state of the screen.
-      * @private
-      */
+     * Sets css style for corresponding state of the screen.
+     * @private
+     */
     setDialogView_: function(state) {
       state = this.ui_state;
       var resetOverlay = $('reset-confirm-overlay');
       this.classList.toggle(
           'revert-promise-view',
           state == this.RESET_SCREEN_UI_STATE.REVERT_PROMISE);
       this.classList.toggle(
           'restart-required-view',
           state == this.RESET_SCREEN_UI_STATE.RESTART_REQUIRED);
       this.classList.toggle(
           'powerwash-proposal-view',
           state == this.RESET_SCREEN_UI_STATE.POWERWASH_PROPOSAL);
       resetOverlay.classList.toggle(
           'powerwash-proposal-view',
           state == this.RESET_SCREEN_UI_STATE.POWERWASH_PROPOSAL);
       this.classList.toggle(
           'rollback-proposal-view',
           state == this.RESET_SCREEN_UI_STATE.ROLLBACK_PROPOSAL);
       resetOverlay.classList.toggle(
           'rollback-proposal-view',
           state == this.RESET_SCREEN_UI_STATE.ROLLBACK_PROPOSAL);
+      var resetMd = $('oobe-reset-md');
+      var resetOverlayMd = $('reset-confirm-overlay-md');
+      if (state == this.RESET_SCREEN_UI_STATE.RESTART_REQUIRED) {
+        resetMd.uiState_ = 'restart-required-view';
+      }
+      if (state == this.RESET_SCREEN_UI_STATE.POWERWASH_PROPOSAL) {
+        resetMd.uiState_ = 'powerwash-proposal-view';
+        resetOverlayMd.isPowerwashView_ = true;
+      }
+      if (state == this.RESET_SCREEN_UI_STATE.ROLLBACK_PROPOSAL) {
+        resetMd.uiState_ = 'rollback-proposal-view';
+        resetOverlayMd.isPowerwashView_ = false;
+      }
+      if (state == this.RESET_SCREEN_UI_STATE.REVERT_PROMISE) {
+        resetMd.uiState_ = 'revert-promise-view';
+      }
     },
 
     setRollbackOptionView: function() {
       if (this.context.get(CONTEXT_KEY_IS_CONFIRMATIONAL_VIEW, false))
         return;
       if (this.context.get(CONTEXT_KEY_SCREEN_STATE) !=
           this.RESET_SCREEN_STATE.POWERWASH_PROPOSAL)
         return;
 
       if (this.context.get(CONTEXT_KEY_ROLLBACK_AVAILABLE, false) &&
           this.context.get(CONTEXT_KEY_ROLLBACK_CHECKED, false)) {
         // show rollback option
         $('reset-toconfirm-button').textContent = loadTimeData.getString(
             'resetButtonPowerwashAndRollback');
         this.ui_state = this.RESET_SCREEN_UI_STATE.ROLLBACK_PROPOSAL;
       } else {
         // hide rollback option
         $('reset-toconfirm-button').textContent = loadTimeData.getString(
             'resetButtonPowerwash');
         this.ui_state = this.RESET_SCREEN_UI_STATE.POWERWASH_PROPOSAL;
       }
       this.setDialogView_();
     }
   };
 });