[DevTools] Add UI for adding remote targets

chrome/browser/resources/inspect/inspect.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 var MIN_VERSION_TAB_CLOSE = 25;
 var MIN_VERSION_TARGET_ID = 26;
 var MIN_VERSION_NEW_TAB = 29;
 var MIN_VERSION_TAB_ACTIVATE = 30;
 var WEBRTC_SERIAL = 'WEBRTC';
 
@@ skipping 56 matching lines @@
   var hash = window.location.hash.slice(1).toLowerCase();
   if (!selectTab(hash))
     selectTab('devices');
 }
 
 /**
  * @param {string} id Tab id.
  * @return {boolean} True if successful.
  */
 function selectTab(id) {
-  closePortForwardingConfig();
+  closeConfigDialog();
 
   var tabContents = document.querySelectorAll('#content > div');
   var tabHeaders = $('navigation').querySelectorAll('.tab-header');
   var found = false;
   for (var i = 0; i != tabContents.length; i++) {
     var tabContent = tabContents[i];
     var tabHeader = tabHeaders[i];
     if (tabContent.id == id) {
       tabContent.classList.add('selected');
       tabHeader.classList.add('selected');
@@ skipping 79 matching lines @@
     var browserUser = browserSection.querySelector('.browser-user');
     if (browserUser)
       browserUser.hidden = hasSingleUser;
   });
 }
 
 function populateRemoteTargets(devices) {
   if (!devices)
     return;
 
-  if ($('port-forwarding-config').open) {
+  if ($('config-dialog').open) {
     window.holdDevices = devices;
     return;
   }
 
   function browserCompare(a, b) {
     if (a.adbBrowserName != b.adbBrowserName)
       return a.adbBrowserName < b.adbBrowserName;
     if (a.adbBrowserVersion != b.adbBrowserVersion)
       return a.adbBrowserVersion < b.adbBrowserVersion;
     return a.id < b.id;
@@ skipping 412 matching lines @@
 }
 
 
 function initSettings() {
   $('discover-usb-devices-enable').addEventListener('change',
                                                     enableDiscoverUsbDevices);
 
   $('port-forwarding-enable').addEventListener('change', enablePortForwarding);
   $('port-forwarding-config-open').addEventListener(
       'click', openPortForwardingConfig);
-  $('port-forwarding-config-close').addEventListener(
-      'click', closePortForwardingConfig);
-  $('port-forwarding-config-done').addEventListener(
-      'click', commitPortForwardingConfig.bind(null, true));
+  $('target-discovery-config-open').addEventListener(
+      'click', openTargetsConfig);
+  $('config-dialog-close').addEventListener('click', function() {
+    $('config-dialog').commit(true);

[eostroukhov, 2016/08/17 17:32:46]

I changed the behavior for consistency with the dialog close (e.g. when Esc is
pressed) - previously Esc would've saved the input while this button would not.

I am not sure saving is a desirable behaviour here, still want the consistency.

+  });
 }
 
 function enableDiscoverUsbDevices(event) {
   sendCommand('set-discover-usb-devices-enabled', event.target.checked);
 }
 
 function enablePortForwarding(event) {
   sendCommand('set-port-forwarding-enabled', event.target.checked);
 }
 
 function handleKey(event) {
   switch (event.keyCode) {
     case 13:  // Enter
+      var dialog = $('config-dialog');
       if (event.target.nodeName == 'INPUT') {
         var line = event.target.parentNode;
         if (!line.classList.contains('fresh') ||
             line.classList.contains('empty')) {
-          commitPortForwardingConfig(true);
+          dialog.commit(true);
         } else {
           commitFreshLineIfValid(true /* select new line */);
-          commitPortForwardingConfig(false);
+          dialog.commit(false);
         }
       } else {
-        commitPortForwardingConfig(true);
+        dialog.commit(true);
       }
       break;
   }
 }
 
-function openPortForwardingConfig() {
-  loadPortForwardingConfig(window.portForwardingConfig);
+function openConfigDialog(dialogClass, commitHandler, lineFactory, data) {
+  function commitDialog(shouldClose) {
+    if (shouldClose)
+      closeConfigDialog();
+    commitFreshLineIfValid();
+    commitHandler();
+  }
 
-  $('port-forwarding-config').showModal();
+  var dialog = $('config-dialog');
+  if (dialog.open)
+    return;
+
+  dialog.className = dialogClass;
+  dialog.classList.add('config');
+
   document.addEventListener('keyup', handleKey);
-  $('port-forwarding-config').onclose = function() {
-    commitPortForwardingConfig(true);
-  };
+  dialog.commit = commitDialog;
+  dialog.onclose = commitDialog.bind(null, true);
+  $('button-done').onclick = commitDialog.bind(null, true);
 
-  var freshPort = document.querySelector('.fresh .port');
-  if (freshPort)
-    freshPort.focus();
+  var list = $('config-dialog').querySelector('.list');
+  list.textContent = '';
+
+  list.createRow = appendRow.bind(null, list, lineFactory);
+  for (var key in data)
+    list.createRow(key, data[key]);
+  list.createRow(null, null);
+
+  dialog.showModal();
+  var defaultFocus = dialog.querySelector('.fresh .preselected');
+  if (defaultFocus)
+    defaultFocus.focus();
   else
-    $('port-forwarding-config-done').focus();
+    doneButton.focus();
+
 }
 
-function closePortForwardingConfig() {
-  if (!$('port-forwarding-config').open)
+function openPortForwardingConfig() {
+  function createPortForwardingConfigLine(port, location) {
+    var line = document.createElement('div');
+    line.className = 'port-forwarding-pair config-list-row';
+
+    var portInput = createConfigField(port, 'port preselected',
+                                      'Port', validatePort);
+    line.appendChild(portInput);
+
+    var locationInput = createConfigField(
+        location, 'location', 'IP address and port', validateLocation);
+    locationInput.classList.add('primary');
+    line.appendChild(locationInput);
+    return line;
+  }
+
+  function commitPortForwardingConfig(closeConfig) {

[lushnikov, 2016/08/18 20:42:14]

what's this closeConfig?

[eostroukhov, 2016/08/18 21:40:41]

Not used anymore. Thanks!

+    var config = {};
+    filterList(['.port', '.location'], function(port, location) {
+      config[port] = location;
+    });
+    sendCommand('set-port-forwarding-config', config);
+  }
+
+  openConfigDialog('port-forwarding',
+             commitPortForwardingConfig,
+             createPortForwardingConfigLine,
+             window.portForwardingConfig);
+}
+
+function openTargetsConfig() {
+  function createTargetDiscoveryConfigLine(index, targetDiscovery) {
+    var line = document.createElement('div');
+    line.className = 'target-discovery-line config-list-row';
+
+    var locationInput = createConfigField(
+        targetDiscovery, 'location preselected', 'IP address and port',
+        validateLocation);
+    locationInput.classList.add('primary');
+    line.appendChild(locationInput);
+    return line;
+  }
+
+  function commitTargetDiscoveryConfig(closeConfig) {
+    var entries = [];
+    filterList(['.location'], function(location) {
+      entries.push(location);
+    });
+    sendCommand('set-target-discovery-config', entries);
+  }
+
+  openConfigDialog('target-discovery',
+             commitTargetDiscoveryConfig,
+             createTargetDiscoveryConfigLine,
+             window.targetDiscoveryConfig);
+}
+
+function closeConfigDialog() {
+  var element = $('config-dialog');
+  if (!element.open)
     return;
-
-  $('port-forwarding-config').onclose = null;
-  $('port-forwarding-config').close();
+  element.onclose = null;

[lushnikov, 2016/08/18 20:42:14]

don't you want to save dialog here as well? (like you do for "cross" button)

[eostroukhov, 2016/08/18 21:40:41]

Actually, selectTab can no longer be invoked since the dialog is shown with
showModal - so I will inline this function.

+  element.close();
   document.removeEventListener('keyup', handleKey);
 
   if (window.holdDevices) {
     populateRemoteTargets(window.holdDevices);
     delete window.holdDevices;
   }
 }
 
-function loadPortForwardingConfig(config) {
-  var list = $('port-forwarding-config-list');
-  list.textContent = '';
-  for (var port in config)
-    list.appendChild(createConfigLine(port, config[port]));
-  list.appendChild(createEmptyConfigLine());
-}
-
-function commitPortForwardingConfig(closeConfig) {
-  if (closeConfig)
-    closePortForwardingConfig();
-
-  commitFreshLineIfValid();
-  var lines = document.querySelectorAll('.port-forwarding-pair');
+function filterList(fieldSelectors, callback) {
+  var lines = $('config-dialog').querySelectorAll('.config-list-row');
   var config = {};

[lushnikov, 2016/08/18 20:42:14]

unused

[eostroukhov, 2016/08/18 21:40:41]

Thanks.

   for (var i = 0; i != lines.length; i++) {
     var line = lines[i];
-    var portInput = line.querySelector('.port');
-    var locationInput = line.querySelector('.location');
-
-    var port = portInput.classList.contains('invalid') ?
-               portInput.lastValidValue :
-               portInput.value;
-
-    var location = locationInput.classList.contains('invalid') ?
-                   locationInput.lastValidValue :
-                   locationInput.value;
-
-    if (port && location)
-      config[port] = location;
+    var values = [];
+    for (var selector of fieldSelectors) {
+      var input = line.querySelector(selector);
+      var value = input.classList.contains('invalid') ?
+                  input.lastValidValue :
+                  input.value;
+      if (!value)
+        break;
+      values.push(value);
+    }
+    if (values.length == fieldSelectors.length)
+      callback.apply(null, values);
   }
-  sendCommand('set-port-forwarding-config', config);
 }
 
 function updateDiscoverUsbDevicesEnabled(enabled) {
   var checkbox = $('discover-usb-devices-enable');
   checkbox.checked = !!enabled;
   checkbox.disabled = false;
 }
 
 function updatePortForwardingEnabled(enabled) {
   var checkbox = $('port-forwarding-enable');
   checkbox.checked = !!enabled;
   checkbox.disabled = false;
 }
 
 function updatePortForwardingConfig(config) {
   window.portForwardingConfig = config;
   $('port-forwarding-config-open').disabled = !config;
 }
 
-function createConfigLine(port, location) {
-  var line = document.createElement('div');
-  line.className = 'port-forwarding-pair';
+function updateTargetDiscoveryConfig(config) {
+  window.targetDiscoveryConfig = config;
+  $('target-discovery-config-open').disabled = !config;
+}
 
-  var portInput = createConfigField(port, 'port', 'Port', validatePort);
-  line.appendChild(portInput);
-
-  var locationInput = createConfigField(
-      location, 'location', 'IP address and port', validateLocation);
-  line.appendChild(locationInput);
-  locationInput.addEventListener('keydown', function(e) {
+function appendRow(list, lineFactory, key, value) {
+  var line = lineFactory(key, value);
+  line.lastElementChild.addEventListener('keydown', function(e) {
     if (e.key == 'Tab' &&
         !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey &&
         line.classList.contains('fresh') &&
         !line.classList.contains('empty')) {
       // Tabbing forward on the fresh line, try create a new empty one.
       if (commitFreshLineIfValid(true))
         e.preventDefault();
     }
   });
 
   var lineDelete = document.createElement('div');
   lineDelete.className = 'close-button';
   lineDelete.addEventListener('click', function() {
-    var newSelection = line.nextElementSibling;
+    var newSelection = line.nextElementSibling || line.previousElementSimpling;

[lushnikov, 2016/08/18 20:42:14]

typo: line.previousElementSibling

[eostroukhov, 2016/08/18 21:40:41]

Done.

+    selectLine(newSelection, true);
     line.parentNode.removeChild(line);
-    selectLine(newSelection);
-    commitPortForwardingConfig(false);
+    $('config-dialog').commit(false);
   });
   line.appendChild(lineDelete);
 
-  line.addEventListener('click', selectLine.bind(null, line));
-  line.addEventListener('focus', selectLine.bind(null, line));
-
+  line.addEventListener(
+      'click', selectLine.bind(null, line, true));
+  line.addEventListener(
+      'focus', selectLine.bind(null, line, true));
   checkEmptyLine(line);
 
-  return line;
+  if (!key && !value)
+    line.classList.add('fresh');
+
+  return list.appendChild(line);
 }
 
 function validatePort(input) {
   var match = input.value.match(/^(\d+)$/);
   if (!match)
     return false;
   var port = parseInt(match[1]);
   if (port < 1024 || 65535 < port)
     return false;
 
   var inputs = document.querySelectorAll('input.port:not(.invalid)');
   for (var i = 0; i != inputs.length; ++i) {
     if (inputs[i] == input)
       break;
     if (parseInt(inputs[i].value) == port)
       return false;
   }
   return true;
 }
 
 function validateLocation(input) {
   var match = input.value.match(/^([a-zA-Z0-9\.\-_]+):(\d+)$/);
   if (!match)
     return false;
   var port = parseInt(match[2]);
   return port <= 65535;
 }
 
-function createEmptyConfigLine() {
-  var line = createConfigLine('', '');
-  line.classList.add('fresh');
-  return line;
-}
-
 function createConfigField(value, className, hint, validate) {
   var input = document.createElement('input');
   input.className = className;
   input.type = 'text';
   input.placeholder = hint;
-  input.value = value;
-  input.lastValidValue = value;
+  input.value = value || '';
+  input.lastValidValue = value || '';
 
   function checkInput() {
     if (validate(input))
       input.classList.remove('invalid');
     else
       input.classList.add('invalid');
     if (input.parentNode)
       checkEmptyLine(input.parentNode);
   }
   checkInput();
@@ skipping 17 matching lines @@
   for (var i = 0; i != inputs.length; i++) {
     if (inputs[i].value != '')
       empty = false;
   }
   if (empty)
     line.classList.add('empty');
   else
     line.classList.remove('empty');
 }
 
-function selectLine(line) {
+function selectLine(line, opt_focusInput) {
   if (line.classList.contains('selected'))
     return;
-  unselectLine();
+  var selected =
+      line.parentElement && line.parentElement.querySelector('.selected');
+  if (selected)
+    selected.classList.remove('selected');
   line.classList.add('selected');
-}
-
-function unselectLine() {
-  var line = document.querySelector('.port-forwarding-pair.selected');
-  if (!line)
-    return;
-  line.classList.remove('selected');
-  commitFreshLineIfValid();
+  if (opt_focusInput) {
+    var el = line.querySelector('.preselected');
+    if (el) {
+      line.firstChild.select();
+      line.firstChild.focus();
+    }
+  }
 }
 
 function commitFreshLineIfValid(opt_selectNew) {
-  var line = document.querySelector('.port-forwarding-pair.fresh');
+  var line = $('config-dialog').querySelector('.config-list-row.fresh');
   if (line.querySelector('.invalid'))
     return false;
   line.classList.remove('fresh');
-  var freshLine = createEmptyConfigLine();
-  line.parentNode.appendChild(freshLine);
+  var freshLine = line.parentElement.createRow();
   if (opt_selectNew)
-    freshLine.querySelector('.port').focus();
+    freshLine.querySelector('.preselected').focus();
   return true;
 }
 
 function populatePortStatus(devicesStatusMap) {
   for (var deviceId in devicesStatusMap) {
     if (!devicesStatusMap.hasOwnProperty(deviceId))
       continue;
     var deviceStatus = devicesStatusMap[deviceId];
     var deviceStatusMap = deviceStatus.ports;
 
@@ skipping 57 matching lines @@
         deviceSection.querySelectorAll('.browser'), clearBrowserPorts);
   }
 
   Array.prototype.forEach.call(
       document.querySelectorAll('.device'), clearPorts);
 }
 
 document.addEventListener('DOMContentLoaded', onload);
 
 window.addEventListener('hashchange', onHashChange);