From 5b5553b9a3d815ae18318ec3091439107f25b43c Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 21 Mar 2022 20:44:36 +0000 Subject: [PATCH] Add debug message path info tooltip Fixes #3477 --- .../editor-client/src/sass/debug.scss | 7 +++- .../editor-client/src/sass/popover.scss | 15 ++++++- .../@node-red/nodes/core/common/21-debug.html | 41 ++++++++++++++++++- .../core/common/lib/debug/debug-utils.js | 35 +++++++++++++++- 4 files changed, 92 insertions(+), 6 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/sass/debug.scss b/packages/node_modules/@node-red/editor-client/src/sass/debug.scss index 1cdf15e55..0c810c03f 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/debug.scss +++ b/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; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss index e6def9efc..2eb167ef4 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss +++ b/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) { diff --git a/packages/node_modules/@node-red/nodes/core/common/21-debug.html b/packages/node_modules/@node-red/nodes/core/common/21-debug.html index c585fadc0..49387c860 100644 --- a/packages/node_modules/@node-red/nodes/core/common/21-debug.html +++ b/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 { + 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); diff --git a/packages/node_modules/@node-red/nodes/core/common/lib/debug/debug-utils.js b/packages/node_modules/@node-red/nodes/core/common/lib/debug/debug-utils.js index 746a23d17..85a55c4a5 100644 --- a/packages/node_modules/@node-red/nodes/core/common/lib/debug/debug-utils.js +++ b/packages/node_modules/@node-red/nodes/core/common/lib/debug/debug-utils.js @@ -581,12 +581,45 @@ RED.debug = (function() { var metaRow = $('
').appendTo(msg); $(''+ getTimestamp()+'').appendTo(metaRow); if (sourceNode) { - $('',{href:"#",class:"red-ui-debug-msg-name"}).text('node: '+(o.name||sourceNode.name||sourceNode.id)) + + var nodeLink = $('',{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 = $("
") + sourceNode.pathHierarchy.forEach((pathPart,idx) => { + const link = $("", {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) { + $('').prependTo(link) + } + }) + return content + }, + delay: { show: 50, hide: 150 } + }); + } } else if (name) { $(''+name+'').appendTo(metaRow); }