Merge pull request #3503 from node-red/debug-tooltip

Add a tooltip to debug sidebar messages to reveal full path to node

packages/node_modules/@node-red/editor-client/src/sass/debug.scss

@@ -123,17 +123,20 @@
     background: $debug-message-background;
     font-size: 11px;
     color: $secondary-text-color-inactive;
+    overflow-wrap: anywhere;
 }
 .red-ui-debug-msg-date {
-    padding: 1px 5px 1px 1px;
+    padding: 1px 10px 1px 0px;
+    white-space: nowrap;
 }
 .red-ui-debug-msg-topic {
     display: block;
     color: $debug-message-text-color-meta;
 }
 .red-ui-debug-msg-name {
-    padding: 1px 5px;
+    padding: 1px 0px;
     color: $secondary-text-color-inactive;
+    white-space: nowrap;
 }
 .red-ui-debug-msg-tools {
     position: absolute;

packages/node_modules/@node-red/editor-client/src/sass/popover.scss

@@ -152,7 +152,20 @@
     border-radius:3px;
     padding: 1px 2px;
 }
-
+.red-ui-popover {
+    a {
+        text-decoration: none;
+        color: var(--red-ui-popover-color) !important;
+    }
+    a:hover,
+    a:focus {
+        text-decoration: none;
+        color: var(--red-ui-popover-color) !important;
+    }
+    a:focus {
+        outline: 1px solid $form-input-focus-color;
+    }
+}
 .red-ui-popover a.red-ui-button,
 .red-ui-popover button.red-ui-button {
     &:not(.primary) {

packages/node_modules/@node-red/nodes/core/common/21-debug.html

@@ -160,6 +160,10 @@
                 },
                 messageSourceClick: function(sourceId, aliasId, path) {
                     // Get all of the nodes that could have logged this message
+                    if (RED.nodes.workspace(sourceId)) {
+                        RED.view.reveal(sourceId);
+                        return
+                    }
                     var candidateNodes = [RED.nodes.node(sourceId)]
                     if (path) {
                         for (var i=2;i<path.length;i++) {
@@ -235,10 +239,11 @@
                 // sourceNode should be the top-level node - one that is on a flow.
                 var sourceNode;
                 var pathParts;
+                var pathHierarchy;
                 if (o.path) {
                     // Path is a `/`-separated list of ids that identifies the
                     // complete parentage of the node that generated this message.
-                    //    flow-id/subflow-A-instance/subflow-A-type/subflow-B-instance/subflow-B-type/node-id
+                    //    flow-id/subflow-A-instance/subflow-B-instance
 
                     // If it has one id, that is a top level flow
                     // each subsequent id is the instance id of a subflow node
@@ -251,11 +256,41 @@
                         // Highlight the subflow instance node.
                         sourceNode = RED.nodes.node(pathParts[1]);
                     }
+                    pathHierarchy = pathParts.map((id,index) => {
+                        if (index === 0) {
+                            return {
+                                id: id,
+                                label: RED.nodes.workspace(id).label
+                            }
+                        } else {
+                            var instanceNode = RED.nodes.node(id)
+                            return {
+                                id: id,
+                                label: (instanceNode.name || RED.nodes.subflow(instanceNode.type.substring(8)).name)
+                            }
+                        }
+                    })
+                    if (pathParts.length === 1) {
+                        pathHierarchy.push({
+                            id: o.id,
+                            label: sourceNode.name || sourceNode.type+":"+sourceNode.id
+                        })
+                    }
+                    if (o._alias) {
+                        let aliasNode = RED.nodes.node(o._alias)
+                        if (aliasNode) {
+                            pathHierarchy.push({
+                                id: o._alias,
+                                label: aliasNode.name || aliasNode.type+":"+aliasNode.id
+                            })
+                        }
+                    }
                 } else {
                     // This is probably redundant...
                     sourceNode = RED.nodes.node(o.id) || RED.nodes.node(o.z);
                 }
                 if (sourceNode) {
+                    var sourceFlow = RED.nodes.workspace(sourceNode.z)
                     o._source = {
                         id:sourceNode.id,
                         z:sourceNode.z,
@@ -266,7 +301,9 @@
                         // the top-level subflow instance node.
                         // This means the node's name is displayed in the sidebar.
                         _alias:o._alias,
-                        path: pathParts
+                        flowName: sourceFlow?(sourceFlow.label||sourceNode.z):sourceNode.z,
+                        path: pathParts,
+                        pathHierarchy: pathHierarchy
                     };
                 }
                 RED.debug.handleDebugMessage(o);

packages/node_modules/@node-red/nodes/core/common/lib/debug/debug-utils.js

@@ -581,12 +581,45 @@ RED.debug = (function() {
         var metaRow = $('<div class="red-ui-debug-msg-meta"></div>').appendTo(msg);
         $('<span class="red-ui-debug-msg-date">'+ getTimestamp()+'</span>').appendTo(metaRow);
         if (sourceNode) {
-            $('<a>',{href:"#",class:"red-ui-debug-msg-name"}).text('node: '+(o.name||sourceNode.name||sourceNode.id))
+
+            var nodeLink = $('<a>',{href:"#",class:"red-ui-debug-msg-name"}).text("node: "+(o.name||sourceNode.name||sourceNode.id))
             .appendTo(metaRow)
             .on("click", function(evt) {
                 evt.preventDefault();
                 config.messageSourceClick(sourceNode.id, sourceNode._alias, sourceNode.path);
             });
+
+            if (sourceNode.pathHierarchy) {
+                RED.popover.create({
+                    tooltip: true,
+                    target:nodeLink,
+                    trigger: "hover",
+                    size: "small",
+                    direction: "bottom",
+                    interactive: true,
+                    content: function() {
+                        const content = $("<div>")
+                        sourceNode.pathHierarchy.forEach((pathPart,idx) => {
+                            const link = $("<a>", {href:"#" ,style:'display: block'})
+                                .css({
+                                    paddingLeft:((idx*10)+((idx === sourceNode.pathHierarchy.length - 1)?10:0))+"px",
+                                    paddingRight:'2px'
+                                })
+                                .text(pathPart.label)
+                                .appendTo(content)
+                                .on("click", function(evt) {
+                                    evt.preventDefault();
+                                    config.messageSourceClick(pathPart.id);
+                                })
+                            if (idx < sourceNode.pathHierarchy.length - 1) {
+                                $('<i class="fa fa-angle-down" style="margin-right: 3px"></i>').prependTo(link)
+                            }
+                        })
+                        return content
+                    },
+                    delay: { show: 50, hide: 150 }
+                });
+            }
         } else if (name) {
             $('<span class="red-ui-debug-msg-name">'+name+'</span>').appendTo(metaRow);
         }