Oobe: refactor DemoSetupScreen to use LoginScreenBehavior

Bug: 1131942
Change-Id: Ib7b448093e0d456f4be9822a8b6fabffa1d01f7d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2428971Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Commit-Queue: Yunke Zhou <yunkez@google.com>
Cr-Commit-Position: refs/heads/master@{#811596}

chrome/browser/chromeos/login/demo_mode/demo_setup_browsertest.cc

@@ -129,7 +129,7 @@ std::string ScreenToContentQuery(OobeScreenId screen) {
   if (screen == ArcTermsOfServiceScreenView::kScreenId)
     return "$('arc-tos-root')";
   if (screen == DemoSetupScreenView::kScreenId)
-    return "$('demo-setup-content')";
+    return "$('demo-setup')";
   NOTREACHED() << "This OOBE screen is not a part of Demo Mode setup flow";
   return std::string();
 }
@@ -1238,7 +1238,7 @@ class DemoSetupProgressStepsTest : public DemoSetupTestBase {
   // Checks how many steps have been rendered in the demo setup screen.
   int CountNumberOfStepsInUi() {
     const std::string query =
-        "$('demo-setup-content').$$('oobe-dialog').querySelectorAll('progress-"
+        "$('demo-setup').$$('oobe-dialog').querySelectorAll('progress-"
         "list-item').length";
 
     return test::OobeJS().GetInt(query);
@@ -1247,7 +1247,7 @@ class DemoSetupProgressStepsTest : public DemoSetupTestBase {
   // Checks how many steps are marked as pending in the demo setup screen.
   int CountPendingStepsInUi() {
     const std::string query =
-        "Object.values($('demo-setup-content').$$('oobe-dialog')."
+        "Object.values($('demo-setup').$$('oobe-dialog')."
         "querySelectorAll('progress-list-item')).filter(node => "
         "node.shadowRoot.querySelector('#icon-pending:not([hidden])')).length";
 
@@ -1257,7 +1257,7 @@ class DemoSetupProgressStepsTest : public DemoSetupTestBase {
   // Checks how many steps are marked as active in the demo setup screen.
   int CountActiveStepsInUi() {
     const std::string query =
-        "Object.values($('demo-setup-content').$$('oobe-dialog')."
+        "Object.values($('demo-setup').$$('oobe-dialog')."
         "querySelectorAll('progress-list-item')).filter(node => "
         "node.shadowRoot.querySelector('#icon-active:not([hidden])')).length";
 
@@ -1267,7 +1267,7 @@ class DemoSetupProgressStepsTest : public DemoSetupTestBase {
   // Checks how many steps are marked as complete in the demo setup screen.
   int CountCompletedStepsInUi() {
     const std::string query =
-        "Object.values($('demo-setup-content').$$('oobe-dialog')."
+        "Object.values($('demo-setup').$$('oobe-dialog')."
         "querySelectorAll('progress-list-item')).filter(node => "
         "node.shadowRoot.querySelector('#icon-completed:not([hidden])'))."
         "length";

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

@@ -111,6 +111,8 @@ js_library("demo_preferences") {
 
 js_library("demo_setup") {
   deps = [
+    "components:login_screen_behavior",
+    "components:multi_step_behavior",
     "components:oobe_dialog_host_behavior",
     "components:oobe_i18n_behavior",
   ]

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

@@ -234,9 +234,16 @@ cr.define('cr.ui.login.debug', function() {
       id: 'demo-setup',
       kind: ScreenKind.OTHER,
       suffix: 'demo',
+      handledSteps: 'progress,error',
       states: [
         {
-          id: 'progress',
+          id: 'download-resources',
+          trigger: (screen) => {
+            screen.setCurrentSetupStep('downloadResources');
+          },
+        },
+        {
+          id: 'enrollment',
           trigger: (screen) => {
             screen.setCurrentSetupStep('enrollment');
           },

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

-<dom-module id="demo-setup-md">
+<dom-module id="demo-setup">
   <template>
     <style include="oobe-dialog-host"></style>
     <link rel="stylesheet" href="demo_setup.css">
 
-    <oobe-dialog id="demoSetupProgressDialog" role="dialog" has-buttons hidden
-      title-key="demoSetupProgressScreenTitle">
+    <oobe-dialog id="demoSetupProgressDialog" role="dialog" has-buttons
+      title-key="demoSetupProgressScreenTitle" for-step="progress">
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-32:computer" icon2x="oobe-64:computer">
       </hd-iron-icon>
@@ -34,9 +34,9 @@
       </div>
     </oobe-dialog>
 
-    <oobe-dialog id="demoSetupErrorDialog" role="dialog" has-buttons hidden
+    <oobe-dialog id="demoSetupErrorDialog" role="dialog" has-buttons
         aria-label$="[[i18nDynamic(locale, 'demoSetupErrorScreenTitle')]]"
-        title-key="demoSetupErrorScreenTitle">
+        title-key="demoSetupErrorScreenTitle" for-step="error">
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-32:computer" icon2x="oobe-64:computer">
       </hd-iron-icon>

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

@@ -7,10 +7,30 @@
  * screen.
  */
 
+'use strict';
+
+(function() {
+
+/**
+ * UI mode for the dialog.
+ * @enum {string}
+ */
+const UIState = {
+  PROGRESS: 'progress',
+  ERROR: 'error',
+};
+
 Polymer({
-  is: 'demo-setup-md',
+  is: 'demo-setup',
 
-  behaviors: [OobeI18nBehavior, OobeDialogHostBehavior],
+  behaviors: [
+    OobeI18nBehavior,
+    OobeDialogHostBehavior,
+    LoginScreenBehavior,
+    MultiStepBehavior,
+  ],
+
+  EXTERNAL_API: ['setCurrentSetupStep', 'onSetupSucceeded', 'onSetupFailed'],
 
   properties: {
     /** Object mapping step strings to step indices */
@@ -39,15 +59,6 @@ Polymer({
       value: false,
     },
 
-    /** Ordered array of screen ids that are a part of demo setup flow. */
-    screens_: {
-      type: Array,
-      readonly: true,
-      value() {
-        return ['demoSetupProgressDialog', 'demoSetupErrorDialog'];
-      },
-    },
-
     /** Feature flag to display progress bar instead of spinner during setup. */
     showStepsInDemoModeSetup_: {
       type: Boolean,
@@ -58,10 +69,26 @@ Polymer({
     }
   },
 
+  defaultUIStep() {
+    return UIState.PROGRESS;
+  },
+
+  UI_STEPS: UIState,
+
+  ready() {
+    this.initializeLoginScreen('DemoSetupScreen', {
+      resetAllowed: false,
+    });
+  },
+
+  onBeforeShow() {
+    this.reset();
+  },
+
   /** Resets demo setup flow to the initial screen and starts setup. */
   reset() {
-    this.showScreen_('demoSetupProgressDialog');
-    chrome.send('login.DemoSetupScreen.userActed', ['start-setup']);
+    this.setUIStep(UIState.PROGRESS);
+    this.userActed('start-setup');
   },
 
   /** Called after resources are updated. */
@@ -94,41 +121,7 @@ Polymer({
   onSetupFailed(message, isPowerwashRequired) {
     this.errorMessage_ = message;
     this.isPowerwashRequired_ = isPowerwashRequired;
-    this.showScreen_('demoSetupErrorDialog');
-  },
-
-  /**
-   * Shows screen with the given id. Method exposed for testing environment.
-   * @param {string} id Screen id.
-   */
-  showScreenForTesting(id) {
-    this.showScreen_(id);
-  },
-
-  /**
-   * Shows screen with the given id.
-   * @param {string} id Screen id.
-   * @private
-   */
-  showScreen_(id) {
-    this.hideScreens_();
-
-    var screen = this.$[id];
-    assert(screen);
-    screen.hidden = false;
-    screen.show();
-  },
-
-  /**
-   * Hides all screens to help switching from one screen to another.
-   * @private
-   */
-  hideScreens_() {
-    for (let id of this.screens_) {
-      var screen = this.$[id];
-      assert(screen);
-      screen.hidden = true;
-    }
+    this.setUIStep(UIState.ERROR);
   },
 
   /**
@@ -144,7 +137,7 @@ Polymer({
    * @private
    */
   onPowerwashClicked_() {
-    chrome.send('login.DemoSetupScreen.userActed', ['powerwash']);
+    this.userActed('powerwash');
   },
 
   /**
@@ -155,7 +148,7 @@ Polymer({
     // TODO(wzang): Remove this after crbug.com/900640 is fixed.
     if (this.isPowerwashRequired_)
       return;
-    chrome.send('login.DemoSetupScreen.userActed', ['close-setup']);
+    this.userActed('close-setup');
   },
 
   /**
@@ -189,4 +182,6 @@ Polymer({
   stepIsCompleted_(stepName, setupSteps, currentStepIndex) {
     return currentStepIndex > setupSteps[stepName];
   },
+
 });
+})();

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

@@ -33,7 +33,6 @@
 
 // <include src="../../gaia_auth_host/authenticator.js">
 // <include src="oobe_screen_auto_enrollment_check.js">
-// <include src="oobe_screen_demo_setup.js">
 // <include src="oobe_screen_demo_preferences.js">
 // <include src="oobe_screen_enable_debugging.js">
 // <include src="multi_tap_detector.js">
@@ -55,7 +54,6 @@ cr.define('cr.ui.Oobe', function() {
       login.ArcTermsOfServiceScreen.register();
       login.AppLaunchSplashScreen.register();
       login.FatalErrorScreen.register();
-      login.DemoSetupScreen.register();
       login.DemoPreferencesScreen.register();
       login.DiscoverScreen.register();
       login.AssistantOptInFlowScreen.register();

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

-<div class="step hidden right" id="demo-setup" role="group" hidden>
-  <demo-setup-md id="demo-setup-content"></demo-setup-md>
-</div>
\ No newline at end of file

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

-// Copyright 2018 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 Demo mode setup screen implementation.
- */
-
-login.createScreen('DemoSetupScreen', 'demo-setup', function() {
-  return {
-    EXTERNAL_API: ['setCurrentSetupStep', 'onSetupSucceeded', 'onSetupFailed'],
-
-    /**
-     * Demo setup module.
-     * @private
-     */
-    demoSetupModule_: null,
-
-
-    /** @override */
-    decorate() {
-      this.demoSetupModule_ = $('demo-setup-content');
-    },
-
-    /** Returns a control which should receive an initial focus. */
-    get defaultControl() {
-      return this.demoSetupModule_;
-    },
-
-    /** Called after resources are updated. */
-    updateLocalizedContent() {
-      this.demoSetupModule_.updateLocalizedContent();
-    },
-
-    /** @override */
-    onBeforeShow() {
-      this.demoSetupModule_.reset();
-    },
-
-    /**
-     * Called at the beginning of a setup step.
-     * @param {number} currentStepIndex
-     */
-    setCurrentSetupStep(currentStepIndex) {
-      this.demoSetupModule_.setCurrentSetupStep(currentStepIndex);
-    },
-
-    /** Called when demo mode setup succeeded. */
-    onSetupSucceeded() {
-      this.demoSetupModule_.onSetupSucceeded();
-    },
-
-    /**
-     * Called when demo mode setup failed.
-     * @param {string} message Error message to be displayed to the user.
-     * @param {boolean} isPowerwashRequired Whether powerwash is required to
-     *     recover from the error.
-     */
-    onSetupFailed(message, isPowerwashRequired) {
-      this.demoSetupModule_.onSetupFailed(message, isPowerwashRequired);
-    },
-  };
-});

chrome/browser/resources/chromeos/login/structure/screens_oobe.html

@@ -10,7 +10,7 @@
 <hid-detection id="hid-detection" class="step hidden">
 </hid-detection>
 <include src="../oobe_screen_enable_debugging.html">
-<include src="../oobe_screen_demo_setup.html">
+<demo-setup id="demo-setup" class="step hidden" hidden></demo-setup>
 <oobe-network id="network-selection" class="step hidden" hidden>
 </oobe-network>
 <oobe-eula-md id="oobe-eula-md" class="step hidden" hidden></oobe-eula-md>