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 56 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';
   },
 
   /**

[dschuyler, 2016/08/18 23:30:18]

I think this needs a comment. Is this what this
function is doing?:

* Allow |expanded| to toggle until |wasExpanded| 
* is set. Once |wasExpanded| is true, always return true.

I realize that the above essentially says what the function
is doing (thus wouldn't need a comment). I think this is
involved enough to deserve a comment though. If I'm 
wrong about what it's doing, then it needs a comment even 
more :)

[stevenjb, 2016/08/19 00:20:43]

Added a hopefully helpful comment.

+   * @return {boolean}
+   * @private
+   */
+  domIfIsVisible_() {
+    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;
+  },
+
+  /**

[dschuyler, 2016/08/18 23:30:18]

Please add a comment. Maybe:

* Always false until the dom-if is expanded.

[stevenjb, 2016/08/19 00:20:43]

Acknowledged.

+   * @return {boolean}
+   * @private
+   */
+  ironCollapseIsOpened_() {
+    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);
   },
 });