UI flow rework for device reset options. Reset made available from gaia screen. Tests adapted.

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

Index: chrome/browser/resources/chromeos/login/oobe_screen_reset.js
diff --git a/chrome/browser/resources/chromeos/login/oobe_screen_reset.js b/chrome/browser/resources/chromeos/login/oobe_screen_reset.js
index 116d66d8de0e4d64c2ebfecdd823bb3a9e390c3b..1394536a73bce5f3dd87f11a338652f96c7768f7 100644
--- a/chrome/browser/resources/chromeos/login/oobe_screen_reset.js
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_reset.js
@@ -10,17 +10,14 @@ login.createScreen('ResetScreen', 'reset', function() {
   return {
 
     EXTERNAL_API: [
+      'hideRollbackOption',
+      'showRollbackOption',
       'updateViewOnRollbackCall'
     ],
 
     /** @override */
     decorate: function() {
-      $('reset-powerwash-help-link-on-rollback').addEventListener(
-          'click', function(event) {
-        chrome.send('resetOnLearnMore');
-      });
-      $('powerwash-help-link').addEventListener(
-          'click', function(event) {
+      $('powerwash-help-link').addEventListener('click', function(event) {
         chrome.send('resetOnLearnMore');
       });
     },
@@ -39,19 +36,42 @@ login.createScreen('ResetScreen', 'reset', function() {
      */
     get buttons() {
       var buttons = [];
+      var restartButton = this.ownerDocument.createElement('button');
+      restartButton.id = 'reset-restart-button';
+      restartButton.textContent = loadTimeData.getString('resetButtonRestart');
+      restartButton.addEventListener('click', function(e) {
+        chrome.send('restartOnReset');
+        e.stopPropagation();
+      });
+      buttons.push(restartButton);
+
+      // Button that initiates actual powerwash or powerwash with rollback.
       var resetButton = this.ownerDocument.createElement('button');
       resetButton.id = 'reset-button';
-      resetButton.textContent = '';
+      resetButton.textContent = loadTimeData.getString('resetButtonReset');
       resetButton.addEventListener('click', function(e) {
-        if ($('reset').needRestart)
-          chrome.send('restartOnReset', [$('reset-rollback-checkbox').checked]);
-        else
-          chrome.send('powerwashOnReset',
-                      [$('reset-rollback-checkbox').checked]);
+        chrome.send('powerwashOnReset', [$('reset').rollbackChecked]);
         e.stopPropagation();
       });
       buttons.push(resetButton);
 
+      // Button that leads to confirmation dialog.
+      var toConfirmButton = this.ownerDocument.createElement('button');
+      toConfirmButton.id = 'reset-toconfirm-button';
+      toConfirmButton.textContent =
+          loadTimeData.getString('resetButtonPowerwash');
+      toConfirmButton.addEventListener('click', function(e) {
+        // change view to confirmational
+        $('reset').isConfirmational = true;
+        if ($('reset').rollbackChecked && $('reset').rollbackAvailable)
+          $('reset').setDialogView_('rollbackConfirmationalDialog');
+        else
+          $('reset').setDialogView_('powerwashConfirmationalDialog');
+        chrome.send('showConfirmationOnReset');
+        e.stopPropagation();
+      });
+      buttons.push(toConfirmButton);
+
       var cancelButton = this.ownerDocument.createElement('button');
       cancelButton.id = 'reset-cancel-button';
       cancelButton.textContent = loadTimeData.getString('cancelButton');
@@ -68,6 +88,14 @@ login.createScreen('ResetScreen', 'reset', function() {
      * Returns a control which should receive an initial focus.
      */
     get defaultControl() {
+      // choose
+      if (this.needRestart)
+        return $('reset-restart-button');
+      if (this.isConfirmational)
+        if (this.rollbackChecked)
+          return $('reset-button');
+      else
+        return $('reset-toconfirm-button');
       return $('reset-button');
     },
 
@@ -85,75 +113,65 @@ login.createScreen('ResetScreen', 'reset', function() {
     onBeforeShow: function(data) {
       if (data === undefined)
         return;
-      this.classList.remove('revert-promise');
-      if ('showRestartMsg' in data)
-        this.setRestartMsg_(data['showRestartMsg']);
-      if ('showRollbackOption' in data)
-        this.setRollbackAvailable_(data['showRollbackOption']);
-      if ('simpleConfirm' in data) {
-        this.isConfirmational = data['simpleConfirm'];
-        this.confirmRollback = false;
-      }
-      if ('rollbackConfirm' in data) {
-        this.isConfirmational = data['rollbackConfirm'];
-        this.confirmRollback = true;
-      }
 
-      if (this.isConfirmational) {
-        // Exec after reboot initiated by reset screen.
-        // Confirmational form of screen.
-        $('reset-button').textContent = loadTimeData.getString(
-            'resetButtonReset');
-        if (this.confirmRollback) {
-          $('reset-warning-msg').textContent = loadTimeData.getString(
-              'resetAndRollbackWarningTextConfirmational');
-          $('reset-warning-details').textContent = loadTimeData.getString(
-              'resetAndRollbackWarningDetailsConfirmational');
-        } else {
-          $('reset-warning-msg').textContent = loadTimeData.getString(
-              'resetWarningTextConfirmational');
-          $('reset-warning-details').textContent = loadTimeData.getString(
-              'resetWarningDetailsConfirmational');
-        }
-      } else {
-        $('reset-warning-msg').textContent = loadTimeData.getString(
-            'resetWarningTextInitial');
-        $('reset-warning-details').textContent = loadTimeData.getString(
-            'resetWarningDetailsInitial');
-        if (this.needRestart) {
-          $('reset-button').textContent = loadTimeData.getString(
-              'resetButtonRelaunch');
-        } else {
-          $('reset-button').textContent = loadTimeData.getString(
-              'resetButtonPowerwash');
-        }
-      }
-    },
+      this.rollbackChecked = false;
+      this.rollbackAvailable = false;
+      this.isConfirmational = false;
 
-    /**
-      * Sets restart necessity for the screen.
-      * @param {bool} need_restart. If restart required before reset.
-      * @private
-      */
-    setRestartMsg_: function(need_restart) {
-      this.classList.toggle('norestart', !need_restart);
-      this.needRestart = need_restart;
+      if ('rollbackAvailable' in data)
+        this.rollbackAvailable = data['rollbackAvailable'];
+
+      if ('restartRequired' in data && data['restartRequired']) {
+        this.restartRequired = true;
+        this.setDialogView_('restartRequiredDialog');
+      }
+      else {

[dzhioev (left Google), 2014/08/26 12:08:18]

Put 'else' on the same line as '}'

[merkulova, 2014/08/27 08:54:48]

Done.

+        this.restartRequired = false;
+        this.setDialogView_('powerwashProposalDialog');
+      }
     },
 
     /**
-      * Sets rollback availability for the screen.
-      * @param {bool} can_rollback. If Rollback is available on reset screen.
+      * Sets css style for corresponding state of the screen.
+      * @param {string} state.
       * @private
       */
-    setRollbackAvailable_: function(show_rollback) {
-      this.classList.toggle('norollback', !show_rollback);
-      this.showRollback = show_rollback;
+    setDialogView_: function(state) {
+      this.classList.remove('revert-promise-view');
+      this.classList.remove('restart-required-view');
+      this.classList.remove('powerwash-proposal-view');
+      this.classList.remove('powerwash-confirm-view');
+      this.classList.remove('rollback-confirm-view');
+      if (state == 'revertPromiseDialog')
+        this.classList.add('revert-promise-view');
+      else if (state == 'restartRequiredDialog')
+        this.classList.add('restart-required-view');
+      else if (state == 'powerwashProposalDialog')
+        this.classList.add('powerwash-proposal-view');
+      else if (state == 'powerwashConfirmationalDialog')

[dzhioev (left Google), 2014/08/26 12:08:18]

I think it will be better if you create constants for state values.

[merkulova, 2014/08/27 08:54:48]

Done.

+        this.classList.add('powerwash-confirm-view');
+      else if (state == 'rollbackConfirmationalDialog')
+        this.classList.add('rollback-confirm-view');
+      else  // default view is powerwashProposal

[dzhioev (left Google), 2014/08/26 12:08:18]

Check that it is really "powerwashProposal"

[merkulova, 2014/08/27 08:54:48]

Not sure what you mean?

[dzhioev (left Google), 2014/08/28 15:22:49]

Check that in the last "else" |state == 'powerwashProposal'|. Or it is not true?

[merkulova, 2014/08/29 07:26:54]

Not like that. There's already a special case procession for
'powerwashProposal'. This one case is a simple fallback. That means we can set
dialogView to 'powerwashProposal' in 2 ways. One is explicitly set that state
(and it's how it's being used)  and another just run set-function without state
param.
Does it fit?

[dzhioev (left Google), 2014/08/29 15:44:31]

I don't see a place where you call setDialogView_ with a |state| that is not
covered by if-branches. Why do you need this else-branch at all? I think we
should threat the situation when |state| has unexpected value as an error.

[merkulova, 2014/09/03 08:48:20]

Done.

+        this.classList.add('powerwash-proposal-view');
     },
 
     updateViewOnRollbackCall: function() {
-      this.classList.add('revert-promise');
+      this.setDialogView_('revertPromiseDialog');
       announceAccessibleMessage(
           loadTimeData.getString('resetRevertSpinnerMessage'));
+    },
+
+    showRollbackOption: function() {
+      $('reset-toconfirm-button').textContent = loadTimeData.getString(
+          'resetButtonPowerwashAndRollback');
+      this.rollbackChecked = true;
+    },
+
+    hideRollbackOption: function() {
+      $('reset-toconfirm-button').textContent = loadTimeData.getString(
+          'resetButtonPowerwash');
+      this.rollbackChecked = false;
     }
   };
 });