MD Settings: Network details cleanup

chrome/browser/resources/settings/internet_page/internet_detail_page.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
  * 'settings-internet-detail' is the settings subpage containing details
  * for a network.
  */
 (function() {
@@ skipping 14 matching lines @@
       type: String,
       value: '',
     },
 
     /**
      * The current properties for the network matching |guid|.
      * @type {!CrOnc.NetworkProperties|undefined}
      */
     networkProperties: {
       type: Object,
-      observer: 'networkPropertiesChanged_'
+      observer: 'networkPropertiesChanged_',
     },
 
     /**
      * The network AutoConnect state.
      */
     autoConnect: {
       type: Boolean,
       value: false,
-      observer: 'autoConnectChanged_'
+      observer: 'autoConnectChanged_',
     },
 
     /**
      * The network preferred state.
      */
     preferNetwork: {
       type: Boolean,
       value: false,
-      observer: 'preferNetworkChanged_'
+      observer: 'preferNetworkChanged_',
     },
 
     /**
      * The network IP Address.
      */
     IPAddress: {
       type: String,
-      value: ''
+      value: '',
     },
 
     /**
      * Highest priority connected network or null.
      * @type {?CrOnc.NetworkStateProperties}
      */
     defaultNetwork: {
       type: Object,
-      value: null
+      value: null,
     },
 
+    advancedExpanded: { type: Boolean },
+
     /**
      * Object providing network type values for data binding.
      * @const
      */
     NetworkType: {
       type: Object,
       value: {
         CELLULAR: CrOnc.Type.CELLULAR,
         ETHERNET: CrOnc.Type.ETHERNET,
         VPN: CrOnc.Type.VPN,
         WIFI: CrOnc.Type.WI_FI,
         WIMAX: CrOnc.Type.WI_MAX,
       },
       readOnly: true
     },
 
     /**
      * Interface for networkingPrivate calls, passed from internet_page.
      * @type {NetworkingPrivate}
      */
-    networkingPrivate: {
-      type: Object,
-    },
+    networkingPrivate: {type: Object},
   },
 
   observers: [
     'guidChanged_(guid, networkingPrivate)',
   ],
 
   /**
    * Listener function for chrome.networkingPrivate.onNetworksChanged event.
    * @type {function(!Array<string>)}
    * @private
    */
   networksChangedListener_: function() {},
 
   /** @override */
   attached: function() {
     this.networksChangedListener_ = this.onNetworksChangedEvent_.bind(this);
     this.networkingPrivate.onNetworksChanged.addListener(
         this.networksChangedListener_);
   },
 
   /** @override */
   detached: function() {
     this.networkingPrivate.onNetworksChanged.removeListener(
         this.networksChangedListener_);
   },
 
-  /**
-   * Polymer guid changed method.
-   */
+  /** @private */
   guidChanged_: function() {
     if (!this.guid)
       return;
     this.getNetworkDetails_();
   },
 
-  /**
-   * Polymer networkProperties changed method.
-   */
+  /** @private */
   networkPropertiesChanged_: function() {
     if (!this.networkProperties)
       return;
 
     // Update autoConnect if it has changed. Default value is false.
     var autoConnect = CrOnc.getAutoConnect(this.networkProperties);
     if (autoConnect != this.autoConnect)
       this.autoConnect = autoConnect;
 
     // Update preferNetwork if it has changed. Default value is false.
-    var priority = /** @type {number} */(CrOnc.getActiveValue(
-        this.networkProperties.Priority) || 0);
+    var priority = /** @type {number} */ (
+        CrOnc.getActiveValue(this.networkProperties.Priority) || 0);
     var preferNetwork = priority > 0;
     if (preferNetwork != this.preferNetwork)
       this.preferNetwork = preferNetwork;
 
     // Set the IPAddress property to the IPV4 Address.
     var ipv4 =
         CrOnc.getIPConfigForType(this.networkProperties, CrOnc.IPType.IPV4);
     this.IPAddress = (ipv4 && ipv4.IPAddress) || '';
   },
 
-  /**
-   * Polymer autoConnect changed method.
-   */
+  /** @private */
   autoConnectChanged_: function() {
     if (!this.networkProperties || !this.guid)
       return;
     var onc = this.getEmptyNetworkProperties_();
     CrOnc.setTypeProperty(onc, 'AutoConnect', this.autoConnect);
     this.setNetworkProperties_(onc);
   },
 
-  /**
-   * Polymer preferNetwork changed method.
-   */
+  /** @private */
   preferNetworkChanged_: function() {
     if (!this.networkProperties || !this.guid)
       return;
     var onc = this.getEmptyNetworkProperties_();
     onc.Priority = this.preferNetwork ? 1 : 0;
     this.setNetworkProperties_(onc);
   },
 
   /**
    * networkingPrivate.onNetworksChanged event callback.
@@ skipping 56 matching lines @@
   getEmptyNetworkProperties_: function() {
     return {Type: this.networkProperties.Type};
   },
 
   /**
    * @param {!CrOnc.NetworkProperties} properties
    * @return {string} The text to display for the network name.
    * @private
    */
   getStateName_: function(properties) {
-    return /** @type {string} */(CrOnc.getActiveValue(
-      this.networkProperties.Name) || '');
+    return /** @type {string} */ (
+        CrOnc.getActiveValue(this.networkProperties.Name) || '');
   },
 
   /**
    * @param {!CrOnc.NetworkProperties} properties
    * @return {string} The text to display for the network connection state.
    * @private
    */
   getStateText_: function(properties) {
     // TODO(stevenjb): Localize.
     return (properties && properties.ConnectionState) || '';
   },
 
   /**
    * @param {!CrOnc.NetworkProperties} properties
    * @return {boolean} True if the network is connected.
    * @private
    */
   isConnectedState_: function(properties) {
     return properties.ConnectionState == CrOnc.ConnectionState.CONNECTED;
   },
 
   /**
    * @param {!CrOnc.NetworkProperties} properties
-   * @return {boolean} Whether or not to show the 'Connect' button.
+   * @return {boolean}
    * @private
    */
   showConnect_: function(properties) {
     return properties.Type != CrOnc.Type.ETHERNET &&
-           properties.ConnectionState == CrOnc.ConnectionState.NOT_CONNECTED;
+        properties.ConnectionState == CrOnc.ConnectionState.NOT_CONNECTED;
   },
 
   /**
    * @param {!CrOnc.NetworkProperties} properties
-   * @return {boolean} Whether or not to show the 'Activate' button.
+   * @return {boolean}
    * @private
    */
   showActivate_: function(properties) {
     if (!properties || properties.Type != CrOnc.Type.CELLULAR)
       return false;
     var activation = properties.Cellular.ActivationState;
     return activation == CrOnc.ActivationState.NOT_ACTIVATED ||
-           activation == CrOnc.ActivationState.PARTIALLY_ACTIVATED;
+        activation == CrOnc.ActivationState.PARTIALLY_ACTIVATED;
   },
 
   /**
    * @param {!CrOnc.NetworkProperties} properties
-   * @return {boolean} Whether or not to show the 'View Account' button.
+   * @return {boolean}
    * @private
    */
   showViewAccount_: function(properties) {
     // Show either the 'Activate' or the 'View Account' button.
     if (this.showActivate_(properties))
       return false;
 
     if (!properties || properties.Type != CrOnc.Type.CELLULAR ||
         !properties.Cellular) {
       return false;
@@ skipping 32 matching lines @@
       return false;
     if (properties.Type == CrOnc.Type.CELLULAR && CrOnc.isSimLocked(properties))
       return false;
     if (properties.Type == CrOnc.Type.VPN && !defaultNetwork)
       return false;
     return true;
   },
 
   /**
    * @param {!CrOnc.NetworkProperties} properties
-   * @return {boolean} Whether or not to show the 'Disconnect' button.
+   * @return {boolean}
    * @private
    */
   showDisconnect_: function(properties) {
     return properties.Type != CrOnc.Type.ETHERNET &&
-           properties.ConnectionState != CrOnc.ConnectionState.NOT_CONNECTED;
+        properties.ConnectionState != CrOnc.ConnectionState.NOT_CONNECTED;
   },
 
-  /**
-   * Callback when the Connect button is tapped.
-   * @private
-   */
-  onConnectTap_: function() {
-    this.networkingPrivate.startConnect(this.guid);
-  },
+  /** @private */
+  onConnectTap_: function() { this.networkingPrivate.startConnect(this.guid); },
 
-  /**
-   * Callback when the Disconnect button is tapped.
-   * @private
-   */
+  /** @private */
   onDisconnectTap_: function() {
     this.networkingPrivate.startDisconnect(this.guid);
   },
 
-  /**
-   * Callback when the Activate button is tapped.
-   * @private
-   */
+  /** @private */
   onActivateTap_: function() {
     this.networkingPrivate.startActivate(this.guid);
   },
 
-  /**
-   * Callback when the View Account button is tapped.
-   * @private
-   */
+  /** @private */
   onViewAccountTap_: function() {
     // startActivate() will show the account page for activated networks.
     this.networkingPrivate.startActivate(this.guid);
   },
 
   /**
+   * @param {Event} event
+   * @private
+   */
+  toggleAdvancedExpanded_: function(event) {
+    if (event.target.id == 'expandButton')
+      return;  // Already handled.
+    this.advancedExpanded = !this.advancedExpanded;
+  },
+
+  /**
    * Event triggered for elements associated with network properties.
    * @param {!{detail: !{field: string, value: (string|!Object)}}} event
    * @private
    */
   onNetworkPropertyChange_: function(event) {
     if (!this.networkProperties)
       return;
     var field = event.detail.field;
     var value = event.detail.value;
     var onc = this.getEmptyNetworkProperties_();
@@ skipping 18 matching lines @@
    */
   onIPConfigChange_: function(event) {
     if (!this.networkProperties)
       return;
     var field = event.detail.field;
     var value = event.detail.value;
     // Get an empty ONC dictionary and set just the IP Config properties that
     // need to change.
     var onc = this.getEmptyNetworkProperties_();
     var ipConfigType =
-        /** @type {chrome.networkingPrivate.IPConfigType|undefined} */(
+        /** @type {chrome.networkingPrivate.IPConfigType|undefined} */ (
             CrOnc.getActiveValue(this.networkProperties.IPAddressConfigType));
     if (field == 'IPAddressConfigType') {
       var newIpConfigType =
-          /** @type {chrome.networkingPrivate.IPConfigType} */(value);
+          /** @type {chrome.networkingPrivate.IPConfigType} */ (value);
       if (newIpConfigType == ipConfigType)
         return;
       onc.IPAddressConfigType = newIpConfigType;
     } else if (field == 'NameServersConfigType') {
       var nsConfigType =
-          /** @type {chrome.networkingPrivate.IPConfigType|undefined} */(
+          /** @type {chrome.networkingPrivate.IPConfigType|undefined} */ (
               CrOnc.getActiveValue(
                   this.networkProperties.NameServersConfigType));
       var newNsConfigType =
-          /** @type {chrome.networkingPrivate.IPConfigType} */(value);
+          /** @type {chrome.networkingPrivate.IPConfigType} */ (value);
       if (newNsConfigType == nsConfigType)
         return;
       onc.NameServersConfigType = newNsConfigType;
     } else if (field == 'StaticIPConfig') {
       if (ipConfigType == CrOnc.IPConfigType.STATIC) {
-        var staticIpConfig = this.networkProperties.StaticIPConfig;
+        let staticIpConfig = this.networkProperties.StaticIPConfig;
+        let ipConfigValue = /** @type {!Object} */ (value);
         if (staticIpConfig &&
-            this.allPropertiesMatch_(staticIpConfig,
-                                     /** @type {!Object} */(value))) {
+            this.allPropertiesMatch_(staticIpConfig, ipConfigValue)) {
           return;
         }
       }
       onc.IPAddressConfigType = CrOnc.IPConfigType.STATIC;
       if (!onc.StaticIPConfig) {
         onc.StaticIPConfig =
-            /** @type {!chrome.networkingPrivate.IPConfigProperties} */({});
+            /** @type {!chrome.networkingPrivate.IPConfigProperties} */ ({});
       }
       for (let key in value)
         onc.StaticIPConfig[key] = value[key];
     } else if (field == 'NameServers') {
       // If a StaticIPConfig property is specified and its NameServers value
       // matches the new value, no need to set anything.
-      var nameServers = /** @type {!Array<string>} */(value);
+      let nameServers = /** @type {!Array<string>} */ (value);
       if (onc.NameServersConfigType == CrOnc.IPConfigType.STATIC &&
-          onc.StaticIPConfig &&
-          onc.StaticIPConfig.NameServers == nameServers) {
+          onc.StaticIPConfig && onc.StaticIPConfig.NameServers == nameServers) {
         return;
       }
       onc.NameServersConfigType = CrOnc.IPConfigType.STATIC;
       if (!onc.StaticIPConfig) {
         onc.StaticIPConfig =
-            /** @type {!chrome.networkingPrivate.IPConfigProperties} */({});
+            /** @type {!chrome.networkingPrivate.IPConfigProperties} */ ({});
       }
       onc.StaticIPConfig.NameServers = nameServers;
     } else {
       console.error('Unexpected change field: ' + field);
       return;
     }
     // setValidStaticIPConfig will fill in any other properties from
     // networkProperties. This is necessary since we update IP Address and
     // NameServers independently.
     CrOnc.setValidStaticIPConfig(onc, this.networkProperties);
     this.setNetworkProperties_(onc);
   },
 
   /**
    * Event triggered when the Proxy configuration element changes.
    * @param {!{detail: {field: string, value: !CrOnc.ProxySettings}}} event
    *     The network-proxy change event.
    * @private
    */
   onProxyChange_: function(event) {
     if (!this.networkProperties)
       return;
     var field = event.detail.field;
     var value = event.detail.value;
     if (field != 'ProxySettings')
       return;
     var onc = this.getEmptyNetworkProperties_();
-    CrOnc.setProperty(onc, 'ProxySettings', /** @type {!Object} */(value));
+    CrOnc.setProperty(onc, 'ProxySettings', /** @type {!Object} */ (value));
     this.setNetworkProperties_(onc);
   },
 
   /**
    * @param {!CrOnc.NetworkProperties} properties
    * @return {boolean} True if the shared message should be shown.
    * @private
    */
   showShared_: function(properties) {
     return properties.Source == 'Device' || properties.Source == 'DevicePolicy';
   },
 
   /**
    * @param {!CrOnc.NetworkProperties} properties
    * @return {boolean} True if the AutoConnect checkbox should be shown.
    * @private
    */
   showAutoConnect_: function(properties) {
     return properties.Type != CrOnc.Type.ETHERNET &&
-           properties.Source != CrOnc.Source.NONE;
+        properties.Source != CrOnc.Source.NONE;
   },
 
   /**
    * @param {!CrOnc.NetworkProperties} properties
    * @return {!CrOnc.ManagedProperty|undefined} Managed AutoConnect property.
    * @private
    */
   getManagedAutoConnect_: function(properties) {
     return CrOnc.getManagedAutoConnect(properties);
   },
 
   /**
    * @param {!CrOnc.NetworkProperties} properties
    * @return {boolean} True if the prefer network checkbox should be shown.
    * @private
    */
   showPreferNetwork_: function(properties) {
     // TODO(stevenjb): Resolve whether or not we want to allow "preferred" for
     // properties.Type == CrOnc.Type.ETHERNET.
     return properties.Source != CrOnc.Source.NONE;
   },
 
   /**
-   * @param {boolean} preferNetwork
-   * @return {string} The icon to use for the preferred button.
+   * @param {!Array<string>} fields
+   * @return {boolean}
    * @private
    */
-  getPreferredIcon_: function(preferNetwork) {
-    return preferNetwork ? 'cr:star' : 'cr:star-border';
+  hasVisibleFields_: function(fields) {
+    for (let key of fields) {
+      let value = this.get(key, this.networkProperties);
+      if (value !== undefined && value !== '')
+        return true;
+    }
+    return false;
   },
 
   /**
+   * @param {!CrOnc.NetworkProperties} properties
+   * @return {boolean}
+   * @private
+   */
+  hasInfoFields_: function(properties) {
+    return this.hasVisibleFields_(this.getInfoFields_(properties));
+  },
+
+  /**
    * @param {!CrOnc.NetworkProperties} properties
    * @return {!Array<string>} The fields to display in the info section.
    * @private
    */
   getInfoFields_: function(properties) {
     /** @type {!Array<string>} */ var fields = [];
     if (!properties)
       return fields;
 
     if (properties.Type == CrOnc.Type.CELLULAR) {
-      fields.push('Cellular.ActivationState',
-                  'Cellular.RoamingState',
-                  'RestrictedConnectivity',
-                  'Cellular.ServingOperator.Name');
+      fields.push(
+          'Cellular.ActivationState', 'Cellular.RoamingState',
+          'RestrictedConnectivity', 'Cellular.ServingOperator.Name');
     }
     if (properties.Type == CrOnc.Type.VPN) {
       fields.push('VPN.Host', 'VPN.Type');
       if (properties.VPN.Type == 'OpenVPN')
         fields.push('VPN.OpenVPN.Username');
       else if (properties.VPN.Type == 'L2TP-IPsec')
         fields.push('VPN.L2TP.Username');
       else if (properties.VPN.Type == 'ThirdPartyVPN')
         fields.push('VPN.ThirdPartyVPN.ProviderName');
     }
     if (properties.Type == CrOnc.Type.WI_FI)
       fields.push('RestrictedConnectivity');
     if (properties.Type == CrOnc.Type.WI_MAX) {
       fields.push('RestrictedConnectivity', 'WiMAX.EAP.Identity');
     }
     return fields;
   },
 
   /**
    * @param {!CrOnc.NetworkProperties} properties
    * @return {!Array<string>} The fields to display in the Advanced section.
    * @private
    */
   getAdvancedFields_: function(properties) {
     /** @type {!Array<string>} */ var fields = [];
     if (!properties)
       return fields;
     fields.push('MacAddress');
     if (properties.Type == CrOnc.Type.CELLULAR) {
-      fields.push('Cellular.Carrier',
-                  'Cellular.Family',
-                  'Cellular.NetworkTechnology',
-                  'Cellular.ServingOperator.Code');
+      fields.push(
+          'Cellular.Carrier', 'Cellular.Family', 'Cellular.NetworkTechnology',
+          'Cellular.ServingOperator.Code');
     }
     if (properties.Type == CrOnc.Type.WI_FI) {
-      fields.push('WiFi.SSID',
-                  'WiFi.BSSID',
-                  'WiFi.Security',
-                  'WiFi.SignalStrength',
-                  'WiFi.Frequency');
+      fields.push(
+          'WiFi.SSID', 'WiFi.BSSID', 'WiFi.Security', 'WiFi.SignalStrength',
+          'WiFi.Frequency');
     }
     if (properties.Type == CrOnc.Type.WI_MAX)
       fields.push('WiFi.SignalStrength');
     return fields;
   },
 
   /**
    * @param {!CrOnc.NetworkProperties} properties
    * @return {!Array<string>} The fields to display in the device section.
    * @private
    */
   getDeviceFields_: function(properties) {
     /** @type {!Array<string>} */ var fields = [];
     if (!properties)
       return fields;
     if (properties.Type == CrOnc.Type.CELLULAR) {
-      fields.push('Cellular.HomeProvider.Name',
-                  'Cellular.HomeProvider.Country',
-                  'Cellular.HomeProvider.Code',
-                  'Cellular.Manufacturer',
-                  'Cellular.ModelID',
-                  'Cellular.FirmwareRevision',
-                  'Cellular.HardwareRevision',
-                  'Cellular.ESN',
-                  'Cellular.ICCID',
-                  'Cellular.IMEI',
-                  'Cellular.IMSI',
-                  'Cellular.MDN',
-                  'Cellular.MEID',
-                  'Cellular.MIN',
-                  'Cellular.PRLVersion');
+      fields.push(
+          'Cellular.HomeProvider.Name', 'Cellular.HomeProvider.Country',
+          'Cellular.HomeProvider.Code', 'Cellular.Manufacturer',
+          'Cellular.ModelID', 'Cellular.FirmwareRevision',
+          'Cellular.HardwareRevision', 'Cellular.ESN', 'Cellular.ICCID',
+          'Cellular.IMEI', 'Cellular.IMSI', 'Cellular.MDN', 'Cellular.MEID',
+          'Cellular.MIN', 'Cellular.PRLVersion');
     }
     return fields;
   },
 
   /**
    * @param {!CrOnc.NetworkProperties} properties
-   * @return {boolean} True if there are any advanced fields to display.
+   * @return {boolean}
    * @private
    */
   hasAdvancedOrDeviceFields_: function(properties) {
-    return this.getAdvancedFields_(properties).length > 0 ||
-           this.hasDeviceFields_(properties);
+    return this.hasAdvancedFields_(properties) ||
+        this.hasDeviceFields_(properties);
   },
 
   /**
    * @param {!CrOnc.NetworkProperties} properties
-   * @return {boolean} True if there are any device fields to display.
+   * @return {boolean}
+   * @private
+   */
+  hasAdvancedFields_: function(properties) {
+    return this.hasVisibleFields_(this.getAdvancedFields_(properties));
+  },
+
+  /**
+   * @param {!CrOnc.NetworkProperties} properties
+   * @return {boolean}
    * @private
    */
   hasDeviceFields_: function(properties) {
-    var fields = this.getDeviceFields_(properties);
-    return fields.length > 0;
+    return this.hasVisibleFields_(this.getDeviceFields_(properties));
   },
 
   /**
    * @param {!CrOnc.NetworkProperties} properties
    * @return {boolean} True if the network section should be shown.
    * @private
    */
   hasNetworkSection_: function(properties) {
     return properties.Type != CrOnc.Type.VPN;
   },
 
   /**
    * @param {!CrOnc.NetworkProperties} properties
    * @param {string} type The network type.
    * @return {boolean} True if the network type matches 'type'.
    * @private
    */
-  isType_: function(properties, type) {
-    return properties.Type == type;
-  },
+  isType_: function(properties, type) { return properties.Type == type; },

[dschuyler, 2016/07/26 01:18:23]

nit: I think it's wise to keep executable lines separate. It makes it easier to
set breakpoints in a debugger.

[stevenjb, 2016/07/26 16:47:17]

clang-format does this. It's a huge pita to format just format some bits by
hand. Fortunately I believe the JS debugger does let you set a breakpoint on
this line.

[dschuyler, 2016/07/26 19:19:46]

I setup a similar function and tried to set a breakpoint on it. The
breakpoint triggers during creation of the object (the Polymer({ ... }) that
encloses the function member). I was unable to set a breakpoint
on the 'return' line. Is there a trick to it that I'm missing?

[stevenjb, 2016/07/26 20:17:59]

Ugh, you're right, I swear that used to work.

After some experimentation, I discovered that I can add the following to a
.clang-format file in settings/ directory:

BasedOnStyle: Chromium
AllowShortFunctionsOnASingleLine: None

I will discuss on Friday's standup whether we should commit this (I'm missing
Wednesdays).

 
   /**
    * @param {!CrOnc.NetworkProperties} properties
    * @return {boolean} True if the Cellular SIM section should be shown.
    * @private
    */
   showCellularSim_: function(properties) {
     if (!properties || properties.Type != 'Cellular' || !properties.Cellular)
       return false;
     return properties.Cellular.Family == 'GSM';
@@ skipping 10 matching lines @@
    */
   allPropertiesMatch_: function(curValue, newValue) {
     for (let key in newValue) {
       if (newValue[key] != curValue[key])
         return false;
     }
     return true;
   }
 });
 })();