OLD | NEW |
| (Empty) |
1 // Copyright 2015 The Chromium Authors. All rights reserved. | |
2 // Use of this source code is governed by a BSD-style license that can be | |
3 // found in the LICENSE file. | |
4 | |
5 /** | |
6 * @fileoverview Polymer element for rendering network icons based on ONC | |
7 * state properties. | |
8 */ | |
9 | |
10 /** | |
11 * @typedef {{ | |
12 * showBadges: boolean, | |
13 * showDisconnected: boolean, | |
14 * strength: number | |
15 * }} | |
16 */ | |
17 var NetworkIconParamType; | |
18 | |
19 (function() { | |
20 /** @const {string} */ var RESOURCE_IMAGE_BASE = | |
21 'chrome://resources/cr_elements/network/'; | |
22 | |
23 /** @const {string} */ var RESOURCE_IMAGE_EXT = '.png'; | |
24 | |
25 /** | |
26 * Gets the icon type from the network type. This allows multiple types | |
27 * (i.e. Cellular, WiMAX) to map to the same icon type (i.e. mobile). | |
28 * @param {chrome.networkingPrivate.NetworkType} networkType | |
29 * @return {string} The icon type: ethernet, wifi, mobile, or vpn. | |
30 */ | |
31 function getIconTypeFromNetworkType(networkType) { | |
32 if (!networkType || networkType == CrOnc.Type.ETHERNET) | |
33 return 'ethernet'; | |
34 else if (networkType == CrOnc.Type.WI_FI) | |
35 return 'wifi'; | |
36 else if (networkType == CrOnc.Type.CELLULAR) | |
37 return 'mobile'; | |
38 else if (networkType == CrOnc.Type.WI_MAX) | |
39 return 'mobile'; | |
40 else if (networkType == CrOnc.Type.VPN) | |
41 return 'vpn'; | |
42 | |
43 console.error('Unrecognized network type for icon: ' + networkType); | |
44 return 'ethernet'; | |
45 } | |
46 | |
47 /** | |
48 * Polymer class definition for 'cr-network-icon'. | |
49 * @element cr-network-icon | |
50 */ | |
51 Polymer({ | |
52 is: 'cr-network-icon', | |
53 | |
54 properties: { | |
55 /** | |
56 * If set, the ONC properties will be used to display the icon. This may | |
57 * either be the complete set of NetworkProperties or the subset of | |
58 * NetworkStateProperties. | |
59 * @type {!CrOnc.NetworkProperties|!CrOnc.NetworkStateProperties|undefined} | |
60 */ | |
61 networkState: { | |
62 type: Object, | |
63 observer: 'networkStateChanged_' | |
64 }, | |
65 | |
66 /** | |
67 * If set, the ONC network type will be used to display the icon. | |
68 * @type {?chrome.networkingPrivate.NetworkType} | |
69 */ | |
70 networkType: { | |
71 type: String, | |
72 value: null, | |
73 observer: 'networkTypeChanged_' | |
74 }, | |
75 | |
76 /** | |
77 * If true, the icon is part of a list of networks and may be displayed | |
78 * differently, e.g. the disconnected image will never be shown for | |
79 * list items. | |
80 */ | |
81 isListItem: { | |
82 type: Boolean, | |
83 value: false, | |
84 observer: 'isListItemChanged_' | |
85 }, | |
86 | |
87 /** The icon type to use for the base image of the icon. */ | |
88 iconType_: { | |
89 type: String, | |
90 value: 'ethernet' | |
91 }, | |
92 | |
93 /** Set to true to show a badge for roaming networks. */ | |
94 roaming_: { | |
95 type: Boolean, | |
96 value: false | |
97 }, | |
98 | |
99 /** Set to true to show a badge for secure networks. */ | |
100 secure_: { | |
101 type: Boolean, | |
102 value: false | |
103 }, | |
104 | |
105 /** Set to the name of a technology to show show a badge. */ | |
106 technology_: { | |
107 type: String, | |
108 value: '' | |
109 }, | |
110 }, | |
111 | |
112 /** | |
113 * Polymer networkState changed method. Updates the icon based on the | |
114 * network state. | |
115 * @private | |
116 */ | |
117 networkStateChanged_: function() { | |
118 if (!this.networkState) | |
119 return; | |
120 | |
121 this.networkType = null; | |
122 this.iconType_ = getIconTypeFromNetworkType(this.networkState.Type); | |
123 var strength = CrOnc.getSignalStrength(this.networkState); | |
124 var params = /** @type {NetworkIconParamType} */ { | |
125 showBadges: true, | |
126 showDisconnected: !this.isListItem, | |
127 strength: strength | |
128 }; | |
129 this.setIcon_(params); | |
130 }, | |
131 | |
132 /** | |
133 * Polymer networkType changed method. Updates the icon based on the type | |
134 * of network, showing a disconnected icon where appropriate and no badges. | |
135 * @private | |
136 */ | |
137 networkTypeChanged_: function() { | |
138 if (!this.networkType) | |
139 return; | |
140 | |
141 this.networkState = undefined; | |
142 this.iconType_ = getIconTypeFromNetworkType(this.networkType); | |
143 var params = /** @type {NetworkIconParamType} */ { | |
144 showBadges: false, | |
145 showDisconnected: true, | |
146 strength: 0, | |
147 }; | |
148 this.setIcon_(params); | |
149 }, | |
150 | |
151 /** | |
152 * Polymer isListItem changed method. | |
153 * @private | |
154 */ | |
155 isListItemChanged_: function() { | |
156 if (this.networkState) | |
157 this.networkStateChanged_(); | |
158 else if (this.networkType) | |
159 this.networkTypeChanged_(); | |
160 }, | |
161 | |
162 /** | |
163 * Returns the url for an image based on identifier |id|. | |
164 * @param {string} id The identifier describing the image. | |
165 * @return {string} The url to use for the image 'src' property. | |
166 * @private | |
167 */ | |
168 toImageSrc_: function(id) { | |
169 return id ? RESOURCE_IMAGE_BASE + id + RESOURCE_IMAGE_EXT : ''; | |
170 }, | |
171 | |
172 /** | |
173 * Returns the url for a badge image based on identifier |id|. | |
174 * @param {string} id The identifier describing the badge. | |
175 * @return {string} The url to use for the badge image 'src' property. | |
176 * @private | |
177 */ | |
178 toBadgeImageSrc_: function(id) { | |
179 return id ? this.toImageSrc_('badge_' + id) : ''; | |
180 }, | |
181 | |
182 /** | |
183 * Sets the icon and badge based on the current state and |strength|. | |
184 * @param {!NetworkIconParamType} params Set of params describing the icon. | |
185 * @private | |
186 */ | |
187 setIcon_: function(params) { | |
188 var icon = this.$.icon; | |
189 | |
190 var multiLevel = (this.iconType_ == 'wifi' || this.iconType_ == 'mobile'); | |
191 | |
192 if (this.networkState && multiLevel) { | |
193 this.setMultiLevelIcon_(params); | |
194 } else { | |
195 icon.classList.toggle('multi-level', multiLevel); | |
196 icon.classList.toggle('level0', multiLevel); | |
197 } | |
198 | |
199 this.setIconBadges_(params); | |
200 }, | |
201 | |
202 /** | |
203 * Toggles icon classes based on strength and connecting properties. | |
204 * |this.networkState| is expected to be specified. | |
205 * @param {!NetworkIconParamType} params Set of params describing the icon. | |
206 * @private | |
207 */ | |
208 setMultiLevelIcon_: function(params) { | |
209 // Set the strength or connecting properties. | |
210 var networkState = this.networkState; | |
211 | |
212 var connectionState = networkState.ConnectionState; | |
213 var connecting = false; | |
214 var strength = -1; | |
215 if (connectionState == CrOnc.ConnectionState.CONNECTING) { | |
216 strength = 0; | |
217 connecting = true; | |
218 } else if (connectionState == CrOnc.ConnectionState.CONNECTED || | |
219 !params.showDisconnected) { | |
220 strength = params.strength || 0; | |
221 } | |
222 | |
223 var icon = this.$.icon; | |
224 icon.classList.toggle('multi-level', true); | |
225 icon.classList.toggle('connecting', connecting); | |
226 icon.classList.toggle('level0', strength < 0); | |
227 icon.classList.toggle('level1', strength >= 0 && strength <= 25); | |
228 icon.classList.toggle('level2', strength > 25 && strength <= 50); | |
229 icon.classList.toggle('level3', strength > 50 && strength <= 75); | |
230 icon.classList.toggle('level4', strength > 75); | |
231 }, | |
232 | |
233 /** | |
234 * Sets the icon badge visibility properties: roaming, secure, technology. | |
235 * @param {!NetworkIconParamType} params Set of params describing the icon. | |
236 * @private | |
237 */ | |
238 setIconBadges_: function(params) { | |
239 var networkState = this.networkState; | |
240 | |
241 var type = | |
242 (params.showBadges && networkState) ? networkState.Type : ''; | |
243 if (type == CrOnc.Type.WI_FI) { | |
244 this.roaming_ = false; | |
245 var security = networkState.WiFi ? networkState.WiFi.Security : ''; | |
246 this.secure_ = !!security && security != 'None'; | |
247 this.technology_ = ''; | |
248 } else if (type == CrOnc.Type.WI_MAX) { | |
249 this.roaming_ = false; | |
250 this.secure_ = false; | |
251 this.technology_ = '4g'; | |
252 } else if (type == CrOnc.Type.CELLULAR && networkState.Cellular) { | |
253 this.roaming_ = | |
254 networkState.Cellular.RoamingState == CrOnc.RoamingState.ROAMING; | |
255 this.secure_ = false; | |
256 var oncTechnology = networkState.Cellular.NetworkTechnology; | |
257 switch (oncTechnology) { | |
258 case CrOnc.NetworkTechnology.CDMA1XRTT: | |
259 this.technology_ = '1x'; | |
260 break; | |
261 case CrOnc.NetworkTechnology.EDGE: | |
262 this.technology_ = 'edge'; | |
263 break; | |
264 case CrOnc.NetworkTechnology.EVDO: | |
265 this.technology_ = 'evdo'; | |
266 break; | |
267 case CrOnc.NetworkTechnology.GPRS: | |
268 case CrOnc.NetworkTechnology.GSM: | |
269 this.technology_ = 'gsm'; | |
270 break; | |
271 case CrOnc.NetworkTechnology.HSPA: | |
272 this.technology_ = 'hspa'; | |
273 break; | |
274 case CrOnc.NetworkTechnology.HSPA_PLUS: | |
275 this.technology_ = 'hspa_plus'; | |
276 break; | |
277 case CrOnc.NetworkTechnology.LTE: | |
278 this.technology_ = 'lte'; | |
279 break; | |
280 case CrOnc.NetworkTechnology.LTE_ADVANCED: | |
281 this.technology_ = 'lte_advanced'; | |
282 break; | |
283 case CrOnc.NetworkTechnology.UMTS: | |
284 this.technology_ = '3g'; | |
285 break; | |
286 } | |
287 } else { | |
288 this.roaming_ = false; | |
289 this.secure_ = false; | |
290 this.technology_ = ''; | |
291 } | |
292 }, | |
293 }); | |
294 })(); | |
OLD | NEW |