OOBE - Improve reset screen confirmation dialog

- Replace the dialog on the reset screen with the oobe-help-dialog
  that complies with UX specs and reuses available code.

- Refactor the confirmation dialog logic so that it lives in the
  main element 'oobe-reset'.

- Remove the intermediate oobe_reset_screen by using LoginScreenBehavior

- Add a waiter to test::OobeJS for waiting upon the presence of an
  attribute. Such as waiting on the 'open' attribute of dialogs.

- Add constants and modifications to the browser tests of the reset
  screen.

Fixed: 933310
Change-Id: I54001745326b60ab5a0a19519923c54dffa5baec
Bug: 933310
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2041474
Commit-Queue: Renato Silva <rrsilva@google.com>
Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Auto-Submit: Renato Silva <rrsilva@google.com>
Cr-Commit-Position: refs/heads/master@{#744288}

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

@@ -165,17 +165,12 @@ ResetScreen::ResetScreen(ResetView* view,
     view_->Bind(this);
     view_->SetScreenState(ResetView::State::kRestartRequired);
     view_->SetIsRollbackAvailable(false);
-    view_->SetIsRollbackChecked(false);
+    view_->SetIsRollbackRequested(false);
     view_->SetIsTpmFirmwareUpdateAvailable(false);
     view_->SetIsTpmFirmwareUpdateChecked(false);
     view_->SetIsTpmFirmwareUpdateEditable(true);
     view_->SetTpmFirmwareUpdateMode(tpm_firmware_update::Mode::kPowerwash);
-    view_->SetIsConfirmational(false);
-#if BUILDFLAG(GOOGLE_CHROME_BRANDING)
-    view_->SetIsGoogleBrandedBuild(true);
-#else
-    view_->SetIsGoogleBrandedBuild(false);
-#endif
+    view_->SetShouldShowConfirmationDialog(false);
   }
 }
 
@@ -312,8 +307,10 @@ void ResetScreen::OnCancel() {
     return;
   }
   // Hide Rollback view for the next show.
-  if (view_ && view_->GetIsRollbackAvailable() && view_->GetIsRollbackChecked())
+  if (view_ && view_->GetIsRollbackAvailable() &&
+      view_->GetIsRollbackRequested()) {
     OnToggleRollback();
+  }
   DBusThreadManager::Get()->GetUpdateEngineClient()->RemoveObserver(this);
   exit_callback_.Run();
 }
@@ -325,16 +322,16 @@ void ResetScreen::OnPowerwash() {
   }
 
   if (view_)
-    view_->SetIsConfirmational(false);
+    view_->SetShouldShowConfirmationDialog(false);
 
-  if (view_ && view_->GetIsRollbackChecked() &&
+  if (view_ && view_->GetIsRollbackRequested() &&
       !view_->GetIsRollbackAvailable()) {
     NOTREACHED()
         << "Rollback was checked but not available. Starting powerwash.";
   }
 
   if (view_ && view_->GetIsRollbackAvailable() &&
-      view_->GetIsRollbackChecked()) {
+      view_->GetIsRollbackRequested()) {
     view_->SetScreenState(ResetView::State::kRevertPromise);
     DBusThreadManager::Get()->GetUpdateEngineClient()->AddObserver(this);
     VLOG(1) << "Starting Rollback";
@@ -372,37 +369,37 @@ void ResetScreen::OnRestart() {
 void ResetScreen::OnToggleRollback() {
   // Hide Rollback if visible.
   if (view_ && view_->GetIsRollbackAvailable() &&
-      view_->GetIsRollbackChecked()) {
+      view_->GetIsRollbackRequested()) {
     VLOG(1) << "Hiding rollback view on reset screen";
-    view_->SetIsRollbackChecked(false);
+    view_->SetIsRollbackRequested(false);
     return;
   }
 
   // Show Rollback if available.
   VLOG(1) << "Requested rollback availability"
           << view_->GetIsRollbackAvailable();
-  if (view_->GetIsRollbackAvailable() && !view_->GetIsRollbackChecked()) {
+  if (view_->GetIsRollbackAvailable() && !view_->GetIsRollbackRequested()) {
     UMA_HISTOGRAM_ENUMERATION(
         "Reset.ChromeOS.PowerwashDialogShown",
         reset::DIALOG_SHORTCUT_OFFERING_ROLLBACK_AVAILABLE,
         reset::DIALOG_VIEW_TYPE_SIZE);
-    view_->SetIsRollbackChecked(true);
+    view_->SetIsRollbackRequested(true);
   }
 }
 
 void ResetScreen::OnShowConfirm() {
   reset::DialogViewType dialog_type =
-      view_->GetIsRollbackChecked()
+      view_->GetIsRollbackRequested()
           ? reset::DIALOG_SHORTCUT_CONFIRMING_POWERWASH_AND_ROLLBACK
           : reset::DIALOG_SHORTCUT_CONFIRMING_POWERWASH_ONLY;
   UMA_HISTOGRAM_ENUMERATION("Reset.ChromeOS.PowerwashDialogShown", dialog_type,
                             reset::DIALOG_VIEW_TYPE_SIZE);
 
-  view_->SetIsConfirmational(true);
+  view_->SetShouldShowConfirmationDialog(true);
 }
 
 void ResetScreen::OnConfirmationDismissed() {
-  view_->SetIsConfirmational(false);
+  view_->SetConfirmationDialogClosed();
 }
 
 void ResetScreen::ShowHelpArticle(HelpAppLauncher::HelpTopic topic) {

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

@@ -131,6 +131,17 @@ std::unique_ptr<TestConditionWaiter> JSChecker::CreateWaiter(
   return std::make_unique<TestPredicateWaiter>(predicate);
 }
 
+std::unique_ptr<TestConditionWaiter> JSChecker::CreateAttributePresenceWaiter(
+    const std::string& attribute,
+    bool presence,
+    std::initializer_list<base::StringPiece> element_ids) {
+  std::string condition = ElementHasAttributeCondition(attribute, element_ids);
+  if (!presence) {
+    condition = "!(" + condition + ")";
+  }
+  return CreateWaiter(condition);
+}
+
 std::unique_ptr<TestConditionWaiter> JSChecker::CreateVisibilityWaiter(
     bool visibility,
     std::initializer_list<base::StringPiece> element_ids) {

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

@@ -61,6 +61,15 @@ class JSChecker {
   WARN_UNUSED_RESULT std::unique_ptr<TestConditionWaiter> CreateWaiter(
       const std::string& js_condition);
 
+  // Waiter that waits until the given attribute is (not) present.
+  // WARNING! This does not cover the case where ATTRIBUTE=false.
+  // Should only be used for boolean attributes.
+  WARN_UNUSED_RESULT std::unique_ptr<TestConditionWaiter>
+  CreateAttributePresenceWaiter(
+      const std::string& attribute,
+      bool presence,
+      std::initializer_list<base::StringPiece> element_ids);
+
   // Waiter that waits until specified element is (not) hidden.
   WARN_UNUSED_RESULT std::unique_ptr<TestConditionWaiter>
   CreateVisibilityWaiter(bool visibility,

chrome/browser/resources/chromeos/login/BUILD.gn

@@ -35,11 +35,11 @@ js_type_check("closure_compile") {
     ":oobe_dialog",
     ":oobe_enable_kiosk",
     ":oobe_eula",
+    ":oobe_help_dialog",
     ":oobe_i18n_behavior",
     ":oobe_i18n_dropdown",
     ":oobe_network",
     ":oobe_reset",
-    ":oobe_reset_confirmation_overlay",
     ":oobe_select",
     ":oobe_supervision_transition",
     ":oobe_update",
@@ -252,6 +252,10 @@ js_library("oobe_eula") {
   ]
 }
 
+js_library("oobe_help_dialog") {
+  deps = [ ":oobe_i18n_behavior" ]
+}
+
 js_library("oobe_i18n_dropdown") {
   deps = [ ":oobe_types" ]
 }
@@ -263,10 +267,6 @@ js_library("oobe_network") {
   ]
 }
 
-js_library("oobe_reset_confirmation_overlay") {
-  deps = [ ":oobe_i18n_behavior" ]
-}
-
 js_library("oobe_reset") {
   deps = [
     ":oobe_dialog_host_behavior",

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

@@ -25,7 +25,6 @@
 <include src="oobe_network_icons.html">
 <include src="oobe_enable_kiosk.html">
 <include src="oobe_reset.html">
-<include src="oobe_reset_confirmation_overlay.html">
 <include src="oobe_supervision_transition.html">
 <include src="oobe_terms_of_service.html">
 <include src="encryption_migration.html">

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

@@ -34,7 +34,6 @@
 // <include src="arc_terms_of_service.js">
 // <include src="oobe_enable_kiosk.js">
 // <include src="oobe_reset.js">
-// <include src="oobe_reset_confirmation_overlay.js">
 // <include src="encryption_migration.js">
 // <include src="oobe_supervision_transition.js">
 // <include src="sync_consent.js">

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

@@ -24,7 +24,6 @@
 <include src="oobe_enable_kiosk.html">
 <include src="oobe_hid_detection.html">
 <include src="oobe_reset.html">
-<include src="oobe_reset_confirmation_overlay.html">
 <include src="oobe_terms_of_service.html">
 <include src="oobe_update.html">
 <include src="oobe_i18n_dropdown.html">

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

@@ -37,7 +37,6 @@
 // <include src="oobe_terms_of_service.js">
 // <include src="oobe_hid_detection.js">
 // <include src="oobe_reset.js">
-// <include src="oobe_reset_confirmation_overlay.js">
 // <include src="oobe_update.js">
 // <include src="oobe_i18n_dropdown.js">
 // <include src="oobe_welcome_dialog.js">

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

@@ -49,7 +49,6 @@
 <script src="chrome://oobe/strings.js"></script>
 <link rel="stylesheet" href="api_keys_notice.css">
 <link rel="stylesheet" href="oobe_screen_enable_debugging.css">
-<link rel="stylesheet" href="oobe_screen_reset.css">
 <link rel="stylesheet" href="oobe_screen_autolaunch.css">
 <link rel="stylesheet" href="oobe_screen_auto_enrollment_check.css">
 <link rel="stylesheet" href="oobe_screen_supervision_transition.css">

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

@@ -19,7 +19,6 @@
 // <include
 // src="../../../../../ui/login/account_picker/chromeos_user_pod_row.js">
 // <include src="cr_ui.js">
-// <include src="oobe_screen_reset.js">
 // <include src="oobe_screen_autolaunch.js">
 // <include src="oobe_screen_supervision_transition.js">
 // <include src="oobe_screen_assistant_optin_flow.js">
@@ -69,7 +68,6 @@ cr.define('cr.ui.Oobe', function() {
       cr.ui.login.DisplayManager.initialize();
       login.WrongHWIDScreen.register();
       login.AccountPickerScreen.register();
-      login.ResetScreen.register();
       login.AutolaunchScreen.register();
       login.ErrorMessageScreen.register();
       login.TPMErrorMessageScreen.register();

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

-<include src="oobe_screen_reset.html">
+<oobe-reset id="reset" class="step" hidden></oobe-reset>
 <include src="oobe_screen_autolaunch.html">
 <oobe-adb-sideloading-screen id="adb-sideloading" class="step hidden">
 </oobe-adb-sideloading-screen>

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

@@ -15,4 +15,3 @@
 <div id="bubble" class="bubble faded" hidden></div>
 <include src="md_top_header_bar.html">
 <include src="../../../../../ui/login/account_picker/chromeos_user_pod_template.html">
-<include src="oobe_screen_reset_confirmation_overlay.html">

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

@@ -54,7 +54,6 @@
 <link rel="stylesheet" href="api_keys_notice.css">
 
 <link rel="stylesheet" href="oobe_screen_enable_debugging.css">
-<link rel="stylesheet" href="oobe_screen_reset.css">
 <link rel="stylesheet" href="oobe_screen_autolaunch.css">
 <link rel="stylesheet" href="oobe_screen_auto_enrollment_check.css">
 <link rel="stylesheet" href="oobe_screen_supervision_transition.css">

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

@@ -20,7 +20,6 @@
 // <include
 // src="../../../../../ui/login/account_picker/chromeos_user_pod_row.js">
 // <include src="cr_ui.js">
-// <include src="oobe_screen_reset.js">
 // <include src="oobe_screen_autolaunch.js">
 // <include src="oobe_screen_supervision_transition.js">
 // <include src="oobe_screen_assistant_optin_flow.js">
@@ -74,7 +73,6 @@ cr.define('cr.ui.Oobe', function() {
       login.UpdateScreen.register();
       login.AutoEnrollmentCheckScreen.register();
       login.EnableDebuggingScreen.register();
-      login.ResetScreen.register();
       login.AutolaunchScreen.register();
       login.AccountPickerScreen.register();
       login.OAuthEnrollmentScreen.register();

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

@@ -3,7 +3,7 @@
  * found in the LICENSE file. */
 
 
-#help-dialog {
+#helpDialog {
   border: 0;
   border-radius: 8px;
   box-shadow: 0 1px 3px 0 rgba(var(--google-grey-800-rgb), 0.3),
@@ -14,8 +14,7 @@
   width: 512px;
 }
 
-#help-dialog-title ::slotted(h1),
-#help-dialog-title .fallback {
+#helpDialogTitle {
   color: var(--oobe-header-text-color);
   @apply --oobe-help-dialog-header-font;
   margin: 0;
@@ -23,13 +22,13 @@
   user-select: none;
 }
 
-#content-container {
+#contentContainer {
   color: var(--oobe-text-color);
   @apply --oobe-default-font;
   padding-bottom: 20px;
 }
 
-#button-container {
+#buttonContainer {
   display: flex;
   justify-content: flex-end;
   min-height: 0;

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

@@ -18,30 +18,34 @@ The dialog provides two properties that can be set directly from HTML.
 
   Alternatively, one can set their own title and content into the 'title'
   and 'content' slots.
+
+  Buttons are optional and go into the 'buttons' slot. If none are specified,
+  a default button with the text 'Close' will be shown. Users might want to
+  trigger some action on their side by using 'on-close=myMethod'.
 -->
 <dom-module id="oobe-help-dialog">
   <template>
     <link rel="stylesheet" href="oobe_fonts.css">
     <link rel="stylesheet" href="oobe_help_dialog.css">
-    <dialog id="help-dialog" part="dialog" aria-labelledby="help-dialog-title">
+    <dialog id="helpDialog" part="dialog" aria-labelledby="helpDialogTitle">
       <!-- Title -->
-      <div id="help-dialog-title">
-        <slot name="title">
-            <h1 class="fallback">[[i18nDynamic(locale, titleKey)]]</h1>
-        </slot>
+      <div id="helpDialogTitle">
+        <slot name="title">[[i18nDynamic(locale, titleKey)]]</slot>
       </div>
       <!-- Content to be shown -->
-      <div id="content-container"
+      <div id="contentContainer"
           class="flex-grow layout vertical not-resizable">
         <slot name="content">
-            <h1>[[i18nDynamic(locale, contentKey)]]</h1>
+          [[i18nDynamic(locale, contentKey)]]
         </slot>
       </div>
       <!-- Close Button -->
-      <div id="button-container" class="layout horizontal">
-        <oobe-text-button inverse id="closeButton" on-click="hideDialog"
+      <div id="buttonContainer" class="layout horizontal">
+        <slot name="buttons">
+          <oobe-text-button inverse id="closeButton" on-click="hideDialog"
             text-key="oobeModalDialogClose">
-        </oobe-text-button>
+          </oobe-text-button>
+        </slot>
       </div>
     </dialog>
   </template>

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

@@ -26,12 +26,12 @@ Polymer({
 
   /* Shows the help dialog and changes the focus to the close button. */
   showDialog: function() {
-    this.$['help-dialog'].showModal();
+    this.$.helpDialog.showModal();
     this.$.closeButton.focus();
   },
 
   hideDialog: function() {
-    this.$['help-dialog'].close();
+    this.$.helpDialog.close();
   },
 
 });

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

@@ -19,15 +19,13 @@ a {
 }
 
 #tpmFirmwareUpdate {
-  margin-bottom: 20px;
-  margin-inline-start: 20px;
-  margin-top: 23px; /* = 36 - font size */
-  width: 100%;
+  margin-top: 20px;
 }
 
-#tpmFirmwareUpdateCheckbox {
-  margin-top: 2px;
-  size: 16px;
+#illustration {
+  max-height: 80%;
+  max-width: 100%;
+  object-fit: contain;
 }
 
 #tpmFirmwareUpdateContainer {
@@ -35,8 +33,3 @@ a {
   line-height: 20px;
   pointer-events: auto;
 }
-
-#illustration {
-  height: 264px;
-  width: 264px;
-}

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

@@ -6,7 +6,7 @@
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 
-<dom-module id="oobe-reset-md">
+<dom-module id="oobe-reset">
   <template>
     <link rel="stylesheet" href="oobe_dialog_host.css">
     <link rel="stylesheet" href="chrome://resources/css/throbber.css">
@@ -20,28 +20,25 @@
           icon1x="oobe-32:alert" icon2x="oobe-64:alert">
       </hd-iron-icon>
       <div slot="subtitle" class="powerwash-warning">
-        <div hidden="[[!isState_(uiState_, 'powerwash-proposal-view')]]">
-          [[i18nDynamic(locale, 'resetPowerwashWarningDetails')]]
-        </div>
-        <div hidden="[[!isState_(uiState_, 'powerwash-proposal-view')]]">
-          [[i18nDynamic(locale, 'resetWarningDataDetails')]]
-        </div>
-        <div hidden="[[!isState_(uiState_, 'rollback-proposal-view')]]">
-          [[i18nDynamic(locale, 'resetPowerwashRollbackWarningDetails')]]
-        </div>
-        <div hidden="[[!isState_(uiState_, 'rollback-proposal-view')]]">
-          [[i18nDynamic(locale, 'resetWarningDataDetails')]]
-        </div>
-        <div hidden="[[!isState_(uiState_, 'restart-required-view')]]">
+        <!-- Subtitle:  Restart required  -->
+        <div hidden="[[!inRestartRequiredState_]]">
           [[i18nDynamic(locale, 'resetRestartMessage')]]
         </div>
-        <a id="powerwash-help-link-md" href="#"
-            class="oobe-local-link"
-            hidden="[[isHelpLinkHidden_(uiState_, isGoogleBranded_)]]"
-            on-tap="onLearnMoreTap_">
-          [[i18nDynamic(locale, 'learnMore')]]
-        </a>
-        <div hidden="[[!isState_(uiState_, 'revert-promise-view')]]">
+        <!-- Subtitle: Powerwash state (depends on powerwash mode) -->
+        <div hidden="[[!inPowerwashState_]]">
+          <div>[[powerwashStateSubtitle_]]</div>
+          <div>[[i18nDynamic(locale, 'resetWarningDataDetails')]]</div>
+        </div>
+        <!-- Help Link - Hidden when reverting/rolling back. -->
+        <if expr="_google_chrome">
+          <a id="powerwash-help-link-md" href="#"
+              class="oobe-local-link"
+              hidden="[[inRevertState_]]"
+             on-tap="onLearnMoreTap_">[[i18nDynamic(locale, 'learnMore')]]
+          </a>
+        </if>
+        <!-- Spinner - Shown when the revert process is ongoing -->
+        <div hidden="[[!inRevertState_]]">
           <div>
             [[i18nDynamic(locale, 'resetRevertPromise')]]
           </div>
@@ -53,49 +50,62 @@
           </div>
         </div>
       </div>
-      <div slot="footer" class="flex layout vertical center center-justified">
+      <div slot="footer" class="flex layout vertical">
+        <!-- Reset screen illustration -->
         <img id="illustration" srcset="images/1x/reset_illustration_1x.svg 1x,
                                        images/2x/reset_illustration_2x.svg 2x"
-            i18n-values="alt:resetScreenIllustrationTitle"
-            class="oobe-illustration">
+            i18n-values="alt:resetScreenIllustrationTitle">
+        <!-- TPM Update - Only shown during powerwash state -->
         <div id="tpmFirmwareUpdate" class="layout horizontal"
-            hidden="[[!tpmFirmwareUpdateAvailable_]]">
+            hidden="[[!inPowerwashState_]]">
           <cr-checkbox id="tpmFirmwareUpdateCheckbox"
-              checked="{{tpmFirmwareUpdateChecked_}}"
-              disabled="[[!tpmFirmwareUpdateEditable_]]"
+              checked="{{tpmUpdateChecked_}}"
+              disabled="[[!tpmUpdateEditable_]]"
+              hidden="[[!tpmUpdateAvailable_]]"
               on-change="onTPMFirmwareUpdateChanged_">
-              <div id="tpmFirmwareUpdateContainer">
-                <span>
-                  [[i18nDynamic(locale, 'resetTPMFirmwareUpdate')]]
-                </span>
+            <div id="tpmFirmwareUpdateContainer">
+              <span>
+                [[i18nDynamic(locale, 'resetTPMFirmwareUpdate')]]
+              </span>
+              <if expr="_google_chrome">
                 <a href="#"
-                    hidden="[[isHelpLinkHidden_(uiState_, isGoogleBranded_)]]"
-					          class="oobe-local-link"
-                    on-tap="onTPMFirmwareUpdateLearnMore_">
-                  [[i18nDynamic(locale, 'learnMore')]]
-                </a>
-              </div>
+                    class="oobe-local-link"
+                    on-tap="onTPMFirmwareUpdateLearnMore_"
+                    >[[i18nDynamic(locale, 'learnMore')]]</a>
+              </if>
+            </div>
           </cr-checkbox>
         </div>
       </div>
       <div slot="bottom-buttons" class="flex layout horizontal">
         <div class="flex"></div>
+        <!-- Cancel button, only disabled when reverting -->
         <oobe-text-button border on-tap="onCancelTap_" text-key="cancelButton"
-            hidden="[[isCancelHidden_(uiState_)]]"></oobe-text-button>
+            disabled="[[inRevertState_]]"></oobe-text-button>
+        <!-- Restart button -->
         <oobe-text-button inverse on-tap="onRestartTap_" class="focus-on-show"
             text-key="resetButtonRestart"
-            hidden="[[!isState_(uiState_, 'restart-required-view')]]">
-        </oobe-text-button>
-        <oobe-text-button inverse on-tap="onPowerwashTap_" class="focus-on-show"
-            text-key="resetButtonPowerwashAndRollback"
-            hidden="[[!isState_(uiState_, 'rollback-proposal-view')]]"
-            disabled="[[tpmFirmwareUpdateChecked_]]">
+            hidden="[[!inRestartRequiredState_]]">
         </oobe-text-button>
+        <!-- Powerwash button (depends on powerwash mode) -->
         <oobe-text-button inverse on-tap="onPowerwashTap_" class="focus-on-show"
-            text-key="resetButtonPowerwash"
-            hidden="[[!isState_(uiState_, 'powerwash-proposal-view')]]">
+            hidden="[[!inPowerwashState_]]"
+            text-key="[[powerwashButtonTextKey_]]"
+            disabled="[[powerwashButtonDisabled_]]">
         </oobe-text-button>
       </div>
     </oobe-dialog>
+
+    <!-- Powerwash confirmation dialog (depends on powerwash mode) -->
+    <oobe-help-dialog id="confirmationDialog" on-close="onDialogClosed_">
+      <div slot="title">[[confirmationDialogTitle_]]</div>
+      <div slot="content">[[confirmationDialogText_]]</div>
+      <div slot="buttons">
+        <oobe-text-button id="cancelButton" border on-tap="onDialogCancelTap_"
+            text-key="cancel"></oobe-text-button>
+        <oobe-text-button inverse on-tap="onDialogContinueTap_"
+            text-key="confirmResetButton"></oobe-text-button>
+      </div>
+    </oobe-help-dialog>
   </template>
 </dom-module>

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

-/* Copyright 2017 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. */
-
-.reset-popup {
-  background: white;
-  border-radius: 2px;
-  border-width: 0;
-  box-shadow: 0 0 16px rgba(0, 0, 0, .12), 0 16px 16px rgba(0, 0, 0, .24);
-  min-height: 158px;
-  padding: 0;
-  position: relative;
-  width: 512px;
-  z-index: 10;
-}
-
-.reset-popup h1 {
-  color: var(--google-grey-900);
-  font-family: var(--oobe-button-font-family);
-  font-size: 15px;
-  margin-bottom: 0;
-  margin-top: 0;
-  padding: 16px 20px;
-}
-
-.reset-popup-content-area {
-  @apply --oobe-default-font;
-  color: rgba(0, 0, 0, .54);
-  line-height: 20px;
-  padding: 0 20px 20.5px;
-}
-
-oobe-text-button {
-  color: #5a5a5a;
-  margin-bottom: 16px;
-  margin-inline-end: 16px;
-}
-
-#cancelButton {
-  margin-inline-end: 4px;
-}

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

-<!-- Copyright 2017 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. -->
-
-<dom-module id="reset-confirm-overlay-md">
-  <template>
-    <link rel="stylesheet" href="oobe_flex_layout.css">
-    <link rel="stylesheet" href="oobe_reset_confirmation_overlay.css">
-    <dialog id="dialog" class="reset-popup not-resizable">
-        <h1 hidden="[[!isPowerwashView_]]">
-          [[i18nDynamic(locale, 'confirmPowerwashTitle')]]
-        </h1>
-        <h1 hidden="[[isPowerwashView_]]">
-          [[i18nDynamic(locale, 'confirmRollbackTitle')]]
-        </h1>
-      <div class="reset-popup-content-area">
-        <div hidden="[[!isPowerwashView_]]">
-          [[i18nDynamic(locale, 'confirmPowerwashMessage')]]
-        </div>
-        <div hidden="[[isPowerwashView_]]">
-          [[i18nDynamic(locale, 'confirmRollbackMessage')]]
-        </div>
-      </div>
-      <div slot="bottom-buttons" class="flex layout horizontal">
-        <div class="flex"></div>
-        <oobe-text-button id="cancelButton" border on-tap="onCancelTap_"
-            text-key="cancel"></oobe-text-button>
-        <oobe-text-button inverse on-tap="onContinueTap_"
-            text-key="confirmResetButton"></oobe-text-button>
-      </div>
-    </dialog>
-  </template>
-</dom-module>

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

-// Copyright 2017 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 reset
- * confirmation overlay screen.
- */
-
-Polymer({
-  is: 'reset-confirm-overlay-md',
-
-  behaviors: [OobeI18nBehavior],
-
-  properties: {
-    isPowerwashView_: Boolean,
-  },
-
-  open() {
-    if (!this.$.dialog.open)
-      this.$.dialog.showModal();
-  },
-
-  close() {
-    if (this.$.dialog.open)
-      this.$.dialog.close();
-  },
-
-  /**
-   * On-tap event handler for continue button.
-   */
-  onContinueTap_() {
-    this.close();
-    chrome.send('login.ResetScreen.userActed', ['powerwash-pressed']);
-  },
-
-  /**
-   * On-tap event handler for cancel button.
-   */
-  onCancelTap_() {
-    this.close();
-    chrome.send('login.ResetScreen.userActed', ['reset-confirm-dismissed']);
-  },
-});

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

-/* Copyright 2013 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. */
-
-#reset {
-  display: flex;
-  font-size: 16px;
-  min-height: 0;
-  text-align: start;
-}

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

-<div class="step faded hidden" id="reset" role="group"
-    i18n-values="aria-label:resetScreenAccessibleTitle" hidden>
-  <oobe-reset-md id="oobe-reset-md"></oobe-reset-md>
-</div>

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';
-  var USER_ACTION_RESET_CONFIRM_DISMISSED = 'reset-confirm-dismissed';
-
-  /* Possible UI states of the reset screen. */
-  const RESET_SCREEN_UI_STATE = {
-    REVERT_PROMISE: 'ui-state-revert-promise',
-    RESTART_REQUIRED: 'ui-state-restart-required',
-    POWERWASH_PROPOSAL: 'ui-state-powerwash-proposal',
-    ROLLBACK_PROPOSAL: 'ui-state-rollback-proposal',
-    ERROR: 'ui-state-error',
-  };
-
-  const RESET_SCREEN_STATE = {
-    RESTART_REQUIRED: 0,
-    REVERT_PROMISE: 1,
-    POWERWASH_PROPOSAL: 2,  // supports 2 ui-states
-    ERROR: 3,
-  };
-
-  return {
-    EXTERNAL_API: [
-      'setIsRollbackAvailable',
-      'setIsRollbackChecked',
-      'setIsTpmFirmwareUpdateAvailable',
-      'setIsTpmFirmwareUpdateChecked',
-      'setIsTpmFirmwareUpdateEditable',
-      'setTpmFirmwareUpdateMode',
-      'setIsConfirmational',
-      'setIsGoogleBrandedBuild',
-      'setScreenState',
-    ],
-
-    /** @type {boolean} */
-    isRollbackAvailable_: false,
-    /** @type {boolean} */
-    isRollbackChecked_: false,
-    /** @type {boolean} */
-    isTpmFirmwareUpdateAvailable_: false,
-    /** @type {boolean} */
-    isTpmFirmwareUpdateChecked_: false,
-    /** @type {boolean} */
-    isTpmFirmwareUpdateEditable_: false,
-    /** @type {RESET_SCREEN_UI_STATE} */
-    tpmFirmwareUpdateMode_: RESET_SCREEN_UI_STATE.REVERT_PROMISE,
-    /** @type {boolean} */
-    isConfirmational_: false,
-    /** @type {RESET_SCREEN_STATE} */
-    screenState_: RESET_SCREEN_STATE.RESTART_REQUIRED,
-
-    setIsRollbackAvailable(rollbackAvailable) {
-      this.isRollbackAvailable_ = rollbackAvailable;
-      this.setRollbackOptionView();
-    },
-
-    setIsRollbackChecked(rollbackChecked) {
-      this.isRollbackChecked_ = rollbackChecked;
-      this.setRollbackOptionView();
-    },
-
-    setIsTpmFirmwareUpdateAvailable(value) {
-      this.isTpmFirmwareUpdateAvailable_ = value;
-      this.setTPMFirmwareUpdateView_();
-    },
-
-    setIsTpmFirmwareUpdateChecked(value) {
-      this.isTpmFirmwareUpdateChecked_ = value;
-      this.setTPMFirmwareUpdateView_();
-    },
-
-    setIsTpmFirmwareUpdateEditable(value) {
-      this.isTpmFirmwareUpdateEditable_ = value;
-      this.setTPMFirmwareUpdateView_();
-    },
-
-    setTpmFirmwareUpdateMode(value) {
-      this.tpmFirmwareUpdateMode_ = value;
-    },
-
-    setIsConfirmational(isConfirmational) {
-      this.isConfirmational_ = isConfirmational;
-      if (isConfirmational) {
-        if (this.screenState_ != RESET_SCREEN_STATE.POWERWASH_PROPOSAL)
-          return;
-        $('overlay-reset').removeAttribute('hidden');
-        $('reset-confirm-overlay-md').open();
-      } else {
-        $('overlay-reset').setAttribute('hidden', true);
-        $('reset-confirm-overlay-md').close();
-      }
-    },
-
-    setIsGoogleBrandedBuild(isGoogleBranded) {
-      $('oobe-reset-md').isGoogleBranded_ = isGoogleBranded;
-    },
-
-    setScreenState(state) {
-      this.screenState_ = state;
-
-      if (state == RESET_SCREEN_STATE.RESTART_REQUIRED)
-        this.ui_state = RESET_SCREEN_UI_STATE.RESTART_REQUIRED;
-      if (state == RESET_SCREEN_STATE.REVERT_PROMISE)
-        this.ui_state = RESET_SCREEN_UI_STATE.REVERT_PROMISE;
-      else if (state == RESET_SCREEN_STATE.POWERWASH_PROPOSAL)
-        this.ui_state = RESET_SCREEN_UI_STATE.POWERWASH_PROPOSAL;
-      this.setDialogView_();
-      if (state == RESET_SCREEN_STATE.REVERT_PROMISE) {
-        announceAccessibleMessage(
-            loadTimeData.getString('resetRevertSpinnerMessage'));
-      }
-      this.setTPMFirmwareUpdateView_();
-    },
-
-    /** @override */
-    decorate() {
-      $('oobe-reset-md').screen = this;
-    },
-
-    /**
-     * Returns a control which should receive an initial focus.
-     */
-    get defaultControl() {
-      return $('oobe-reset-md');
-    },
-
-    /**
-     * Cancels the reset and drops the user back to the login screen.
-     */
-    cancel() {
-      if (this.isConfirmational_) {
-        $('reset').send(
-            login.Screen.CALLBACK_USER_ACTED,
-            USER_ACTION_RESET_CONFIRM_DISMISSED);
-        return;
-      }
-      this.send(login.Screen.CALLBACK_USER_ACTED, USER_ACTION_CANCEL_RESET);
-    },
-
-    /**
-     * Event handler that is invoked just before the screen in shown.
-     * @param {Object} data Screen init payload.
-     */
-    onBeforeShow(data) {},
-
-    /** Event handler that is invoked after the screen is shown. */
-    onAfterShow() {
-      Oobe.resetSigninUI(false);
-    },
-
-    /**
-     * Sets css style for corresponding state of the screen.
-     * @private
-     */
-    setDialogView_(state) {
-      state = this.ui_state;
-      this.classList.toggle(
-          'revert-promise-view', state == RESET_SCREEN_UI_STATE.REVERT_PROMISE);
-      this.classList.toggle(
-          'restart-required-view',
-          state == RESET_SCREEN_UI_STATE.RESTART_REQUIRED);
-      this.classList.toggle(
-          'powerwash-proposal-view',
-          state == RESET_SCREEN_UI_STATE.POWERWASH_PROPOSAL);
-      this.classList.toggle(
-          'rollback-proposal-view',
-          state == RESET_SCREEN_UI_STATE.ROLLBACK_PROPOSAL);
-      var resetMd = $('oobe-reset-md');
-      var resetOverlayMd = $('reset-confirm-overlay-md');
-      if (state == RESET_SCREEN_UI_STATE.RESTART_REQUIRED) {
-        resetMd.uiState_ = 'restart-required-view';
-      }
-      if (state == RESET_SCREEN_UI_STATE.POWERWASH_PROPOSAL) {
-        resetMd.uiState_ = 'powerwash-proposal-view';
-        resetOverlayMd.isPowerwashView_ = true;
-      }
-      if (state == RESET_SCREEN_UI_STATE.ROLLBACK_PROPOSAL) {
-        resetMd.uiState_ = 'rollback-proposal-view';
-        resetOverlayMd.isPowerwashView_ = false;
-      }
-      if (state == RESET_SCREEN_UI_STATE.REVERT_PROMISE) {
-        resetMd.uiState_ = 'revert-promise-view';
-      }
-    },
-
-    setRollbackOptionView() {
-      if (this.isConfirmational_)
-        return;
-      if (this.screenState_ != RESET_SCREEN_STATE.POWERWASH_PROPOSAL)
-        return;
-
-      if (this.isRollbackAvailable_ && this.isRollbackChecked_) {
-        this.ui_state = RESET_SCREEN_UI_STATE.ROLLBACK_PROPOSAL;
-      } else {
-        this.ui_state = RESET_SCREEN_UI_STATE.POWERWASH_PROPOSAL;
-      }
-      this.setDialogView_();
-      this.setTPMFirmwareUpdateView_();
-    },
-
-    setTPMFirmwareUpdateView_() {
-      $('oobe-reset-md').tpmFirmwareUpdateAvailable_ =
-          this.ui_state == RESET_SCREEN_UI_STATE.POWERWASH_PROPOSAL &&
-          this.isTpmFirmwareUpdateAvailable_;
-      $('oobe-reset-md').tpmFirmwareUpdateChecked_ =
-          this.isTpmFirmwareUpdateChecked_;
-      $('oobe-reset-md').tpmFirmwareUpdateEditable_ =
-          this.isTpmFirmwareUpdateEditable_;
-    },
-
-    onTPMFirmwareUpdateChanged_(value) {
-      chrome.send('ResetScreen.setTpmFirmwareUpdateChecked', [value]);
-    },
-
-    /**
-     * Updates localized content of the screen that is not updated via template.
-     */
-    updateLocalizedContent() {
-      $('oobe-reset-md').i18nUpdateLocale();
-      $('reset-confirm-overlay-md').i18nUpdateLocale();
-    },
-  };
-});

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

-<div id="overlay-reset" class="popup-overlay" hidden>
-  <reset-confirm-overlay-md id="reset-confirm-overlay-md">
-  </reset-confirm-overlay-md>
-</div>

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

@@ -5,7 +5,8 @@
 <oobe-adb-sideloading-screen id="adb-sideloading" class="step hidden">
 </oobe-adb-sideloading-screen>
 <include src="oobe_screen_enable_debugging.html">
-<include src="oobe_screen_reset.html">
+<oobe-reset class="step" id="reset" hidden>
+</oobe-reset>
 <include src="oobe_screen_autolaunch.html">
 <kiosk-enable id="kiosk-enable" class="step hidden">
 </kiosk-enable>

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

@@ -119,9 +119,13 @@ void ResetScreenHandler::SetIsRollbackAvailable(bool value) {
   CallJS("login.ResetScreen.setIsRollbackAvailable", value);
 }
 
-void ResetScreenHandler::SetIsRollbackChecked(bool value) {
-  is_rollback_checked_ = value;
-  CallJS("login.ResetScreen.setIsRollbackChecked", value);
+// Only serve the request if the confirmation dialog isn't being shown.
+void ResetScreenHandler::SetIsRollbackRequested(bool value) {
+  if (is_showing_confirmation_dialog_)
+    return;
+
+  is_rollback_requested_ = value;
+  CallJS("login.ResetScreen.setIsRollbackRequested", value);
 }
 
 void ResetScreenHandler::SetIsTpmFirmwareUpdateAvailable(bool value) {
@@ -143,12 +147,13 @@ void ResetScreenHandler::SetTpmFirmwareUpdateMode(
   CallJS("login.ResetScreen.setTpmFirmwareUpdateMode", static_cast<int>(value));
 }
 
-void ResetScreenHandler::SetIsConfirmational(bool value) {
-  CallJS("login.ResetScreen.setIsConfirmational", value);
+void ResetScreenHandler::SetShouldShowConfirmationDialog(bool value) {
+  is_showing_confirmation_dialog_ = value;
+  CallJS("login.ResetScreen.setShouldShowConfirmationDialog", value);
 }
 
-void ResetScreenHandler::SetIsGoogleBrandedBuild(bool value) {
-  CallJS("login.ResetScreen.setIsGoogleBrandedBuild", value);
+void ResetScreenHandler::SetConfirmationDialogClosed() {
+  is_showing_confirmation_dialog_ = false;
 }
 
 void ResetScreenHandler::SetScreenState(State value) {
@@ -168,8 +173,8 @@ bool ResetScreenHandler::GetIsRollbackAvailable() {
   return is_rollback_available_;
 }
 
-bool ResetScreenHandler::GetIsRollbackChecked() {
-  return is_rollback_checked_;
+bool ResetScreenHandler::GetIsRollbackRequested() {
+  return is_rollback_requested_;
 }
 
 bool ResetScreenHandler::GetIsTpmFirmwareUpdateChecked() {

chrome/browser/ui/webui/chromeos/login/reset_screen_handler.h

@@ -36,19 +36,19 @@ class ResetView {
   };
 
   virtual void SetIsRollbackAvailable(bool value) = 0;
-  virtual void SetIsRollbackChecked(bool value) = 0;
+  virtual void SetIsRollbackRequested(bool value) = 0;
   virtual void SetIsTpmFirmwareUpdateAvailable(bool value) = 0;
   virtual void SetIsTpmFirmwareUpdateChecked(bool value) = 0;
   virtual void SetIsTpmFirmwareUpdateEditable(bool value) = 0;
   virtual void SetTpmFirmwareUpdateMode(tpm_firmware_update::Mode value) = 0;
-  virtual void SetIsConfirmational(bool value) = 0;
-  virtual void SetIsGoogleBrandedBuild(bool value) = 0;
+  virtual void SetShouldShowConfirmationDialog(bool value) = 0;
+  virtual void SetConfirmationDialogClosed() = 0;
   virtual void SetScreenState(State value) = 0;
 
   virtual State GetScreenState() = 0;
   virtual tpm_firmware_update::Mode GetTpmFirmwareUpdateMode() = 0;
   virtual bool GetIsRollbackAvailable() = 0;
-  virtual bool GetIsRollbackChecked() = 0;
+  virtual bool GetIsRollbackRequested() = 0;
   virtual bool GetIsTpmFirmwareUpdateChecked() = 0;
 };
 
@@ -73,18 +73,18 @@ class ResetScreenHandler : public ResetView,
   void DeclareJSCallbacks() override;
   void Initialize() override;
   void SetIsRollbackAvailable(bool value) override;
-  void SetIsRollbackChecked(bool value) override;
+  void SetIsRollbackRequested(bool value) override;
   void SetIsTpmFirmwareUpdateAvailable(bool value) override;
   void SetIsTpmFirmwareUpdateChecked(bool value) override;
   void SetIsTpmFirmwareUpdateEditable(bool value) override;
   void SetTpmFirmwareUpdateMode(tpm_firmware_update::Mode value) override;
-  void SetIsConfirmational(bool value) override;
-  void SetIsGoogleBrandedBuild(bool value) override;
+  void SetShouldShowConfirmationDialog(bool value) override;
+  void SetConfirmationDialogClosed() override;
   void SetScreenState(State value) override;
   State GetScreenState() override;
   tpm_firmware_update::Mode GetTpmFirmwareUpdateMode() override;
   bool GetIsRollbackAvailable() override;
-  bool GetIsRollbackChecked() override;
+  bool GetIsRollbackRequested() override;
   bool GetIsTpmFirmwareUpdateChecked() override;
 
  private:
@@ -98,8 +98,9 @@ class ResetScreenHandler : public ResetView,
   ResetView::State state_ = ResetView::State::kRestartRequired;
   tpm_firmware_update::Mode mode_ = tpm_firmware_update::Mode::kNone;
   bool is_rollback_available_ = false;
-  bool is_rollback_checked_ = false;
+  bool is_rollback_requested_ = false;
   bool is_tpm_firmware_update_checked_ = false;
+  bool is_showing_confirmation_dialog_ = false;
 
   DISALLOW_COPY_AND_ASSIGN(ResetScreenHandler);
 };

ui/login/display_manager.js

@@ -418,8 +418,7 @@ cr.define('cr.ui.login', function() {
           $('version-labels').hidden = !$('version-labels').hidden;
       } else if (name == ACCELERATOR_RESET) {
         if (currentStepId == SCREEN_OOBE_RESET) {
-          $('reset').send(
-              login.Screen.CALLBACK_USER_ACTED, USER_ACTION_ROLLBACK_TOGGLED);
+          $('reset').userActed(USER_ACTION_ROLLBACK_TOGGLED);
         } else if (attributes.resetAllowed ||
             RESET_AVAILABLE_SCREEN_GROUP.indexOf(currentStepId) != -1) {
           chrome.send('toggleResetScreen');