OOBE: Migrate ToS screen to MultiStepBehavior

Bug: 1156668
Change-Id: I5ab27202a535c829304291ac53dc9545eeb292da
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2588909
Commit-Queue: Ossama Mahmoud <osamafathy@google.com>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837120}

chrome/browser/chromeos/policy/device_local_account_browsertest.cc

@@ -2082,9 +2082,7 @@ IN_PROC_BROWSER_TEST_F(DeviceLocalAccountTest, TermsOfServiceWithLocaleSwitch) {
 
   // Wait for the Terms of Service to finish downloading.
   chromeos::test::OobeJS()
-      .CreateWaiter(GetOobeElementPath({"terms-of-service"}) + ".uiState == " +
-                    base::NumberToString(static_cast<int>(
-                        chromeos::TermsOfServiceScreen::ScreenState::LOADED)))
+      .CreateWaiter(GetOobeElementPath({"terms-of-service"}) + ".isLoaded_()")
       ->Wait();
 
   // Verify that the locale and keyboard layout have been applied.
@@ -2669,9 +2667,7 @@ IN_PROC_BROWSER_TEST_P(TermsOfServiceDownloadTest, TermsOfServiceScreen) {
         ->Wait();
 
     chromeos::test::OobeJS().ExpectTrue(
-        GetOobeElementPath({"terms-of-service"}) + ".uiState == " +
-        base::NumberToString(static_cast<int>(
-            chromeos::TermsOfServiceScreen::ScreenState::ERROR)));
+        GetOobeElementPath({"terms-of-service"}) + ".hasError_()");
 
     chromeos::test::OobeJS().ExpectDisabledPath(
         {"terms-of-service", "acceptButton"});
@@ -2679,9 +2675,7 @@ IN_PROC_BROWSER_TEST_P(TermsOfServiceDownloadTest, TermsOfServiceScreen) {
   }
 
   chromeos::test::OobeJS()
-      .CreateWaiter(GetOobeElementPath({"terms-of-service"}) + ".uiState == " +
-                    base::NumberToString(static_cast<int>(
-                        chromeos::TermsOfServiceScreen::ScreenState::LOADED)))
+      .CreateWaiter(GetOobeElementPath({"terms-of-service"}) + ".isLoaded_()")
       ->Wait();
 
   chromeos::test::OobeJS()
@@ -2720,9 +2714,7 @@ IN_PROC_BROWSER_TEST_P(TermsOfServiceDownloadTest, TermsOfServiceScreen) {
   EXPECT_EQ(terms_of_service, content);
 
   chromeos::test::OobeJS().ExpectFalse(
-      GetOobeElementPath({"terms-of-service"}) + ".uiState == " +
-      base::NumberToString(static_cast<int>(
-          chromeos::TermsOfServiceScreen::ScreenState::ERROR)));
+      GetOobeElementPath({"terms-of-service"}) + ".hasError_()");
 
   chromeos::test::OobeJS().ExpectEnabledPath(
       {"terms-of-service", "acceptButton"});

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

@@ -25,7 +25,7 @@
         title-key="termsOfServiceError"
         subtitle-key="termsOfServiceTryAgain"
         aria-label$="[[i18nDynamic(locale, 'termsOfServiceError')]]"
-        hidden="[[!isInErrorState_(uiState)]]" has-buttons>
+        for-step="error" has-buttons>
       <iron-icon icon="cr:warning" slot="oobe-icon" class="warning">
       </iron-icon>
       <div slot="back-navigation">
@@ -46,7 +46,7 @@
          dialog is marked as no-lazy. -->
     <oobe-dialog id="termsOfServiceDialog" role="dialog"
         aria-labelledby="title"
-        hidden="[[isInErrorState_(uiState)]]" has-buttons no-lazy>
+        for-step="loading, loaded" has-buttons no-lazy>
       <hd-iron-icon slot="oobe-icon" id="termsOfServiceGoogleIcon"
           icon1x="oobe-32:googleg" icon2x="oobe-64:googleg">
       </hd-iron-icon>
@@ -62,11 +62,11 @@
                                               tosDomain_)]]</div>
       </div>
       <div slot="footer" class="flex layout center-justified vertical">
-        <div hidden="[[!isLoading_(uiState)]]">
+        <div hidden="[[!isLoading_()]]">
           <throbber-notice text-key="termsOfServiceLoading">
           </throbber-notice>
         </div>
-        <webview id="termsOfServiceFrame" hidden="[[isLoading_(uiState)]]"
+        <webview id="termsOfServiceFrame" hidden="[[isLoading_()]]"
             role="document" allowTransparency
             class="focus-on-show flex oobe-tos-webview">
         </webview>

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

@@ -2,10 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+'use strict';
 
+(function() {
 
 // Enum that describes the current state of the Terms Of Service screen
-var TermsOfServiceScreenState = {LOADING: 0, LOADED: 1, ERROR: 2};
+const UIState = {
+  LOADING: 'loading',
+  LOADED: 'loaded',
+  ERROR: 'error',
+};
 
 /**
  * @fileoverview Polymer element for displaying material design Terms Of Service
@@ -14,7 +20,12 @@ var TermsOfServiceScreenState = {LOADING: 0, LOADED: 1, ERROR: 2};
 Polymer({
   is: 'terms-of-service-element',
 
-  behaviors: [OobeI18nBehavior, OobeDialogHostBehavior, LoginScreenBehavior],
+  behaviors: [
+    OobeI18nBehavior,
+    OobeDialogHostBehavior,
+    LoginScreenBehavior,
+    MultiStepBehavior,
+  ],
 
   properties: {
 
@@ -29,24 +40,28 @@ Polymer({
 
     // The domain that the terms of service belongs to.
     tosDomain_: {type: String, value: ''},
+  },
+
 
-    // The current state of the screen.
-    uiState: {type: Number, value: 0 /* TermsOfServiceScreenState.LOADING */},
+  defaultUIStep() {
+    return UIState.LOADING;
   },
 
+  UI_STEPS: UIState,
+
   // Whether the screen is still loading.
-  isLoading_(state) {
-    return state == TermsOfServiceScreenState.LOADING;
+  isLoading_() {
+    return this.uiStep == UIState.LOADING;
   },
 
   // Whether the screen has finished loading.
-  isLoaded_(state) {
-    return state == TermsOfServiceScreenState.LOADED;
+  isLoaded_() {
+    return this.uiStep == UIState.LOADED;
   },
 
   // Whether the screen is in an error state.
-  isInErrorState_(state) {
-    return state == TermsOfServiceScreenState.ERROR;
+  hasError_() {
+    return this.uiStep == UIState.ERROR;
   },
 
   EXTERNAL_API: [
@@ -139,7 +154,7 @@ Polymer({
   setTermsOfServiceLoadError() {
     // Disable the accept button, hide the iframe, show warning icon and retry
     // button.
-    this.uiState = TermsOfServiceScreenState.ERROR;
+    this.setUIStep(UIState.ERROR);
 
     this.acceptButtonDisabled_ = true;
     this.backButtonDisabled_ = false;
@@ -178,7 +193,7 @@ Polymer({
 
     // Mark the loading as complete.
     this.acceptButtonDisabled_ = false;
-    this.uiState = TermsOfServiceScreenState.LOADED;
+    this.setUIStep(UIState.LOADED);
   },
-
 });
+})();