| 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 })(); |
| 33 | 33 |
| 34 function sendCommand(command, args) { | 34 function sendCommand(command, args) { |
| 35 chrome.send(command, Array.prototype.slice.call(arguments, 1)); | 35 chrome.send(command, Array.prototype.slice.call(arguments, 1)); |
| 36 } | 36 } |
| 37 | 37 |
| 38 function sendTargetCommand(command, target) { | 38 function sendTargetCommand(command, target) { |
| 39 sendCommand(command, target.source, target.id); | 39 sendCommand(command, target.source, target.id); |
| 40 } | 40 } |
| 41 | 41 |
| 42 function removeChildren(element_id) { | 42 function removeChildren(element_id) { |
| 43 var element = $(element_id); | 43 var element = $(element_id); |
| 44 element.textContent = ''; | 44 element.textContent = ''; |
| 45 } | 45 } |
| 46 | 46 |
| 47 function removeAdditionalChildren(element_id) { | 47 function removeAdditionalChildren(element_id) { |
| 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 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 351 'forwarding. Closing it will drop current connections.'; | 354 'forwarding. Closing it will drop current connections.'; |
| 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', sendCommand.bind( |
| 362 sendCommand.bind(null, 'inspect-browser', browser.source, | 365 null, 'inspect-browser', browser.source, browser.id, |
| 363 browser.id, browserInspector), false); | 366 browserInspector), |
| 367 false); |
| 364 } | 368 } |
| 365 | 369 |
| 366 pageList = document.createElement('div'); | 370 pageList = document.createElement('div'); |
| 367 pageList.className = 'list pages'; | 371 pageList.className = 'list pages'; |
| 368 browserSection.appendChild(pageList); | 372 browserSection.appendChild(pageList); |
| 369 } | 373 } |
| 370 | 374 |
| 371 if (!alreadyDisplayed(browserSection, browser)) { | 375 if (!alreadyDisplayed(browserSection, browser)) { |
| 372 pageList.textContent = ''; | 376 pageList.textContent = ''; |
| 373 for (var p = 0; p < browser.pages.length; p++) { | 377 for (var p = 0; p < browser.pages.length; p++) { |
| 374 var page = browser.pages[p]; | 378 var page = browser.pages[p]; |
| 375 // Attached targets have no unique id until Chrome 26. For such | 379 // Attached targets have no unique id until Chrome 26. For such |
| 376 // targets it is impossible to activate existing DevTools window. | 380 // targets it is impossible to activate existing DevTools window. |
| 377 page.hasNoUniqueId = page.attached && | 381 page.hasNoUniqueId = page.attached && majorChromeVersion && |
| 378 majorChromeVersion && majorChromeVersion < MIN_VERSION_TARGET_ID; | 382 majorChromeVersion < MIN_VERSION_TARGET_ID; |
| 379 var row = addTargetToList(page, pageList, ['name', 'url']); | 383 var row = addTargetToList(page, pageList, ['name', 'url']); |
| 380 if (page['description']) | 384 if (page['description']) |
| 381 addWebViewDetails(row, page); | 385 addWebViewDetails(row, page); |
| 382 else | 386 else |
| 383 addFavicon(row, page); | 387 addFavicon(row, page); |
| 384 if (majorChromeVersion >= MIN_VERSION_TAB_ACTIVATE) { | 388 if (majorChromeVersion >= MIN_VERSION_TAB_ACTIVATE) { |
| 385 addActionLink(row, 'focus tab', | 389 addActionLink( |
| 390 row, 'focus tab', |
| 386 sendTargetCommand.bind(null, 'activate', page), false); | 391 sendTargetCommand.bind(null, 'activate', page), false); |
| 387 } | 392 } |
| 388 if (majorChromeVersion) { | 393 if (majorChromeVersion) { |
| 389 addActionLink(row, 'reload', | 394 addActionLink( |
| 390 sendTargetCommand.bind(null, 'reload', page), page.attached); | 395 row, 'reload', sendTargetCommand.bind(null, 'reload', page), |
| 396 page.attached); |
| 391 } | 397 } |
| 392 if (majorChromeVersion >= MIN_VERSION_TAB_CLOSE) { | 398 if (majorChromeVersion >= MIN_VERSION_TAB_CLOSE) { |
| 393 addActionLink(row, 'close', | 399 addActionLink( |
| 394 sendTargetCommand.bind(null, 'close', page), false); | 400 row, 'close', sendTargetCommand.bind(null, 'close', page), |
| 401 false); |
| 395 } | 402 } |
| 396 } | 403 } |
| 397 } | 404 } |
| 398 updateBrowserVisibility(browserSection); | 405 updateBrowserVisibility(browserSection); |
| 399 } | 406 } |
| 400 updateUsernameVisibility(deviceSection); | 407 updateUsernameVisibility(deviceSection); |
| 401 } | 408 } |
| 402 } | 409 } |
| 403 | 410 |
| 404 function addToPagesList(data) { | 411 function addToPagesList(data) { |
| (...skipping 21 matching lines...) Expand all Loading... |
| 426 Array.prototype.forEach.call(guests, function(guest) { | 433 Array.prototype.forEach.call(guests, function(guest) { |
| 427 var guestRow = addTargetToList(guest, row, ['name', 'url']); | 434 var guestRow = addTargetToList(guest, row, ['name', 'url']); |
| 428 guestRow.classList.add('guest'); | 435 guestRow.classList.add('guest'); |
| 429 addFavicon(guestRow, guest); | 436 addFavicon(guestRow, guest); |
| 430 }); | 437 }); |
| 431 } | 438 } |
| 432 | 439 |
| 433 function addToWorkersList(data) { | 440 function addToWorkersList(data) { |
| 434 var row = | 441 var row = |
| 435 addTargetToList(data, $('workers-list'), ['name', 'description', 'url']); | 442 addTargetToList(data, $('workers-list'), ['name', 'description', 'url']); |
| 436 addActionLink(row, 'terminate', | 443 addActionLink( |
| 437 sendTargetCommand.bind(null, 'close', data), false); | 444 row, 'terminate', sendTargetCommand.bind(null, 'close', data), false); |
| 438 } | 445 } |
| 439 | 446 |
| 440 function addToServiceWorkersList(data) { | 447 function addToServiceWorkersList(data) { |
| 441 var row = addTargetToList( | 448 var row = addTargetToList( |
| 442 data, $('service-workers-list'), ['name', 'description', 'url']); | 449 data, $('service-workers-list'), ['name', 'description', 'url']); |
| 443 addActionLink(row, 'terminate', | 450 addActionLink( |
| 444 sendTargetCommand.bind(null, 'close', data), false); | 451 row, 'terminate', sendTargetCommand.bind(null, 'close', data), false); |
| 445 } | 452 } |
| 446 | 453 |
| 447 function addToOthersList(data) { | 454 function addToOthersList(data) { |
| 448 addTargetToList(data, $('others-list'), ['url']); | 455 addTargetToList(data, $('others-list'), ['url']); |
| 449 } | 456 } |
| 450 | 457 |
| 451 function addAdditionalTargetsToOthersList(data) { | 458 function addAdditionalTargetsToOthersList(data) { |
| 452 addTargetToList(data, $('others-list'), ['name', 'url']); | 459 addTargetToList(data, $('others-list'), ['name', 'url']); |
| 453 } | 460 } |
| 454 | 461 |
| (...skipping 29 matching lines...) Expand all Loading... |
| 484 } catch (e) { | 491 } catch (e) { |
| 485 return; | 492 return; |
| 486 } | 493 } |
| 487 addWebViewDescription(row, webview); | 494 addWebViewDescription(row, webview); |
| 488 if (data.adbScreenWidth && data.adbScreenHeight) | 495 if (data.adbScreenWidth && data.adbScreenHeight) |
| 489 addWebViewThumbnail( | 496 addWebViewThumbnail( |
| 490 row, webview, data.adbScreenWidth, data.adbScreenHeight); | 497 row, webview, data.adbScreenWidth, data.adbScreenHeight); |
| 491 } | 498 } |
| 492 | 499 |
| 493 function addWebViewDescription(row, webview) { | 500 function addWebViewDescription(row, webview) { |
| 494 var viewStatus = { visibility: '', position: '', size: '' }; | 501 var viewStatus = {visibility: '', position: '', size: ''}; |
| 495 if (!webview.empty) { | 502 if (!webview.empty) { |
| 496 if (webview.attached && !webview.visible) | 503 if (webview.attached && !webview.visible) |
| 497 viewStatus.visibility = 'hidden'; | 504 viewStatus.visibility = 'hidden'; |
| 498 else if (!webview.attached) | 505 else if (!webview.attached) |
| 499 viewStatus.visibility = 'detached'; | 506 viewStatus.visibility = 'detached'; |
| 500 viewStatus.size = 'size ' + webview.width + ' \u00d7 ' + webview.height; | 507 viewStatus.size = 'size ' + webview.width + ' \u00d7 ' + webview.height; |
| 501 } else { | 508 } else { |
| 502 viewStatus.visibility = 'empty'; | 509 viewStatus.visibility = 'empty'; |
| 503 } | 510 } |
| 504 if (webview.attached) { | 511 if (webview.attached) { |
| 505 viewStatus.position = | 512 viewStatus.position = |
| 506 'at (' + webview.screenX + ', ' + webview.screenY + ')'; | 513 'at (' + webview.screenX + ', ' + webview.screenY + ')'; |
| 507 } | 514 } |
| 508 | 515 |
| 509 var subRow = document.createElement('div'); | 516 var subRow = document.createElement('div'); |
| 510 subRow.className = 'subrow webview'; | 517 subRow.className = 'subrow webview'; |
| 511 if (webview.empty || !webview.attached || !webview.visible) | 518 if (webview.empty || !webview.attached || !webview.visible) |
| 512 subRow.className += ' invisible-view'; | 519 subRow.className += ' invisible-view'; |
| 513 if (viewStatus.visibility) | 520 if (viewStatus.visibility) |
| 514 subRow.appendChild(formatValue(viewStatus, 'visibility')); | 521 subRow.appendChild(formatValue(viewStatus, 'visibility')); |
| 515 if (viewStatus.position) | 522 if (viewStatus.position) |
| (...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 585 subrowBox.appendChild(subrow); | 592 subrowBox.appendChild(subrow); |
| 586 | 593 |
| 587 for (var j = 0; j < properties.length; j++) | 594 for (var j = 0; j < properties.length; j++) |
| 588 subrow.appendChild(formatValue(data, properties[j])); | 595 subrow.appendChild(formatValue(data, properties[j])); |
| 589 | 596 |
| 590 var actionBox = document.createElement('div'); | 597 var actionBox = document.createElement('div'); |
| 591 actionBox.className = 'actions'; | 598 actionBox.className = 'actions'; |
| 592 subrowBox.appendChild(actionBox); | 599 subrowBox.appendChild(actionBox); |
| 593 | 600 |
| 594 if (data.isAdditional) { | 601 if (data.isAdditional) { |
| 595 addActionLink(row, 'inspect', | 602 addActionLink( |
| 596 sendCommand.bind(null, 'inspect-additional', data.url), false); | 603 row, 'inspect', sendCommand.bind(null, 'inspect-additional', data.url), |
| 604 false); |
| 597 row.classList.add('additional'); | 605 row.classList.add('additional'); |
| 598 } else if (!data.hasCustomInspectAction) { | 606 } else if (!data.hasCustomInspectAction) { |
| 599 addActionLink(row, 'inspect', sendTargetCommand.bind(null, 'inspect', data), | 607 addActionLink( |
| 608 row, 'inspect', sendTargetCommand.bind(null, 'inspect', data), |
| 600 data.hasNoUniqueId || data.adbAttachedForeign); | 609 data.hasNoUniqueId || data.adbAttachedForeign); |
| 601 } | 610 } |
| 602 | 611 |
| 603 list.appendChild(row); | 612 list.appendChild(row); |
| 604 return row; | 613 return row; |
| 605 } | 614 } |
| 606 | 615 |
| 607 function addActionLink(row, text, handler, opt_disabled) { | 616 function addActionLink(row, text, handler, opt_disabled) { |
| 608 var link = document.createElement('span'); | 617 var link = document.createElement('span'); |
| 609 link.classList.add('action'); | 618 link.classList.add('action'); |
| 610 link.setAttribute('tabindex', 1); | 619 link.setAttribute('tabindex', 1); |
| 611 if (opt_disabled) | 620 if (opt_disabled) |
| 612 link.classList.add('disabled'); | 621 link.classList.add('disabled'); |
| 613 else | 622 else |
| 614 link.classList.remove('disabled'); | 623 link.classList.remove('disabled'); |
| 615 | 624 |
| 616 link.textContent = text; | 625 link.textContent = text; |
| 617 link.addEventListener('click', handler, true); | 626 link.addEventListener('click', handler, true); |
| 618 function handleKey(e) { | 627 function handleKey(e) { |
| 619 if (e.key == 'Enter' || e.key == ' ') { | 628 if (e.key == 'Enter' || e.key == ' ') { |
| 620 e.preventDefault(); | 629 e.preventDefault(); |
| 621 handler(); | 630 handler(); |
| 622 } | 631 } |
| 623 } | 632 } |
| 624 link.addEventListener('keydown', handleKey, true); | 633 link.addEventListener('keydown', handleKey, true); |
| 625 row.querySelector('.actions').appendChild(link); | 634 row.querySelector('.actions').appendChild(link); |
| 626 } | 635 } |
| 627 | 636 |
| 628 function initSettings() { | 637 function initSettings() { |
| 629 checkboxSendsCommand('discover-usb-devices-enable', | 638 checkboxSendsCommand( |
| 630 'set-discover-usb-devices-enabled'); | 639 'discover-usb-devices-enable', 'set-discover-usb-devices-enabled'); |
| 631 checkboxSendsCommand('port-forwarding-enable', 'set-port-forwarding-enabled'); | 640 checkboxSendsCommand('port-forwarding-enable', 'set-port-forwarding-enabled'); |
| 632 checkboxSendsCommand('discover-tcp-devices-enable', | 641 checkboxSendsCommand( |
| 633 'set-discover-tcp-targets-enabled'); | 642 'discover-tcp-devices-enable', 'set-discover-tcp-targets-enabled'); |
| 634 | 643 |
| 635 $('port-forwarding-config-open').addEventListener( | 644 $('port-forwarding-config-open') |
| 636 'click', openPortForwardingConfig); | 645 .addEventListener('click', openPortForwardingConfig); |
| 637 $('tcp-discovery-config-open').addEventListener( | 646 $('tcp-discovery-config-open').addEventListener('click', openTargetsConfig); |
| 638 'click', openTargetsConfig); | |
| 639 $('config-dialog-close').addEventListener('click', function() { | 647 $('config-dialog-close').addEventListener('click', function() { |
| 640 $('config-dialog').commit(true); | 648 $('config-dialog').commit(true); |
| 641 }); | 649 }); |
| 642 } | 650 } |
| 643 | 651 |
| 644 function checkboxHandler(command, event) { | 652 function checkboxHandler(command, event) { |
| 645 sendCommand(command, event.target.checked); | 653 sendCommand(command, event.target.checked); |
| 646 } | 654 } |
| 647 | 655 |
| 648 function checkboxSendsCommand(id, command) { | 656 function checkboxSendsCommand(id, command) { |
| (...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 704 for (var key in data) | 712 for (var key in data) |
| 705 list.createRow(key, data[key]); | 713 list.createRow(key, data[key]); |
| 706 list.createRow(null, null); | 714 list.createRow(null, null); |
| 707 | 715 |
| 708 dialog.showModal(); | 716 dialog.showModal(); |
| 709 var defaultFocus = dialog.querySelector('.fresh .preselected'); | 717 var defaultFocus = dialog.querySelector('.fresh .preselected'); |
| 710 if (defaultFocus) | 718 if (defaultFocus) |
| 711 defaultFocus.focus(); | 719 defaultFocus.focus(); |
| 712 else | 720 else |
| 713 doneButton.focus(); | 721 doneButton.focus(); |
| 714 | |
| 715 } | 722 } |
| 716 | 723 |
| 717 function openPortForwardingConfig() { | 724 function openPortForwardingConfig() { |
| 718 function createPortForwardingConfigLine(port, location) { | 725 function createPortForwardingConfigLine(port, location) { |
| 719 var line = document.createElement('div'); | 726 var line = document.createElement('div'); |
| 720 line.className = 'port-forwarding-pair config-list-row'; | 727 line.className = 'port-forwarding-pair config-list-row'; |
| 721 | 728 |
| 722 var portInput = createConfigField(port, 'port preselected', | 729 var portInput = |
| 723 'Port', validatePort); | 730 createConfigField(port, 'port preselected', 'Port', validatePort); |
| 724 line.appendChild(portInput); | 731 line.appendChild(portInput); |
| 725 | 732 |
| 726 var locationInput = createConfigField( | 733 var locationInput = createConfigField( |
| 727 location, 'location', 'IP address and port', validateLocation); | 734 location, 'location', 'IP address and port', validateLocation); |
| 728 locationInput.classList.add('primary'); | 735 locationInput.classList.add('primary'); |
| 729 line.appendChild(locationInput); | 736 line.appendChild(locationInput); |
| 730 return line; | 737 return line; |
| 731 } | 738 } |
| 732 | 739 |
| 733 function commitPortForwardingConfig() { | 740 function commitPortForwardingConfig() { |
| 734 var config = {}; | 741 var config = {}; |
| 735 filterList(['.port', '.location'], function(port, location) { | 742 filterList(['.port', '.location'], function(port, location) { |
| 736 config[port] = location; | 743 config[port] = location; |
| 737 }); | 744 }); |
| 738 sendCommand('set-port-forwarding-config', config); | 745 sendCommand('set-port-forwarding-config', config); |
| 739 } | 746 } |
| 740 | 747 |
| 741 openConfigDialog('port-forwarding', | 748 openConfigDialog( |
| 742 commitPortForwardingConfig, | 749 'port-forwarding', commitPortForwardingConfig, |
| 743 createPortForwardingConfigLine, | 750 createPortForwardingConfigLine, window.portForwardingConfig); |
| 744 window.portForwardingConfig); | |
| 745 } | 751 } |
| 746 | 752 |
| 747 function openTargetsConfig() { | 753 function openTargetsConfig() { |
| 748 function createTargetDiscoveryConfigLine(index, targetDiscovery) { | 754 function createTargetDiscoveryConfigLine(index, targetDiscovery) { |
| 749 var line = document.createElement('div'); | 755 var line = document.createElement('div'); |
| 750 line.className = 'target-discovery-line config-list-row'; | 756 line.className = 'target-discovery-line config-list-row'; |
| 751 | 757 |
| 752 var locationInput = createConfigField( | 758 var locationInput = createConfigField( |
| 753 targetDiscovery, 'location preselected', 'IP address and port', | 759 targetDiscovery, 'location preselected', 'IP address and port', |
| 754 validateLocation); | 760 validateLocation); |
| 755 locationInput.classList.add('primary'); | 761 locationInput.classList.add('primary'); |
| 756 line.appendChild(locationInput); | 762 line.appendChild(locationInput); |
| 757 return line; | 763 return line; |
| 758 } | 764 } |
| 759 | 765 |
| 760 function commitTargetDiscoveryConfig() { | 766 function commitTargetDiscoveryConfig() { |
| 761 var entries = []; | 767 var entries = []; |
| 762 filterList(['.location'], function(location) { | 768 filterList(['.location'], function(location) { |
| 763 entries.push(location); | 769 entries.push(location); |
| 764 }); | 770 }); |
| 765 sendCommand('set-tcp-discovery-config', entries); | 771 sendCommand('set-tcp-discovery-config', entries); |
| 766 } | 772 } |
| 767 | 773 |
| 768 openConfigDialog('target-discovery', | 774 openConfigDialog( |
| 769 commitTargetDiscoveryConfig, | 775 'target-discovery', commitTargetDiscoveryConfig, |
| 770 createTargetDiscoveryConfigLine, | 776 createTargetDiscoveryConfigLine, window.targetDiscoveryConfig); |
| 771 window.targetDiscoveryConfig); | |
| 772 } | 777 } |
| 773 | 778 |
| 774 function filterList(fieldSelectors, callback) { | 779 function filterList(fieldSelectors, callback) { |
| 775 var lines = $('config-dialog').querySelectorAll('.config-list-row'); | 780 var lines = $('config-dialog').querySelectorAll('.config-list-row'); |
| 776 for (var i = 0; i != lines.length; i++) { | 781 for (var i = 0; i != lines.length; i++) { |
| 777 var line = lines[i]; | 782 var line = lines[i]; |
| 778 var values = []; | 783 var values = []; |
| 779 for (var selector of fieldSelectors) { | 784 for (var selector of fieldSelectors) { |
| 780 var input = line.querySelector(selector); | 785 var input = line.querySelector(selector); |
| 781 var value = input.classList.contains('invalid') ? | 786 var value = input.classList.contains('invalid') ? input.lastValidValue : |
| 782 input.lastValidValue : | 787 input.value; |
| 783 input.value; | |
| 784 if (!value) | 788 if (!value) |
| 785 break; | 789 break; |
| 786 values.push(value); | 790 values.push(value); |
| 787 } | 791 } |
| 788 if (values.length == fieldSelectors.length) | 792 if (values.length == fieldSelectors.length) |
| 789 callback.apply(null, values); | 793 callback.apply(null, values); |
| 790 } | 794 } |
| 791 } | 795 } |
| 792 | 796 |
| 793 function updateCheckbox(id, enabled) { | 797 function updateCheckbox(id, enabled) { |
| (...skipping 22 matching lines...) Expand all Loading... |
| 816 } | 820 } |
| 817 | 821 |
| 818 function updateTCPDiscoveryConfig(config) { | 822 function updateTCPDiscoveryConfig(config) { |
| 819 window.targetDiscoveryConfig = config; | 823 window.targetDiscoveryConfig = config; |
| 820 $('tcp-discovery-config-open').disabled = !config; | 824 $('tcp-discovery-config-open').disabled = !config; |
| 821 } | 825 } |
| 822 | 826 |
| 823 function appendRow(list, lineFactory, key, value) { | 827 function appendRow(list, lineFactory, key, value) { |
| 824 var line = lineFactory(key, value); | 828 var line = lineFactory(key, value); |
| 825 line.lastElementChild.addEventListener('keydown', function(e) { | 829 line.lastElementChild.addEventListener('keydown', function(e) { |
| 826 if (e.key == 'Tab' && | 830 if (e.key == 'Tab' && !hasKeyModifiers(e) && |
| 827 !hasKeyModifiers(e) && | 831 line.classList.contains('fresh') && !line.classList.contains('empty')) { |
| 828 line.classList.contains('fresh') && | |
| 829 !line.classList.contains('empty')) { | |
| 830 // Tabbing forward on the fresh line, try create a new empty one. | 832 // Tabbing forward on the fresh line, try create a new empty one. |
| 831 if (commitFreshLineIfValid(true)) | 833 if (commitFreshLineIfValid(true)) |
| 832 e.preventDefault(); | 834 e.preventDefault(); |
| 833 } | 835 } |
| 834 }); | 836 }); |
| 835 | 837 |
| 836 var lineDelete = document.createElement('div'); | 838 var lineDelete = document.createElement('div'); |
| 837 lineDelete.className = 'close-button'; | 839 lineDelete.className = 'close-button'; |
| 838 lineDelete.addEventListener('click', function() { | 840 lineDelete.addEventListener('click', function() { |
| 839 var newSelection = line.nextElementSibling || line.previousElementSibling; | 841 var newSelection = line.nextElementSibling || line.previousElementSibling; |
| 840 selectLine(newSelection, true); | 842 selectLine(newSelection, true); |
| 841 line.parentNode.removeChild(line); | 843 line.parentNode.removeChild(line); |
| 842 $('config-dialog').commit(false); | 844 $('config-dialog').commit(false); |
| 843 }); | 845 }); |
| 844 line.appendChild(lineDelete); | 846 line.appendChild(lineDelete); |
| 845 | 847 |
| 846 line.addEventListener( | 848 line.addEventListener('click', selectLine.bind(null, line, true)); |
| 847 'click', selectLine.bind(null, line, true)); | 849 line.addEventListener('focus', selectLine.bind(null, line, true)); |
| 848 line.addEventListener( | |
| 849 'focus', selectLine.bind(null, line, true)); | |
| 850 checkEmptyLine(line); | 850 checkEmptyLine(line); |
| 851 | 851 |
| 852 if (!key && !value) | 852 if (!key && !value) |
| 853 line.classList.add('fresh'); | 853 line.classList.add('fresh'); |
| 854 | 854 |
| 855 return list.appendChild(line); | 855 return list.appendChild(line); |
| 856 } | 856 } |
| 857 | 857 |
| 858 function validatePort(input) { | 858 function validatePort(input) { |
| 859 var match = input.value.match(/^(\d+)$/); | 859 var match = input.value.match(/^(\d+)$/); |
| (...skipping 159 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1019 Array.prototype.forEach.call( | 1019 Array.prototype.forEach.call( |
| 1020 deviceSection.querySelectorAll('.browser'), clearBrowserPorts); | 1020 deviceSection.querySelectorAll('.browser'), clearBrowserPorts); |
| 1021 } | 1021 } |
| 1022 | 1022 |
| 1023 Array.prototype.forEach.call( | 1023 Array.prototype.forEach.call( |
| 1024 document.querySelectorAll('.device'), clearPorts); | 1024 document.querySelectorAll('.device'), clearPorts); |
| 1025 } | 1025 } |
| 1026 | 1026 |
| 1027 document.addEventListener('DOMContentLoaded', onload); | 1027 document.addEventListener('DOMContentLoaded', onload); |
| 1028 window.addEventListener('hashchange', onHashChange); | 1028 window.addEventListener('hashchange', onHashChange); |
| OLD | NEW |