Implement md-settings network lists.

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.
+ */
+(function() {
+
+/** @typedef {chrome.networkingPrivate.DeviceStateProperties} */
+var DeviceStateProperties;
+
+Polymer('cr-network-summary-item', {
+  publish: {
+    /**
+     * True if the list is expanded.
+     *
+     * @attribute expanded
+     * @type boolean
+     * @default false
+     */
+    expanded: false,
+
+    /**
+     * The maximum height in pixels for the list of networks.
+     *
+     * @attribute maxHeight
+     * @type number
+     * @default 1000

[Jeremy Klein, 2015/04/23 18:21:15]

If all actual uses are 200, why not make that the default?

[stevenjb, 2015/04/24 01:25:25]

I guess that's fine here. I didn't want to bake that into cr_network_list, but
since this is already specific to this page, that seems fine. Done.

+     */
+    maxHeight: 1000,
+
+    /**
+     * Device state for the network type.
+     *
+     * @attribute deviceState
+     * @type {DeviceStateProperties}
+     * @default null
+     */
+    deviceState: null,
+
+    /**
+     * Network state for the active network.
+     *
+     * @attribute networkState
+     * @type {CrOncDataElement}
+     * @default null
+     */
+    networkState: null,
+
+    /**
+     * List of all network state data for the network type.
+     *
+     * @attribute networkStateList
+     * @type {Array<CrOncDataElement>}
+     * @default null
+     */
+    networkStateList: null,
+  },
+
+  /**
+   * Polymer expanded changed method.
+   */
+  expandedChanged: function() {
+    var type = this.deviceState ? this.deviceState.Type : '';
+    this.fire('expanded', {expanded: this.expanded, type: type});
+  },
+
+  /**
+   * Polymer deviceState changed method.
+   */
+  deviceStateChanged: function() {
+    this.updateSelectable_();
+    if (!this.deviceIsEnabled(this.deviceState))
+      this.expanded = false;
+  },
+
+  /**
+   * Polymer networkStateList changed method.
+   */
+  networkStateListChanged: function() {
+    this.updateSelectable_();
+  },
+
+  /**
+   * @param {DeviceStateProperties} deviceState The state of a device.

[Jeremy Klein, 2015/04/23 18:21:15]

nit: For nullable params here and elsewhere, please add a leading ? to be
explicit.

See:
https://docs.google.com/document/d/1Guyc0gizRp3Qd5i0LHXQ7uMaowfEvvXe-tY7hTM5V...

[stevenjb, 2015/04/24 01:25:25]

Ugh. Michael suggested elsewhere that ? wasn't necessary for objects. While !
makes sense, having ? everywhere seems tedious to me. Either way, we should come
to an agreement on this.

[Jeremy Klein, 2015/04/24 02:55:28]

?s are strongly encouraged in Google3 by John Lenz so I'm definitely in favor of
putting them in to be explicit. Otherwise you may have just forgotten a '!'
(which happens pretty often). That being said, this isn't in the style guide so
I won't block on it. Just my two-cents.

[stevenjb, 2015/04/24 19:03:18]

Done.

[michaelpg, 2015/04/24 19:35:37]

We are not in google3 and we should not be referencing internal Google documents
like this.

I mentioned ? wasn't necessary for objects because it's not, and because it's
not consistent with how we annotate the rest of Chrome JS. You could make the
same argument for including ! for all non-nullable types including booleans,
numbers, strings and functions.

That said, this isn't the hill I want to die on :-)

[Jeremy Klein, 2015/04/24 20:26:07]

Enforcing ! for non-nullable types isn't exactly the same because it's less
likely for there to be mistakes as a result of forgetting a ?. Worst case, if
something *should* be nullable and isn't marked as such, the user would get a
compile-time error when a nullable value is passed to that function.
Accidentally leaving off a '!' for Objects is worse because it means you'll get
*less* checking from the compiler and could accidentally pass null in a case
where you don't want it. Does that make sense?

+   * @private

[Jeremy Klein, 2015/04/23 18:21:15]

nit here and below: Our convention most places is to put @private last.

[stevenjb, 2015/04/24 01:25:25]

Done.

+   * @return {boolean} Whether or not the device state is enabled.
+   */
+  deviceIsEnabled: function(deviceState) {

[Jeremy Klein, 2015/04/23 18:21:15]

Here and elsewhere: trailing _ on private functions.

[stevenjb, 2015/04/24 01:25:25]

I'll change all data binding methods if we decide to do so universally.

+    return deviceState && deviceState.State == 'Enabled';
+  },
+
+  /**
+   * @param {DeviceStateProperties} deviceState The device state.
+   * @private
+   * @return {boolean} Whether or not to show the UI to enable the network.
+   */
+  enableIsVisible: function(deviceState) {
+    return deviceState &&
+        deviceState.Type != 'Ethernet' && deviceState.Type != 'VPN';
+  },
+
+  /**
+   * @param {DeviceStateProperties} deviceState The device state.
+   * @param {Array<CrOncDataElement>|undefined} netowrkList A list of networks.

[Jeremy Klein, 2015/04/23 18:21:15]

Can the networkList be null or undefined? If it can only be undefined, you can
add a '!'. Also if the CrOncDataElements are non-null, add a '!'.

[Jeremy Klein, 2015/04/23 18:21:15]

s/netowrkList/networkList/

[stevenjb, 2015/04/24 01:25:25]

It can be null, not undefined. Fixed.

+   * @private
+   * @return {boolean} Whether or not to show the UI to expand the list.
+   */
+  expandIsVisible: function(deviceState, networkList) {
+    if (!this.deviceIsEnabled(deviceState) || !networkList)
+      return false;
+    var minLength = (this.type == 'WiFi') ? 1 : 2;
+    return networkList.length >= minLength;
+  },
+
+  /**
+   * Event triggered when the details div is clicked on.
+   * @param {Object} event The enable button event.
+   * @private
+   */
+  onDetailsClicked: 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);
+    event.stopPropagation();

[Jeremy Klein, 2015/04/23 18:21:15]

Why do we need to stop propagation in this case?

[stevenjb, 2015/04/24 01:25:25]

Probably here we don't, but I got bit by the buttons within the div and I
decided I would rather be safe throughout.

[Jeremy Klein, 2015/04/24 02:55:29]

We really shouldn't be adding unnecessary stopPropagations because it breaks the
normal expected event bubbling process. I've seen some really hard to track down
bugs caused by this. We should have a very good clear reason for all of these.

[stevenjb, 2015/04/24 19:03:19]

Done.

+  },
+
+  /**
+   * Event triggered when a cr-network-item is the network list is selected.
+   * @param {{detail: CrNetworkListItem}} event
+   */
+  onListItemSelected: function(event) {
+    var onc = event.detail;
+    this.fire('selected', onc);
+    event.stopPropagation();
+  },
+
+  /**
+   * Event triggered the enable button is toggled.

[michaelpg, 2015/04/23 02:16:29]

nit: "when"

[stevenjb, 2015/04/24 01:25:25]

Done.

+   * @param {Object} event The enable button event.
+   * @private
+   */
+  onEnableToggled: function(event) {
+    var deviceIsEnabled = this.deviceIsEnabled(this.deviceState);
+    var type = this.deviceState ? this.deviceState.Type : '';
+    this.fire('toggle-enabled', {enabled: !deviceIsEnabled, type: type});
+    event.stopPropagation();
+  },
+
+  /**
+   * Called whenever the 'selectable' state might change.
+   */
+  updateSelectable_: function() {
+    // TODO(stevenjb): Make any actionalble item selectable.

[Jeremy Klein, 2015/04/23 18:21:15]

"actionable"

[stevenjb, 2015/04/24 01:25:25]

Done.

+    var selectable =
+          this.expandIsVisible(this.deviceState, this.networkStateList);
+    this.$.details.classList.toggle('selectable', selectable);
+  },
+});
+})();