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

Side by Side Diff: chrome/browser/resources/inspect/inspect.js

Issue 2939273002: DO NOT SUBMIT: what chrome/browser/resources/ could eventually look like with clang-format (Closed)
Patch Set: Created 3 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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
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
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
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
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
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
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
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
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);
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698