Display config nodes in Info sidebar table

editor/js/ui/tab-info.js

@@ -134,7 +134,7 @@ RED.sidebar.info = (function() {
             $(propRow.children()[1]).html(' '+(node.label||""))
             propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.id")+"</td><td></td></tr>").appendTo(tableBody);
             RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
-            propRow = $('<tr class="node-info-node-row"><td>State</td><td></td></tr>').appendTo(tableBody);
+            propRow = $('<tr class="node-info-node-row"><td>Status</td><td></td></tr>').appendTo(tableBody);
             $(propRow.children()[1]).html((!!!node.disabled)?"Enabled":"Disabled")
         } else {
             nodeSection.title.html("Node");
@@ -150,13 +150,34 @@ RED.sidebar.info = (function() {
             if (!m && node.type != "subflow" && node.type != "comment") {
                 if (node._def) {
                     var count = 0;
-                    for (var n in node._def.defaults) {
-                        if (n != "name" && node._def.defaults.hasOwnProperty(n)) {
+                    var defaults = node._def.defaults;
+                    for (var n in defaults) {
+                        if (n != "name" && defaults.hasOwnProperty(n)) {
                             var val = node[n];
                             var type = typeof val;
                             count++;
                             propRow = $('<tr class="node-info-property-row'+(expandedSections.property?"":" hide")+'"><td>'+n+"</td><td></td></tr>").appendTo(tableBody);
-                            RED.utils.createObjectElement(val).appendTo(propRow.children()[1]);
+                            if (defaults[n].type) {
+                                var configNode = RED.nodes.node(val);
+                                if (!configNode) {
+                                    RED.utils.createObjectElement(undefined).appendTo(propRow.children()[1]);
+                                } else {
+                                    var configLabel = RED.utils.getNodeLabel(configNode,val);
+                                    var nodeContainer = $('<span></span>').appendTo(propRow.children()[1]);
+                                    var entry = $('<span class="palette_node config_node"></span>')
+                                        .css({marginLeft:"5px",width:"calc(100% - 20px)"}).appendTo(nodeContainer);
+                                    $('<div class="palette_label"></div>').text(configLabel).appendTo(entry);
+                                    var icon_url = RED.utils.getNodeIcon(node._def);
+                                    var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(entry);
+                                    $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
+
+                                    entry.dblclick(function(e) {
+                                        RED.editor.editConfig("", configNode.type, configNode.id);
+                                    })
+                                }
+                            } else {
+                                RED.utils.createObjectElement(val).appendTo(propRow.children()[1]);
+                            }
                         }
                     }
                     if (count > 0) {
@@ -172,7 +193,7 @@ RED.sidebar.info = (function() {
                     subflowNode = node;
                 }
 
-                $('<tr class="blank"><th colspan="2"><a href="#" class="node-info-subflow-header">'+RED._("sidebar.info.subflow")+'</a></th></tr>').appendTo(tableBody);
+                $('<tr class="blank"><th colspan="2">'+RED._("sidebar.info.subflow")+'</th></tr>').appendTo(tableBody);
 
                 var userCount = 0;
                 var subflowType = "subflow:"+subflowNode.id;

editor/sass/palette.scss

@@ -114,16 +114,18 @@
 }
 .palette_label {
     font-size: 13px;
-    margin: 4px 0 4px 28px;
+    margin: 4px 0 4px 32px;
     line-height: 20px;
     overflow: hidden;
     text-align: center;
+    @include disable-selection;
 }
 .palette_label_right {
-    margin: 4px 28px 4px 0;
+    margin: 4px 32px 4px 0;
 }
 
 .palette_node {
+    display: block;
     cursor:move;
     background: #ddd;
     margin: 10px auto;

editor/sass/tab-config.scss

@@ -25,6 +25,22 @@
  .config-node-list {
      margin: 0;
      list-style-type: none;
+
+          .palette_label {
+              margin-left: 8px;
+              line-height: 24px;
+              text-align: left;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+          }
+          .palette_icon_container {
+              font-size: 12px;
+              line-height: 30px;
+              background-color: #e8e8e8;
+              border-top-right-radius: 4px;
+              border-bottom-right-radius: 4px;
+          }
  }
  .config_node {
      width: 160px;
@@ -32,22 +48,6 @@
      background: #f3f3f3;
      color: #666;
      cursor: pointer;
-
-     .palette_label {
-         margin-left: 8px;
-         line-height: 24px;
-         text-align: left;
-         white-space: nowrap;
-         overflow: hidden;
-         text-overflow: ellipsis;
-     }
-     .palette_icon_container {
-         font-size: 12px;
-         line-height: 30px;
-         background-color: #e8e8e8;
-         border-top-right-radius: 4px;
-         border-bottom-right-radius: 4px;
-     }
 }
 .config_node_type {
     color: #999;

editor/sass/tab-info.scss

@@ -258,3 +258,9 @@ div.node-info {
         margin-left: 4px;
     }
 }
+
+.node-info-property-config-node {
+    border: 1px solid #eee;
+    border-radius: 4px;
+    padding: 2px 4px 2px;
+}