Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(5)

Side by Side Diff: chrome/browser/resources/chromeos/network_menu.js

Issue 10356042: Fix presubmit js style nits. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: '' Created 8 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2012 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 // Network status constants. 6 // Network status constants.
7 const StatusConnected = 'connected'; 7 var statusConnected = 'connected';
8 const StatusDisconnected = 'disconnected'; 8 var statusDisconnected = 'disconnected';
9 const StatusConnecting = 'connecting'; 9 var statusConnecting = 'connecting';
10 const StatusError = 'error'; 10 var statusError = 'error';
11 11
12 const NetworkOther = 'other'; 12 var networkOther = 'other';
13 13
14 // Setup css canvas 'spinner-circle' 14 // Setup css canvas 'spinner-circle'
15 (function() { 15 (function() {
16 var lineWidth = 3; 16 var lineWidth = 3;
17 var r = 8; 17 var r = 8;
18 var ctx = document.getCSSCanvasContext('2d', 'spinner-circle', 2 * r, 2 * r); 18 var ctx = document.getCSSCanvasContext('2d', 'spinner-circle', 2 * r, 2 * r);
19 19
20 ctx.lineWidth = lineWidth; 20 ctx.lineWidth = lineWidth;
21 ctx.lineCap = 'round'; 21 ctx.lineCap = 'round';
22 ctx.lineJoin = 'round'; 22 ctx.lineJoin = 'round';
23 23
24 ctx.strokeStyle = '#4e73c7'; 24 ctx.strokeStyle = '#4e73c7';
25 ctx.beginPath(); 25 ctx.beginPath();
26 ctx.moveTo(lineWidth / 2, r - lineWidth / 2); 26 ctx.moveTo(lineWidth / 2, r - lineWidth / 2);
27 ctx.arc(r, r, r - lineWidth / 2, Math.PI, Math.PI * 3 / 2); 27 ctx.arc(r, r, r - lineWidth / 2, Math.PI, Math.PI * 3 / 2);
28 ctx.stroke(); 28 ctx.stroke();
29 })(); 29 })();
30 30
31 /** 31 /**
32 * Sends "connect" using the 'action' WebUI message. 32 * Sends 'connect' using the 'action' WebUI message.
33 * @param {number} index Selected network index.
kmadhusu 2012/05/07 05:42:03 xiyuan: Can you provide a detailed description abo
xiyuan 2012/05/07 16:21:12 index Index of the selected network menu item. pas
34 * @param {string} passphrase Password
35 * @param {string} identity Network ssid.
36 * @param {boolean} auto_connect True if the network can be auto connected.
33 */ 37 */
34 function sendConnect(index, passphrase, identity, auto_connect) { 38 function sendConnect(index, passphrase, identity, auto_connect) {
35 chrome.send('action', 39 chrome.send('action',
36 ['connect', 40 ['connect',
37 String(index), 41 String(index),
38 passphrase, 42 passphrase,
39 identity, 43 identity,
40 auto_connect ? '1' : '0']); 44 auto_connect ? '1' : '0']);
41 } 45 }
42 46
43 var networkMenuItemProto = (function() { 47 var networkMenuItemProto = (function() {
44 var networkMenuItem = cr.doc.createElement('div'); 48 var networkMenuItem = cr.doc.createElement('div');
45 networkMenuItem.innerHTML = '<div class="network-menu-item">' + 49 networkMenuItem.innerHTML = '<div class="network-menu-item">' +
46 '<div class="network-label-icon">' + 50 '<div class="network-label-icon">' +
47 '<div class="network-label"></div>' + 51 '<div class="network-label"></div>' +
48 '<div class="network-icon hidden"></div>' + 52 '<div class="network-icon hidden"></div>' +
49 '</div>' + 53 '</div>' +
50 '<div class="network-status hidden"></div>' + 54 '<div class="network-status hidden"></div>' +
51 '<div class="hidden"></div>' + 55 '<div class="hidden"></div>' +
52 '</div>'; 56 '</div>';
53 return networkMenuItem; 57 return networkMenuItem;
54 })(); 58 })();
55 59
60 /**
61 * Network menu item class
62 * @constructor
63 */
56 var NetworkMenuItem = cr.ui.define(function() { 64 var NetworkMenuItem = cr.ui.define(function() {
57 return networkMenuItemProto.cloneNode(true); 65 return networkMenuItemProto.cloneNode(true);
58 }); 66 });
59 67
60 NetworkMenuItem.prototype = { 68 NetworkMenuItem.prototype = {
61 __proto__: MenuItem.prototype, 69 __proto__: MenuItem.prototype,
62 70
63 ssidEdit: null, 71 ssidEdit: null,
64 passwordEdit: null, 72 passwordEdit: null,
65 autoConnectCheckbox: null, 73 autoConnectCheckbox: null,
66 74
67 /** 75 /**
68 * The label element. 76 * The label element.
77 * @this {NetworkMenuItem}
69 * @private 78 * @private
70 */ 79 */
71 get label_() { 80 get label_() {
72 return this.firstElementChild.firstElementChild.firstElementChild; 81 return this.firstElementChild.firstElementChild.firstElementChild;
73 }, 82 },
74 83
75 /** 84 /**
76 * The icon element. 85 * The icon element.
86 * @this {NetworkMenuItem}
77 * @private 87 * @private
78 */ 88 */
79 get icon_() { 89 get icon_() {
80 return this.label_.nextElementSibling; 90 return this.label_.nextElementSibling;
81 }, 91 },
82 92
83 /** 93 /**
84 * The status area element. 94 * The status area element.
95 * @this {NetworkMenuItem}
85 * @private 96 * @private
86 */ 97 */
87 get status_() { 98 get status_() {
88 return this.firstElementChild.firstElementChild.nextElementSibling; 99 return this.firstElementChild.firstElementChild.nextElementSibling;
89 }, 100 },
90 101
91 /** 102 /**
92 * The action area container element. 103 * The action area container element.
104 * @this {NetworkMenuItem}
93 * @private 105 * @private
94 */ 106 */
95 get action_() { 107 get action_() {
96 return this.status_.nextElementSibling; 108 return this.status_.nextElementSibling;
97 }, 109 },
98 110
99 /** 111 /**
100 * Set status message. 112 * Set status message.
101 * @param {string} message The message to display in status area. 113 * @param {string} message The message to display in status area.
114 * @this {NetworkMenuItem}
102 * @private 115 * @private
103 */ 116 */
104 setStatus_: function(message) { 117 setStatus_: function(message) {
105 if (message) { 118 if (message) {
106 this.status_.textContent = message; 119 this.status_.textContent = message;
107 this.status_.classList.remove('hidden'); 120 this.status_.classList.remove('hidden');
108 } else { 121 } else {
109 this.status_.classList.add('hidden'); 122 this.status_.classList.add('hidden');
110 } 123 }
111 }, 124 },
112 125
113 /** 126 /**
114 * Set status icon. 127 * Set status icon.
115 * @param {string} icon Source url for the icon image. 128 * @param {string} icon Source url for the icon image.
129 * @this {NetworkMenuItem}
116 * @private 130 * @private
117 */ 131 */
118 setIcon_: function(icon) { 132 setIcon_: function(icon) {
119 if (icon) { 133 if (icon) {
120 this.icon_.style.backgroundImage = 'url(' + icon + ')'; 134 this.icon_.style.backgroundImage = 'url(' + icon + ')';
121 this.icon_.classList.remove('hidden'); 135 this.icon_.classList.remove('hidden');
122 } else { 136 } else {
123 this.icon_.classList.add('hidden'); 137 this.icon_.classList.add('hidden');
124 } 138 }
125 }, 139 },
126 140
127 /** 141 /**
128 * Handle reconnect. 142 * Handle reconnect.
143 * @this {NetworkMenuItem}
129 * @private 144 * @private
130 */ 145 */
131 handleConnect_ : function(e) { 146 handleConnect_: function(e) {
132 var index = this.menu_.getMenuItemIndexOf(this); 147 var index = this.menu_.getMenuItemIndexOf(this);
133 if (this.ssidEdit && this.passwordEdit) { 148 if (this.ssidEdit && this.passwordEdit) {
134 if (this.ssidEdit.value) { 149 if (this.ssidEdit.value) {
135 sendConnect(index, 150 sendConnect(index,
136 this.passwordEdit.value, 151 this.passwordEdit.value,
137 this.ssidEdit.value, 152 this.ssidEdit.value,
138 this.autoConnectCheckbox.checked); 153 this.autoConnectCheckbox.checked);
139 } 154 }
140 } else if (this.passwordEdit) { 155 } else if (this.passwordEdit) {
141 if (this.passwordEdit.value) { 156 if (this.passwordEdit.value) {
142 sendConnect(index, 157 sendConnect(index,
143 this.passwordEdit.value, '', this.autoConnectCheckbox.checked); 158 this.passwordEdit.value, '', this.autoConnectCheckbox.checked);
144 } 159 }
145 } else { 160 } else {
146 if (this.attrs.remembered) { 161 if (this.attrs.remembered) {
147 sendConnect(index, this.attrs.passphrase, '', this.attrs.auto_connect); 162 sendConnect(index, this.attrs.passphrase, '', this.attrs.auto_connect);
148 } else { 163 } else {
149 sendConnect(index, '', '', this.autoConnectCheckbox.checked); 164 sendConnect(index, '', '', this.autoConnectCheckbox.checked);
150 } 165 }
151 } 166 }
152 }, 167 },
153 168
154 /** 169 /**
155 * Handle keydown event in ssid edit. 170 * Handle keydown event in ssid edit.
171 * @this {NetworkMenuItem}
156 * @private 172 * @private
157 */ 173 */
158 handleSsidEditKeydown_: function(e) { 174 handleSsidEditKeydown_: function(e) {
159 if (e.target == this.ssidEdit && 175 if (e.target == this.ssidEdit &&
160 e.keyIdentifier == 'Enter') { 176 e.keyIdentifier == 'Enter') {
161 this.passwordEdit.focus(); 177 this.passwordEdit.focus();
162 } 178 }
163 }, 179 },
164 180
165 /** 181 /**
166 * Handle keydown event in password edit. 182 * Handle keydown event in password edit.
183 * @this {NetworkMenuItem}
167 * @private 184 * @private
168 */ 185 */
169 handlePassEditKeydown_: function(e) { 186 handlePassEditKeydown_: function(e) {
170 if (e.target == this.passwordEdit && 187 if (e.target == this.passwordEdit &&
171 e.keyIdentifier == 'Enter') { 188 e.keyIdentifier == 'Enter') {
172 this.handleConnect_(); 189 this.handleConnect_();
173 } 190 }
174 }, 191 },
175 192
176 /** 193 /**
177 * Returns whether action area is visible. 194 * Returns whether action area is visible.
195 * @this {NetworkMenuItem}
196 * @return {boolean} True if the action area is visible.
178 * @private 197 * @private
179 */ 198 */
180 isActionVisible_: function() { 199 isActionVisible_: function() {
181 return !this.action_.classList.contains('hidden'); 200 return !this.action_.classList.contains('hidden');
182 }, 201 },
183 202
184 /** 203 /**
185 * Show/hide action area. 204 * Show/hide action area.
205 * @this {NetworkMenuItem}
186 * @private 206 * @private
187 */ 207 */
188 showAction_: function(show) { 208 showAction_: function(show) {
189 var visible = this.isActionVisible_(); 209 var visible = this.isActionVisible_();
190 if (show && !visible) { 210 if (show && !visible) {
191 this.action_.classList.remove('hidden'); 211 this.action_.classList.remove('hidden');
192 } else if (!show && visible) { 212 } else if (!show && visible) {
193 this.action_.classList.add('hidden'); 213 this.action_.classList.add('hidden');
194 } 214 }
195 }, 215 },
196 216
197 /** 217 /**
198 * Add network name edit to action area. 218 * Add network name edit to action area.
219 * @this {NetworkMenuItem}
199 * @private 220 * @private
200 */ 221 */
201 addSsidEdit_: function() { 222 addSsidEdit_: function() {
202 this.ssidEdit = this.ownerDocument.createElement('input'); 223 this.ssidEdit = this.ownerDocument.createElement('input');
203 this.ssidEdit.type = 'text'; 224 this.ssidEdit.type = 'text';
204 this.ssidEdit.placeholder = localStrings.getString('ssid_prompt'); 225 this.ssidEdit.placeholder = localStrings.getString('ssid_prompt');
205 this.ssidEdit.pattern = '^\\S+$'; 226 this.ssidEdit.pattern = '^\\S+$';
206 this.ssidEdit.addEventListener('keydown', 227 this.ssidEdit.addEventListener('keydown',
207 this.handleSsidEditKeydown_.bind(this)); 228 this.handleSsidEditKeydown_.bind(this));
208 229
209 var box = this.ownerDocument.createElement('div'); 230 var box = this.ownerDocument.createElement('div');
210 box.appendChild(this.ssidEdit); 231 box.appendChild(this.ssidEdit);
211 this.action_.appendChild(box); 232 this.action_.appendChild(box);
212 }, 233 },
213 234
214 /** 235 /**
215 * Add password edit to action area. 236 * Add password edit to action area.
237 * @this {NetworkMenuItem}
216 * @private 238 * @private
217 */ 239 */
218 addPasswordEdit_: function() { 240 addPasswordEdit_: function() {
219 this.passwordEdit = this.ownerDocument.createElement('input'); 241 this.passwordEdit = this.ownerDocument.createElement('input');
220 this.passwordEdit.type = 'password'; 242 this.passwordEdit.type = 'password';
221 this.passwordEdit.placeholder = localStrings.getString('pass_prompt'); 243 this.passwordEdit.placeholder = localStrings.getString('pass_prompt');
222 this.passwordEdit.pattern = '^\\S+$'; 244 this.passwordEdit.pattern = '^\\S+$';
223 this.passwordEdit.addEventListener('keydown', 245 this.passwordEdit.addEventListener('keydown',
224 this.handlePassEditKeydown_.bind(this)); 246 this.handlePassEditKeydown_.bind(this));
225 247
226 var box = this.ownerDocument.createElement('div'); 248 var box = this.ownerDocument.createElement('div');
227 box.appendChild(this.passwordEdit); 249 box.appendChild(this.passwordEdit);
228 this.action_.appendChild(box); 250 this.action_.appendChild(box);
229 }, 251 },
230 252
231 /** 253 /**
232 * Add auto-connect this network check box to action area. 254 * Add auto-connect this network check box to action area.
255 * @this {NetworkMenuItem}
233 * @private 256 * @private
234 */ 257 */
235 addAutoConnectCheckbox_: function() { 258 addAutoConnectCheckbox_: function() {
236 this.autoConnectCheckbox = this.ownerDocument.createElement('input'); 259 this.autoConnectCheckbox = this.ownerDocument.createElement('input');
237 this.autoConnectCheckbox.type = 'checkbox'; 260 this.autoConnectCheckbox.type = 'checkbox';
238 this.autoConnectCheckbox.checked = this.attrs.auto_connect; 261 this.autoConnectCheckbox.checked = this.attrs.auto_connect;
239 262
240 var autoConnectSpan = this.ownerDocument.createElement('span'); 263 var autoConnectSpan = this.ownerDocument.createElement('span');
241 autoConnectSpan.textContent = 264 autoConnectSpan.textContent =
242 localStrings.getString('auto_connect_this_network'); 265 localStrings.getString('auto_connect_this_network');
243 266
244 var autoConnectLabel = this.ownerDocument.createElement('label'); 267 var autoConnectLabel = this.ownerDocument.createElement('label');
245 autoConnectLabel.appendChild(this.autoConnectCheckbox); 268 autoConnectLabel.appendChild(this.autoConnectCheckbox);
246 autoConnectLabel.appendChild(autoConnectSpan); 269 autoConnectLabel.appendChild(autoConnectSpan);
247 270
248 this.action_.appendChild(autoConnectLabel); 271 this.action_.appendChild(autoConnectLabel);
249 }, 272 },
250 273
251 /** 274 /**
252 * Internal method to initiailze the MenuItem. 275 * Internal method to initiailze the MenuItem.
276 * @this {NetworkMenuItem}
253 * @private 277 * @private
254 */ 278 */
255 initMenuItem_: function() { 279 initMenuItem_: function() {
256 // *TODO: eliminate code duplication with menu.js 280 // *TODO: eliminate code duplication with menu.js
257 // MenuItem.prototype.initMenuItem_(); 281 // MenuItem.prototype.initMenuItem_();
258 var attrs = this.attrs; 282 var attrs = this.attrs;
259 this.classList.add(attrs.type); 283 this.classList.add(attrs.type);
260 this.menu_.addHandlers(this, this); 284 this.menu_.addHandlers(this, this);
261 285
262 //////// NetworkMenuItem specific code: 286 //////// NetworkMenuItem specific code:
263 // TODO: Handle specific types of network, connecting icon. 287 // TODO: Handle specific types of network, connecting icon.
264 this.label_.textContent = attrs.label; 288 this.label_.textContent = attrs.label;
265 289
266 if (attrs.network_type == NetworkOther) { 290 if (attrs.network_type == networkOther) {
267 this.addSsidEdit_(); 291 this.addSsidEdit_();
268 this.addPasswordEdit_(); 292 this.addPasswordEdit_();
269 this.addAutoConnectCheckbox_(); 293 this.addAutoConnectCheckbox_();
270 } else if (attrs.status && attrs.status != 'unknown') { 294 } else if (attrs.status && attrs.status != 'unknown') {
271 if (attrs.status == StatusConnected) { 295 if (attrs.status == statusConnected) {
272 this.setStatus_(attrs.ip_address); 296 this.setStatus_(attrs.ip_address);
273 } else if (attrs.status == StatusConnecting) { 297 } else if (attrs.status == statusConnecting) {
274 this.setStatus_(attrs.message); 298 this.setStatus_(attrs.message);
275 299
276 this.icon_.classList.add('spinner'); 300 this.icon_.classList.add('spinner');
277 this.icon_.classList.remove('hidden'); 301 this.icon_.classList.remove('hidden');
278 } else if (attrs.status == StatusError) { 302 } else if (attrs.status == statusError) {
279 this.setStatus_(attrs.message); 303 this.setStatus_(attrs.message);
280 this.setIcon_('chrome://theme/IDR_WARNING'); 304 this.setIcon_('chrome://theme/IDR_WARNING');
281 305
282 var button = this.ownerDocument.createElement('button'); 306 var button = this.ownerDocument.createElement('button');
283 button.textContent = localStrings.getString('reconnect'); 307 button.textContent = localStrings.getString('reconnect');
284 button.addEventListener('click', this.handleConnect_.bind(this)); 308 button.addEventListener('click', this.handleConnect_.bind(this));
285 var box = this.ownerDocument.createElement('div'); 309 var box = this.ownerDocument.createElement('div');
286 box.appendChild(button); 310 box.appendChild(button);
287 this.action_.appendChild(box); 311 this.action_.appendChild(box);
288 312
(...skipping 10 matching lines...) Expand all
299 323
300 if (attrs.font) { 324 if (attrs.font) {
301 this.label_.style.font = attrs.font; 325 this.label_.style.font = attrs.font;
302 326
303 var base_font = attrs.font.replace(/bold/, '').replace(/italic/, ''); 327 var base_font = attrs.font.replace(/bold/, '').replace(/italic/, '');
304 this.status_.style.font = base_font; 328 this.status_.style.font = base_font;
305 this.action_.style.font = base_font; 329 this.action_.style.font = base_font;
306 } 330 }
307 }, 331 },
308 332
309 /** @inheritDoc */ 333 /**
334 * @inheritDoc
335 * @this {NetworkMenuItem}
336 */
310 activate: function() { 337 activate: function() {
311 // Close action area and connect if it is visible. 338 // Close action area and connect if it is visible.
312 if (this.isActionVisible_()) { 339 if (this.isActionVisible_()) {
313 this.showAction_(false); 340 this.showAction_(false);
314 this.handleConnect_(); 341 this.handleConnect_();
315 return; 342 return;
316 } 343 }
317 344
318 // Show action area for encrypted network and 'other' network. 345 // Show action area for encrypted network and 'other' network.
319 if ((this.attrs.network_type == NetworkOther || 346 if ((this.attrs.network_type == networkOther ||
320 this.attrs.status == StatusDisconnected) && 347 this.attrs.status == statusDisconnected) &&
321 this.attrs.need_passphrase && 348 this.attrs.need_passphrase &&
322 !this.isActionVisible_()) { 349 !this.isActionVisible_()) {
323 this.showAction_(true); 350 this.showAction_(true);
324 return; 351 return;
325 } 352 }
326 353
327 MenuItem.prototype.activate.call(this); 354 MenuItem.prototype.activate.call(this);
328 } 355 }
329 }; 356 };
330 357
331 358 /**
359 * Network Menu class.
360 * @constructor
361 * @extends {HTMLDIVElement}
362 */
332 var NetworkMenu = cr.ui.define('div'); 363 var NetworkMenu = cr.ui.define('div');
333 364
334 NetworkMenu.prototype = { 365 NetworkMenu.prototype = {
335 __proto__: Menu.prototype, 366 __proto__: Menu.prototype,
336 367
337 /** @inheritDoc */ 368 /**
369 * @inheritDoc
370 * @this {NetworkMenu}
371 * @return {Object} Network menu item.
372 */
338 createMenuItem: function(attrs) { 373 createMenuItem: function(attrs) {
339 if (attrs.type == 'command') { 374 if (attrs.type == 'command') {
340 return new NetworkMenuItem(); 375 return new NetworkMenuItem();
341 } else { 376 } else {
342 return new MenuItem(); 377 return new MenuItem();
343 } 378 }
344 }, 379 },
345 380
346 /** @inheritDoc */ 381 /**
382 * @inheritDoc
383 * @this {NetworkMenu}
384 */
347 onClick_: function(event, item) { 385 onClick_: function(event, item) {
348 // If item is a NetworkMenuItem, it must have at least one of the following. 386 // If item is a NetworkMenuItem, it must have at least one of the following.
349 if (item.autoConnectCheckbox || item.ssidEdit || item.passwordEdit) { 387 if (item.autoConnectCheckbox || item.ssidEdit || item.passwordEdit) {
350 // Ignore clicks other than on the NetworkMenuItem itself. 388 // Ignore clicks other than on the NetworkMenuItem itself.
351 if (event.target == item.autoConnectCheckbox || 389 if (event.target == item.autoConnectCheckbox ||
352 event.target == item.autoConnectCheckbox.nextElementSibling || 390 event.target == item.autoConnectCheckbox.nextElementSibling ||
353 event.target == item.ssidEdit || 391 event.target == item.ssidEdit ||
354 event.target == item.passwordEdit) { 392 event.target == item.passwordEdit) {
355 return; 393 return;
356 } 394 }
357 } 395 }
358 396
359 Menu.prototype.onClick_.call(this, event, item); 397 Menu.prototype.onClick_.call(this, event, item);
360 }, 398 },
361 }; 399 };
OLDNEW
« no previous file with comments | « chrome/browser/resources/chromeos/mobile_setup.js ('k') | chrome/browser/resources/chromeos/sim_unlock.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698