ChromeOS OOBE: fix focus flow in MD-OOBE.

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

Index: chrome/browser/resources/chromeos/login/oobe_welcome.js
diff --git a/chrome/browser/resources/chromeos/login/oobe_welcome.js b/chrome/browser/resources/chromeos/login/oobe_welcome.js
index b0b048d0412a92c29b96ad55e1082d148d25280d..b902cbb3960700a28bf9e1427c6a614bb713acd6 100644
--- a/chrome/browser/resources/chromeos/login/oobe_welcome.js
+++ b/chrome/browser/resources/chromeos/login/oobe_welcome.js
@@ -45,47 +45,6 @@ Polymer({
     },
 
     /**
-     * Flag that shows Welcome screen.
-     */
-    welcomeScreenShown: {
-      type: Boolean,
-      value: true,
-    },
-
-    /**
-     * Flag that shows Language Selection screen.
-     */
-    languageSelectionScreenShown: {
-      type: Boolean,
-      value: false,
-    },
-
-    /**
-     * Flag that shows Accessibility Options screen.
-     */
-    accessibilityOptionsScreenShown: {
-      type: Boolean,
-      value: false,
-    },
-
-    /**
-     * Flag that shows Timezone Selection screen.
-     */
-    timezoneScreenShown: {
-      type: Boolean,
-      value: false,
-    },
-
-    /**
-     * Flag that shows Network Selection screen.
-     */
-    networkSelectionScreenShown: {
-      type: Boolean,
-      value: false,
-      observer: 'networkSelectionScreenShownChanged_',
-    },
-
-    /**
      * Flag that enables MD-OOBE.
      */
     enabled: {
@@ -128,6 +87,13 @@ Polymer({
     },
   },
 
+  /**
+   * GUID of the user-selected network. It is remembered after user taps on
+   * network entry. After we receive event "connected" on this network,
+   * OOBE will proceed.
+   */
+  networkLastSelectedGuid_: '',
+
   /** @override */
   ready: function() {
     CrOncStrings = {
@@ -157,39 +123,55 @@ Polymer({
 
   /**
    * Hides all screens to help switching from one screen to another.
+   * @private
    */
   hideAllScreens_: function() {
-    this.welcomeScreenShown = false;
-    this.networkSelectionScreenShown = false;
-    this.languageSelectionScreenShown = false;
-    this.accessibilityOptionsScreenShown = false;
-    this.timezoneScreenShown = false;
+    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;
+    }
   },
 
   /**
-   * GUID of the user-selected network. It is remembered after user taps on
-   * network entry. After we receive event "connected" on this network,
-   * OOBE will proceed.
+   * Shows given screen.
+   * @param id String Screen ID.
+   * @private
    */
-  networkLastSelectedGuid_: '',
+  showScreen_: function(id) {
+    this.hideAllScreens_();
+
+    var screen = this.$[id];

[stevenjb, 2017/02/14 01:21:32]

nit: assert(screen) may help other devs in the future.

[Alexander Alekseev, 2017/02/14 11:59:27]

Done.

+    screen.hidden = false;
+    screen.show();
+  },
 
   /**
-   * Sets proper focus.
+   * Returns active screen object.
+   * @private
    */
+  getActiveScreen_: function() {
+    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: function() {
-    this.$.welcomeNextButton.focus();
+    this.getActiveScreen_().focus();
   },
 
   /** @private */
-  networkSelectionScreenShownChanged_: function() {
-    if (this.networkSelectionScreenShown) {
-      // After #networkSelect is stamped, trigger a refresh so that the list
-      // will be updated with the currently visible networks and sized
-      // appropriately.
-      this.async(function() {
-        this.$.networkSelect.refreshNetworks();
-      }.bind(this));
-    }
+  onNetworkSelectionScreenShown_: function() {
+    // After #networkSelect is stamped, trigger a refresh so that the list
+    // will be updated with the currently visible networks and sized
+    // appropriately.
+    this.async(function() {
+      this.$.networkSelect.refreshNetworks();
+    }.bind(this));
   },
 
   /**
@@ -202,8 +184,9 @@ Polymer({
 
   /**
    * Returns custom items for network selector.
+   * @private
    */
-  _getNetworkCustomItems: function() {
+  getNetworkCustomItems_: function() {
     var self = this;
     return [
       {
@@ -244,8 +227,7 @@ Polymer({
    * @private
    */
   onWelcomeNextButtonClicked_: function() {
-    this.hideAllScreens_();
-    this.networkSelectionScreenShown = true;
+    this.showScreen_('networkSelectionScreen');
   },
 
   /**
@@ -254,8 +236,7 @@ Polymer({
    * @private
    */
   onWelcomeSelectLanguageButtonClicked_: function() {
-    this.hideAllScreens_();
-    this.languageSelectionScreenShown = true;
+    this.showScreen_('languageScreen');
   },
 
   /**
@@ -264,8 +245,7 @@ Polymer({
    * @private
    */
   onWelcomeAccessibilityButtonClicked_: function() {
-    this.hideAllScreens_();
-    this.accessibilityOptionsScreenShown = true;
+    this.showScreen_('accessibilityScreen');
   },
 
   /**
@@ -274,8 +254,7 @@ Polymer({
    * @private
    */
   onWelcomeTimezoneButtonClicked_: function() {
-    this.hideAllScreens_();
-    this.timezoneScreenShown = true;
+    this.showScreen_('timezoneScreen');
   },
 
   /**
@@ -387,8 +366,7 @@ Polymer({
    */
   onNetworkSelectionBackButtonPressed_: function() {
     this.networkLastSelectedGuid_ = '';
-    this.hideAllScreens_();
-    this.welcomeScreenShown = true;
+    this.showScreen_('welcomeScreen');
   },
 
   /**
@@ -431,8 +409,7 @@ Polymer({
    * @private
    */
   closeLanguageSection_: function() {
-    this.hideAllScreens_();
-    this.welcomeScreenShown = true;
+    this.showScreen_('welcomeScreen');
   },
 
   /** ******************** Accessibility section ******************* */
@@ -443,8 +420,7 @@ Polymer({
    * @private
    */
   closeAccessibilitySection_: function() {
-    this.hideAllScreens_();
-    this.welcomeScreenShown = true;
+    this.showScreen_('welcomeScreen');
   },
 
   /**
@@ -468,8 +444,7 @@ Polymer({
    * @private
    */
   closeTimezoneSection_: function() {
-    this.hideAllScreens_();
-    this.welcomeScreenShown = true;
+    this.showScreen_('welcomeScreen');
   },
 
   /**