Reland of [DevTools] Show icon in top toolbar when Node target is available (patchset #1 id:1 of https://codereview.chromium.org/2932703002/ )

Reason for revert:
Fixed the original crash cause

Original issue's description:
> Revert of [DevTools] Show icon in top toolbar when Node target is available (patchset #3 id:40001 of https://codereview.chromium.org/2890973002/ )
>
> Reason for revert:
> See issue 727517
>
> Original issue's description:
> > [DevTools] Show icon in top toolbar when Node target is available
> >
> > Clicking on it opens dedicated Node frontend.
> >
> > BUG=706916
> >
> > Review-Url: https://codereview.chromium.org/2890973002
> > Cr-Commit-Position: refs/heads/master@{#472739}
> > Committed: https://chromium.googlesource.com/chromium/src/+/ad3ffab411cc396ffb20c1d35dcff6de038f14b4
>
> [email protected]
> # Not skipping CQ checks because original CL landed more than 1 days ago.
> BUG=706916
>
> Review-Url: https://codereview.chromium.org/2932703002
> Cr-Commit-Position: refs/heads/master@{#478017}
> Committed: https://chromium.googlesource.com/chromium/src/+/24309d877571d159bc14f871671ff0630d6f8d32

[email protected]
# Not skipping CQ checks because original CL landed more than 1 days ago.
BUG=706916,727517

Review-Url: https://codereview.chromium.org/2939173002
Cr-Commit-Position: refs/heads/master@{#479882}

Author: dgozman

BUILD.gn

@@ -305,6 +305,7 @@ all_devtools_files = [
   "front_end/main/GCActionDelegate.js",
   "front_end/main/Main.js",
   "front_end/main/module.json",
+  "front_end/main/nodeIcon.css",
   "front_end/main/remoteDebuggingTerminatedScreen.css",
   "front_end/main/renderingOptions.css",
   "front_end/main/RenderingOptions.js",
@@ -823,6 +824,7 @@ devtools_image_files = [
   "front_end/Images/ic_warning_black_18dp.svg",
   "front_end/Images/navigationControls.png",
   "front_end/Images/navigationControls_2x.png",
+  "front_end/Images/nodeIcon.png",
   "front_end/Images/popoverArrows.png",
   "front_end/Images/profileGroupIcon.png",
   "front_end/Images/profileIcon.png",

front_end/Images/nodeIcon.png

@@ -729,6 +729,37 @@ Main.Main.MainMenuItem = class {
   }
 };
 
+/**
+ * @implements {UI.ToolbarItem.Provider}
+ */
+Main.Main.NodeIndicator = class {
+  constructor() {
+    var element = createElement('div');
+    var shadowRoot = UI.createShadowRootWithCoreStyles(element, 'main/nodeIcon.css');
+    this._element = shadowRoot.createChild('div', 'node-icon');
+    element.addEventListener('click', () => InspectorFrontendHost.openNodeFrontend(), false);
+    this._button = new UI.ToolbarItem(element);
+    this._button.setTitle(Common.UIString('Open dedicated DevTools for Node.js'));
+    SDK.targetManager.addEventListener(SDK.TargetManager.Events.AvailableNodeTargetsChanged, this._update, this);
+    this._button.setVisible(false);
+    this._update();
+  }
+
+  _update() {
+    this._element.classList.toggle('inactive', !SDK.targetManager.availableNodeTargetsCount());
+    if (SDK.targetManager.availableNodeTargetsCount())
+      this._button.setVisible(true);
+  }
+
+  /**
+   * @override
+   * @return {?UI.ToolbarItem}
+   */
+  item() {
+    return this._button;
+  }
+};
+
 Main.NetworkPanelIndicator = class {
   constructor() {
     // TODO: we should not access network from other modules.

front_end/main/Main.js

@@ -202,6 +202,13 @@
             "location": "main-toolbar-left",
             "order": 100
         },
+        {
+            "type": "@UI.ToolbarItem.Provider",
+            "className": "Main.Main.NodeIndicator",
+            "order": 2,
+            "location": "main-toolbar-left",
+            "condition": "!nodeFrontend"
+        },
         {
             "type": "@UI.ToolbarItem.Provider",
             "className": "Main.Main.WarningErrorCounter",
@@ -441,6 +448,7 @@
     ],
     "resources": [
         "errorWarningCounter.css",
+        "nodeIcon.css",
         "remoteDebuggingTerminatedScreen.css",
         "renderingOptions.css",
         "targetCrashedScreen.css"

front_end/main/module.json

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2017 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.
+ */
+
+.node-icon {
+    width: 28px;
+    height: 26px;
+    background-image: url(Images/nodeIcon.png);
+    background-size: 17px 17px;
+    background-repeat: no-repeat;
+    background-position: center;
+    opacity: 0.8;
+}
+
+.node-icon:hover {
+    opacity: 1.0;
+}
+
+.node-icon.inactive {
+    filter: grayscale(100%);
+}

front_end/main/nodeIcon.css

@@ -328,9 +328,9 @@ SDK.TargetManager = class extends Common.Object {
   _connectAndCreateMainTarget() {
     if (Runtime.queryParam('nodeFrontend')) {
       var target = new SDK.Target(
-          this, 'main', Common.UIString('Node'), SDK.Target.Capability.Target, this._createMainConnection.bind(this),
+          this, 'main', Common.UIString('Node.js'), SDK.Target.Capability.Target, this._createMainConnection.bind(this),
           null);
-      target.setInspectedURL('Node');
+      target.setInspectedURL('Node.js');
       this._childTargetManagers.set(target, new SDK.ChildTargetManager(this, target));
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.ConnectToNodeJSFromFrontend);
       return;
@@ -410,13 +410,15 @@ SDK.ChildTargetManager = class {
     if (Runtime.experiments.isEnabled('autoAttachToCrossProcessSubframes'))
       this._targetAgent.setAttachToFrames(true);
 
-    if (!parentTarget.parentTarget())
+    if (!parentTarget.parentTarget()) {
       this._targetAgent.setDiscoverTargets(true);
-
-    if (Runtime.queryParam('nodeFrontend') && !this._parentTarget.parentTarget()) {
-      InspectorFrontendHost.setDevicesUpdatesEnabled(true);
-      InspectorFrontendHost.events.addEventListener(
-          InspectorFrontendHostAPI.Events.DevicesDiscoveryConfigChanged, this._devicesDiscoveryConfigChanged, this);
+      if (Runtime.queryParam('nodeFrontend')) {
+        InspectorFrontendHost.setDevicesUpdatesEnabled(true);
+        InspectorFrontendHost.events.addEventListener(
+            InspectorFrontendHostAPI.Events.DevicesDiscoveryConfigChanged, this._devicesDiscoveryConfigChanged, this);
+      } else {
+        this._targetAgent.setRemoteLocations([{host: 'localhost', port: 9229}]);
+      }
     }
   }
 
@@ -429,7 +431,8 @@ SDK.ChildTargetManager = class {
     for (var address of config.networkDiscoveryConfig) {
       var parts = address.split(':');
       var port = parseInt(parts[1], 10);
-      locations.push({host: parts[0] || 'localhost', port: port || 9229});
+      if (parts[0] && port)
+        locations.push({host: parts[0], port: port});
     }
     this._targetAgent.setRemoteLocations(locations);
   }
@@ -513,7 +516,7 @@ SDK.ChildTargetManager = class {
   attachedToTarget(targetInfo, waitingForDebugger) {
     var targetName = '';
     if (targetInfo.type === 'node') {
-      targetName = Common.UIString('Node: %s', targetInfo.url);
+      targetName = Common.UIString('Node.js: %s', targetInfo.url);
     } else if (targetInfo.type !== 'iframe') {
       var parsedURL = targetInfo.url.asParsedURL();
       targetName =

front_end/sdk/TargetManager.js

@@ -16,14 +16,7 @@ Sources.ThreadsSidebarPane = class extends UI.VBox {
     this._list = new UI.ListControl(this._items, this, UI.ListMode.NonViewport);
     this.contentElement.appendChild(this._list.element);
 
-    this._availableNodeTargetsElement = this.contentElement.createChild('div', 'hidden available-node-targets');
-
     UI.context.addFlavorChangeListener(SDK.Target, this._targetFlavorChanged, this);
-
-    SDK.targetManager.addEventListener(
-        SDK.TargetManager.Events.AvailableNodeTargetsChanged, this._availableNodeTargetsChanged, this);
-    this._availableNodeTargetsChanged();
-
     SDK.targetManager.observeModels(SDK.DebuggerModel, this);
   }
 
@@ -32,27 +25,7 @@ Sources.ThreadsSidebarPane = class extends UI.VBox {
    */
   static shouldBeShown() {
     var minJSTargets = Runtime.queryParam('nodeFrontend') ? 1 : 2;
-    if (SDK.targetManager.models(SDK.DebuggerModel).length >= minJSTargets)
-      return true;
-    return !!SDK.targetManager.availableNodeTargetsCount();
-  }
-
-  _availableNodeTargetsChanged() {
-    var count = SDK.targetManager.availableNodeTargetsCount();
-    if (!count) {
-      this._availableNodeTargetsElement.classList.add('hidden');
-      return;
-    }
-    this._availableNodeTargetsElement.removeChildren();
-    this._availableNodeTargetsElement.createTextChild(
-        count === 1 ? Common.UIString('Node instance available.') :
-                      Common.UIString('%d Node instances available.', count));
-    var link = this._availableNodeTargetsElement.createChild('span', 'link');
-    link.textContent = Common.UIString('Connect');
-    link.addEventListener('click', () => {
-      InspectorFrontendHost.openNodeFrontend();
-    }, false);
-    this._availableNodeTargetsElement.classList.remove('hidden');
+    return SDK.targetManager.models(SDK.DebuggerModel).length >= minJSTargets;
   }
 
   /**

front_end/sources/ThreadsSidebarPane.js

@@ -4,20 +4,6 @@
  * found in the LICENSE file.
  */
 
-.available-node-targets {
-    height: 22px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding-left: 20px;
-    border-top: 1px solid #eee;
-    font-style: italic;
-}
-
-.available-node-targets > span {
-    margin-left: 5px;
-}
-
 .thread-item {
     padding: 3px 8px 3px 20px;
     position: relative;