CrOS OOBE: Migrate Welcome screen to MultiStepBehavior

Also modified MultiStepBehavior in a way that it hides current step
before hide the whole screen. And shows the current step back when
screen is show again.

Bug: 1155468
Change-Id: Iae4d920774360c5379b0adb5c32a70747c728cfd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2571100
Commit-Queue: Roman Sorokin [CET] <rsorokin@chromium.org>
Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834682}

chrome/browser/resources/chromeos/login/components/multi_step_behavior.js

@@ -90,9 +90,16 @@ var MultiStepBehavior = {
     // Only set uiStep to defaultUIStep if it is not set yet.
     if (!this.uiStep) {
       this.setUIStep(this.defaultUIStep());
+    } else {
+      this.showUIStep_(this.uiStep);
     }
   },
 
+  onBeforeHide() {
+    if (this.uiStep)
+      this.hideUIStep_(this.uiStep);
+  },
+
   /**
    * Returns default event target element.
    * @type {Object}
@@ -105,13 +112,14 @@ var MultiStepBehavior = {
     if (this.uiStep) {
       if (this.uiStep == step)
         return;
-      for (let element of this.stepElements_[this.uiStep] || []) {
-        cr.ui.login.invokePolymerMethod(element, 'onBeforeHide');
-        element.hidden = true;
-      }
+      this.hideUIStep_(this.uiStep);
     }
     this.uiStep = step;
-    for (let element of this.stepElements_[this.uiStep] || []) {
+    this.showUIStep_(this.uiStep);
+  },
+
+  showUIStep_(step) {
+    for (let element of this.stepElements_[step] || []) {
       cr.ui.login.invokePolymerMethod(element, 'onBeforeShow');
       element.hidden = false;
       // Trigger show() if element is an oobe-dialog
@@ -121,6 +129,13 @@ var MultiStepBehavior = {
     }
   },
 
+  hideUIStep_(step) {
+    for (let element of this.stepElements_[step] || []) {
+      cr.ui.login.invokePolymerMethod(element, 'onBeforeHide');
+      element.hidden = true;
+    }
+  },
+
   /*
    * Fills stepElements_ map by looking up child elements with for-step
    * attribute
@@ -148,6 +163,7 @@ var MultiStepBehavior = {
  * @typedef {{
  *   setUIStep: function(string),
  *   onBeforeShow: function(),
+ *   onBeforeHide: function(),
  * }}
  */
 MultiStepBehavior.Proto;

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

@@ -61,7 +61,7 @@
   <template>
     <style include="oobe-dialog-host"></style>
     <link rel="stylesheet" href="oobe_welcome.css">
-    <oobe-welcome-dialog id="welcomeScreen" role="dialog"
+    <oobe-welcome-dialog id="welcomeScreen" role="dialog" for-step="greeting"
         aria-label$="[[i18nDynamic(locale, 'welcomeScreenGreeting')]]"
         current-language="[[currentLanguage]]"
         on-language-button-clicked="onWelcomeSelectLanguageButtonClicked_"
@@ -76,8 +76,8 @@
             "[[isTimezoneButtonVisible_(highlightStrength)]]"
         debugging-link-visible="[[debuggingLinkVisible_]]">
     </oobe-welcome-dialog>
-    <oobe-dialog id="languageScreen" role="dialog" hidden has-buttons
-        title-key="languageSectionTitle"
+    <oobe-dialog id="languageScreen" role="dialog" for-step="language"
+        has-buttons title-key="languageSectionTitle"
         aria-label$="[[i18nDynamic(locale, 'languageSectionTitle')]]">
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-welcome-32:language" icon2x="oobe-welcome-64:language">
@@ -115,8 +115,8 @@
             inverse on-click="closeLanguageSection_"></oobe-text-button>
       </div>
     </oobe-dialog>
-    <oobe-dialog id="accessibilityScreen" role="dialog" hidden has-buttons
-        title-key="accessibilitySectionTitle"
+    <oobe-dialog id="accessibilityScreen" role="dialog" for-step="accessibility"
+        has-buttons title-key="accessibilitySectionTitle"
         subtitle-key="accessibilitySectionHint"
         aria-label$="[[i18nDynamic(locale, 'accessibilitySectionTitle')]]">
       <hd-iron-icon slot="oobe-icon"
@@ -231,8 +231,8 @@
             on-click="closeAccessibilitySection_"></oobe-text-button>
       </div>
     </oobe-dialog>
-    <oobe-dialog id="timezoneScreen" role="dialog" hidden has-buttons
-        title-key="timezoneSectionTitle"
+    <oobe-dialog id="timezoneScreen" role="dialog" for-step="timezone"
+        has-buttons title-key="timezoneSectionTitle"
         aria-label$="[[i18nDynamic(locale, 'timezoneSectionTitle')]]">
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-welcome-32:timezone" icon2x="oobe-welcome-64:timezone">
@@ -256,7 +256,8 @@
             inverse on-click="closeTimezoneSection_"></oobe-text-button>
       </div>
     </oobe-dialog>
-    <oobe-dialog id="oobeAdvancedOptionsScreen" role="dialog" hidden has-buttons
+    <oobe-dialog id="oobeAdvancedOptionsScreen" role="dialog"
+        for-step="advanced-options" has-buttons
         title-key="advancedOptionsSectionTitle"
         aria-label$="[[i18nDynamic(locale, 'advancedOptionsSectionTitle')]]">
       <hd-iron-icon slot="oobe-icon"

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

@@ -6,6 +6,10 @@
  * @fileoverview Polymer element for displaying material design OOBE.
  */
 
+'use strict';
+
+(function() {
+
 /** @const {string} */
 const DEFAULT_CHROMEVOX_HINT_LOCALE = 'en-US';
 
@@ -17,10 +21,27 @@ const DEFAULT_CHROMEVOX_HINT_LOCALE = 'en-US';
 const DEFAULT_CHROMEVOX_HINT_VOICE_EXTENSION_ID =
     'gjjabgpgjpampikjhjpfhneeoapjbjaf';
 
+/**
+ * UI mode for the dialog.
+ * @enum {string}
+ */
+const UIState = {
+  GREETING: 'greeting',
+  LANGUAGE: 'language',
+  ACCESSIBILITY: 'accessibility',
+  TIMEZONE: 'timezone',
+  ADVANCED_OPTIONS: 'advanced-options',
+};
+
 Polymer({
   is: 'oobe-welcome-element',
 
-  behaviors: [OobeI18nBehavior, OobeDialogHostBehavior, LoginScreenBehavior],
+  behaviors: [
+    OobeI18nBehavior,
+    OobeDialogHostBehavior,
+    LoginScreenBehavior,
+    MultiStepBehavior,
+  ],
 
   properties: {
     /**
@@ -127,6 +148,12 @@ Polymer({
    */
   configuration_applied_: false,
 
+  defaultUIStep() {
+    return UIState.GREETING;
+  },
+
+  UI_STEPS: UIState,
+
   /** @override */
   ready() {
     this.initializeLoginScreen('WelcomeScreen', {
@@ -144,13 +171,6 @@ Polymer({
     this.debuggingLinkVisible_ =
         data && 'isDeveloperMode' in data && data['isDeveloperMode'];
 
-    cr.ui.login.invokePolymerMethod(this.$.welcomeScreen, 'onBeforeShow');
-
-    let activeScreen = this.getActiveScreen_();
-    activeScreen.hidden = false;
-    if (activeScreen.show)
-      activeScreen.show();
-
     window.setTimeout(this.applyOobeConfiguration_.bind(this), 0);
   },
 
@@ -158,7 +178,6 @@ Polymer({
    * Event handler that is invoked just before the screen is hidden.
    */
   onBeforeHide() {
-    this.hideAllScreens_();
     this.cleanupChromeVoxHint_();
   },
 
@@ -251,59 +270,6 @@ Polymer({
     this.$.welcomeScreen.onWindowResize();
   },
 
-  /**
-   * Hides all screens to help switching from one screen to another.
-   * @private
-   */
-  hideAllScreens_() {
-    this.$.welcomeScreen.hidden = true;
-
-    var screens = Polymer.dom(this.root).querySelectorAll('oobe-dialog');
-    for (var i = 0; i < screens.length; ++i) {
-      screens[i].hidden = true;
-    }
-  },
-
-  /**
-   * Shows given screen.
-   * @param id String Screen ID.
-   * @private
-   */
-  showScreen_(id) {
-    this.hideAllScreens_();
-
-    var screen = this.$[id];
-    assert(screen);
-    screen.hidden = false;
-    if (screen.show)
-      screen.show();
-  },
-
-  /**
-   * Returns active screen object.
-   * @private
-   */
-  getActiveScreen_() {
-    var screens = Polymer.dom(this.root).querySelectorAll('oobe-dialog');
-    for (var i = 0; i < screens.length; ++i) {
-      if (!screens[i].hidden)
-        return screens[i];
-    }
-    return this.$.welcomeScreen;
-  },
-
-  focus() {
-    this.getActiveScreen_().focus();
-  },
-
-  /**
-   * Handles "visible" event.
-   * @private
-   */
-  onAnimationFinish_() {
-    this.focus();
-  },
-
   /**
    * Returns true if timezone button should be visible.
    * @private
@@ -337,7 +303,7 @@ Polymer({
    */
   onWelcomeLaunchAdvancedOptions_() {
     this.cancelChromeVoxHint_();
-    this.showScreen_('oobeAdvancedOptionsScreen');
+    this.setUIStep(UIState.ADVANCED_OPTIONS);
   },
 
   /**
@@ -347,7 +313,7 @@ Polymer({
    */
   onWelcomeSelectLanguageButtonClicked_() {
     this.cancelChromeVoxHint_();
-    this.showScreen_('languageScreen');
+    this.setUIStep(UIState.LANGUAGE);
   },
 
   /**
@@ -357,7 +323,7 @@ Polymer({
    */
   onWelcomeAccessibilityButtonClicked_() {
     this.cancelChromeVoxHint_();
-    this.showScreen_('accessibilityScreen');
+    this.setUIStep(UIState.ACCESSIBILITY);
   },
 
   /**
@@ -367,7 +333,7 @@ Polymer({
    */
   onWelcomeTimezoneButtonClicked_() {
     this.cancelChromeVoxHint_();
-    this.showScreen_('timezoneScreen');
+    this.setUIStep(UIState.TIMEZONE);
   },
 
   /**
@@ -532,7 +498,7 @@ Polymer({
    * @private
    */
   closeLanguageSection_() {
-    this.showScreen_('welcomeScreen');
+    this.setUIStep(UIState.GREETING);
   },
 
   /** ******************** Accessibility section ******************* */
@@ -543,7 +509,7 @@ Polymer({
    * @private
    */
   closeAccessibilitySection_() {
-    this.showScreen_('welcomeScreen');
+    this.setUIStep(UIState.GREETING);
   },
 
   /**
@@ -572,7 +538,7 @@ Polymer({
    * @private
    */
   closeTimezoneSection_() {
-    this.showScreen_('welcomeScreen');
+    this.setUIStep(UIState.GREETING);
   },
 
   /**
@@ -597,7 +563,7 @@ Polymer({
    * @private
    */
   closeAdvancedOptionsSection_() {
-    this.showScreen_('welcomeScreen');
+    this.setUIStep(UIState.GREETING);
   },
 
   /**
@@ -766,3 +732,4 @@ Polymer({
     this.voicesChangedListenerMaybeGiveChromeVoxHint_ = null;
   }
 });
+})();