chrome/browser/resources/inspect/inspect.js

   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
   3 // found in the LICENSE file.
   4
   5 var MIN_VERSION_TAB_CLOSE = 25;
   6 var MIN_VERSION_TARGET_ID = 26;
   7 var MIN_VERSION_NEW_TAB = 29;
   8 var MIN_VERSION_TAB_ACTIVATE = 30;
   9
  10 var queryParamsObject = {};
  11
  12 (function() {
  13 var queryParams = window.location.search;
  14 if (!queryParams)
  15     return;
  16 var params = queryParams.substring(1).split('&');
  17 for (var i = 0; i < params.length; ++i) {
  18     var pair = params[i].split('=');
  19     queryParamsObject[pair[0]] = pair[1];
  20 }
  21
  22 })();
  23
  24 function sendCommand(command, args) {
  25   chrome.send(command, Array.prototype.slice.call(arguments, 1));
  26 }
  27
  28 function sendTargetCommand(command, target) {
  29   sendCommand(command, target.source, target.id);
  30 }
  31
  32 function removeChildren(element_id) {
  33   var element = $(element_id);
  34   element.textContent = '';
  35 }
  36
  37 function onload() {
  38   var tabContents = document.querySelectorAll('#content > div');
  39   for (var i = 0; i != tabContents.length; i++) {
  40     var tabContent = tabContents[i];
  41     var tabName = tabContent.querySelector('.content-header').textContent;
  42
  43     var tabHeader = document.createElement('div');
  44     tabHeader.className = 'tab-header';
  45     var button = document.createElement('button');
  46     button.textContent = tabName;
  47     tabHeader.appendChild(button);
  48     tabHeader.addEventListener('click', selectTab.bind(null, tabContent.id));
  49     $('navigation').appendChild(tabHeader);
  50   }
  51   onHashChange();
  52   initSettings();
  53   sendCommand('init-ui');
  54 }
  55
  56 function onHashChange() {
  57   var hash = window.location.hash.slice(1).toLowerCase();
  58   if (!selectTab(hash))
  59     selectTab('devices');
  60 }
  61
  62 /**
  63  * @param {string} id Tab id.
  64  * @return {boolean} True if successful.
  65  */
  66 function selectTab(id) {
  67   closePortForwardingConfig();
  68
  69   var tabContents = document.querySelectorAll('#content > div');
  70   var tabHeaders = $('navigation').querySelectorAll('.tab-header');
  71   var found = false;
  72   for (var i = 0; i != tabContents.length; i++) {
  73     var tabContent = tabContents[i];
  74     var tabHeader = tabHeaders[i];
  75     if (tabContent.id == id) {
  76       tabContent.classList.add('selected');
  77       tabHeader.classList.add('selected');
  78       found = true;
  79     } else {
  80       tabContent.classList.remove('selected');
  81       tabHeader.classList.remove('selected');
  82     }
  83   }
  84   if (!found)
  85     return false;
  86   window.location.hash = id;
  87   return true;
  88 }
  89
  90 function populateTargets(source, data) {
  91   if (source == 'local')
  92     populateLocalTargets(data);
  93   else if (source == 'remote')
  94     populateRemoteTargets(data);
  95   else
  96     console.error('Unknown source type: ' + source);
  97 }
  98
  99 function populateLocalTargets(data) {
 100   removeChildren('pages-list');
 101   removeChildren('extensions-list');
 102   removeChildren('apps-list');
 103   removeChildren('others-list');
 104   removeChildren('workers-list');
 105   removeChildren('service-workers-list');
 106
 107     for (var i = 0; i < data.length; i++) {
 108     if (data[i].type === 'page')
 109       addToPagesList(data[i]);
 110     else if (data[i].type === 'background_page')
 111       addToExtensionsList(data[i]);
 112     else if (data[i].type === 'app')
 113       addToAppsList(data[i]);
 114     else if (data[i].type === 'worker')
 115       addToWorkersList(data[i]);
 116     else if (data[i].type === 'service_worker')
 117       addToServiceWorkersList(data[i]);
 118     else
 119       addToOthersList(data[i]);
 120   }
 121 }
 122
 123 function showIncognitoWarning() {
 124   $('devices-incognito').hidden = false;
 125 }
 126
 127 function populateRemoteTargets(devices) {
 128   if (!devices)
 129     return;
 130
 131   if (window.modal) {
 132     window.holdDevices = devices;
 133     return;
 134   }
 135
 136   function alreadyDisplayed(element, data) {
 137     var json = JSON.stringify(data);
 138     if (element.cachedJSON == json)
 139       return true;
 140     element.cachedJSON = json;
 141     return false;
 142   }
 143
 144   function insertChildSortedById(parent, child) {
 145     for (var sibling = parent.firstElementChild;
 146                      sibling;
 147                      sibling = sibling.nextElementSibling) {
 148       if (sibling.id > child.id) {
 149         parent.insertBefore(child, sibling);
 150         return;
 151       }
 152     }
 153     parent.appendChild(child);
 154   }
 155
 156   var deviceList = $('devices-list');
 157   if (alreadyDisplayed(deviceList, devices))
 158     return;
 159
 160   function removeObsolete(validIds, section) {
 161     if (validIds.indexOf(section.id) < 0)
 162       section.remove();
 163   }
 164
 165   var newDeviceIds = devices.map(function(d) { return d.id });
 166   Array.prototype.forEach.call(
 167       deviceList.querySelectorAll('.device'),
 168       removeObsolete.bind(null, newDeviceIds));
 169
 170   $('devices-help').hidden = !!devices.length;
 171
 172   for (var d = 0; d < devices.length; d++) {
 173     var device = devices[d];
 174
 175     var deviceSection = $(device.id);
 176     if (!deviceSection) {
 177       deviceSection = document.createElement('div');
 178       deviceSection.id = device.id;
 179       deviceSection.className = 'device';
 180       deviceList.appendChild(deviceSection);
 181
 182       var deviceHeader = document.createElement('div');
 183       deviceHeader.className = 'device-header';
 184       deviceSection.appendChild(deviceHeader);
 185
 186       var deviceName = document.createElement('div');
 187       deviceName.className = 'device-name';
 188       deviceHeader.appendChild(deviceName);
 189
 190       var deviceSerial = document.createElement('div');
 191       deviceSerial.className = 'device-serial';
 192       deviceSerial.textContent = '#' + device.adbSerial.toUpperCase();
 193       deviceHeader.appendChild(deviceSerial);
 194
 195       var devicePorts = document.createElement('div');
 196       devicePorts.className = 'device-ports';
 197       deviceHeader.appendChild(devicePorts);
 198
 199       var browserList = document.createElement('div');
 200       browserList.className = 'browsers';
 201       deviceSection.appendChild(browserList);
 202
 203       var authenticating = document.createElement('div');
 204       authenticating.className = 'device-auth';
 205       deviceSection.appendChild(authenticating);
 206     }
 207
 208     if (alreadyDisplayed(deviceSection, device))
 209       continue;
 210
 211     deviceSection.querySelector('.device-name').textContent = device.adbModel;
 212     deviceSection.querySelector('.device-auth').textContent =
 213         device.adbConnected ? '' : 'Pending authentication: please accept ' +
 214           'debugging session on the device.';
 215
 216     var browserList = deviceSection.querySelector('.browsers');
 217     var newBrowserIds =
 218         device.browsers.map(function(b) { return b.id });
 219     Array.prototype.forEach.call(
 220         browserList.querySelectorAll('.browser'),
 221         removeObsolete.bind(null, newBrowserIds));
 222
 223     for (var b = 0; b < device.browsers.length; b++) {
 224       var browser = device.browsers[b];
 225
 226       var majorChromeVersion = browser.adbBrowserChromeVersion;
 227
 228       var incompatibleVersion = browser.hasOwnProperty('compatibleVersion') &&
 229                                 !browser.compatibleVersion;
 230       var pageList;
 231       var browserSection = $(browser.id);
 232       if (browserSection) {
 233         pageList = browserSection.querySelector('.pages');
 234       } else {
 235         browserSection = document.createElement('div');
 236         browserSection.id = browser.id;
 237         browserSection.className = 'browser';
 238         insertChildSortedById(browserList, browserSection);
 239
 240         var browserHeader = document.createElement('div');
 241         browserHeader.className = 'browser-header';
 242
 243         var browserName = document.createElement('div');
 244         browserName.className = 'browser-name';
 245         browserHeader.appendChild(browserName);
 246         browserName.textContent = browser.adbBrowserName;
 247         if (browser.adbBrowserVersion)
 248           browserName.textContent += ' (' + browser.adbBrowserVersion + ')';
 249         browserSection.appendChild(browserHeader);
 250
 251         if (incompatibleVersion) {
 252           var warningSection = document.createElement('div');
 253           warningSection.className = 'warning';
 254           warningSection.textContent =
 255             'You may need a newer version of desktop Chrome. ' +
 256             'Please try Chrome ' + browser.adbBrowserVersion + ' or later.';
 257           browserHeader.appendChild(warningSection);
 258         } else if (majorChromeVersion >= MIN_VERSION_NEW_TAB) {
 259           var newPage = document.createElement('div');
 260           newPage.className = 'open';
 261
 262           var newPageUrl = document.createElement('input');
 263           newPageUrl.type = 'text';
 264           newPageUrl.placeholder = 'Open tab with url';
 265           newPage.appendChild(newPageUrl);
 266
 267           var openHandler = function(sourceId, browserId, input) {
 268             sendCommand(
 269                 'open', sourceId, browserId, input.value || 'about:blank');
 270             input.value = '';
 271           }.bind(null, browser.source, browser.id, newPageUrl);
 272           newPageUrl.addEventListener('keyup', function(handler, event) {
 273             if (event.keyIdentifier == 'Enter' && event.target.value)
 274               handler();
 275           }.bind(null, openHandler), true);
 276
 277           var newPageButton = document.createElement('button');
 278           newPageButton.textContent = 'Open';
 279           newPage.appendChild(newPageButton);
 280           newPageButton.addEventListener('click', openHandler, true);
 281
 282           browserHeader.appendChild(newPage);
 283         }
 284
 285         var browserInspector;
 286         var browserInspectorTitle;
 287         if ('trace' in queryParamsObject || 'tracing' in queryParamsObject) {
 288           browserInspector = 'chrome://tracing';
 289           browserInspectorTitle = 'trace';
 290         } else {
 291           browserInspector = queryParamsObject['browser-inspector'];
 292           browserInspectorTitle = 'inspect';
 293         }
 294         if (browserInspector) {
 295           var link = document.createElement('span');
 296           link.classList.add('action');
 297           link.setAttribute('tabindex', 1);
 298           link.textContent = browserInspectorTitle;
 299           browserHeader.appendChild(link);
 300           link.addEventListener(
 301               'click',
 302               sendCommand.bind(null, 'inspect-browser', browser.source,
 303                   browser.id, browserInspector), false);
 304         }
 305
 306         pageList = document.createElement('div');
 307         pageList.className = 'list pages';
 308         browserSection.appendChild(pageList);
 309       }
 310
 311       if (incompatibleVersion || alreadyDisplayed(browserSection, browser))
 312         continue;
 313
 314       pageList.textContent = '';
 315       for (var p = 0; p < browser.pages.length; p++) {
 316         var page = browser.pages[p];
 317         // Attached targets have no unique id until Chrome 26. For such targets
 318         // it is impossible to activate existing DevTools window.
 319         page.hasNoUniqueId = page.attached &&
 320             (majorChromeVersion && majorChromeVersion < MIN_VERSION_TARGET_ID);
 321         var row = addTargetToList(page, pageList, ['name', 'url']);
 322         if (page['description'])
 323           addWebViewDetails(row, page);
 324         else
 325           addFavicon(row, page);
 326         if (majorChromeVersion >= MIN_VERSION_TAB_ACTIVATE) {
 327           addActionLink(row, 'focus tab',
 328               sendTargetCommand.bind(null, 'activate', page), false);
 329         }
 330         if (majorChromeVersion) {
 331           addActionLink(row, 'reload',
 332               sendTargetCommand.bind(null, 'reload', page), page.attached);
 333         }
 334         if (majorChromeVersion >= MIN_VERSION_TAB_CLOSE) {
 335           addActionLink(row, 'close',
 336               sendTargetCommand.bind(null, 'close', page), false);
 337         }
 338       }
 339     }
 340   }
 341 }
 342
 343 function addToPagesList(data) {
 344   var row = addTargetToList(data, $('pages-list'), ['name', 'url']);
 345   addFavicon(row, data);
 346   if (data.guests)
 347     addGuestViews(row, data.guests);
 348 }
 349
 350 function addToExtensionsList(data) {
 351   var row = addTargetToList(data, $('extensions-list'), ['name', 'url']);
 352   addFavicon(row, data);
 353   if (data.guests)
 354     addGuestViews(row, data.guests);
 355 }
 356
 357 function addToAppsList(data) {
 358   var row = addTargetToList(data, $('apps-list'), ['name', 'url']);
 359   addFavicon(row, data);
 360   if (data.guests)
 361     addGuestViews(row, data.guests);
 362 }
 363
 364 function addGuestViews(row, guests) {
 365   Array.prototype.forEach.call(guests, function(guest) {
 366     var guestRow = addTargetToList(guest, row, ['name', 'url']);
 367     guestRow.classList.add('guest');
 368     addFavicon(guestRow, guest);
 369   });
 370 }
 371
 372 function addToWorkersList(data) {
 373   var row =
 374       addTargetToList(data, $('workers-list'), ['name', 'description', 'url']);
 375   addActionLink(row, 'terminate',
 376       sendTargetCommand.bind(null, 'close', data), false);
 377 }
 378
 379 function addToServiceWorkersList(data) {
 380     var row = addTargetToList(
 381         data, $('service-workers-list'), ['name', 'description', 'url']);
 382     addActionLink(row, 'terminate',
 383         sendTargetCommand.bind(null, 'close', data), false);
 384 }
 385
 386 function addToOthersList(data) {
 387   addTargetToList(data, $('others-list'), ['url']);
 388 }
 389
 390 function formatValue(data, property) {
 391   var value = data[property];
 392
 393   if (property == 'name' && value == '') {
 394     value = 'untitled';
 395   }
 396
 397   var text = value ? String(value) : '';
 398   if (text.length > 100)
 399     text = text.substring(0, 100) + '\u2026';
 400
 401   var div = document.createElement('div');
 402   div.textContent = text;
 403   div.className = property;
 404   return div;
 405 }
 406
 407 function addFavicon(row, data) {
 408   var favicon = document.createElement('img');
 409   if (data['faviconUrl'])
 410     favicon.src = data['faviconUrl'];
 411   var propertiesBox = row.querySelector('.properties-box');
 412   propertiesBox.insertBefore(favicon, propertiesBox.firstChild);
 413 }
 414
 415 function addWebViewDetails(row, data) {
 416   var webview;
 417   try {
 418     webview = JSON.parse(data['description']);
 419   } catch (e) {
 420     return;
 421   }
 422   addWebViewDescription(row, webview);
 423   if (data.adbScreenWidth && data.adbScreenHeight)
 424     addWebViewThumbnail(
 425         row, webview, data.adbScreenWidth, data.adbScreenHeight);
 426 }
 427
 428 function addWebViewDescription(row, webview) {
 429   var viewStatus = { visibility: '', position: '', size: '' };
 430   if (!webview.empty) {
 431     if (webview.attached && !webview.visible)
 432       viewStatus.visibility = 'hidden';
 433     else if (!webview.attached)
 434       viewStatus.visibility = 'detached';
 435     viewStatus.size = 'size ' + webview.width + ' \u00d7 ' + webview.height;
 436   } else {
 437     viewStatus.visibility = 'empty';
 438   }
 439   if (webview.attached) {
 440       viewStatus.position =
 441         'at (' + webview.screenX + ', ' + webview.screenY + ')';
 442   }
 443
 444   var subRow = document.createElement('div');
 445   subRow.className = 'subrow webview';
 446   if (webview.empty || !webview.attached || !webview.visible)
 447     subRow.className += ' invisible-view';
 448   if (viewStatus.visibility)
 449     subRow.appendChild(formatValue(viewStatus, 'visibility'));
 450   if (viewStatus.position)
 451     subRow.appendChild(formatValue(viewStatus, 'position'));
 452   subRow.appendChild(formatValue(viewStatus, 'size'));
 453   var subrowBox = row.querySelector('.subrow-box');
 454   subrowBox.insertBefore(subRow, row.querySelector('.actions'));
 455 }
 456
 457 function addWebViewThumbnail(row, webview, screenWidth, screenHeight) {
 458   var maxScreenRectSize = 50;
 459   var screenRectWidth;
 460   var screenRectHeight;
 461
 462   var aspectRatio = screenWidth / screenHeight;
 463   if (aspectRatio < 1) {
 464     screenRectWidth = Math.round(maxScreenRectSize * aspectRatio);
 465     screenRectHeight = maxScreenRectSize;
 466   } else {
 467     screenRectWidth = maxScreenRectSize;
 468     screenRectHeight = Math.round(maxScreenRectSize / aspectRatio);
 469   }
 470
 471   var thumbnail = document.createElement('div');
 472   thumbnail.className = 'webview-thumbnail';
 473   var thumbnailWidth = 3 * screenRectWidth;
 474   var thumbnailHeight = 60;
 475   thumbnail.style.width = thumbnailWidth + 'px';
 476   thumbnail.style.height = thumbnailHeight + 'px';
 477
 478   var screenRect = document.createElement('div');
 479   screenRect.className = 'screen-rect';
 480   screenRect.style.left = screenRectWidth + 'px';
 481   screenRect.style.top = (thumbnailHeight - screenRectHeight) / 2 + 'px';
 482   screenRect.style.width = screenRectWidth + 'px';
 483   screenRect.style.height = screenRectHeight + 'px';
 484   thumbnail.appendChild(screenRect);
 485
 486   if (!webview.empty && webview.attached) {
 487     var viewRect = document.createElement('div');
 488     viewRect.className = 'view-rect';
 489     if (!webview.visible)
 490       viewRect.classList.add('hidden');
 491     function percent(ratio) {
 492       return ratio * 100 + '%';
 493     }
 494     viewRect.style.left = percent(webview.screenX / screenWidth);
 495     viewRect.style.top = percent(webview.screenY / screenHeight);
 496     viewRect.style.width = percent(webview.width / screenWidth);
 497     viewRect.style.height = percent(webview.height / screenHeight);
 498     screenRect.appendChild(viewRect);
 499   }
 500
 501   var propertiesBox = row.querySelector('.properties-box');
 502   propertiesBox.insertBefore(thumbnail, propertiesBox.firstChild);
 503 }
 504
 505 function addTargetToList(data, list, properties) {
 506   var row = document.createElement('div');
 507   row.className = 'row';
 508
 509   var propertiesBox = document.createElement('div');
 510   propertiesBox.className = 'properties-box';
 511   row.appendChild(propertiesBox);
 512
 513   var subrowBox = document.createElement('div');
 514   subrowBox.className = 'subrow-box';
 515   propertiesBox.appendChild(subrowBox);
 516
 517   var subrow = document.createElement('div');
 518   subrow.className = 'subrow';
 519   subrowBox.appendChild(subrow);
 520
 521   for (var j = 0; j < properties.length; j++)
 522     subrow.appendChild(formatValue(data, properties[j]));
 523
 524   var actionBox = document.createElement('div');
 525   actionBox.className = 'actions';
 526   subrowBox.appendChild(actionBox);
 527
 528   if (!data.hasCustomInspectAction) {
 529     addActionLink(row, 'inspect', sendTargetCommand.bind(null, 'inspect', data),
 530         data.hasNoUniqueId || data.adbAttachedForeign);
 531   }
 532
 533   list.appendChild(row);
 534   return row;
 535 }
 536
 537 function addActionLink(row, text, handler, opt_disabled) {
 538   var link = document.createElement('span');
 539   link.classList.add('action');
 540   link.setAttribute('tabindex', 1);
 541   if (opt_disabled)
 542     link.classList.add('disabled');
 543   else
 544     link.classList.remove('disabled');
 545
 546   link.textContent = text;
 547   link.addEventListener('click', handler, true);
 548   function handleKey(e) {
 549     if (e.keyIdentifier == 'Enter' || e.keyIdentifier == 'U+0020') {
 550       e.preventDefault();
 551       handler();
 552     }
 553   }
 554   link.addEventListener('keydown', handleKey, true);
 555   row.querySelector('.actions').appendChild(link);
 556 }
 557
 558
 559 function initSettings() {
 560   $('discover-usb-devices-enable').addEventListener('change',
 561                                                     enableDiscoverUsbDevices);
 562
 563   $('port-forwarding-enable').addEventListener('change', enablePortForwarding);
 564   $('port-forwarding-config-open').addEventListener(
 565       'click', openPortForwardingConfig);
 566   $('port-forwarding-config-close').addEventListener(
 567       'click', closePortForwardingConfig);
 568   $('port-forwarding-config-done').addEventListener(
 569       'click', commitPortForwardingConfig.bind(true));
 570 }
 571
 572 function enableDiscoverUsbDevices(event) {
 573   sendCommand('set-discover-usb-devices-enabled', event.target.checked);
 574 }
 575
 576 function enablePortForwarding(event) {
 577   sendCommand('set-port-forwarding-enabled', event.target.checked);
 578 }
 579
 580 function handleKey(event) {
 581   switch (event.keyCode) {
 582     case 13:  // Enter
 583       if (event.target.nodeName == 'INPUT') {
 584         var line = event.target.parentNode;
 585         if (!line.classList.contains('fresh') ||
 586             line.classList.contains('empty')) {
 587           commitPortForwardingConfig(true);
 588         } else {
 589           commitFreshLineIfValid(true /* select new line */);
 590           commitPortForwardingConfig(false);
 591         }
 592       } else {
 593         commitPortForwardingConfig(true);
 594       }
 595       break;
 596
 597     case 27:
 598       commitPortForwardingConfig(true);
 599       break;
 600   }
 601 }
 602
 603 function setModal(dialog) {
 604   dialog.deactivatedNodes = Array.prototype.filter.call(
 605       document.querySelectorAll('*'),
 606       function(n) {
 607         return n != dialog && !dialog.contains(n) && n.tabIndex >= 0;
 608       });
 609
 610   dialog.tabIndexes = dialog.deactivatedNodes.map(
 611     function(n) { return n.getAttribute('tabindex'); });
 612
 613   dialog.deactivatedNodes.forEach(function(n) { n.tabIndex = -1; });
 614   window.modal = dialog;
 615 }
 616
 617 function unsetModal(dialog) {
 618   for (var i = 0; i < dialog.deactivatedNodes.length; i++) {
 619     var node = dialog.deactivatedNodes[i];
 620     if (dialog.tabIndexes[i] === null)
 621       node.removeAttribute('tabindex');
 622     else
 623       node.setAttribute('tabindex', dialog.tabIndexes[i]);
 624   }
 625
 626   if (window.holdDevices) {
 627     populateRemoteTargets(window.holdDevices);
 628     delete window.holdDevices;
 629   }
 630
 631   delete dialog.deactivatedNodes;
 632   delete dialog.tabIndexes;
 633   delete window.modal;
 634 }
 635
 636 function openPortForwardingConfig() {
 637   loadPortForwardingConfig(window.portForwardingConfig);
 638
 639   $('port-forwarding-overlay').classList.add('open');
 640   document.addEventListener('keyup', handleKey);
 641
 642   var freshPort = document.querySelector('.fresh .port');
 643   if (freshPort)
 644     freshPort.focus();
 645   else
 646     $('port-forwarding-config-done').focus();
 647
 648   setModal($('port-forwarding-overlay'));
 649 }
 650
 651 function closePortForwardingConfig() {
 652   if (!$('port-forwarding-overlay').classList.contains('open'))
 653     return;
 654
 655   $('port-forwarding-overlay').classList.remove('open');
 656   document.removeEventListener('keyup', handleKey);
 657   unsetModal($('port-forwarding-overlay'));
 658 }
 659
 660 function loadPortForwardingConfig(config) {
 661   var list = $('port-forwarding-config-list');
 662   list.textContent = '';
 663   for (var port in config)
 664     list.appendChild(createConfigLine(port, config[port]));
 665   list.appendChild(createEmptyConfigLine());
 666 }
 667
 668 function commitPortForwardingConfig(closeConfig) {
 669   if (closeConfig)
 670     closePortForwardingConfig();
 671
 672   commitFreshLineIfValid();
 673   var lines = document.querySelectorAll('.port-forwarding-pair');
 674   var config = {};
 675   for (var i = 0; i != lines.length; i++) {
 676     var line = lines[i];
 677     var portInput = line.querySelector('.port');
 678     var locationInput = line.querySelector('.location');
 679
 680     var port = portInput.classList.contains('invalid') ?
 681                portInput.lastValidValue :
 682                portInput.value;
 683
 684     var location = locationInput.classList.contains('invalid') ?
 685                    locationInput.lastValidValue :
 686                    locationInput.value;
 687
 688     if (port && location)
 689       config[port] = location;
 690   }
 691   sendCommand('set-port-forwarding-config', config);
 692 }
 693
 694 function updateDiscoverUsbDevicesEnabled(enabled) {
 695   var checkbox = $('discover-usb-devices-enable');
 696   checkbox.checked = !!enabled;
 697   checkbox.disabled = false;
 698 }
 699
 700 function updatePortForwardingEnabled(enabled) {
 701   var checkbox = $('port-forwarding-enable');
 702   checkbox.checked = !!enabled;
 703   checkbox.disabled = false;
 704 }
 705
 706 function updatePortForwardingConfig(config) {
 707   window.portForwardingConfig = config;
 708   $('port-forwarding-config-open').disabled = !config;
 709 }
 710
 711 function createConfigLine(port, location) {
 712   var line = document.createElement('div');
 713   line.className = 'port-forwarding-pair';
 714
 715   var portInput = createConfigField(port, 'port', 'Port', validatePort);
 716   line.appendChild(portInput);
 717
 718   var locationInput = createConfigField(
 719       location, 'location', 'IP address and port', validateLocation);
 720   line.appendChild(locationInput);
 721   locationInput.addEventListener('keydown', function(e) {
 722     if (e.keyIdentifier == 'U+0009' &&  // Tab
 723         !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey &&
 724         line.classList.contains('fresh') &&
 725         !line.classList.contains('empty')) {
 726       // Tabbing forward on the fresh line, try create a new empty one.
 727       if (commitFreshLineIfValid(true))
 728         e.preventDefault();
 729     }
 730   });
 731
 732   var lineDelete = document.createElement('div');
 733   lineDelete.className = 'close-button';
 734   lineDelete.addEventListener('click', function() {
 735     var newSelection = line.nextElementSibling;
 736     line.parentNode.removeChild(line);
 737     selectLine(newSelection);
 738   });
 739   line.appendChild(lineDelete);
 740
 741   line.addEventListener('click', selectLine.bind(null, line));
 742   line.addEventListener('focus', selectLine.bind(null, line));
 743
 744   checkEmptyLine(line);
 745
 746   return line;
 747 }
 748
 749 function validatePort(input) {
 750   var match = input.value.match(/^(\d+)$/);
 751   if (!match)
 752     return false;
 753   var port = parseInt(match[1]);
 754   if (port < 1024 || 65535 < port)
 755     return false;
 756
 757   var inputs = document.querySelectorAll('input.port:not(.invalid)');
 758   for (var i = 0; i != inputs.length; ++i) {
 759     if (inputs[i] == input)
 760       break;
 761     if (parseInt(inputs[i].value) == port)
 762       return false;
 763   }
 764   return true;
 765 }
 766
 767 function validateLocation(input) {
 768   var match = input.value.match(/^([a-zA-Z0-9\.\-_]+):(\d+)$/);
 769   if (!match)
 770     return false;
 771   var port = parseInt(match[2]);
 772   return port <= 65535;
 773 }
 774
 775 function createEmptyConfigLine() {
 776   var line = createConfigLine('', '');
 777   line.classList.add('fresh');
 778   return line;
 779 }
 780
 781 function createConfigField(value, className, hint, validate) {
 782   var input = document.createElement('input');
 783   input.className = className;
 784   input.type = 'text';
 785   input.placeholder = hint;
 786   input.value = value;
 787   input.lastValidValue = value;
 788
 789   function checkInput() {
 790     if (validate(input))
 791       input.classList.remove('invalid');
 792     else
 793       input.classList.add('invalid');
 794     if (input.parentNode)
 795       checkEmptyLine(input.parentNode);
 796   }
 797   checkInput();
 798
 799   input.addEventListener('keyup', checkInput);
 800   input.addEventListener('focus', function() {
 801     selectLine(input.parentNode);
 802   });
 803
 804   input.addEventListener('blur', function() {
 805     if (validate(input))
 806       input.lastValidValue = input.value;
 807   });
 808
 809   return input;
 810 }
 811
 812 function checkEmptyLine(line) {
 813   var inputs = line.querySelectorAll('input');
 814   var empty = true;
 815   for (var i = 0; i != inputs.length; i++) {
 816     if (inputs[i].value != '')
 817       empty = false;
 818   }
 819   if (empty)
 820     line.classList.add('empty');
 821   else
 822     line.classList.remove('empty');
 823 }
 824
 825 function selectLine(line) {
 826   if (line.classList.contains('selected'))
 827     return;
 828   unselectLine();
 829   line.classList.add('selected');
 830 }
 831
 832 function unselectLine() {
 833   var line = document.querySelector('.port-forwarding-pair.selected');
 834   if (!line)
 835     return;
 836   line.classList.remove('selected');
 837   commitFreshLineIfValid();
 838 }
 839
 840 function commitFreshLineIfValid(opt_selectNew) {
 841   var line = document.querySelector('.port-forwarding-pair.fresh');
 842   if (line.querySelector('.invalid'))
 843     return false;
 844   line.classList.remove('fresh');
 845   var freshLine = createEmptyConfigLine();
 846   line.parentNode.appendChild(freshLine);
 847   if (opt_selectNew)
 848     freshLine.querySelector('.port').focus();
 849   return true;
 850 }
 851
 852 function populatePortStatus(devicesStatusMap) {
 853   for (var deviceId in devicesStatusMap) {
 854     if (!devicesStatusMap.hasOwnProperty(deviceId))
 855       continue;
 856     var deviceStatusMap = devicesStatusMap[deviceId];
 857
 858     var deviceSection = $(deviceId);
 859     if (!deviceSection)
 860       continue;
 861
 862     var devicePorts = deviceSection.querySelector('.device-ports');
 863     devicePorts.textContent = '';
 864     for (var port in deviceStatusMap) {
 865       if (!deviceStatusMap.hasOwnProperty(port))
 866         continue;
 867
 868       var status = deviceStatusMap[port];
 869       var portIcon = document.createElement('div');
 870       portIcon.className = 'port-icon';
 871       // status === 0 is the default (connected) state.
 872       // Positive values correspond to the tunnelling connection count
 873       // (in DEBUG_DEVTOOLS mode).
 874       if (status > 0)
 875         portIcon.classList.add('connected');
 876       else if (status === -1 || status === -2)
 877         portIcon.classList.add('transient');
 878       else if (status < 0)
 879         portIcon.classList.add('error');
 880       devicePorts.appendChild(portIcon);
 881
 882       var portNumber = document.createElement('div');
 883       portNumber.className = 'port-number';
 884       portNumber.textContent = ':' + port;
 885       if (status > 0)
 886         portNumber.textContent += '(' + status + ')';
 887       devicePorts.appendChild(portNumber);
 888     }
 889   }
 890
 891   function clearPorts(deviceSection) {
 892     if (deviceSection.id in devicesStatusMap)
 893       return;
 894     deviceSection.querySelector('.device-ports').textContent = '';
 895   }
 896
 897   Array.prototype.forEach.call(
 898       document.querySelectorAll('.device'), clearPorts);
 899 }
 900
 901 document.addEventListener('DOMContentLoaded', onload);
 902
 903 window.addEventListener('hashchange', onHashChange);