MD Settings: Use network name for detail page title

ui/webui/resources/cr_elements/network/cr_network_icon.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 rendering network icons based on ONC
  * state properties.
  */
 
 /**
@@ skipping 41 matching lines @@
 
   properties: {
     /**
      * If set, the ONC properties will be used to display the icon. This may
      * either be the complete set of NetworkProperties or the subset of
      * NetworkStateProperties.
      * @type {!CrOnc.NetworkProperties|!CrOnc.NetworkStateProperties|undefined}
      */
     networkState: {
       type: Object,
-      observer: 'networkStateChanged_'
+      observer: 'networkStateChanged_',
     },
 
     /**
      * If set, the ONC network type will be used to display the icon.
      * @type {?chrome.networkingPrivate.NetworkType}
      */
-    networkType:  {
+    networkType: {
       type: String,
       value: null,
-      observer: 'networkTypeChanged_'
+      observer: 'networkTypeChanged_',
     },
 
     /**
      * If true, the icon is part of a list of networks and may be displayed
      * differently, e.g. the disconnected image will never be shown for
      * list items.
      */
-    isListItem:  {
+    isListItem: {
       type: Boolean,
       value: false,
-      observer: 'isListItemChanged_'
+      observer: 'isListItemChanged_',
     },
 
     /** The icon type to use for the base image of the icon. */
     iconType_: {
       type: String,
-      value: 'ethernet'
+      value: 'ethernet',
     },
 
     /** Set to true to show a badge for roaming networks. */
     roaming_: {
       type: Boolean,
-      value: false
+      value: false,
     },
 
     /** Set to true to show a badge for secure networks. */
     secure_: {
       type: Boolean,
-      value: false
+      value: false,
     },
 
     /** Set to the name of a technology to show show a badge. */
     technology_: {
       type: String,
-      value: ''
+      value: '',
     },
   },
 
   /**
    * Polymer networkState changed method. Updates the icon based on the
    * network state.
    * @private
    */
   networkStateChanged_: function() {
     if (!this.networkState)
@@ skipping 68 matching lines @@
   setIcon_: function(params) {
     var icon = this.$.icon;
 
     var multiLevel = (this.iconType_ == 'wifi' || this.iconType_ == 'mobile');
 
     if (this.networkState && multiLevel) {
       this.setMultiLevelIcon_(params);
     } else {
       icon.classList.toggle('multi-level', multiLevel);
       icon.classList.toggle('level0', multiLevel);
+      icon.classList.toggle('level1', false);
+      icon.classList.toggle('level2', false);
+      icon.classList.toggle('level3', false);
+      icon.classList.toggle('level4', false);
     }
 
     this.setIconBadges_(params);
   },
 
   /**
    * Toggles icon classes based on strength and connecting properties.
    * |this.networkState| is expected to be specified.
    * @param {!NetworkIconParamType} params Set of params describing the icon.
    * @private
    */
   setMultiLevelIcon_: function(params) {
     // Set the strength or connecting properties.
     var networkState = this.networkState;
 
     var connectionState = networkState.ConnectionState;
     var connecting = false;
     var strength = -1;
     if (connectionState == CrOnc.ConnectionState.CONNECTING) {
       strength = 0;
       connecting = true;
-    } else if (connectionState == CrOnc.ConnectionState.CONNECTED ||
-               !params.showDisconnected) {
+    } else if (
+        connectionState == CrOnc.ConnectionState.CONNECTED ||
+        !params.showDisconnected) {
       strength = params.strength || 0;
     }
 
     var icon = this.$.icon;
     icon.classList.toggle('multi-level', true);
     icon.classList.toggle('connecting', connecting);
     icon.classList.toggle('level0', strength < 0);
     icon.classList.toggle('level1', strength >= 0 && strength <= 25);
     icon.classList.toggle('level2', strength > 25 && strength <= 50);
     icon.classList.toggle('level3', strength > 50 && strength <= 75);
     icon.classList.toggle('level4', strength > 75);
   },
 
   /**
    * Sets the icon badge visibility properties: roaming, secure, technology.
    * @param {!NetworkIconParamType} params Set of params describing the icon.
    * @private
    */
   setIconBadges_: function(params) {
     var networkState = this.networkState;
 
-    var type =
-        (params.showBadges && networkState) ? networkState.Type : '';
+    var type = (params.showBadges && networkState) ? networkState.Type : '';
     if (type == CrOnc.Type.WI_FI) {
       this.roaming_ = false;
       var security = networkState.WiFi ? networkState.WiFi.Security : '';
       this.secure_ = !!security && security != 'None';
       this.technology_ = '';
     } else if (type == CrOnc.Type.WI_MAX) {
       this.roaming_ = false;
       this.secure_ = false;
       this.technology_ = '4g';
     } else if (type == CrOnc.Type.CELLULAR && networkState.Cellular) {
@@ skipping 32 matching lines @@
           break;
       }
     } else {
       this.roaming_ = false;
       this.secure_ = false;
       this.technology_ = '';
     }
   },
 });
 })();