[DevTools] Expose TCP targets config in frontend, use it for Node

third_party/WebKit/Source/devtools/front_end/devices/DevicesView.js

Index: third_party/WebKit/Source/devtools/front_end/devices/DevicesView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/devices/DevicesView.js b/third_party/WebKit/Source/devtools/front_end/devices/DevicesView.js
index 7dc3609ef6b166ae3527e0b02babfdfaee7333a1..e32404e3042dc012cfd4c36449f260eb5f602948 100644
--- a/third_party/WebKit/Source/devtools/front_end/devices/DevicesView.js
+++ b/third_party/WebKit/Source/devtools/front_end/devices/DevicesView.js
@@ -9,6 +9,8 @@ Devices.DevicesView = class extends UI.VBox {
     super(true);
     this.registerRequiredCSS('devices/devicesView.css');
     this.contentElement.classList.add('devices-view');
+    if (Runtime.queryParam('nodeFrontend'))
+      this.contentElement.classList.add('node-frontend');
 
     var hbox = this.contentElement.createChild('div', 'hbox devices-container');
     var sidebar = hbox.createChild('div', 'devices-sidebar');
@@ -154,7 +156,11 @@ Devices.DevicesView = class extends UI.VBox {
     var discoverUsbDevices = /** @type {boolean} */ (event.data['discoverUsbDevices']);
     var portForwardingEnabled = /** @type {boolean} */ (event.data['portForwardingEnabled']);
     var portForwardingConfig = /** @type {!Adb.PortForwardingConfig} */ (event.data['portForwardingConfig']);
-    this._discoveryView.discoveryConfigChanged(discoverUsbDevices, portForwardingEnabled, portForwardingConfig);
+    var networkDiscoveryEnabled = /** @type {boolean} */ (event.data['networkDiscoveryEnabled']);
+    var networkDiscoveryConfig = /** @type {!Adb.NetworkDiscoveryConfig} */ (event.data['networkDiscoveryConfig']);
+    this._discoveryView.discoveryConfigChanged(
+        discoverUsbDevices, portForwardingEnabled, portForwardingConfig, networkDiscoveryEnabled,
+        networkDiscoveryConfig);
   }
 
   /**
@@ -186,6 +192,9 @@ Devices.DevicesView = class extends UI.VBox {
    */
   wasShown() {
     super.wasShown();
+    // Retrigger notification first time.
+    if (Runtime.queryParam('nodeFrontend'))
+      InspectorFrontendHost.setDevicesUpdatesEnabled(false);
     InspectorFrontendHost.setDevicesUpdatesEnabled(true);
   }
 
@@ -194,13 +203,13 @@ Devices.DevicesView = class extends UI.VBox {
    */
   willHide() {
     super.wasShown();
-    InspectorFrontendHost.setDevicesUpdatesEnabled(false);
+    if (!Runtime.queryParam('nodeFrontend'))
+      InspectorFrontendHost.setDevicesUpdatesEnabled(false);
   }
 };
 
 
 /**
- * @implements {UI.ListWidget.Delegate}
  * @unrestricted
  */
 Devices.DevicesView.DiscoveryView = class extends UI.VBox {
@@ -224,12 +233,59 @@ Devices.DevicesView.DiscoveryView = class extends UI.VBox {
         'https://developers.google.com/chrome-developer-tools/docs/remote-debugging',
         Common.UIString('remote debugging documentation.')));
 
+    this._portForwardingView = new Devices.DevicesView.PortForwardingView(this);
+    this._portForwardingView.show(this.element);
+
+    this._networkDiscoveryView = new Devices.DevicesView.NetworkDiscoveryView(this);
+    this._networkDiscoveryView.show(this.element);
+  }
+
+  /**
+   * @param {boolean} discoverUsbDevices
+   * @param {boolean} portForwardingEnabled
+   * @param {!Adb.PortForwardingConfig} portForwardingConfig
+   * @param {boolean} networkDiscoveryEnabled
+   * @param {!Adb.NetworkDiscoveryConfig} networkDiscoveryConfig
+   */
+  discoveryConfigChanged(
+      discoverUsbDevices, portForwardingEnabled, portForwardingConfig, networkDiscoveryEnabled,
+      networkDiscoveryConfig) {
+    this._discoverUsbDevicesCheckbox.checked = discoverUsbDevices;
+    this._portForwardingView.discoveryConfigChanged(portForwardingEnabled, portForwardingConfig);
+    this._networkDiscoveryView.discoveryConfigChanged(networkDiscoveryEnabled, networkDiscoveryConfig);
+  }
+
+  _updateDiscoveryConfig() {
+    var configMap = /** @type {!Adb.PortForwardingConfig} */ ({});
+    for (var rule of this._portForwardingView._portForwardingConfig)
+      configMap[rule.port] = rule.address;
+    var networkTargets = this._networkDiscoveryView._networkDiscoveryConfig.map(item => item.address);
+    InspectorFrontendHost.setDevicesDiscoveryConfig(
+        this._discoverUsbDevicesCheckbox.checked, this._portForwardingView._portForwardingEnabledCheckbox.checked,
+        configMap, this._networkDiscoveryView._networkDiscoveryEnabled, networkTargets);
+  }
+};
+
+/**
+ * @implements {UI.ListWidget.Delegate}
+ * @unrestricted
+ */
+Devices.DevicesView.PortForwardingView = class extends UI.VBox {
+  /**
+   * @param {!Devices.DevicesView.DiscoveryView} discoveryView
+   */
+  constructor(discoveryView) {
+    super();
+    this._discoveryView = discoveryView;
+    this.element.classList.add('port-forwarding-view');
+
     var portForwardingHeader = this.element.createChild('div', 'port-forwarding-header');
     var portForwardingEnabledCheckbox = UI.CheckboxLabel.create(Common.UIString('Port forwarding'));
     portForwardingEnabledCheckbox.classList.add('port-forwarding-checkbox');
     portForwardingHeader.appendChild(portForwardingEnabledCheckbox);
     this._portForwardingEnabledCheckbox = portForwardingEnabledCheckbox.checkboxElement;
-    this._portForwardingEnabledCheckbox.addEventListener('click', this._updateDiscoveryConfig.bind(this), false);
+    this._portForwardingEnabledCheckbox.addEventListener(
+        'click', this._discoveryView._updateDiscoveryConfig.bind(this._discoveryView), false);
 
     var portForwardingFooter = this.element.createChild('div', 'port-forwarding-footer');
     portForwardingFooter.createChild('span').textContent = Common.UIString(
@@ -257,14 +313,11 @@ Devices.DevicesView.DiscoveryView = class extends UI.VBox {
   }
 
   /**
-   * @param {boolean} discoverUsbDevices
    * @param {boolean} portForwardingEnabled
    * @param {!Adb.PortForwardingConfig} portForwardingConfig
    */
-  discoveryConfigChanged(discoverUsbDevices, portForwardingEnabled, portForwardingConfig) {
-    this._discoverUsbDevicesCheckbox.checked = discoverUsbDevices;
+  discoveryConfigChanged(portForwardingEnabled, portForwardingConfig) {
     this._portForwardingEnabledCheckbox.checked = portForwardingEnabled;
-
     this._portForwardingConfig = [];
     this._list.clear();
     for (var key of Object.keys(portForwardingConfig)) {
@@ -299,7 +352,7 @@ Devices.DevicesView.DiscoveryView = class extends UI.VBox {
   removeItemRequested(item, index) {
     this._portForwardingConfig.splice(index, 1);
     this._list.removeItem(index);
-    this._updateDiscoveryConfig();
+    this._discoveryView._updateDiscoveryConfig();
   }
 
   /**
@@ -314,7 +367,7 @@ Devices.DevicesView.DiscoveryView = class extends UI.VBox {
     rule.address = editor.control('address').value.trim();
     if (isNew)
       this._portForwardingConfig.push(rule);
-    this._updateDiscoveryConfig();
+    this._discoveryView._updateDiscoveryConfig();
   }
 
   /**
@@ -352,7 +405,7 @@ Devices.DevicesView.DiscoveryView = class extends UI.VBox {
      * @param {*} item
      * @param {number} index
      * @param {!HTMLInputElement|!HTMLSelectElement} input
-     * @this {Devices.DevicesView.DiscoveryView}
+     * @this {Devices.DevicesView.PortForwardingView}
      * @return {boolean}
      */
     function portValidator(item, index, input) {
@@ -384,13 +437,153 @@ Devices.DevicesView.DiscoveryView = class extends UI.VBox {
       return port <= 65535;
     }
   }
+};
 
-  _updateDiscoveryConfig() {
-    var configMap = /** @type {!Adb.PortForwardingConfig} */ ({});
-    for (var rule of this._portForwardingConfig)
-      configMap[rule.port] = rule.address;
-    InspectorFrontendHost.setDevicesDiscoveryConfig(
-        this._discoverUsbDevicesCheckbox.checked, this._portForwardingEnabledCheckbox.checked, configMap);
+/**
+ * @implements {UI.ListWidget.Delegate}
+ * @unrestricted
+ */
+Devices.DevicesView.NetworkDiscoveryView = class extends UI.VBox {
+  /**
+   * @param {!Devices.DevicesView.DiscoveryView} discoveryView
+   */
+  constructor(discoveryView) {
+    super();
+    this._discoveryView = discoveryView;
+    this.element.classList.add('network-discovery-view');
+
+    var networkDiscoveryHeader = this.element.createChild('div', 'network-discovery-header');
+    var networkDiscoveryEnabledCheckbox = UI.CheckboxLabel.create(Common.UIString('Network targets'));
+    networkDiscoveryEnabledCheckbox.classList.add('network-discovery-checkbox');
+    networkDiscoveryHeader.appendChild(networkDiscoveryEnabledCheckbox);
+    this._networkDiscoveryEnabledCheckbox = networkDiscoveryEnabledCheckbox.checkboxElement;
+    this._networkDiscoveryEnabledCheckbox.disabled = !!Runtime.queryParam('nodeFrontend');
+    this._networkDiscoveryEnabledCheckbox.checked = !!Runtime.queryParam('nodeFrontend');
+    this._networkDiscoveryEnabledCheckbox.addEventListener('click', this._enabledCheckboxClicked.bind(this), false);
+
+    var networkDiscoveryFooter = this.element.createChild('div', 'network-discovery-footer');
+    networkDiscoveryFooter.createChild('span').textContent = Common.UIString('Define the target connection address');
+
+    this._list = new UI.ListWidget(this);
+    this._list.registerRequiredCSS('devices/devicesView.css');
+    this._list.element.classList.add('network-discovery-list');
+    var placeholder = createElementWithClass('div', 'network-discovery-list-empty');
+    placeholder.textContent = Common.UIString('No addresses defined');
+    this._list.setEmptyPlaceholder(placeholder);
+    this._list.show(this.element);
+
+    this.element.appendChild(UI.createTextButton(
+        Common.UIString('Add address'), this._addNetworkTargetButtonClicked.bind(this), 'add-network-target-button'));
+
+    /** @type {!Array<{address: string}>} */
+    this._networkDiscoveryConfig = [];
+    this._networkDiscoveryEnabled = false;
+  }
+
+  _addNetworkTargetButtonClicked() {
+    this._list.addNewItem(this._networkDiscoveryConfig.length, {address: ''});
+  }
+
+  /**
+   * @param {boolean} networkDiscoveryEnabled
+   * @param {!Adb.NetworkDiscoveryConfig} networkDiscoveryConfig
+   */
+  discoveryConfigChanged(networkDiscoveryEnabled, networkDiscoveryConfig) {
+    this._networkDiscoveryEnabled = networkDiscoveryEnabled;
+    if (!Runtime.queryParam('nodeFrontend'))
+      this._networkDiscoveryEnabledCheckbox.checked = networkDiscoveryEnabled;
+    this._networkDiscoveryConfig = [];
+    this._list.clear();
+    for (var address of networkDiscoveryConfig) {
+      var item = {address: address};
+      this._networkDiscoveryConfig.push(item);
+      this._list.appendItem(item, true);
+    }
+  }
+
+  _enabledCheckboxClicked() {
+    if (!Runtime.queryParam('nodeFrontend')) {
+      this._networkDiscoveryEnabled = this._networkDiscoveryEnabledCheckbox.checked;
+      this._discoveryView._updateDiscoveryConfig();
+    }
+  }
+
+  /**
+   * @override
+   * @param {*} item
+   * @param {boolean} editable
+   * @return {!Element}
+   */
+  renderItem(item, editable) {
+    var element = createElementWithClass('div', 'network-discovery-list-item');
+    element.createChild('div', 'network-discovery-value network-discovery-address').textContent =
+        /** @type {string} */ (item.address);
+    return element;
+  }
+
+  /**
+   * @override
+   * @param {*} item
+   * @param {number} index
+   */
+  removeItemRequested(item, index) {
+    this._networkDiscoveryConfig.splice(index, 1);
+    this._list.removeItem(index);
+    this._discoveryView._updateDiscoveryConfig();
+  }
+
+  /**
+   * @override
+   * @param {*} item
+   * @param {!UI.ListWidget.Editor} editor
+   * @param {boolean} isNew
+   */
+  commitEdit(item, editor, isNew) {
+    item.address = editor.control('address').value.trim();
+    if (isNew)
+      this._networkDiscoveryConfig.push(/** @type {{address: string}} */ (item));
+    this._discoveryView._updateDiscoveryConfig();
+  }
+
+  /**
+   * @override
+   * @param {*} item
+   * @return {!UI.ListWidget.Editor}
+   */
+  beginEdit(item) {
+    var editor = this._createEditor();
+    editor.control('address').value = item.address;
+    return editor;
+  }
+
+  /**
+   * @return {!UI.ListWidget.Editor}
+   */
+  _createEditor() {
+    if (this._editor)
+      return this._editor;
+
+    var editor = new UI.ListWidget.Editor();
+    this._editor = editor;
+    var content = editor.contentElement();
+    var fields = content.createChild('div', 'network-discovery-edit-row');
+    fields.createChild('div', 'network-discovery-value network-discovery-address')
+        .appendChild(editor.createInput('address', 'text', 'Local address (localhost:9229)', addressValidator));
+    return editor;
+
+    /**
+     * @param {*} item
+     * @param {number} index
+     * @param {!HTMLInputElement|!HTMLSelectElement} input
+     * @return {boolean}
+     */
+    function addressValidator(item, index, input) {
+      var match = input.value.trim().match(/^([a-zA-Z0-9\.\-_]+):(\d+)$/);
+      if (!match)
+        return false;
+      var port = parseInt(match[2], 10);
+      return port <= 65535;
+    }
   }
 };