OLD | NEW |
1 // Copyright 2015 The Chromium Authors. All rights reserved. | 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 | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @fileoverview Polymer element for rendering network icons based on ONC | 6 * @fileoverview Polymer element for rendering network icons based on ONC |
7 * state properties. | 7 * state properties. |
8 */ | 8 */ |
9 | 9 |
10 (function() { | 10 (function() { |
11 /** | 11 /** |
12 * @typedef {{ | 12 * @typedef {{ |
| 13 * showBadges: boolean, |
13 * showDisconnected: boolean, | 14 * showDisconnected: boolean, |
14 * iconType: string, | |
15 * connected: boolean, | |
16 * secure: boolean, | |
17 * strength: number | 15 * strength: number |
18 * }} | 16 * }} |
19 */ | 17 */ |
20 var IconParams; | 18 var IconParams; |
21 | 19 |
22 /** @const {string} */ var RESOURCE_IMAGE_BASE = | 20 /** @const {string} */ var RESOURCE_IMAGE_BASE = |
23 'chrome://resources/cr_elements/cr_network_icon/'; | 21 'chrome://resources/cr_elements/cr_network_icon/'; |
24 | 22 |
25 /** @const {string} */ var RESOURCE_IMAGE_EXT = '.png'; | 23 /** @const {string} */ var RESOURCE_IMAGE_EXT = '.png'; |
26 | 24 |
(...skipping 17 matching lines...) Expand all Loading... |
44 | 42 |
45 console.error('Unrecognized network type: ' + networkType); | 43 console.error('Unrecognized network type: ' + networkType); |
46 return 'ethernet'; | 44 return 'ethernet'; |
47 } | 45 } |
48 | 46 |
49 /** | 47 /** |
50 * Polymer class definition for 'cr-network-icon'. | 48 * Polymer class definition for 'cr-network-icon'. |
51 * @element cr-network-icon | 49 * @element cr-network-icon |
52 */ | 50 */ |
53 Polymer('cr-network-icon', { | 51 Polymer('cr-network-icon', { |
| 52 /** |
| 53 * The icon type to use for the base image of the icon. |
| 54 * @type string |
| 55 */ |
| 56 iconType: 'ethernet', |
| 57 |
| 58 /** |
| 59 * Set to true to show a badge for roaming networks. |
| 60 * @type boolean |
| 61 */ |
| 62 roaming: false, |
| 63 |
| 64 /** |
| 65 * Set to true to show a badge for secure networks. |
| 66 * @type boolean |
| 67 */ |
| 68 secure: false, |
| 69 |
| 70 /** |
| 71 * Set to the name of a technology to show show a badge. |
| 72 * @type string |
| 73 */ |
| 74 technology: '', |
| 75 |
54 publish: { | 76 publish: { |
55 /** | 77 /** |
56 * If set, the ONC data properties will be used to display the icon. | 78 * If set, the ONC data properties will be used to display the icon. |
57 * | 79 * |
58 * @attribute networkState | 80 * @attribute networkState |
59 * @type CrOncDataElement | 81 * @type CrOncDataElement |
60 * @default null | 82 * @default null |
61 */ | 83 */ |
62 networkState: null, | 84 networkState: null, |
63 | 85 |
(...skipping 14 matching lines...) Expand all Loading... |
78 * @attribute isListItem | 100 * @attribute isListItem |
79 * @type boolean | 101 * @type boolean |
80 * @default false | 102 * @default false |
81 */ | 103 */ |
82 isListItem: false, | 104 isListItem: false, |
83 }, | 105 }, |
84 | 106 |
85 /** @override */ | 107 /** @override */ |
86 attached: function() { | 108 attached: function() { |
87 var params = /** @type {IconParams} */ { | 109 var params = /** @type {IconParams} */ { |
88 connected: false, | 110 showBadges: false, |
89 iconType: 'ethernet', | |
90 secure: false, | |
91 showDisconnected: true, | 111 showDisconnected: true, |
92 strength: 0, | 112 strength: 0, |
93 }; | 113 }; |
94 this.setIcon_(params); | 114 this.setIcon_(params); |
95 }, | 115 }, |
96 | 116 |
97 /** | 117 /** |
98 * Polymer networkState changed method. Updates the icon based on the | 118 * Polymer networkState changed method. Updates the icon based on the |
99 * network state. | 119 * network state. |
100 */ | 120 */ |
101 networkStateChanged: function() { | 121 networkStateChanged: function() { |
102 var iconType = getIconTypeFromNetworkType(this.networkState.data.Type); | 122 this.iconType = getIconTypeFromNetworkType(this.networkState.data.Type); |
103 var params = /** @type {IconParams} */ { | 123 var params = /** @type {IconParams} */ { |
104 connected: this.networkState.data.ConnectionState == 'Connected', | 124 showBadges: true, |
105 iconType: iconType, | |
106 secure: iconType == 'wifi' && | |
107 this.networkState.getWiFiSecurity() != 'None', | |
108 showDisconnected: !this.isListItem, | 125 showDisconnected: !this.isListItem, |
109 strength: this.networkState.getStrength(), | 126 strength: this.networkState.getStrength(), |
110 }; | 127 }; |
111 this.setIcon_(params); | 128 this.setIcon_(params); |
112 }, | 129 }, |
113 | 130 |
114 /** | 131 /** |
115 * Polymer networkType changed method. Updates the icon based on the type | 132 * Polymer networkType changed method. Updates the icon based on the type |
116 * of network, showing a disconnected icon where appropriate and no badges. | 133 * of network, showing a disconnected icon where appropriate and no badges. |
117 */ | 134 */ |
118 networkTypeChanged: function() { | 135 networkTypeChanged: function() { |
| 136 this.iconType = getIconTypeFromNetworkType(this.networkType); |
119 var params = /** @type {IconParams} */ { | 137 var params = /** @type {IconParams} */ { |
120 connected: false, | 138 showBadges: false, |
121 iconType: getIconTypeFromNetworkType(this.networkType), | |
122 secure: false, | |
123 showDisconnected: true, | 139 showDisconnected: true, |
124 strength: 0, | 140 strength: 0, |
125 }; | 141 }; |
126 this.setIcon_(params); | 142 this.setIcon_(params); |
127 }, | 143 }, |
128 | 144 |
129 /** | 145 /** |
| 146 * Returns the url for an image based on identifier |id|. |
| 147 * @param {string} src The identifier describing the image. |
| 148 * @return {string} The url to use for the image 'src' property. |
| 149 */ |
| 150 toImageSrc: function(id) { |
| 151 return id ? RESOURCE_IMAGE_BASE + id + RESOURCE_IMAGE_EXT : ''; |
| 152 }, |
| 153 |
| 154 /** |
| 155 * Returns the url for a badge image based on identifier |id|. |
| 156 * @param {string} id The identifier describing the badge. |
| 157 * @return {string} The url to use for the badge image 'src' property. |
| 158 */ |
| 159 toBadgeImageSrc: function(id) { |
| 160 return id ? this.toImageSrc('badge_' + id) : ''; |
| 161 }, |
| 162 |
| 163 /** |
130 * Sets the icon and badge based on the current state and |strength|. | 164 * Sets the icon and badge based on the current state and |strength|. |
131 * @param {!IconParams} params The set of params describing the icon. | 165 * @param {!IconParams} params The set of params describing the icon. |
132 * @private | 166 * @private |
133 */ | 167 */ |
134 setIcon_: function(params) { | 168 setIcon_: function(params) { |
135 var icon = this.$.icon; | 169 var icon = this.$.icon; |
136 if (params.iconType) | |
137 icon.src = RESOURCE_IMAGE_BASE + params.iconType + RESOURCE_IMAGE_EXT; | |
138 | 170 |
139 var multiLevel, strength; | 171 var multiLevel = (this.iconType == 'wifi' || this.iconType == 'mobile'); |
140 if (params.iconType == 'wifi' || params.iconType == 'mobile') { | 172 |
141 multiLevel = true; | 173 if (this.networkState && multiLevel) { |
142 strength = (params.showDisconnected && !params.connected) ? | 174 this.setMultiLevelIcon_(params); |
143 -1 : params.strength; | |
144 } else { | 175 } else { |
145 multiLevel = false; | 176 icon.className = multiLevel ? 'multi-level level0' : ''; |
146 strength = -1; | |
147 } | 177 } |
148 icon.classList.toggle('multi-level', multiLevel); | 178 |
| 179 this.setIconBadges_(params); |
| 180 }, |
| 181 |
| 182 /** |
| 183 * Toggles icon classes based on strength and connecting properties. |
| 184 * |this.networkState| is expected to be specified. |
| 185 * @param {!IconParams} params The set of params describing the icon. |
| 186 * @private |
| 187 */ |
| 188 setMultiLevelIcon_: function(params) { |
| 189 // Set the strength or connecting properties. |
| 190 var networkState = this.networkState; |
| 191 |
| 192 var connecting = false; |
| 193 var strength = -1; |
| 194 if (networkState.connecting()) { |
| 195 strength = 0; |
| 196 connecting = true; |
| 197 } else if (networkState.connected() || !params.showDisconnected) { |
| 198 strength = params.strength || 0; |
| 199 } |
| 200 |
| 201 var icon = this.$.icon; |
| 202 icon.classList.toggle('multi-level', true); |
| 203 icon.classList.toggle('connecting', connecting); |
149 icon.classList.toggle('level0', strength < 0); | 204 icon.classList.toggle('level0', strength < 0); |
150 icon.classList.toggle('level1', strength >= 0 && strength <= 25); | 205 icon.classList.toggle('level1', strength >= 0 && strength <= 25); |
151 icon.classList.toggle('level2', strength > 25 && strength <= 50); | 206 icon.classList.toggle('level2', strength > 25 && strength <= 50); |
152 icon.classList.toggle('level3', strength > 50 && strength <= 75); | 207 icon.classList.toggle('level3', strength > 50 && strength <= 75); |
153 icon.classList.toggle('level4', strength > 75); | 208 icon.classList.toggle('level4', strength > 75); |
| 209 }, |
154 | 210 |
155 this.$.secure.hidden = !params.secure; | 211 /** |
| 212 * Sets the icon badge visibility properties: roaming, secure, technology. |
| 213 * @param {!IconParams} params The set of params describing the icon. |
| 214 * @private |
| 215 */ |
| 216 setIconBadges_: function(params) { |
| 217 var networkState = this.networkState; |
| 218 |
| 219 var type = |
| 220 (params.showBadges && networkState) ? networkState.data.Type : ''; |
| 221 if (type == CrOnc.Type.WIFI) { |
| 222 this.roaming = false; |
| 223 this.secure = networkState.getWiFiSecurity() != 'None'; |
| 224 this.technology = ''; |
| 225 } else if (type == CrOnc.Type.WIMAX) { |
| 226 this.roaming = false; |
| 227 this.secure = false; |
| 228 this.technology = '4g'; |
| 229 } else if (type == CrOnc.Type.CELLULAR) { |
| 230 this.roaming = |
| 231 networkState.getCellularRoamingState() == CrOnc.RoamingState.ROAMING; |
| 232 this.secure = false; |
| 233 var oncTechnology = networkState.getCellularTechnology(); |
| 234 switch (oncTechnology) { |
| 235 case CrOnc.NetworkTechnology.EDGE: |
| 236 this.technology = 'edge'; |
| 237 break; |
| 238 case CrOnc.NetworkTechnology.EVDO: |
| 239 this.technology = 'evdo'; |
| 240 break; |
| 241 case CrOnc.NetworkTechnology.GPRS: |
| 242 case CrOnc.NetworkTechnology.GSM: |
| 243 this.technology = 'gsm'; |
| 244 break; |
| 245 case CrOnc.NetworkTechnology.HSPA: |
| 246 this.technology = 'hspa'; |
| 247 break; |
| 248 case CrOnc.NetworkTechnology.HSPA_PLUS: |
| 249 this.technology = 'hspa_plus'; |
| 250 break; |
| 251 case CrOnc.NetworkTechnology.LTE: |
| 252 this.technology = 'lte'; |
| 253 break; |
| 254 case CrOnc.NetworkTechnology.LTE_ADVANCED: |
| 255 this.technology = 'lte_advanced'; |
| 256 break; |
| 257 case CrOnc.NetworkTechnology.UMTS: |
| 258 this.technology = '3g'; |
| 259 break; |
| 260 } |
| 261 } else { |
| 262 this.roaming = false; |
| 263 this.secure = false; |
| 264 this.technology = ''; |
| 265 } |
156 }, | 266 }, |
157 }); | 267 }); |
158 })(); | 268 })(); |
OLD | NEW |