MD Settings: Internet: Reduce use of hidden for complex sections.

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.
      */
     expanded: {
       type: Boolean,
       value: false,
-      observer: 'expandedChanged_'
+      observer: 'expandedChanged_',
     },
 
     /**
      * The maximum height in pixels for the list of networks.
      */
     maxHeight: {
       type: Number,
-      value: 200
+      value: 200,
     },
 
     /**
-     * True if this item should be hidden. We need this computed property so
-     * that it can default to true, hiding this element, since no changed event
-     * will be fired for deviceState if it is undefined (in NetworkSummary).
-     */
-    isHidden: {
-      type: Boolean,
-      value: true,
-      computed: 'noDeviceState_(deviceState)'
-    },
-
-    /**
      * Device state for the network type.
      * @type {DeviceStateProperties|undefined}
      */
     deviceState: {
       type: Object,
-      observer: 'deviceStateChanged_'
+      observer: 'deviceStateChanged_',
     },
 
     /**
      * Network state for the active network.
      * @type {!CrOnc.NetworkStateProperties|undefined}
      */
-    networkState: {
+    activeNetworkState: {
       type: Object,
+      observer: 'activeNetworkStateChanged_',
     },
 
     /**
      * List of all network state data for the network type.
      * @type {!Array<!CrOnc.NetworkStateProperties>}
      */
     networkStateList: {
       type: Array,
       value: function() { return []; },
-      observer: 'networkStateListChanged_'
+      observer: 'networkStateListChanged_',
     }
   },
 
-  /**
-   * Polymer expanded changed method.
-   */
+  /** @private */
   expandedChanged_: function() {
     var type = this.deviceState ? this.deviceState.Type : '';
     this.fire('expanded', {expanded: this.expanded, type: type});
   },
 
-  /**
-   * Polymer deviceState changed method.
-   */
+  /** @private */
   deviceStateChanged_: function() {
     this.updateSelectable_();
     if (this.expanded && !this.deviceIsEnabled_(this.deviceState))
       this.expanded = false;
   },
 
-  /**
-   * Polymer networkStateList changed method.
-   */
-  networkStateListChanged_: function() {
+  /** @private */
+  activeNetworkStateChanged_: function() {
+    console.log('activeNetwork: ' + JSON.stringify(this.activeNetworkState));

[michaelpg, 2016/07/20 19:36:37]

remove

[stevenjb, 2016/07/20 20:29:16]

Doh. Done.

[michaelpg, 2016/07/20 23:52:37]

(i'm assuming you do want to keep the new console.error(), but at some point we
may want to replace those with asserts or remove them)

     this.updateSelectable_();
   },
 
-  /**
-   * @param {DeviceStateProperties} deviceState
-   * @return {boolean} True if the device state is not set.
-   * @private
-   */
-  noDeviceState_: function(deviceState) {
-    return !deviceState;
-  },
+  /** @private */
+  networkStateListChanged_: function() { this.updateSelectable_(); },
 
   /**
    * @param {DeviceStateProperties} deviceState
    * @param {boolean} expanded The expanded state.
    * @return {boolean} Whether or not the scanning spinner should be shown.
    * @private
    */
   showScanning_: function(deviceState, expanded) {
     return !!expanded && !!deviceState.Scanning;
   },
 
   /**
    * @param {DeviceStateProperties|undefined} deviceState
    * @return {boolean} Whether or not the device state is enabled.
    * @private
    */
   deviceIsEnabled_: function(deviceState) {
     return !!deviceState && deviceState.State == 'Enabled';
   },
 
   /**
    * @param {DeviceStateProperties} deviceState
-   * @return {string} The class value for the device enabled button.
+   * @return {boolean}
    * @private
    */
-  getDeviceEnabledButtonClass_: function(deviceState) {
-    var visible = deviceState && deviceState.Type != CrOnc.Type.ETHERNET &&
-                  deviceState.Type != CrOnc.Type.VPN;
-    return visible ? '' : 'invisible';
-  },
-
-  /**
-   * @param {DeviceStateProperties} deviceState
-   * @param {!Array<!CrOnc.NetworkStateProperties>} networkList
-   * @return {string} The class value for the expand button.
-   * @private
-   */
-  getExpandButtonClass_: function(deviceState, networkList) {
-    var visible = this.expandIsVisible_(deviceState, networkList);
-    return visible ? '' : 'invisible';
+  enableIsVisible_: function(deviceState) {
+    return !!deviceState && deviceState.Type != CrOnc.Type.ETHERNET &&
+        deviceState.Type != CrOnc.Type.VPN;
   },
 
   /**
    * @param {DeviceStateProperties|undefined} deviceState
-   * @param {!Array<!CrOnc.NetworkStateProperties>} networkList
+   * @param {!Array<!CrOnc.NetworkStateProperties>} networkStateList
    * @return {boolean} Whether or not to show the UI to expand the list.
    * @private
    */
-  expandIsVisible_: function(deviceState, networkList) {
+  expandIsVisible_: function(deviceState, networkStateList) {
     if (!this.deviceIsEnabled_(deviceState))
       return false;
     var minLength = (this.deviceState.Type == CrOnc.Type.WI_FI) ? 1 : 2;
-    return networkList.length >= minLength;
+    return networkStateList.length >= minLength;
   },
 
   /**
    * @param {!CrOnc.NetworkStateProperties} state
-   * @param {boolean} expanded The expanded state.
-   * @return {boolean} True if the 'Known networks' button should be shown.
+   * @return {boolean} True if the known networks button should be shown.
    * @private
    */
-  showKnownNetworks_: function(state, expanded) {
-    return !!expanded && !!state && state.Type == CrOnc.Type.WI_FI;
+  knownNetworksIsVisible_: function(state) {
+    return !!state && state.Type == CrOnc.Type.WI_FI;
   },
 
   /**
    * Event triggered when the details div is tapped.
    * @param {Event} event The enable button event.
    * @private
    */
   onDetailsTap_: function(event) {
     if ((event.target.id == 'expandListButton') ||
         (this.deviceState && !this.deviceIsEnabled_(this.deviceState))) {
       // Already handled or disabled, do nothing.
       return;
     }
     if (this.expandIsVisible_(this.deviceState, this.networkStateList)) {
       // Expandable, toggle expand.
       this.expanded = !this.expanded;
       return;
     }
-    // Not expandable, fire 'selected' with |networkState|.
-    this.fire('selected', this.networkState);
+    // Not expandable, fire 'selected' with |activeNetworkState|.
+    this.fire('selected', this.activeNetworkState);
   },
 
   /**
    * Event triggered when the known networks button is tapped.
    * @private
    */
   onKnownNetworksTap_: function() {
     this.fire('show-known-networks', {type: CrOnc.Type.WI_FI});
   },
 
   /**
    * Event triggered when the enable button is toggled.
    * @param {!Event} event
    * @private
    */
   onDeviceEnabledTap_: function(event) {
     var deviceIsEnabled = this.deviceIsEnabled_(this.deviceState);
     var type = this.deviceState ? this.deviceState.Type : '';
-    this.fire('device-enabled-toggled',
-              {enabled: !deviceIsEnabled, type: type});
+    this.fire(
+        'device-enabled-toggled', {enabled: !deviceIsEnabled, type: type});
     // Make sure this does not propagate to onDetailsTap_.
     event.stopPropagation();
   },
 
   /**
    * Called whenever the 'selectable' state might change.
    * @private
    */
   updateSelectable_: function() {
     var selectable = this.deviceIsEnabled_(this.deviceState);
     this.$.details.classList.toggle('selectable', selectable);
   },
 });