MD Settings: Internet: Move network lists to a subpage

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

+// Copyright 2017 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 informaiton about WiFi,
+ * WiMAX, or virtual networks.
+ */
+
+/** @typedef {chrome.networkingPrivate.DeviceStateProperties} */
+var DeviceStateProperties;
+
+Polymer({
+  is: 'settings-internet-subpage',
+
+  behaviors: [
+    CrPolicyNetworkBehavior,
+    settings.RouteObserverBehavior,
+    I18nBehavior,
+  ],
+
+  properties: {
+    /**
+     * Highest priority connected network or null. Set by network-summary.
+     * @type {?CrOnc.NetworkStateProperties|undefined}
+     */
+    defaultNetwork: Object,
+
+    /**
+     * Device state for the network type.
+     * @type {?DeviceStateProperties|undefined}
+     */
+    deviceState: Object,
+
+    /** @type {!chrome.networkingPrivate.GlobalPolicy|undefined} */
+    globalPolicy: Object,
+
+    /**
+     * List of third party VPN providers.
+     * @type
+     *   {!Array<!chrome.networkingPrivate.ThirdPartyVPNProperties>|undefined}
+     */
+    thirdPartyVpnProviders: Array,
+
+    /**
+     * Interface for networkingPrivate calls, passed from internet_page.
+     * @type {!NetworkingPrivate}
+     */
+    networkingPrivate: Object,
+
+    showSpinner: {
+      type: Boolean,
+      notify: true,
+      value: false,
+    },
+
+    /**
+     * List of all network state data for the network type.
+     * @private {!Array<!CrOnc.NetworkStateProperties>}
+     */
+    networkStateList_: {
+      type: Array,
+      value: function() {
+        return [];
+      },
+    },
+
+    /**
+     * Dictionary of lists of network states for third party VPNs.
+     * @private {!Object<!Array<!CrOnc.NetworkStateProperties>>}
+     */
+    thirdPartyVpns_: {
+      type: Object,
+      value: function() {
+        return {};
+      },
+    },
+  },
+
+  observers: ['updateScanning_(networkingPrivate, deviceState)'],
+
+  /** @private {number|null} */
+  scanIntervalId_: null,
+
+  /**
+   * Listener function for chrome.networkingPrivate.onNetworkListChanged event.
+   * @type {?function(!Array<string>)}
+   * @private
+   */
+  networkListChangedListener_: null,
+
+  /**
+   * settings.RouteObserverBehavior
+   * @param {!settings.Route} route
+   * @protected
+   */
+  currentRouteChanged: function(route) {
+    if (route != settings.Route.INTERNET_NETWORKS) {
+      this.stopScanning_();
+      return;
+    }
+    // Clear any stale data.
+    this.networkStateList_ = [];
+    this.thirdPartyVpns_ = {};
+    // Request the list of networks and start scanning of necessary.
+    this.getNetworkStateList_();
+    this.updateScanning_();
+  },
+
+  /** override */
+  attached: function() {
+    this.scanIntervalId_ = null;
+
+    this.networkListChangedListener_ = this.networkListChangedListener_ ||
+        this.onNetworkListChangedEvent_.bind(this);
+    this.networkingPrivate.onNetworkListChanged.addListener(
+        this.networkListChangedListener_);
+  },
+
+  /** override */
+  detached: function() {
+    this.stopScanning_();
+    this.networkingPrivate.onNetworkListChanged.removeListener(
+        assert(this.networkListChangedListener_));
+  },
+
+  /** @private */
+  updateScanning_: function() {
+    if (!this.deviceState)
+      return;
+    if (this.deviceState.Type != CrOnc.Type.WI_FI) {
+      // deviceState probably changed, re-request networks.
+      this.getNetworkStateList_();
+      return;
+    }
+    this.showSpinner = !!this.deviceState.Scanning;
+    this.startScanning_();
+  },
+
+  /** @private */
+  startScanning_: function() {
+    if (this.scanIntervalId_ != null)
+      return;
+    /** @const */ var INTERVAL_MS = 10 * 1000;
+    this.networkingPrivate.requestNetworkScan();
+    this.scanIntervalId_ = window.setInterval(function() {
+      this.networkingPrivate.requestNetworkScan();
+    }.bind(this), INTERVAL_MS);
+  },
+
+  /** @private */
+  stopScanning_: function() {
+    if (this.scanIntervalId_ == null)
+      return;
+    window.clearInterval(this.scanIntervalId_);
+    this.scanIntervalId_ = null;
+  },
+
+  /**
+   * networkingPrivate.onNetworkListChanged event callback.
+   * @private
+   */
+  onNetworkListChangedEvent_: function() {
+    this.getNetworkStateList_();
+  },
+
+  /** @private */
+  getNetworkStateList_: function() {
+    if (!this.deviceState)
+      return;
+    var filter = {
+      networkType: this.deviceState.Type,
+      visible: true,
+      configured: false
+    };
+    this.networkingPrivate.getNetworks(filter, function(networkStates) {
+      if (this.deviceState.Type != CrOnc.Type.VPN) {
+        this.networkStateList_ = networkStates;
+        return;
+      }
+      // For VPNs, separate out third party VPNs.
+      var networkStateList = [];
+      var thirdPartyVpns = {};
+      for (var i = 0; i < networkStates.length; ++i) {
+        var state = networkStates[i];
+        var providerType = state.VPN && state.VPN.ThirdPartyVPN &&
+            state.VPN.ThirdPartyVPN.ProviderName;
+        if (providerType) {
+          thirdPartyVpns[providerType] = thirdPartyVpns[providerType] || [];
+          thirdPartyVpns[providerType].push(state);
+        } else {
+          networkStateList.push(state);
+        }
+      }
+      this.networkStateList_ = networkStateList;
+      this.thirdPartyVpns_ = thirdPartyVpns;
+    }.bind(this));
+  },
+
+  /**
+   * @param {!DeviceStateProperties|undefined} deviceState
+   * @return {boolean} Whether or not the device state is enabled.
+   * @private
+   */
+  deviceIsEnabled_: function(deviceState) {
+    return !!deviceState &&
+        deviceState.State == chrome.networkingPrivate.DeviceStateType.ENABLED;
+  },
+
+  /**
+   * @param {!DeviceStateProperties|undefined} deviceState
+   * @param {string} onstr
+   * @param {string} offstr
+   * @return {string}
+   * @private
+   */
+  getOffOnString_: function(deviceState, onstr, offstr) {
+    return this.deviceIsEnabled_(deviceState) ? onstr : offstr;
+  },
+
+  /**
+   * @param {?DeviceStateProperties} deviceState
+   * @return {boolean}
+   * @private
+   */
+  enableToggleIsVisible_: function(deviceState) {
+    return !!deviceState && deviceState.Type != CrOnc.Type.ETHERNET &&
+        deviceState.Type != CrOnc.Type.VPN;
+  },
+
+  /**
+   * @param {?DeviceStateProperties} deviceState
+   * @return {boolean}
+   * @private
+   */
+  enableToggleIsEnabled_: function(deviceState) {
+    return !!deviceState &&
+        deviceState.State !=
+        chrome.networkingPrivate.DeviceStateType.PROHIBITED;
+  },
+
+  /**
+   * @param {!DeviceStateProperties} deviceState
+   * @return {string}
+   * @private
+   */
+  getToggleA11yString_: function(deviceState) {
+    if (!this.enableToggleIsVisible_(deviceState))
+      return '';
+    switch (deviceState.Type) {
+      case CrOnc.Type.CELLULAR:
+        return this.i18n('internetToggleMobileA11yLabel');
+      case CrOnc.Type.WI_FI:
+        return this.i18n('internetToggleWiFiA11yLabel');
+      case CrOnc.Type.WI_MAX:
+        return this.i18n('internetToggleWiMAXA11yLabel');
+    }
+    assertNotReached();
+    return '';
+  },
+
+  /**
+   * @param {!chrome.networkingPrivate.ThirdPartyVPNProperties} vpnState
+   * @return {string}
+   * @private
+   */
+  getAddThirdPartyVpnA11yString: function(vpnState) {
+    return this.i18n('internetAddThirdPartyVPN', vpnState.ProviderName);
+  },
+
+  /**
+   * @param {!chrome.networkingPrivate.GlobalPolicy} globalPolicy
+   * @return {boolean}
+   * @private
+   */
+  allowAddConnection_: function(globalPolicy) {
+    return globalPolicy && !globalPolicy.AllowOnlyPolicyNetworksToConnect;
+  },
+
+  /**
+   * @param {!DeviceStateProperties} deviceState
+   * @param {!chrome.networkingPrivate.GlobalPolicy} globalPolicy
+   * @return {boolean}
+   * @private
+   */
+  showAddButton_: function(deviceState, globalPolicy) {
+    if (!deviceState || deviceState.Type != CrOnc.Type.WI_FI)
+      return false;
+    return this.allowAddConnection_(globalPolicy);
+  },
+
+  /** @private */
+  onAddButtonTap_: function() {
+    chrome.send('addNetwork', [this.deviceState.Type]);
+  },
+
+  /**
+   * @param {!{model:
+   *            !{item: !chrome.networkingPrivate.ThirdPartyVPNProperties},
+   *        }} event
+   * @private
+   */
+  onAddThirdPartyVpnTap_: function(event) {
+    var provider = event.model.item;
+    chrome.send('addNetwork', [CrOnc.Type.VPN, provider.ExtensionID]);
+  },
+
+  /**
+   * @param {!DeviceStateProperties} deviceState
+   * @return {boolean}
+   * @private
+   */
+  knownNetworksIsVisible_: function(deviceState) {
+    return deviceState && deviceState.Type == CrOnc.Type.WI_FI;
+  },
+
+  /**
+   * 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) {
+    assert(this.deviceState);
+    var deviceIsEnabled = this.deviceIsEnabled_(this.deviceState);
+    var type = this.deviceState ? this.deviceState.Type : '';
+    this.fire(
+        'device-enabled-toggled', {enabled: !deviceIsEnabled, type: type});
+    // Make sure this does not propagate to onDetailsTap_.
+    event.stopPropagation();
+  },
+
+  /**
+   * @param {!Object<!Array<!CrOnc.NetworkStateProperties>>} thirdPartyVpns
+   * @param {!chrome.networkingPrivate.ThirdPartyVPNProperties} vpnState
+   * @return {!Array<!CrOnc.NetworkStateProperties>}
+   * @private
+   */
+  getThirdPartyVpnNetworks_: function(thirdPartyVpns, vpnState) {
+    return thirdPartyVpns[vpnState.ProviderName] || [];
+  },
+
+  /**
+   * @param {!Object<!Array<!CrOnc.NetworkStateProperties>>} thirdPartyVpns
+   * @param {!chrome.networkingPrivate.ThirdPartyVPNProperties} vpnState
+   * @return {boolean}
+   * @private
+   */
+  haveThirdPartyVpnNetwork_: function(thirdPartyVpns, vpnState) {
+    var list = this.getThirdPartyVpnNetworks_(thirdPartyVpns, vpnState);
+    return !!list.length;
+  },
+
+  /**
+   * Event triggered when a network list item is selected.
+   * @param {!{target: HTMLElement, detail: !CrOnc.NetworkStateProperties}} e
+   * @private
+   */
+  onNetworkSelected_: function(e) {
+    assert(this.globalPolicy);
+    assert(this.defaultNetwork !== undefined);
+    var state = e.detail;
+    e.target.blur();
+    if (this.canConnect_(state, this.globalPolicy, this.defaultNetwork)) {
+      this.connectToNetwork_(state);
+      return;
+    }
+    this.fire('show-detail', state);
+  },
+
+  /**
+   * Determines whether or not a network state can be connected to.
+   * @param {!CrOnc.NetworkStateProperties} state The network state.
+   * @param {!chrome.networkingPrivate.GlobalPolicy} globalPolicy
+   * @param {?CrOnc.NetworkStateProperties} defaultNetwork
+   * @private
+   */
+  canConnect_: function(state, globalPolicy, defaultNetwork) {
+    if (state.Type == CrOnc.Type.WI_FI && globalPolicy &&
+        globalPolicy.AllowOnlyPolicyNetworksToConnect &&
+        !this.isPolicySource(state.Source)) {
+      return false;
+    }
+    if (state.Type == CrOnc.Type.VPN &&
+        (!defaultNetwork ||
+         defaultNetwork.ConnectionState != CrOnc.ConnectionState.CONNECTED)) {
+      return false;
+    }
+    return state.ConnectionState == CrOnc.ConnectionState.NOT_CONNECTED;
+  },
+
+  /**
+   * Handles UI requests to connect to a network.
+   * TODO(stevenjb): Handle Cellular activation, etc.
+   * @param {!CrOnc.NetworkStateProperties} state The network state.
+   * @private
+   */
+  connectToNetwork_: function(state) {
+    this.networkingPrivate.startConnect(state.GUID, function() {
+      if (chrome.runtime.lastError) {
+        var message = chrome.runtime.lastError.message;
+        if (message != 'connecting') {
+          console.error(
+              'Unexpected networkingPrivate.startConnect error: ' + message +
+              'For: ' + state.GUID);
+        }
+      }
+    });
+  },
+
+  /**
+   * @param {*} lhs
+   * @param {*} rhs
+   * @return {boolean}
+   */
+  isEqual_: function(lhs, rhs) {
+    return lhs === rhs;
+  },
+});