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

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

 // Copyright 2015 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.
 /**
  * @unrestricted
  */
 Devices.DevicesView = class extends UI.VBox {
   constructor() {
     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');
     sidebar.createChild('div', 'devices-view-title').createTextChild(Common.UIString('Devices'));
     this._sidebarList = sidebar.createChild('div', 'devices-sidebar-list');
 
     this._discoveryView = new Devices.DevicesView.DiscoveryView();
     this._sidebarListSpacer = this._sidebarList.createChild('div', 'devices-sidebar-spacer');
     this._discoveryListItem = this._sidebarList.createChild('div', 'devices-sidebar-item');
     this._discoveryListItem.textContent = Common.UIString('Settings');
@@ skipping 125 matching lines @@
     return listItem;
   }
 
   /**
    * @param {!Common.Event} event
    */
   _devicesDiscoveryConfigChanged(event) {
     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);
   }
 
   /**
    * @param {!Common.Event} event
    */
   _devicesPortForwardingStatusChanged(event) {
     var status = /** @type {!Adb.PortForwardingStatus} */ (event.data);
     for (var deviceId in status) {
       var view = this._viewById.get(deviceId);
       if (view)
@@ skipping 11 matching lines @@
         Common.UIString('No devices detected.') :
         this._devices.length === 1 ? Common.UIString('1 device detected.') :
                                      Common.UIString('%d devices detected.', this._devices.length);
   }
 
   /**
    * @override
    */
   wasShown() {
     super.wasShown();
+    // Retrigger notification first time.
+    if (Runtime.queryParam('nodeFrontend'))
+      InspectorFrontendHost.setDevicesUpdatesEnabled(false);
     InspectorFrontendHost.setDevicesUpdatesEnabled(true);
   }
 
   /**
    * @override
    */
   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 {
   constructor() {
     super();
     this.setMinimumSize(100, 100);
     this.element.classList.add('discovery-view');
 
     this.contentElement.createChild('div', 'hbox device-text-row').createChild('div', 'view-title').textContent =
         Common.UIString('Settings');
 
     var discoverUsbDevicesCheckbox = UI.CheckboxLabel.create(Common.UIString('Discover USB devices'));
     discoverUsbDevicesCheckbox.classList.add('usb-checkbox');
     this.element.appendChild(discoverUsbDevicesCheckbox);
     this._discoverUsbDevicesCheckbox = discoverUsbDevicesCheckbox.checkboxElement;
     this._discoverUsbDevicesCheckbox.addEventListener('click', this._updateDiscoveryConfig.bind(this), false);
 
     var help = this.element.createChild('div', 'discovery-help');
     help.createChild('span').textContent = Common.UIString('Need help? Read Chrome ');
     help.appendChild(UI.createExternalLink(
         '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(
         'Define the listening port on your device that maps to a port accessible from your development machine. ');
     portForwardingFooter.appendChild(UI.createExternalLink(
         'https://developer.chrome.com/devtools/docs/remote-debugging#port-forwarding', Common.UIString('Learn more')));
 
     this._list = new UI.ListWidget(this);
     this._list.registerRequiredCSS('devices/devicesView.css');
     this._list.element.classList.add('port-forwarding-list');
     var placeholder = createElementWithClass('div', 'port-forwarding-list-empty');
     placeholder.textContent = Common.UIString('No rules');
     this._list.setEmptyPlaceholder(placeholder);
     this._list.show(this.element);
 
     this.element.appendChild(
         UI.createTextButton(Common.UIString('Add rule'), this._addRuleButtonClicked.bind(this), 'add-rule-button'));
 
     /** @type {!Array<!Adb.PortForwardingRule>} */
     this._portForwardingConfig = [];
   }
 
   _addRuleButtonClicked() {
     this._list.addNewItem(this._portForwardingConfig.length, {port: '', address: ''});
   }
 
   /**
-   * @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)) {
       var rule = /** @type {!Adb.PortForwardingRule} */ ({port: key, address: portForwardingConfig[key]});
       this._portForwardingConfig.push(rule);
       this._list.appendItem(rule, true);
     }
   }
 
   /**
@@ skipping 14 matching lines @@
   }
 
   /**
    * @override
    * @param {*} item
    * @param {number} index
    */
   removeItemRequested(item, index) {
     this._portForwardingConfig.splice(index, 1);
     this._list.removeItem(index);
-    this._updateDiscoveryConfig();
+    this._discoveryView._updateDiscoveryConfig();
   }
 
   /**
    * @override
    * @param {*} item
    * @param {!UI.ListWidget.Editor} editor
    * @param {boolean} isNew
    */
   commitEdit(item, editor, isNew) {
     var rule = /** @type {!Adb.PortForwardingRule} */ (item);
     rule.port = editor.control('port').value.trim();
     rule.address = editor.control('address').value.trim();
     if (isNew)
       this._portForwardingConfig.push(rule);
-    this._updateDiscoveryConfig();
+    this._discoveryView._updateDiscoveryConfig();
   }
 
   /**
    * @override
    * @param {*} item
    * @return {!UI.ListWidget.Editor}
    */
   beginEdit(item) {
     var rule = /** @type {!Adb.PortForwardingRule} */ (item);
     var editor = this._createEditor();
@@ skipping 17 matching lines @@
         .appendChild(editor.createInput('port', 'text', 'Device port (3333)', portValidator.bind(this)));
     fields.createChild('div', 'port-forwarding-separator port-forwarding-separator-invisible');
     fields.createChild('div', 'port-forwarding-value')
         .appendChild(editor.createInput('address', 'text', 'Local address (dev.example.corp:3333)', addressValidator));
     return editor;
 
     /**
      * @param {*} item
      * @param {number} index
      * @param {!HTMLInputElement|!HTMLSelectElement} input
-     * @this {Devices.DevicesView.DiscoveryView}
+     * @this {Devices.DevicesView.PortForwardingView}
      * @return {boolean}
      */
     function portValidator(item, index, input) {
       var value = input.value.trim();
       var match = value.match(/^(\d+)$/);
       if (!match)
         return false;
       var port = parseInt(match[1], 10);
       if (port < 1024 || port > 65535)
         return false;
@@ skipping 11 matching lines @@
      * @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;
     }
   }
+};
 
-  _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;
+    }
   }
 };
 
 /**
  * @unrestricted
  */
 Devices.DevicesView.DeviceView = class extends UI.VBox {
   constructor() {
     super();
     this.setMinimumSize(100, 100);
@@ skipping 272 matching lines @@
     this._portStatus.title = title.join('; ');
     this._portStatus.classList.toggle('hidden', empty);
   }
 };
 
 /** @typedef {!{browser: ?Adb.Browser, element: !Element, title: !Element, pages: !Element, viewMore: !Element, newTab: !Element, pageSections: !Map<string, !Devices.DevicesView.PageSection>}} */
 Devices.DevicesView.BrowserSection;
 
 /** @typedef {!{page: ?Adb.Page, element: !Element, title: !Element, url: !Element, inspect: !Element}} */
 Devices.DevicesView.PageSection;