ChromeOS OOBE: fix focus flow in MD-OOBE.

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

 // Copyright 2016 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 OOBE.
  */
 
 Polymer({
   is: 'oobe-welcome-md',
@@ skipping 27 matching lines @@
     /**
      * List of keyboards for keyboard selector dropdown.
      * @type {!Array<OobeTypes.IMEDsc>}
      */
     keyboards: {
       type: Array,
       observer: "onKeyboardsChanged_",
     },
 
     /**
-     * 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: {
       type: Boolean,
       value: false,
     },
 
     /**
      * Accessibility options status.
      * @type {!OobeTypes.A11yStatuses}
@@ skipping 22 matching lines @@
     /**
      * True when connected to a network.
      * @private
      */
     isConnected_: {
       type: Boolean,
       value: false,
     },
   },
 
+  /**
+   * 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 = {
       OncTypeCellular: loadTimeData.getString('OncTypeCellular'),
       OncTypeEthernet: loadTimeData.getString('OncTypeEthernet'),
       OncTypeVPN: loadTimeData.getString('OncTypeVPN'),
       OncTypeWiFi: loadTimeData.getString('OncTypeWiFi'),
       OncTypeWiMAX: loadTimeData.getString('OncTypeWiMAX'),
       networkDisabled: loadTimeData.getString('networkDisabled'),
       networkListItemConnected:
           loadTimeData.getString('networkListItemConnected'),
       networkListItemConnecting:
           loadTimeData.getString('networkListItemConnecting'),
       networkListItemConnectingTo:
           loadTimeData.getString('networkListItemConnectingTo'),
       networkListItemNotConnected:
           loadTimeData.getString('networkListItemNotConnected'),
       vpnNameTemplate: loadTimeData.getString('vpnNameTemplate'),
 
       // Additional strings for custom items.
       addMobileNetworkMenuName:
           loadTimeData.getString('addMobileNetworkMenuName'),
       addWiFiNetworkMenuName: loadTimeData.getString('addWiFiNetworkMenuName'),
       proxySettingsMenuName: loadTimeData.getString('proxySettingsMenuName'),
     };
   },
 
   /**
    * 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;
 
-  /**
-   * 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_: '',
-
-  /**
-   * Sets proper focus.
-   */
-  focus: function() {
-    this.$.welcomeNextButton.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));
+    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_: 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();
+  },
+
+  /**
+   * 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.getActiveScreen_().focus();
+  },
+
+  /** @private */
+  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));
+  },
+
+  /**
    * Handles "visible" event.
    * @private
    */
   onAnimationFinish_: function() {
     this.focus();
   },
 
   /**
    * Returns custom items for network selector.
+   * @private
    */
-  _getNetworkCustomItems: function() {
+  getNetworkCustomItems_: function() {
     var self = this;
     return [
       {
         customItemName: 'proxySettingsMenuName',
         polymerIcon: 'oobe-welcome-20:add-proxy',
         customData: {
           onTap: function() { self.OpenProxySettingsDialog_(); },
         },
       },
       {
@@ skipping 20 matching lines @@
   isTimezoneButtonVisible_: function(highlightStrength) {
     return highlightStrength === 'strong';
   },
 
   /**
    * Handle "Next" button for "Welcome" screen.
    *
    * @private
    */
   onWelcomeNextButtonClicked_: function() {
-    this.hideAllScreens_();
-    this.networkSelectionScreenShown = true;
+    this.showScreen_('networkSelectionScreen');
   },
 
   /**
    * Handle "Language" button for "Welcome" screen.
    *
    * @private
    */
   onWelcomeSelectLanguageButtonClicked_: function() {
-    this.hideAllScreens_();
-    this.languageSelectionScreenShown = true;
+    this.showScreen_('languageScreen');
   },
 
   /**
    * Handle "Accessibility" button for "Welcome" screen.
    *
    * @private
    */
   onWelcomeAccessibilityButtonClicked_: function() {
-    this.hideAllScreens_();
-    this.accessibilityOptionsScreenShown = true;
+    this.showScreen_('accessibilityScreen');
   },
 
   /**
    * Handle "Timezone" button for "Welcome" screen.
    *
    * @private
    */
   onWelcomeTimezoneButtonClicked_: function() {
-    this.hideAllScreens_();
-    this.timezoneScreenShown = true;
+    this.showScreen_('timezoneScreen');
   },
 
   /**
    * Handle Networwork Setup screen "Proxy settings" button.
    *
    * @private
    */
   OpenProxySettingsDialog_: function(item) {
     chrome.send('launchProxySettingsDialog');
   },
@@ skipping 91 matching lines @@
     itemState.customData.onTap();
   },
 
   /**
    * Handle "<- Back" button on network selection screen.
    *
    * @private
    */
   onNetworkSelectionBackButtonPressed_: function() {
     this.networkLastSelectedGuid_ = '';
-    this.hideAllScreens_();
-    this.welcomeScreenShown = true;
+    this.showScreen_('welcomeScreen');
   },
 
   /**
    * Handle language selection.
    *
    * @param {!{detail: {!OobeTypes.LanguageDsc}}} event
    * @private
    */
   onLanguageSelected_: function(event) {
     var item = event.detail;
@@ skipping 22 matching lines @@
   onKeyboardsChanged_: function() {
     this.currentKeyboard = Oobe.getSelectedTitle(this.keyboards);
   },
 
   /**
    * Handle "OK" button for "LanguageSelection" screen.
    *
    * @private
    */
   closeLanguageSection_: function() {
-    this.hideAllScreens_();
-    this.welcomeScreenShown = true;
+    this.showScreen_('welcomeScreen');
   },
 
   /** ******************** Accessibility section ******************* */
 
   /**
    * Handle "OK" button for "Accessibility Options" screen.
    *
    * @private
    */
   closeAccessibilitySection_: function() {
-    this.hideAllScreens_();
-    this.welcomeScreenShown = true;
+    this.showScreen_('welcomeScreen');
   },
 
   /**
    * Handle all accessibility buttons.
    * Note that each <oobe-a11y-option> has chromeMessage attribute
    * containing Chromium callback name.
    *
    * @private
    * @param {!Event} event
    */
   onA11yOptionChanged_: function(event) {
     chrome.send(
         event.currentTarget.chromeMessage, [event.currentTarget.checked]);
   },
 
   /** ******************** Timezone section ******************* */
 
   /**
    * Handle "OK" button for "Timezone Selection" screen.
    *
    * @private
    */
   closeTimezoneSection_: function() {
-    this.hideAllScreens_();
-    this.welcomeScreenShown = true;
+    this.showScreen_('welcomeScreen');
   },
 
   /**
    * Handle timezone selection.
    *
    * @param {!{detail: {!OobeTypes.Timezone}}} event
    * @private
    */
   onTimezoneSelected_: function(event) {
     var item = event.detail;
     if (!item)
       return;
 
     this.screen.onTimezoneSelected_(item.value);
   },
 
   /**
     * This function formats message for labels.
     * @param String label i18n string ID.
     * @param String parameter i18n string parameter.
     * @private
     */
   formatMessage_: function(label, parameter) {
     return loadTimeData.getStringF(label, parameter);
   },
 });