Index: ui/webui/resources/cr_elements/network/cr_network_icon.js |
diff --git a/ui/webui/resources/cr_elements/network/cr_network_icon.js b/ui/webui/resources/cr_elements/network/cr_network_icon.js |
index b6662909ca0a7ec17e84d7025b52be7ede0fa7fc..4bccaf7dd08e9fd4da44e921a9c86acc0b0aadb3 100644 |
--- a/ui/webui/resources/cr_elements/network/cr_network_icon.js |
+++ b/ui/webui/resources/cr_elements/network/cr_network_icon.js |
@@ -17,281 +17,282 @@ |
var NetworkIconParamType; |
(function() { |
-/** @const {string} */ var RESOURCE_IMAGE_BASE = |
- 'chrome://resources/cr_elements/network/'; |
+ /** @const {string} */ var RESOURCE_IMAGE_BASE = |
+ 'chrome://resources/cr_elements/network/'; |
-/** @const {string} */ var RESOURCE_IMAGE_EXT = '.png'; |
+ /** @const {string} */ var RESOURCE_IMAGE_EXT = '.png'; |
-/** |
+ /** |
* Gets the icon type from the network type. This allows multiple types |
* (i.e. Cellular, WiMAX) to map to the same icon type (i.e. mobile). |
* @param {chrome.networkingPrivate.NetworkType} networkType |
* @return {string} The icon type: ethernet, wifi, mobile, or vpn. |
*/ |
-function getIconTypeFromNetworkType(networkType) { |
- if (!networkType || networkType == CrOnc.Type.ETHERNET) |
+ function getIconTypeFromNetworkType(networkType) { |
+ if (!networkType || networkType == CrOnc.Type.ETHERNET) |
+ return 'ethernet'; |
+ else if (networkType == CrOnc.Type.WI_FI) |
+ return 'wifi'; |
+ else if (networkType == CrOnc.Type.CELLULAR) |
+ return 'mobile'; |
+ else if (networkType == CrOnc.Type.WI_MAX) |
+ return 'mobile'; |
+ else if (networkType == CrOnc.Type.VPN) |
+ return 'vpn'; |
+ |
+ console.error('Unrecognized network type for icon: ' + networkType); |
return 'ethernet'; |
- else if (networkType == CrOnc.Type.WI_FI) |
- return 'wifi'; |
- else if (networkType == CrOnc.Type.CELLULAR) |
- return 'mobile'; |
- else if (networkType == CrOnc.Type.WI_MAX) |
- return 'mobile'; |
- else if (networkType == CrOnc.Type.VPN) |
- return 'vpn'; |
+ } |
- console.error('Unrecognized network type for icon: ' + networkType); |
- return 'ethernet'; |
-} |
+ /** |
+ * Polymer class definition for 'cr-network-icon'. |
+ */ |
+ Polymer({ |
+ is: 'cr-network-icon', |
-/** |
- * Polymer class definition for 'cr-network-icon'. |
- */ |
-Polymer({ |
- is: 'cr-network-icon', |
+ 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_', |
+ }, |
- 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_', |
- }, |
+ /** |
+ * If set, the ONC network type will be used to display the icon. |
+ * @type {?chrome.networkingPrivate.NetworkType} |
+ */ |
+ networkType: { |
+ type: String, |
+ value: null, |
+ observer: 'networkTypeChanged_', |
+ }, |
- /** |
- * If set, the ONC network type will be used to display the icon. |
- * @type {?chrome.networkingPrivate.NetworkType} |
- */ |
- networkType: { |
- type: String, |
- value: null, |
- 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: { |
+ type: Boolean, |
+ value: false, |
+ observer: 'isListItemChanged_', |
+ }, |
+ |
+ /** The icon type to use for the base image of the icon. */ |
+ iconType_: { |
+ type: String, |
+ value: 'ethernet', |
+ }, |
+ |
+ /** Set to true to show a badge for roaming networks. */ |
+ roaming_: { |
+ type: Boolean, |
+ value: false, |
+ }, |
+ |
+ /** Set to true to show a badge for secure networks. */ |
+ secure_: { |
+ type: Boolean, |
+ value: false, |
+ }, |
+ |
+ /** Set to the name of a technology to show show a badge. */ |
+ technology_: { |
+ type: String, |
+ value: '', |
+ }, |
}, |
/** |
- * 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. |
+ * Polymer networkState changed method. Updates the icon based on the |
+ * network state. |
+ * @private |
*/ |
- isListItem: { |
- type: Boolean, |
- value: false, |
- observer: 'isListItemChanged_', |
- }, |
+ networkStateChanged_: function() { |
+ if (!this.networkState) |
+ return; |
- /** The icon type to use for the base image of the icon. */ |
- iconType_: { |
- type: String, |
- value: 'ethernet', |
+ this.networkType = null; |
+ this.iconType_ = getIconTypeFromNetworkType(this.networkState.Type); |
+ var strength = CrOnc.getSignalStrength(this.networkState); |
+ var params = /** @type {NetworkIconParamType} */ { |
+ showBadges: true, |
+ showDisconnected: !this.isListItem, |
+ strength: strength |
+ }; |
+ this.setIcon_(params); |
}, |
- /** Set to true to show a badge for roaming networks. */ |
- roaming_: { |
- type: Boolean, |
- value: false, |
- }, |
+ /** |
+ * Polymer networkType changed method. Updates the icon based on the type |
+ * of network, showing a disconnected icon where appropriate and no badges. |
+ * @private |
+ */ |
+ networkTypeChanged_: function() { |
+ if (!this.networkType) |
+ return; |
- /** Set to true to show a badge for secure networks. */ |
- secure_: { |
- type: Boolean, |
- value: false, |
+ this.networkState = undefined; |
+ this.iconType_ = getIconTypeFromNetworkType(this.networkType); |
+ var params = /** @type {NetworkIconParamType} */ { |
+ showBadges: false, |
+ showDisconnected: true, |
+ strength: 0, |
+ }; |
+ this.setIcon_(params); |
}, |
- /** Set to the name of a technology to show show a badge. */ |
- technology_: { |
- type: String, |
- value: '', |
+ /** |
+ * Polymer isListItem changed method. |
+ * @private |
+ */ |
+ isListItemChanged_: function() { |
+ if (this.networkState) |
+ this.networkStateChanged_(); |
+ else if (this.networkType) |
+ this.networkTypeChanged_(); |
}, |
- }, |
- |
- /** |
- * Polymer networkState changed method. Updates the icon based on the |
- * network state. |
- * @private |
- */ |
- networkStateChanged_: function() { |
- if (!this.networkState) |
- return; |
- |
- this.networkType = null; |
- this.iconType_ = getIconTypeFromNetworkType(this.networkState.Type); |
- var strength = CrOnc.getSignalStrength(this.networkState); |
- var params = /** @type {NetworkIconParamType} */ { |
- showBadges: true, |
- showDisconnected: !this.isListItem, |
- strength: strength |
- }; |
- this.setIcon_(params); |
- }, |
- |
- /** |
- * Polymer networkType changed method. Updates the icon based on the type |
- * of network, showing a disconnected icon where appropriate and no badges. |
- * @private |
- */ |
- networkTypeChanged_: function() { |
- if (!this.networkType) |
- return; |
- this.networkState = undefined; |
- this.iconType_ = getIconTypeFromNetworkType(this.networkType); |
- var params = /** @type {NetworkIconParamType} */ { |
- showBadges: false, |
- showDisconnected: true, |
- strength: 0, |
- }; |
- this.setIcon_(params); |
- }, |
- |
- /** |
- * Polymer isListItem changed method. |
- * @private |
- */ |
- isListItemChanged_: function() { |
- if (this.networkState) |
- this.networkStateChanged_(); |
- else if (this.networkType) |
- this.networkTypeChanged_(); |
- }, |
- |
- /** |
+ /** |
* Returns the url for an image based on identifier |id|. |
* @param {string} id The identifier describing the image. |
* @return {string} The url to use for the image 'src' property. |
* @private |
*/ |
- toImageSrc_: function(id) { |
- return id ? RESOURCE_IMAGE_BASE + id + RESOURCE_IMAGE_EXT : ''; |
- }, |
+ toImageSrc_: function(id) { |
+ return id ? RESOURCE_IMAGE_BASE + id + RESOURCE_IMAGE_EXT : ''; |
+ }, |
- /** |
+ /** |
* Returns the url for a badge image based on identifier |id|. |
* @param {string} id The identifier describing the badge. |
* @return {string} The url to use for the badge image 'src' property. |
* @private |
*/ |
- toBadgeImageSrc_: function(id) { |
- return id ? this.toImageSrc_('badge_' + id) : ''; |
- }, |
+ toBadgeImageSrc_: function(id) { |
+ return id ? this.toImageSrc_('badge_' + id) : ''; |
+ }, |
- /** |
- * Sets the icon and badge based on the current state and |strength|. |
- * @param {!NetworkIconParamType} params Set of params describing the icon. |
- * @private |
- */ |
- setIcon_: function(params) { |
- var icon = this.$.icon; |
+ /** |
+ * Sets the icon and badge based on the current state and |strength|. |
+ * @param {!NetworkIconParamType} params Set of params describing the icon. |
+ * @private |
+ */ |
+ setIcon_: function(params) { |
+ var icon = this.$.icon; |
- var multiLevel = (this.iconType_ == 'wifi' || this.iconType_ == 'mobile'); |
+ 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); |
- } |
+ 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); |
- }, |
+ 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; |
+ /** |
+ * 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) { |
- strength = params.strength || 0; |
- } |
+ 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) { |
+ 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); |
- }, |
+ 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; |
+ /** |
+ * 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 : ''; |
- 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) { |
- this.roaming_ = |
- networkState.Cellular.RoamingState == CrOnc.RoamingState.ROAMING; |
- this.secure_ = false; |
- var oncTechnology = networkState.Cellular.NetworkTechnology; |
- switch (oncTechnology) { |
- case CrOnc.NetworkTechnology.CDMA1XRTT: |
- this.technology_ = '1x'; |
- break; |
- case CrOnc.NetworkTechnology.EDGE: |
- this.technology_ = 'edge'; |
- break; |
- case CrOnc.NetworkTechnology.EVDO: |
- this.technology_ = 'evdo'; |
- break; |
- case CrOnc.NetworkTechnology.GPRS: |
- case CrOnc.NetworkTechnology.GSM: |
- this.technology_ = 'gsm'; |
- break; |
- case CrOnc.NetworkTechnology.HSPA: |
- this.technology_ = 'hspa'; |
- break; |
- case CrOnc.NetworkTechnology.HSPA_PLUS: |
- this.technology_ = 'hspa_plus'; |
- break; |
- case CrOnc.NetworkTechnology.LTE: |
- this.technology_ = 'lte'; |
- break; |
- case CrOnc.NetworkTechnology.LTE_ADVANCED: |
- this.technology_ = 'lte_advanced'; |
- break; |
- case CrOnc.NetworkTechnology.UMTS: |
- this.technology_ = '3g'; |
- break; |
+ 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) { |
+ this.roaming_ = |
+ networkState.Cellular.RoamingState == CrOnc.RoamingState.ROAMING; |
+ this.secure_ = false; |
+ var oncTechnology = networkState.Cellular.NetworkTechnology; |
+ switch (oncTechnology) { |
+ case CrOnc.NetworkTechnology.CDMA1XRTT: |
+ this.technology_ = '1x'; |
+ break; |
+ case CrOnc.NetworkTechnology.EDGE: |
+ this.technology_ = 'edge'; |
+ break; |
+ case CrOnc.NetworkTechnology.EVDO: |
+ this.technology_ = 'evdo'; |
+ break; |
+ case CrOnc.NetworkTechnology.GPRS: |
+ case CrOnc.NetworkTechnology.GSM: |
+ this.technology_ = 'gsm'; |
+ break; |
+ case CrOnc.NetworkTechnology.HSPA: |
+ this.technology_ = 'hspa'; |
+ break; |
+ case CrOnc.NetworkTechnology.HSPA_PLUS: |
+ this.technology_ = 'hspa_plus'; |
+ break; |
+ case CrOnc.NetworkTechnology.LTE: |
+ this.technology_ = 'lte'; |
+ break; |
+ case CrOnc.NetworkTechnology.LTE_ADVANCED: |
+ this.technology_ = 'lte_advanced'; |
+ break; |
+ case CrOnc.NetworkTechnology.UMTS: |
+ this.technology_ = '3g'; |
+ break; |
+ } |
+ } else { |
+ this.roaming_ = false; |
+ this.secure_ = false; |
+ this.technology_ = ''; |
} |
- } else { |
- this.roaming_ = false; |
- this.secure_ = false; |
- this.technology_ = ''; |
- } |
- }, |
-}); |
+ }, |
+ }); |
})(); |