MD Settings: Internet: Move network lists to a subpage

chrome/browser/resources/settings/internet_page/internet_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-page' is the settings page containing internet
  * settings.
  */
 Polymer({
   is: 'settings-internet-page',
 
-  behaviors: [I18nBehavior],
+  behaviors: [I18nBehavior, settings.RouteObserverBehavior],
 
   properties: {
     /**
      * Interface for networkingPrivate calls. May be overriden by tests.
      * @type {NetworkingPrivate}
      */
     networkingPrivate: {
       type: Object,
       value: chrome.networkingPrivate,
     },
@@ skipping 17 matching lines @@
     /**
      * Highest priority connected network or null. Set by network-summary.
      * @type {?CrOnc.NetworkStateProperties|undefined}
      */
     defaultNetwork: {
       type: Object,
       notify: true,
     },
 
     /**
+     * Set by internet-subpage. Controls spinner visibility in subpage header.
+     * @private
+     */
+    showSpinner_: {
+      type: Boolean,
+      notify: true,

[michaelpg, 2017/03/01 23:27:59]

notify: true means it should propagate upwards; internet-subpage needs this but
not internet-page

as a rule of thumb it doesn't make sense on @private: it's encapsulated, and not
part of the contract our element has with its users

[stevenjb, 2017/03/02 00:25:17]

Done.

+    },
+
+    /**
+     * The network type for the networks subpage. Used in the subpage header.
+     * @private
+     */
+    subpageType_: String,
+
+    /**
      * The network type for the known networks subpage.
      * @private
      */
     knownNetworksType_: String,
 
     /**
      * Whether the 'Add connection' section is expanded.
      * @private
      */
     addConnectionExpanded_: {
@@ skipping 15 matching lines @@
         return [];
       }
     },
   },
 
   // Element event listeners
   listeners: {
     'device-enabled-toggled': 'onDeviceEnabledToggled_',
     'show-detail': 'onShowDetail_',
     'show-known-networks': 'onShowKnownNetworks_',
+    'show-networks': 'onShowNetworks_',
   },
 
   // chrome.networkingPrivate listeners
   /** @private {Function} */
   onExtensionAddedListener_: null,
 
   /** @private {Function} */
   onExtensionRemovedListener_: null,
 
   /** @private {Function} */
@@ skipping 28 matching lines @@
         assert(this.onExtensionAddedListener_));
     chrome.management.onEnabled.removeListener(
         assert(this.onExtensionAddedListener_));
     chrome.management.onUninstalled.removeListener(
         assert(this.onExtensionRemovedListener_));
     chrome.management.onDisabled.removeListener(
         assert(this.onExtensionDisabledListener_));
   },
 
   /**
+   * settings.RouteObserverBehavior
+   * @param {!settings.Route} route
+   * @protected
+   */
+  currentRouteChanged: function(route) {
+    if (route == settings.Route.INTERNET_NETWORKS) {
+      // Handle direct navigation to the networks page,
+      // e.g. chrome://settings/internet/networks?type=WiFi
+      var queryParams = settings.getQueryParameters();
+      var type = queryParams.get('type');

[michaelpg, 2017/03/01 23:27:59]

nit: instead of creating a variable, use queryParams.has('type')

[stevenjb, 2017/03/02 00:25:17]

But.... that requires two lookups! I know it's probably a hash, but the C++
developer in me bristles at the notion :)

+      if (type)
+        this.subpageType_ = type;
+    }
+  },
+
+  /**
    * Event triggered by a device state enabled toggle.
    * @param {!{detail: {enabled: boolean,
    *                    type: chrome.networkingPrivate.NetworkType}}} event
    * @private
    */
   onDeviceEnabledToggled_: function(event) {
     if (event.detail.enabled)
       this.networkingPrivate.enableNetworkType(event.detail.type);
     else
       this.networkingPrivate.disableNetworkType(event.detail.type);
   },
 
   /**
    * @param {!{detail: !CrOnc.NetworkStateProperties}} event
    * @private
    */
   onShowDetail_: function(event) {
     var params = new URLSearchParams;
     params.append('guid', event.detail.GUID);
     params.append('type', event.detail.Type);
     if (event.detail.Name)
       params.append('name', event.detail.Name);
     settings.navigateTo(settings.Route.NETWORK_DETAIL, params);
   },
 
   /**
    * @param {!{detail: {type: string}}} event
    * @private
    */
+  onShowNetworks_: function(event) {
+    var params = new URLSearchParams;
+    params.append('type', event.detail.Type);
+    this.subpageType_ = event.detail.Type;
+    settings.navigateTo(settings.Route.INTERNET_NETWORKS, params);
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  getNetworksPageTitle_: function() {
+    return this.i18n('OncType' + this.subpageType_);
+  },
+
+  /**
+   * @param {!{detail: {type: string}}} event
+   * @private
+   */
   onShowKnownNetworks_: function(event) {
     this.knownNetworksType_ = event.detail.type;
     settings.navigateTo(settings.Route.KNOWN_NETWORKS);
   },
 
   /**
    * Event triggered when the 'Add connections' div is tapped.
    * @param {Event} event
    * @private
    */
@@ skipping 102 matching lines @@
   },
 
   /**
    * @param {!chrome.networkingPrivate.ThirdPartyVPNProperties} provider
    * @return {string}
    */
   getAddThirdParrtyVpnLabel_: function(provider) {
     return this.i18n('internetAddThirdPartyVPN', provider.ProviderName);
   }
 });