OLD | NEW |
1 // Copyright (c) 2012 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 var MIN_VERSION_TAB_CLOSE = 25; | 5 var MIN_VERSION_TAB_CLOSE = 25; |
6 var MIN_VERSION_TARGET_ID = 26; | 6 var MIN_VERSION_TARGET_ID = 26; |
7 var MIN_VERSION_NEW_TAB = 29; | 7 var MIN_VERSION_NEW_TAB = 29; |
8 var MIN_VERSION_TAB_ACTIVATE = 30; | 8 var MIN_VERSION_TAB_ACTIVATE = 30; |
9 var WEBRTC_SERIAL = 'WEBRTC'; | 9 var WEBRTC_SERIAL = 'WEBRTC'; |
10 | 10 |
11 var queryParamsObject = {}; | 11 var queryParamsObject = {}; |
12 var browserInspector; | 12 var browserInspector; |
13 var browserInspectorTitle; | 13 var browserInspectorTitle; |
14 | 14 |
15 (function() { | 15 (function() { |
16 var queryParams = window.location.search; | 16 var queryParams = window.location.search; |
17 if (!queryParams) | 17 if (!queryParams) |
18 return; | 18 return; |
19 var params = queryParams.substring(1).split('&'); | 19 var params = queryParams.substring(1).split('&'); |
20 for (var i = 0; i < params.length; ++i) { | 20 for (var i = 0; i < params.length; ++i) { |
21 var pair = params[i].split('='); | 21 var pair = params[i].split('='); |
22 queryParamsObject[pair[0]] = pair[1]; | 22 queryParamsObject[pair[0]] = pair[1]; |
23 } | 23 } |
24 | 24 |
25 if ('trace' in queryParamsObject || 'tracing' in queryParamsObject) { | 25 if ('trace' in queryParamsObject || 'tracing' in queryParamsObject) { |
26 browserInspector = 'chrome://tracing'; | 26 browserInspector = 'chrome://tracing'; |
27 browserInspectorTitle = 'trace'; | 27 browserInspectorTitle = 'trace'; |
28 } else { | 28 } else { |
29 browserInspector = queryParamsObject['browser-inspector']; | 29 browserInspector = queryParamsObject['browser-inspector']; |
30 browserInspectorTitle = 'inspect'; | 30 browserInspectorTitle = 'inspect'; |
31 } | 31 } |
32 })(); | 32 })(); |
(...skipping 15 matching lines...) Expand all Loading... |
48 var element = $(element_id); | 48 var element = $(element_id); |
49 var elements = element.querySelectorAll('.row.additional'); | 49 var elements = element.querySelectorAll('.row.additional'); |
50 for (var i = 0; i != elements.length; i++) | 50 for (var i = 0; i != elements.length; i++) |
51 element.removeChild(elements[i]); | 51 element.removeChild(elements[i]); |
52 } | 52 } |
53 | 53 |
54 function removeChildrenExceptAdditional(element_id) { | 54 function removeChildrenExceptAdditional(element_id) { |
55 var element = $(element_id); | 55 var element = $(element_id); |
56 var elements = element.querySelectorAll('.row:not(.additional)'); | 56 var elements = element.querySelectorAll('.row:not(.additional)'); |
57 for (var i = 0; i != elements.length; i++) | 57 for (var i = 0; i != elements.length; i++) |
58 element.removeChild(elements[i]); | 58 element.removeChild(elements[i]); |
59 } | 59 } |
60 | 60 |
61 function onload() { | 61 function onload() { |
62 var tabContents = document.querySelectorAll('#content > div'); | 62 var tabContents = document.querySelectorAll('#content > div'); |
63 for (var i = 0; i != tabContents.length; i++) { | 63 for (var i = 0; i != tabContents.length; i++) { |
64 var tabContent = tabContents[i]; | 64 var tabContent = tabContents[i]; |
65 var tabName = tabContent.querySelector('.content-header').textContent; | 65 var tabName = tabContent.querySelector('.content-header').textContent; |
66 | 66 |
67 var tabHeader = document.createElement('div'); | 67 var tabHeader = document.createElement('div'); |
68 tabHeader.className = 'tab-header'; | 68 tabHeader.className = 'tab-header'; |
(...skipping 87 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
156 var json = JSON.stringify(data); | 156 var json = JSON.stringify(data); |
157 if (element.cachedJSON == json) | 157 if (element.cachedJSON == json) |
158 return true; | 158 return true; |
159 element.cachedJSON = json; | 159 element.cachedJSON = json; |
160 return false; | 160 return false; |
161 } | 161 } |
162 | 162 |
163 function updateBrowserVisibility(browserSection) { | 163 function updateBrowserVisibility(browserSection) { |
164 var icon = browserSection.querySelector('.used-for-port-forwarding'); | 164 var icon = browserSection.querySelector('.used-for-port-forwarding'); |
165 browserSection.hidden = !browserSection.querySelector('.open') && | 165 browserSection.hidden = !browserSection.querySelector('.open') && |
166 !browserSection.querySelector('.row') && | 166 !browserSection.querySelector('.row') && !browserInspector && |
167 !browserInspector && | 167 (!icon || icon.hidden); |
168 (!icon || icon.hidden); | |
169 } | 168 } |
170 | 169 |
171 function updateUsernameVisibility(deviceSection) { | 170 function updateUsernameVisibility(deviceSection) { |
172 var users = new Set(); | 171 var users = new Set(); |
173 var browsers = deviceSection.querySelectorAll('.browser'); | 172 var browsers = deviceSection.querySelectorAll('.browser'); |
174 | 173 |
175 Array.prototype.forEach.call(browsers, function(browserSection) { | 174 Array.prototype.forEach.call(browsers, function(browserSection) { |
176 if (!browserSection.hidden) { | 175 if (!browserSection.hidden) { |
177 var browserUser = browserSection.querySelector('.browser-user'); | 176 var browserUser = browserSection.querySelector('.browser-user'); |
178 if (browserUser) | 177 if (browserUser) |
(...skipping 21 matching lines...) Expand all Loading... |
200 function browserCompare(a, b) { | 199 function browserCompare(a, b) { |
201 if (a.adbBrowserName != b.adbBrowserName) | 200 if (a.adbBrowserName != b.adbBrowserName) |
202 return a.adbBrowserName < b.adbBrowserName; | 201 return a.adbBrowserName < b.adbBrowserName; |
203 if (a.adbBrowserVersion != b.adbBrowserVersion) | 202 if (a.adbBrowserVersion != b.adbBrowserVersion) |
204 return a.adbBrowserVersion < b.adbBrowserVersion; | 203 return a.adbBrowserVersion < b.adbBrowserVersion; |
205 return a.id < b.id; | 204 return a.id < b.id; |
206 } | 205 } |
207 | 206 |
208 function insertBrowser(browserList, browser) { | 207 function insertBrowser(browserList, browser) { |
209 for (var sibling = browserList.firstElementChild; sibling; | 208 for (var sibling = browserList.firstElementChild; sibling; |
210 sibling = sibling.nextElementSibling) { | 209 sibling = sibling.nextElementSibling) { |
211 if (browserCompare(browser, sibling)) { | 210 if (browserCompare(browser, sibling)) { |
212 browserList.insertBefore(browser, sibling); | 211 browserList.insertBefore(browser, sibling); |
213 return; | 212 return; |
214 } | 213 } |
215 } | 214 } |
216 browserList.appendChild(browser); | 215 browserList.appendChild(browser); |
217 } | 216 } |
218 | 217 |
219 var deviceList = $('devices-list'); | 218 var deviceList = $('devices-list'); |
220 if (alreadyDisplayed(deviceList, devices)) | 219 if (alreadyDisplayed(deviceList, devices)) |
221 return; | 220 return; |
222 | 221 |
223 function removeObsolete(validIds, section) { | 222 function removeObsolete(validIds, section) { |
224 if (validIds.indexOf(section.id) < 0) | 223 if (validIds.indexOf(section.id) < 0) |
225 section.remove(); | 224 section.remove(); |
226 } | 225 } |
227 | 226 |
228 var newDeviceIds = devices.map(function(d) { return d.id; }); | 227 var newDeviceIds = devices.map(function(d) { |
| 228 return d.id; |
| 229 }); |
229 Array.prototype.forEach.call( | 230 Array.prototype.forEach.call( |
230 deviceList.querySelectorAll('.device'), | 231 deviceList.querySelectorAll('.device'), |
231 removeObsolete.bind(null, newDeviceIds)); | 232 removeObsolete.bind(null, newDeviceIds)); |
232 | 233 |
233 $('devices-help').hidden = !!devices.length; | 234 $('devices-help').hidden = !!devices.length; |
234 | 235 |
235 for (var d = 0; d < devices.length; d++) { | 236 for (var d = 0; d < devices.length; d++) { |
236 var device = devices[d]; | 237 var device = devices[d]; |
237 | 238 |
238 var deviceSection = $(device.id); | 239 var deviceSection = $(device.id); |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
270 var authenticating = document.createElement('div'); | 271 var authenticating = document.createElement('div'); |
271 authenticating.className = 'device-auth'; | 272 authenticating.className = 'device-auth'; |
272 deviceSection.appendChild(authenticating); | 273 deviceSection.appendChild(authenticating); |
273 } | 274 } |
274 | 275 |
275 if (alreadyDisplayed(deviceSection, device)) | 276 if (alreadyDisplayed(deviceSection, device)) |
276 continue; | 277 continue; |
277 | 278 |
278 deviceSection.querySelector('.device-name').textContent = device.adbModel; | 279 deviceSection.querySelector('.device-name').textContent = device.adbModel; |
279 deviceSection.querySelector('.device-auth').textContent = | 280 deviceSection.querySelector('.device-auth').textContent = |
280 device.adbConnected ? '' : 'Pending authentication: please accept ' + | 281 device.adbConnected ? '' : |
281 'debugging session on the device.'; | 282 'Pending authentication: please accept ' + |
| 283 'debugging session on the device.'; |
282 | 284 |
283 var browserList = deviceSection.querySelector('.browsers'); | 285 var browserList = deviceSection.querySelector('.browsers'); |
284 var newBrowserIds = | 286 var newBrowserIds = device.browsers.map(function(b) { |
285 device.browsers.map(function(b) { return b.id; }); | 287 return b.id; |
| 288 }); |
286 Array.prototype.forEach.call( | 289 Array.prototype.forEach.call( |
287 browserList.querySelectorAll('.browser'), | 290 browserList.querySelectorAll('.browser'), |
288 removeObsolete.bind(null, newBrowserIds)); | 291 removeObsolete.bind(null, newBrowserIds)); |
289 | 292 |
290 for (var b = 0; b < device.browsers.length; b++) { | 293 for (var b = 0; b < device.browsers.length; b++) { |
291 var browser = device.browsers[b]; | 294 var browser = device.browsers[b]; |
292 var majorChromeVersion = browser.adbBrowserChromeVersion; | 295 var majorChromeVersion = browser.adbBrowserChromeVersion; |
293 var pageList; | 296 var pageList; |
294 var browserSection = $(browser.id); | 297 var browserSection = $(browser.id); |
295 if (browserSection) { | 298 if (browserSection) { |
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
352 browserHeader.appendChild(portForwardingInfo); | 355 browserHeader.appendChild(portForwardingInfo); |
353 | 356 |
354 if (browserInspector) { | 357 if (browserInspector) { |
355 var link = document.createElement('span'); | 358 var link = document.createElement('span'); |
356 link.classList.add('action'); | 359 link.classList.add('action'); |
357 link.setAttribute('tabindex', 1); | 360 link.setAttribute('tabindex', 1); |
358 link.textContent = browserInspectorTitle; | 361 link.textContent = browserInspectorTitle; |
359 browserHeader.appendChild(link); | 362 browserHeader.appendChild(link); |
360 link.addEventListener( | 363 link.addEventListener( |
361 'click', | 364 'click', |
362 sendCommand.bind(null, 'inspect-browser', browser.source, | 365 sendCommand.bind( |
363 browser.id, browserInspector), false); | 366 null, 'inspect-browser', browser.source, browser.id, |
| 367 browserInspector), |
| 368 false); |
364 } | 369 } |
365 | 370 |
366 pageList = document.createElement('div'); | 371 pageList = document.createElement('div'); |
367 pageList.className = 'list pages'; | 372 pageList.className = 'list pages'; |
368 browserSection.appendChild(pageList); | 373 browserSection.appendChild(pageList); |
369 } | 374 } |
370 | 375 |
371 if (!alreadyDisplayed(browserSection, browser)) { | 376 if (!alreadyDisplayed(browserSection, browser)) { |
372 pageList.textContent = ''; | 377 pageList.textContent = ''; |
373 for (var p = 0; p < browser.pages.length; p++) { | 378 for (var p = 0; p < browser.pages.length; p++) { |
374 var page = browser.pages[p]; | 379 var page = browser.pages[p]; |
375 // Attached targets have no unique id until Chrome 26. For such | 380 // Attached targets have no unique id until Chrome 26. For such |
376 // targets it is impossible to activate existing DevTools window. | 381 // targets it is impossible to activate existing DevTools window. |
377 page.hasNoUniqueId = page.attached && | 382 page.hasNoUniqueId = page.attached && majorChromeVersion && |
378 majorChromeVersion && majorChromeVersion < MIN_VERSION_TARGET_ID; | 383 majorChromeVersion < MIN_VERSION_TARGET_ID; |
379 var row = addTargetToList(page, pageList, ['name', 'url']); | 384 var row = addTargetToList(page, pageList, ['name', 'url']); |
380 if (page['description']) | 385 if (page['description']) |
381 addWebViewDetails(row, page); | 386 addWebViewDetails(row, page); |
382 else | 387 else |
383 addFavicon(row, page); | 388 addFavicon(row, page); |
384 if (majorChromeVersion >= MIN_VERSION_TAB_ACTIVATE) { | 389 if (majorChromeVersion >= MIN_VERSION_TAB_ACTIVATE) { |
385 addActionLink(row, 'focus tab', | 390 addActionLink( |
| 391 row, 'focus tab', |
386 sendTargetCommand.bind(null, 'activate', page), false); | 392 sendTargetCommand.bind(null, 'activate', page), false); |
387 } | 393 } |
388 if (majorChromeVersion) { | 394 if (majorChromeVersion) { |
389 addActionLink(row, 'reload', | 395 addActionLink( |
390 sendTargetCommand.bind(null, 'reload', page), page.attached); | 396 row, 'reload', sendTargetCommand.bind(null, 'reload', page), |
| 397 page.attached); |
391 } | 398 } |
392 if (majorChromeVersion >= MIN_VERSION_TAB_CLOSE) { | 399 if (majorChromeVersion >= MIN_VERSION_TAB_CLOSE) { |
393 addActionLink(row, 'close', | 400 addActionLink( |
394 sendTargetCommand.bind(null, 'close', page), false); | 401 row, 'close', sendTargetCommand.bind(null, 'close', page), |
| 402 false); |
395 } | 403 } |
396 } | 404 } |
397 } | 405 } |
398 updateBrowserVisibility(browserSection); | 406 updateBrowserVisibility(browserSection); |
399 } | 407 } |
400 updateUsernameVisibility(deviceSection); | 408 updateUsernameVisibility(deviceSection); |
401 } | 409 } |
402 } | 410 } |
403 | 411 |
404 function addToPagesList(data) { | 412 function addToPagesList(data) { |
(...skipping 21 matching lines...) Expand all Loading... |
426 Array.prototype.forEach.call(guests, function(guest) { | 434 Array.prototype.forEach.call(guests, function(guest) { |
427 var guestRow = addTargetToList(guest, row, ['name', 'url']); | 435 var guestRow = addTargetToList(guest, row, ['name', 'url']); |
428 guestRow.classList.add('guest'); | 436 guestRow.classList.add('guest'); |
429 addFavicon(guestRow, guest); | 437 addFavicon(guestRow, guest); |
430 }); | 438 }); |
431 } | 439 } |
432 | 440 |
433 function addToWorkersList(data) { | 441 function addToWorkersList(data) { |
434 var row = | 442 var row = |
435 addTargetToList(data, $('workers-list'), ['name', 'description', 'url']); | 443 addTargetToList(data, $('workers-list'), ['name', 'description', 'url']); |
436 addActionLink(row, 'terminate', | 444 addActionLink( |
437 sendTargetCommand.bind(null, 'close', data), false); | 445 row, 'terminate', sendTargetCommand.bind(null, 'close', data), false); |
438 } | 446 } |
439 | 447 |
440 function addToServiceWorkersList(data) { | 448 function addToServiceWorkersList(data) { |
441 var row = addTargetToList( | 449 var row = addTargetToList( |
442 data, $('service-workers-list'), ['name', 'description', 'url']); | 450 data, $('service-workers-list'), ['name', 'description', 'url']); |
443 addActionLink(row, 'terminate', | 451 addActionLink( |
444 sendTargetCommand.bind(null, 'close', data), false); | 452 row, 'terminate', sendTargetCommand.bind(null, 'close', data), false); |
445 } | 453 } |
446 | 454 |
447 function addToOthersList(data) { | 455 function addToOthersList(data) { |
448 addTargetToList(data, $('others-list'), ['url']); | 456 addTargetToList(data, $('others-list'), ['url']); |
449 } | 457 } |
450 | 458 |
451 function addAdditionalTargetsToOthersList(data) { | 459 function addAdditionalTargetsToOthersList(data) { |
452 addTargetToList(data, $('others-list'), ['name', 'url']); | 460 addTargetToList(data, $('others-list'), ['name', 'url']); |
453 } | 461 } |
454 | 462 |
(...skipping 29 matching lines...) Expand all Loading... |
484 } catch (e) { | 492 } catch (e) { |
485 return; | 493 return; |
486 } | 494 } |
487 addWebViewDescription(row, webview); | 495 addWebViewDescription(row, webview); |
488 if (data.adbScreenWidth && data.adbScreenHeight) | 496 if (data.adbScreenWidth && data.adbScreenHeight) |
489 addWebViewThumbnail( | 497 addWebViewThumbnail( |
490 row, webview, data.adbScreenWidth, data.adbScreenHeight); | 498 row, webview, data.adbScreenWidth, data.adbScreenHeight); |
491 } | 499 } |
492 | 500 |
493 function addWebViewDescription(row, webview) { | 501 function addWebViewDescription(row, webview) { |
494 var viewStatus = { visibility: '', position: '', size: '' }; | 502 var viewStatus = {visibility: '', position: '', size: ''}; |
495 if (!webview.empty) { | 503 if (!webview.empty) { |
496 if (webview.attached && !webview.visible) | 504 if (webview.attached && !webview.visible) |
497 viewStatus.visibility = 'hidden'; | 505 viewStatus.visibility = 'hidden'; |
498 else if (!webview.attached) | 506 else if (!webview.attached) |
499 viewStatus.visibility = 'detached'; | 507 viewStatus.visibility = 'detached'; |
500 viewStatus.size = 'size ' + webview.width + ' \u00d7 ' + webview.height; | 508 viewStatus.size = 'size ' + webview.width + ' \u00d7 ' + webview.height; |
501 } else { | 509 } else { |
502 viewStatus.visibility = 'empty'; | 510 viewStatus.visibility = 'empty'; |
503 } | 511 } |
504 if (webview.attached) { | 512 if (webview.attached) { |
505 viewStatus.position = | 513 viewStatus.position = |
506 'at (' + webview.screenX + ', ' + webview.screenY + ')'; | 514 'at (' + webview.screenX + ', ' + webview.screenY + ')'; |
507 } | 515 } |
508 | 516 |
509 var subRow = document.createElement('div'); | 517 var subRow = document.createElement('div'); |
510 subRow.className = 'subrow webview'; | 518 subRow.className = 'subrow webview'; |
511 if (webview.empty || !webview.attached || !webview.visible) | 519 if (webview.empty || !webview.attached || !webview.visible) |
512 subRow.className += ' invisible-view'; | 520 subRow.className += ' invisible-view'; |
513 if (viewStatus.visibility) | 521 if (viewStatus.visibility) |
514 subRow.appendChild(formatValue(viewStatus, 'visibility')); | 522 subRow.appendChild(formatValue(viewStatus, 'visibility')); |
515 if (viewStatus.position) | 523 if (viewStatus.position) |
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
585 subrowBox.appendChild(subrow); | 593 subrowBox.appendChild(subrow); |
586 | 594 |
587 for (var j = 0; j < properties.length; j++) | 595 for (var j = 0; j < properties.length; j++) |
588 subrow.appendChild(formatValue(data, properties[j])); | 596 subrow.appendChild(formatValue(data, properties[j])); |
589 | 597 |
590 var actionBox = document.createElement('div'); | 598 var actionBox = document.createElement('div'); |
591 actionBox.className = 'actions'; | 599 actionBox.className = 'actions'; |
592 subrowBox.appendChild(actionBox); | 600 subrowBox.appendChild(actionBox); |
593 | 601 |
594 if (data.isAdditional) { | 602 if (data.isAdditional) { |
595 addActionLink(row, 'inspect', | 603 addActionLink( |
596 sendCommand.bind(null, 'inspect-additional', data.url), false); | 604 row, 'inspect', sendCommand.bind(null, 'inspect-additional', data.url), |
| 605 false); |
597 row.classList.add('additional'); | 606 row.classList.add('additional'); |
598 } else if (!data.hasCustomInspectAction) { | 607 } else if (!data.hasCustomInspectAction) { |
599 addActionLink(row, 'inspect', sendTargetCommand.bind(null, 'inspect', data), | 608 addActionLink( |
| 609 row, 'inspect', sendTargetCommand.bind(null, 'inspect', data), |
600 data.hasNoUniqueId || data.adbAttachedForeign); | 610 data.hasNoUniqueId || data.adbAttachedForeign); |
601 } | 611 } |
602 | 612 |
603 list.appendChild(row); | 613 list.appendChild(row); |
604 return row; | 614 return row; |
605 } | 615 } |
606 | 616 |
607 function addActionLink(row, text, handler, opt_disabled) { | 617 function addActionLink(row, text, handler, opt_disabled) { |
608 var link = document.createElement('span'); | 618 var link = document.createElement('span'); |
609 link.classList.add('action'); | 619 link.classList.add('action'); |
610 link.setAttribute('tabindex', 1); | 620 link.setAttribute('tabindex', 1); |
611 if (opt_disabled) | 621 if (opt_disabled) |
612 link.classList.add('disabled'); | 622 link.classList.add('disabled'); |
613 else | 623 else |
614 link.classList.remove('disabled'); | 624 link.classList.remove('disabled'); |
615 | 625 |
616 link.textContent = text; | 626 link.textContent = text; |
617 link.addEventListener('click', handler, true); | 627 link.addEventListener('click', handler, true); |
618 function handleKey(e) { | 628 function handleKey(e) { |
619 if (e.key == 'Enter' || e.key == ' ') { | 629 if (e.key == 'Enter' || e.key == ' ') { |
620 e.preventDefault(); | 630 e.preventDefault(); |
621 handler(); | 631 handler(); |
622 } | 632 } |
623 } | 633 } |
624 link.addEventListener('keydown', handleKey, true); | 634 link.addEventListener('keydown', handleKey, true); |
625 row.querySelector('.actions').appendChild(link); | 635 row.querySelector('.actions').appendChild(link); |
626 } | 636 } |
627 | 637 |
628 function initSettings() { | 638 function initSettings() { |
629 checkboxSendsCommand('discover-usb-devices-enable', | 639 checkboxSendsCommand( |
630 'set-discover-usb-devices-enabled'); | 640 'discover-usb-devices-enable', 'set-discover-usb-devices-enabled'); |
631 checkboxSendsCommand('port-forwarding-enable', 'set-port-forwarding-enabled'); | 641 checkboxSendsCommand('port-forwarding-enable', 'set-port-forwarding-enabled'); |
632 checkboxSendsCommand('discover-tcp-devices-enable', | 642 checkboxSendsCommand( |
633 'set-discover-tcp-targets-enabled'); | 643 'discover-tcp-devices-enable', 'set-discover-tcp-targets-enabled'); |
634 | 644 |
635 $('port-forwarding-config-open').addEventListener( | 645 $('port-forwarding-config-open') |
636 'click', openPortForwardingConfig); | 646 .addEventListener('click', openPortForwardingConfig); |
637 $('tcp-discovery-config-open').addEventListener( | 647 $('tcp-discovery-config-open').addEventListener('click', openTargetsConfig); |
638 'click', openTargetsConfig); | |
639 $('config-dialog-close').addEventListener('click', function() { | 648 $('config-dialog-close').addEventListener('click', function() { |
640 $('config-dialog').commit(true); | 649 $('config-dialog').commit(true); |
641 }); | 650 }); |
642 $('node-frontend').addEventListener( | 651 $('node-frontend') |
643 'click', sendCommand.bind(null, 'open-node-frontend')); | 652 .addEventListener('click', sendCommand.bind(null, 'open-node-frontend')); |
644 } | 653 } |
645 | 654 |
646 function checkboxHandler(command, event) { | 655 function checkboxHandler(command, event) { |
647 sendCommand(command, event.target.checked); | 656 sendCommand(command, event.target.checked); |
648 } | 657 } |
649 | 658 |
650 function checkboxSendsCommand(id, command) { | 659 function checkboxSendsCommand(id, command) { |
651 $(id).addEventListener('change', checkboxHandler.bind(null, command)); | 660 $(id).addEventListener('change', checkboxHandler.bind(null, command)); |
652 } | 661 } |
653 | 662 |
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
706 for (var key in data) | 715 for (var key in data) |
707 list.createRow(key, data[key]); | 716 list.createRow(key, data[key]); |
708 list.createRow(null, null); | 717 list.createRow(null, null); |
709 | 718 |
710 dialog.showModal(); | 719 dialog.showModal(); |
711 var defaultFocus = dialog.querySelector('.fresh .preselected'); | 720 var defaultFocus = dialog.querySelector('.fresh .preselected'); |
712 if (defaultFocus) | 721 if (defaultFocus) |
713 defaultFocus.focus(); | 722 defaultFocus.focus(); |
714 else | 723 else |
715 doneButton.focus(); | 724 doneButton.focus(); |
716 | |
717 } | 725 } |
718 | 726 |
719 function openPortForwardingConfig() { | 727 function openPortForwardingConfig() { |
720 function createPortForwardingConfigLine(port, location) { | 728 function createPortForwardingConfigLine(port, location) { |
721 var line = document.createElement('div'); | 729 var line = document.createElement('div'); |
722 line.className = 'port-forwarding-pair config-list-row'; | 730 line.className = 'port-forwarding-pair config-list-row'; |
723 | 731 |
724 var portInput = createConfigField(port, 'port preselected', | 732 var portInput = |
725 'Port', validatePort); | 733 createConfigField(port, 'port preselected', 'Port', validatePort); |
726 line.appendChild(portInput); | 734 line.appendChild(portInput); |
727 | 735 |
728 var locationInput = createConfigField( | 736 var locationInput = createConfigField( |
729 location, 'location', 'IP address and port', validateLocation); | 737 location, 'location', 'IP address and port', validateLocation); |
730 locationInput.classList.add('primary'); | 738 locationInput.classList.add('primary'); |
731 line.appendChild(locationInput); | 739 line.appendChild(locationInput); |
732 return line; | 740 return line; |
733 } | 741 } |
734 | 742 |
735 function commitPortForwardingConfig() { | 743 function commitPortForwardingConfig() { |
736 var config = {}; | 744 var config = {}; |
737 filterList(['.port', '.location'], function(port, location) { | 745 filterList(['.port', '.location'], function(port, location) { |
738 config[port] = location; | 746 config[port] = location; |
739 }); | 747 }); |
740 sendCommand('set-port-forwarding-config', config); | 748 sendCommand('set-port-forwarding-config', config); |
741 } | 749 } |
742 | 750 |
743 openConfigDialog('port-forwarding', | 751 openConfigDialog( |
744 commitPortForwardingConfig, | 752 'port-forwarding', commitPortForwardingConfig, |
745 createPortForwardingConfigLine, | 753 createPortForwardingConfigLine, window.portForwardingConfig); |
746 window.portForwardingConfig); | |
747 } | 754 } |
748 | 755 |
749 function openTargetsConfig() { | 756 function openTargetsConfig() { |
750 function createTargetDiscoveryConfigLine(index, targetDiscovery) { | 757 function createTargetDiscoveryConfigLine(index, targetDiscovery) { |
751 var line = document.createElement('div'); | 758 var line = document.createElement('div'); |
752 line.className = 'target-discovery-line config-list-row'; | 759 line.className = 'target-discovery-line config-list-row'; |
753 | 760 |
754 var locationInput = createConfigField( | 761 var locationInput = createConfigField( |
755 targetDiscovery, 'location preselected', 'IP address and port', | 762 targetDiscovery, 'location preselected', 'IP address and port', |
756 validateLocation); | 763 validateLocation); |
757 locationInput.classList.add('primary'); | 764 locationInput.classList.add('primary'); |
758 line.appendChild(locationInput); | 765 line.appendChild(locationInput); |
759 return line; | 766 return line; |
760 } | 767 } |
761 | 768 |
762 function commitTargetDiscoveryConfig() { | 769 function commitTargetDiscoveryConfig() { |
763 var entries = []; | 770 var entries = []; |
764 filterList(['.location'], function(location) { | 771 filterList(['.location'], function(location) { |
765 entries.push(location); | 772 entries.push(location); |
766 }); | 773 }); |
767 sendCommand('set-tcp-discovery-config', entries); | 774 sendCommand('set-tcp-discovery-config', entries); |
768 } | 775 } |
769 | 776 |
770 openConfigDialog('target-discovery', | 777 openConfigDialog( |
771 commitTargetDiscoveryConfig, | 778 'target-discovery', commitTargetDiscoveryConfig, |
772 createTargetDiscoveryConfigLine, | 779 createTargetDiscoveryConfigLine, window.targetDiscoveryConfig); |
773 window.targetDiscoveryConfig); | |
774 } | 780 } |
775 | 781 |
776 function filterList(fieldSelectors, callback) { | 782 function filterList(fieldSelectors, callback) { |
777 var lines = $('config-dialog').querySelectorAll('.config-list-row'); | 783 var lines = $('config-dialog').querySelectorAll('.config-list-row'); |
778 for (var i = 0; i != lines.length; i++) { | 784 for (var i = 0; i != lines.length; i++) { |
779 var line = lines[i]; | 785 var line = lines[i]; |
780 var values = []; | 786 var values = []; |
781 for (var selector of fieldSelectors) { | 787 for (var selector of fieldSelectors) { |
782 var input = line.querySelector(selector); | 788 var input = line.querySelector(selector); |
783 var value = input.classList.contains('invalid') ? | 789 var value = input.classList.contains('invalid') ? input.lastValidValue : |
784 input.lastValidValue : | 790 input.value; |
785 input.value; | |
786 if (!value) | 791 if (!value) |
787 break; | 792 break; |
788 values.push(value); | 793 values.push(value); |
789 } | 794 } |
790 if (values.length == fieldSelectors.length) | 795 if (values.length == fieldSelectors.length) |
791 callback.apply(null, values); | 796 callback.apply(null, values); |
792 } | 797 } |
793 } | 798 } |
794 | 799 |
795 function updateCheckbox(id, enabled) { | 800 function updateCheckbox(id, enabled) { |
(...skipping 22 matching lines...) Expand all Loading... |
818 } | 823 } |
819 | 824 |
820 function updateTCPDiscoveryConfig(config) { | 825 function updateTCPDiscoveryConfig(config) { |
821 window.targetDiscoveryConfig = config; | 826 window.targetDiscoveryConfig = config; |
822 $('tcp-discovery-config-open').disabled = !config; | 827 $('tcp-discovery-config-open').disabled = !config; |
823 } | 828 } |
824 | 829 |
825 function appendRow(list, lineFactory, key, value) { | 830 function appendRow(list, lineFactory, key, value) { |
826 var line = lineFactory(key, value); | 831 var line = lineFactory(key, value); |
827 line.lastElementChild.addEventListener('keydown', function(e) { | 832 line.lastElementChild.addEventListener('keydown', function(e) { |
828 if (e.key == 'Tab' && | 833 if (e.key == 'Tab' && !hasKeyModifiers(e) && |
829 !hasKeyModifiers(e) && | 834 line.classList.contains('fresh') && !line.classList.contains('empty')) { |
830 line.classList.contains('fresh') && | |
831 !line.classList.contains('empty')) { | |
832 // Tabbing forward on the fresh line, try create a new empty one. | 835 // Tabbing forward on the fresh line, try create a new empty one. |
833 if (commitFreshLineIfValid(true)) | 836 if (commitFreshLineIfValid(true)) |
834 e.preventDefault(); | 837 e.preventDefault(); |
835 } | 838 } |
836 }); | 839 }); |
837 | 840 |
838 var lineDelete = document.createElement('div'); | 841 var lineDelete = document.createElement('div'); |
839 lineDelete.className = 'close-button'; | 842 lineDelete.className = 'close-button'; |
840 lineDelete.addEventListener('click', function() { | 843 lineDelete.addEventListener('click', function() { |
841 var newSelection = line.nextElementSibling || line.previousElementSibling; | 844 var newSelection = line.nextElementSibling || line.previousElementSibling; |
842 selectLine(newSelection, true); | 845 selectLine(newSelection, true); |
843 line.parentNode.removeChild(line); | 846 line.parentNode.removeChild(line); |
844 $('config-dialog').commit(false); | 847 $('config-dialog').commit(false); |
845 }); | 848 }); |
846 line.appendChild(lineDelete); | 849 line.appendChild(lineDelete); |
847 | 850 |
848 line.addEventListener( | 851 line.addEventListener('click', selectLine.bind(null, line, true)); |
849 'click', selectLine.bind(null, line, true)); | 852 line.addEventListener('focus', selectLine.bind(null, line, true)); |
850 line.addEventListener( | |
851 'focus', selectLine.bind(null, line, true)); | |
852 checkEmptyLine(line); | 853 checkEmptyLine(line); |
853 | 854 |
854 if (!key && !value) | 855 if (!key && !value) |
855 line.classList.add('fresh'); | 856 line.classList.add('fresh'); |
856 | 857 |
857 return list.appendChild(line); | 858 return list.appendChild(line); |
858 } | 859 } |
859 | 860 |
860 function validatePort(input) { | 861 function validatePort(input) { |
861 var match = input.value.match(/^(\d+)$/); | 862 var match = input.value.match(/^(\d+)$/); |
(...skipping 159 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1021 Array.prototype.forEach.call( | 1022 Array.prototype.forEach.call( |
1022 deviceSection.querySelectorAll('.browser'), clearBrowserPorts); | 1023 deviceSection.querySelectorAll('.browser'), clearBrowserPorts); |
1023 } | 1024 } |
1024 | 1025 |
1025 Array.prototype.forEach.call( | 1026 Array.prototype.forEach.call( |
1026 document.querySelectorAll('.device'), clearPorts); | 1027 document.querySelectorAll('.device'), clearPorts); |
1027 } | 1028 } |
1028 | 1029 |
1029 document.addEventListener('DOMContentLoaded', onload); | 1030 document.addEventListener('DOMContentLoaded', onload); |
1030 window.addEventListener('hashchange', onHashChange); | 1031 window.addEventListener('hashchange', onHashChange); |
OLD | NEW |