Settings/Oobe: Simplify cr-network-select and use flex

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 54 matching lines @@
       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,
     },
 
@@ skipping 41 matching lines @@
    */
   networkLastSelectedGuid_: '',
 
   /**
    * Sets proper focus.
    */
   focus: function() {
     this.$.welcomeNextButton.focus();
   },
 
+  /** @private */
+  networkSelectionScreenShownChanged_: function() {
+    if (this.networkSelectionScreenShown) {

[Alexander Alekseev, 2017/01/12 23:10:09]

Is this to fix "some of the network entries are not rendered after element was
shown until the 'refresh networks' event is triggered"?

This still looks like a bug in Polymer. Should we add a note on that here?

[stevenjb, 2017/01/13 00:03:14]

It's kind of a bug. The problem is, there is no DOM event to notify an element
when it is stamped. Since the element starts off hidden, we need to notify it
manually. It also makes sense to trigger a fresh network scan (e.g. in case the
user lingered on the first welcome screen), so this kills two birds with one
stone.

I added a comment.

+      this.async(function() {
+        this.$.networkSelect.refreshNetworks();
+      }.bind(this));
+    }
+  },
+
   /**
    * Handles "visible" event.
    * @private
    */
   onAnimationFinish_: function() {
     this.focus();
   },
 
   /**
    * Returns custom items for network selector.
@@ skipping 263 matching lines @@
    * @private
    */
   onTimezoneSelected_: function(event) {
     var item = event.detail;
     if (!item)
       return;
 
     this.screen.onTimezoneSelected_(item.value);
   },
 });