[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');
@@ skipping 133 matching lines @@
     listItem.addEventListener('click', this._selectSidebarListItem.bind(this, listItem, view));
     listItem._title = listItem.createChild('div', 'devices-sidebar-item-title');
     listItem._status = listItem.createChild('div', 'devices-sidebar-item-status');
     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 config = /** @type {!Adb.Config} */ (event.data);
+    this._discoveryView.discoveryConfigChanged(config);
   }
 
   /**
    * @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);
+    this._discoverUsbDevicesCheckbox.addEventListener('click', () => {
+      this._config.discoverUsbDevices = this._discoverUsbDevicesCheckbox.checked;
+      InspectorFrontendHost.setDevicesDiscoveryConfig(this._config);
+    }, 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.')));
 
+    /** @type {!Adb.Config} */
+    this._config;
+
+    this._portForwardingView = new Devices.DevicesView.PortForwardingView((enabled, config) => {
+      this._config.portForwardingEnabled = enabled;
+      this._config.portForwardingConfig = {};
+      for (var rule of config)
+        this._config.portForwardingConfig[rule.port] = rule.address;
+      InspectorFrontendHost.setDevicesDiscoveryConfig(this._config);
+    });
+    this._portForwardingView.show(this.element);
+
+    this._networkDiscoveryView = new Devices.DevicesView.NetworkDiscoveryView(false, (enabled, config) => {
+      this._config.networkDiscoveryEnabled = enabled;
+      this._config.networkDiscoveryConfig = config;
+      InspectorFrontendHost.setDevicesDiscoveryConfig(this._config);
+    });
+    this._networkDiscoveryView.show(this.element);
+  }
+
+  /**
+   * @param {!Adb.Config} config
+   */
+  discoveryConfigChanged(config) {
+    this._config = config;
+    this._discoverUsbDevicesCheckbox.checked = config.discoverUsbDevices;
+    this._portForwardingView.discoveryConfigChanged(config.portForwardingEnabled, config.portForwardingConfig);
+    this._networkDiscoveryView.discoveryConfigChanged(config.networkDiscoveryEnabled, config.networkDiscoveryConfig);
+  }
+};
+
+/**
+ * @implements {UI.ListWidget.Delegate}
+ * @unrestricted
+ */
+Devices.DevicesView.PortForwardingView = class extends UI.VBox {
+  /**
+   * @param {function(boolean, !Array<!Adb.PortForwardingRule>)} callback
+   */
+  constructor(callback) {
+    super();
+    this._callback = callback;
+    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._update.bind(this), 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 = [];
   }
 
+  _update() {
+    this._callback.call(null, this._portForwardingEnabledCheckbox.checked, 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._update();
   }
 
   /**
    * @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._update();
   }
 
   /**
    * @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 {boolean} nodeFrontend
+   * @param {function(boolean, !Adb.NetworkDiscoveryConfig)} callback
+   */
+  constructor(nodeFrontend, callback) {
+    super();
+    this._nodeFrontend = nodeFrontend;
+    this._callback = callback;
+    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');
+    if (nodeFrontend) {
+      networkDiscoveryFooter.createChild('span').textContent =
+          Common.UIString('Specify network endpoint and DevTools will connect to it automatically. ');
+      var link = networkDiscoveryFooter.createChild('span', 'link');
+      link.textContent = Common.UIString('Learn more');
+      link.addEventListener('click', () => InspectorFrontendHost.openInNewTab('https://nodejs.org/en/docs/inspector/'));
+    } else {
+      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 =
+        nodeFrontend ? Common.UIString('No connections specified') : Common.UIString('No addresses defined');
+    this._list.setEmptyPlaceholder(placeholder);
+    this._list.show(this.element);
+
+    var addButton = UI.createTextButton(
+        nodeFrontend ? Common.UIString('Add connection') : Common.UIString('Add address'),
+        this._addNetworkTargetButtonClicked.bind(this), 'add-network-target-button');
+    this.element.appendChild(addButton);
+
+    /** @type {!Array<{address: string}>} */
+    this._networkDiscoveryConfig = [];
+    this._networkDiscoveryEnabled = false;
+
+    if (nodeFrontend) {
+      this.element.classList.add('node-frontend');
+      this._list.element.classList.add('node-frontend');
+      addButton.classList.add('material-button', 'default');
+    }
+  }
+
+  _update() {
+    var config = this._networkDiscoveryConfig.map(item => item.address);
+    this._callback.call(null, this._networkDiscoveryEnabled, config);
+  }
+
+  _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._update();
+    }
+  }
+
+  /**
+   * @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._update();
+  }
+
+  /**
+   * @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._update();
+  }
+
+  /**
+   * @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();
+    editor.setMaterial(this._nodeFrontend);
+    this._editor = editor;
+    var content = editor.contentElement();
+    var fields = content.createChild('div', 'network-discovery-edit-row');
+    var input = editor.createInput('address', 'text', 'Network address (e.g. localhost:9229)', addressValidator);
+    fields.createChild('div', 'network-discovery-value network-discovery-address').appendChild(input);
+    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;
+
+
+Devices.DevicesView.Panel = class extends UI.Panel {
+  constructor() {
+    super('node-connection');
+    this.registerRequiredCSS('devices/devicesView.css');
+    this.contentElement.classList.add('devices-view-panel');
+
+    var container = this.contentElement.createChild('div', 'devices-view-panel-center');
+
+    var image = container.createChild('img', 'devices-view-panel-logo');
+    image.src = 'https://nodejs.org/static/images/logos/nodejs-new-pantone-black.png';
+
+    InspectorFrontendHost.events.addEventListener(
+        InspectorFrontendHostAPI.Events.DevicesDiscoveryConfigChanged, this._devicesDiscoveryConfigChanged, this);
+
+    /** @type {!Adb.Config} */
+    this._config;
+
+    this.contentElement.tabIndex = 0;
+    this.setDefaultFocusedElement(this.contentElement);
+
+    // Trigger notification once.
+    InspectorFrontendHost.setDevicesUpdatesEnabled(false);
+    InspectorFrontendHost.setDevicesUpdatesEnabled(true);
+
+    this._networkDiscoveryView = new Devices.DevicesView.NetworkDiscoveryView(true, (enabled, config) => {
+      this._config.networkDiscoveryEnabled = enabled;
+      this._config.networkDiscoveryConfig = config;
+      InspectorFrontendHost.setDevicesDiscoveryConfig(this._config);
+    });
+    this._networkDiscoveryView.show(container);
+  }
+
+  /**
+   * @param {!Common.Event} event
+   */
+  _devicesDiscoveryConfigChanged(event) {
+    this._config = /** @type {!Adb.Config} */ (event.data);
+    this._networkDiscoveryView.discoveryConfigChanged(
+        this._config.networkDiscoveryEnabled, this._config.networkDiscoveryConfig);
+  }
+};