MD Settings: Intenet: Fix network list

chrome/browser/resources/settings/internet_page/network_summary_item.js

 // Copyright 2015 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 the network state for a specific
  * type and a list of networks for that type.
  */
 
 /** @typedef {chrome.networkingPrivate.DeviceStateProperties} */
 var DeviceStateProperties;
 
 Polymer({
   is: 'network-summary-item',
 
   properties: {
-    /**
-     * True if the list is expanded.
-     */
+    /** The expanded state of the list of networks. */
     expanded: {
       type: Boolean,
       value: false,
       observer: 'expandedChanged_',
     },
 
     /**
+     * Whether the list has been expanded. This is used to ensure the
+     * iron-collapse section animates correctly.
+     */
+    wasExpanded: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
      * The maximum height in pixels for the list of networks.
      */
     maxHeight: {
       type: Number,
       value: 200,
     },
 
     /**
      * Device state for the network type.
      * @type {DeviceStateProperties|undefined}
@@ skipping 57 matching lines @@
   /**
    * @param {DeviceStateProperties|undefined} deviceState
    * @return {boolean} Whether or not the device state is enabled.
    * @private
    */
   deviceIsEnabled_: function(deviceState) {
     return !!deviceState && deviceState.State == 'Enabled';
   },
 
   /**
+   * @return {boolean} Whether the dom-if for the network list should be true.
+   *   The logic here is designed to allow the enclosed content to be stamped
+   *   before it is expanded.
+   * @private
+   */
+  networksDomIfIsTrue_() {
+    if (this.expanded == this.wasExpanded)
+      return this.expanded;
+    if (this.expanded) {
+      Polymer.RenderStatus.afterNextRender(this, function() {
+        this.wasExpanded = true;
+      }.bind(this));
+      return true;
+    }
+    return this.wasExpanded;
+  },
+
+  /**
+   * @return {boolean} Whether the iron-collapse for the network list should
+   *   be opened.
+   * @private
+   */
+  networksIronCollapseIsOpened_() {
+    return this.expanded && this.wasExpanded;
+  },
+
+  /**
    * @param {DeviceStateProperties} deviceState
    * @return {boolean}
    * @private
    */
   enableIsVisible_: function(deviceState) {
     return !!deviceState && deviceState.Type != CrOnc.Type.ETHERNET &&
         deviceState.Type != CrOnc.Type.VPN;
   },
 
   /**
@@ skipping 62 matching lines @@
 
   /**
    * Called whenever the 'selectable' state might change.
    * @private
    */
   updateSelectable_: function() {
     var selectable = this.deviceIsEnabled_(this.deviceState);
     this.$.details.classList.toggle('selectable', selectable);
   },
 });