MD Settings: Use network name for detail page title

chrome/browser/resources/settings/internet_page/network_summary.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 a summary of network states
  * by type: Ethernet, WiFi, Cellular, WiMAX, and VPN.
  */
 
 /** @typedef {chrome.networkingPrivate.DeviceStateProperties} */
@@ skipping 317 matching lines @@
         newDeviceStates[state.Type] = state;
     } else {
       newDeviceStates = this.deviceStates;
     }
 
     // Clear any current networks.
     var activeNetworkStatesByType =
         /** @type {!Map<string, !CrOnc.NetworkStateProperties>} */ (new Map);
 
     // Complete list of states by type.
     /** @type {!NetworkStateListObject} */ var newNetworkStateLists = {

[dschuyler, 2016/08/30 00:50:01]

Optional: I'm used to seeing the var on the
line after the type comment (unless it's a 
cast).

[stevenjb, 2016/08/30 15:36:49]

This is how clang formats it. I do not argue with clang.

       Ethernet: [],
       WiFi: [],
       Cellular: [],
       WiMAX: [],
       VPN: [],
     };
 
     var firstConnectedNetwork = null;
     networkStates.forEach(function(state) {
       let type = state.Type;
@@ skipping 22 matching lines @@
     var newActiveNetworkStates = [];
     this.activeNetworkIds_ = new Set;
     for (let type in newDeviceStates) {
       var state = activeNetworkStatesByType.get(type) || {GUID: '', Type: type};
       newActiveNetworkStates.push(state);
       this.activeNetworkIds_.add(state.GUID);
     }
 
     this.deviceStates = newDeviceStates;
     this.networkStateLists = newNetworkStateLists;
-    // Set activeNetworkStates last to rebuild the dom-repeat.
+
+    // Sort and set activeNetworkStates last to rebuild the dom-repeat.
+    var networkTypeSortOrder = [
+      CrOnc.Type.ETHERNET, CrOnc.Type.WI_FI, CrOnc.Type.CELLULAR,
+      CrOnc.Type.WI_MAX, CrOnc.Type.VPN
+    ];
+    newActiveNetworkStates.sort(function(a, b) {
+      return networkTypeSortOrder.indexOf(a.Type) -
+          networkTypeSortOrder.indexOf(a.Type);
+    });

[dschuyler, 2016/08/30 00:50:01]

This looks like the same sort order could be gained
from newNetworkStateLists by concatenating the arrays
akin to 
foo = newNetworkStateLists[CrOnc.Type.ETHERNET].concat( 
    newNetworkStateLists[CrOnc.Type.WI_FI]).concat(   
    newNetworkStateLists[CrOnc.Type.CELLULAR]).concat(   
    newNetworkStateLists[CrOnc.Type.WI_MAX]).concat(   
    newNetworkStateLists[CrOnc.Type.VPN]);
Which seems like it should be more efficient (though
I haven't timed them). The sort is averaging ~7 function
calls per item and function calls are generally slow
in JS.

(My concern may also be tainted by my experiences 
commuting on the bus where hundreds networks will come 
and go while driving down the street).

[dschuyler, 2016/08/30 00:55:37]

Whoops that ~7 is mixing JS calls and array iterations.
That's wrong. Still, avoiding a sort is likely to be good.

[stevenjb, 2016/08/30 15:36:49]

The sort is likely to be trivial compared to the moving of data that goes on in
this (effectively infrequent) update. Also, the array length is the number of
network *types* not the number of networks.

The problem with using concat is that some types will not exist, so every type
would have to tested, otherwise we need to deal with undefined entries in the
array.

     this.activeNetworkStates = newActiveNetworkStates;
   },
 });