[DevTools] Add UI for adding remote targets

chrome/browser/resources/inspect/inspect.js

Index: chrome/browser/resources/inspect/inspect.js
diff --git a/chrome/browser/resources/inspect/inspect.js b/chrome/browser/resources/inspect/inspect.js
index e9b2661637f43bf538cc2cbf80d6f27859714c81..72f3b75a7dd96f85099b67333bc9cd88312fa15e 100644
--- a/chrome/browser/resources/inspect/inspect.js
+++ b/chrome/browser/resources/inspect/inspect.js
@@ -74,7 +74,7 @@ function onHashChange() {
  * @return {boolean} True if successful.
  */
 function selectTab(id) {
-  closePortForwardingConfig();
+  closeConfigDialog();
 
   var tabContents = document.querySelectorAll('#content > div');
   var tabHeaders = $('navigation').querySelectorAll('.tab-header');
@@ -174,7 +174,7 @@ function populateRemoteTargets(devices) {
   if (!devices)
     return;
 
-  if ($('port-forwarding-config').open) {
+  if ($('config-dialog').open) {
     window.holdDevices = devices;
     return;
   }
@@ -607,10 +607,11 @@ function initSettings() {
   $('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) {
@@ -624,44 +625,123 @@ function enablePortForwarding(event) {
 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();
+  }
+
+  var dialog = $('config-dialog');
+  if (dialog.open)
+    return;
+
+  dialog.className = dialogClass;
+  dialog.classList.add('config');
 
-  $('port-forwarding-config').showModal();
   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)
-    return;
+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);
+  }
 
-  $('port-forwarding-config').onclose = null;
-  $('port-forwarding-config').close();
+  openConfigDialog('target-discovery',
+             commitTargetDiscoveryConfig,
+             createTargetDiscoveryConfigLine,
+             window.targetDiscoveryConfig);
+}
+
+function closeConfigDialog() {
+  var element = $('config-dialog');
+  if (!element.open)
+    return;
+  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) {
@@ -670,38 +750,24 @@ function closePortForwardingConfig() {
   }
 }
 
-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) {
@@ -721,17 +787,14 @@ function updatePortForwardingConfig(config) {
   $('port-forwarding-config-open').disabled = !config;
 }
 
-function createConfigLine(port, location) {
-  var line = document.createElement('div');
-  line.className = 'port-forwarding-pair';
-
-  var portInput = createConfigField(port, 'port', 'Port', validatePort);
-  line.appendChild(portInput);
+function updateTargetDiscoveryConfig(config) {
+  window.targetDiscoveryConfig = config;
+  $('target-discovery-config-open').disabled = !config;
+}
 
-  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') &&
@@ -745,19 +808,23 @@ function createConfigLine(port, location) {
   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) {
@@ -786,19 +853,13 @@ function validateLocation(input) {
   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))
@@ -836,30 +897,31 @@ function checkEmptyLine(line) {
     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;
 }