| 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 |