From 702bf3d547036e4ba435fc04f1d99d6e35e71c0e Mon Sep 17 00:00:00 2001
From: GogoVega <92022724+GogoVega@users.noreply.github.com>
Date: Wed, 23 Oct 2024 23:10:09 +0200
Subject: [PATCH 1/3] Truncate long debug messages
---
.../@node-red/editor-client/src/sass/debug.scss | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
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 eb550c6f5..c92df8f99 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
@@ -131,6 +131,10 @@
}
.red-ui-debug-msg-topic {
display: block;
+ max-width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
color: var(--red-ui-debug-message-text-color-meta);
}
.red-ui-debug-msg-name {
@@ -233,7 +237,10 @@
.red-ui-debug-msg-type-number-toggle { cursor: pointer;}
.red-ui-debug-msg-type-string {
- white-space: pre-wrap;
+ display: block;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
}
.red-ui-debug-msg-row {
From 3a27a756ccf71e750a6ba5d716888fc7c1df60c2 Mon Sep 17 00:00:00 2001
From: GogoVega <92022724+GogoVega@users.noreply.github.com>
Date: Thu, 7 Nov 2024 10:36:54 +0100
Subject: [PATCH 2/3] Replace the CSS solution with a coded one for the msg
string
---
.../editor-client/src/js/ui/utils.js | 20 +++++++++++++++++--
.../editor-client/src/sass/debug.scss | 5 +----
2 files changed, 19 insertions(+), 6 deletions(-)
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
index cfc7f65de..93baaa2df 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
@@ -128,10 +128,22 @@ RED.utils = (function() {
function formatString(str) {
return str.replace(/\r?\n/g,"↵").replace(/\t/g,"→");
}
+
function sanitize(m) {
return m.replace(/&/g,"&").replace(//g,">");
}
+ /**
+ * Truncates a string to a specified maximum length, adding ellipsis if truncated.
+ *
+ * @param {string} str - The string to be truncated.
+ * @param {number} maxLength - The maximum length of the truncated string. Default `120`.
+ * @returns {string} The truncated string with ellipsis if it exceeds the maximum length.
+ */
+ function truncateString(str, maxLength = 120) {
+ return str.length > maxLength ? str.slice(0, maxLength) + "..." : str;
+ }
+
function buildMessageSummaryValue(value) {
var result;
if (Array.isArray(value)) {
@@ -376,6 +388,9 @@ RED.utils = (function() {
}
}
+ // Max string length before truncating
+ const MAX_STRING_LENGTH = 80;
+
/**
* Create a DOM element representation of obj - as used by Debug sidebar etc
*
@@ -469,7 +484,7 @@ RED.utils = (function() {
} else if (typeHint === "internal" || (obj.__enc__ && obj.type === 'internal')) {
e = $('').text("[internal]").appendTo(entryObj);
} else if (typeof obj === 'string') {
- if (/[\t\n\r]/.test(obj)) {
+ if (/[\t\n\r]/.test(obj) || obj.length > MAX_STRING_LENGTH) {
element.addClass('collapsed');
$(' ').prependTo(header);
makeExpandable(header, function() {
@@ -478,7 +493,7 @@ RED.utils = (function() {
$('').text(obj).appendTo(row);
},function(state) {if (ontoggle) { ontoggle(path,state);}}, checkExpanded(strippedKey,expandPaths));
}
- e = $('').html('"'+formatString(sanitize(obj))+'"').appendTo(entryObj);
+ e = $('').html('"'+formatString(sanitize(truncateString(obj, MAX_STRING_LENGTH)))+'"').appendTo(entryObj);
if (/^#[0-9a-f]{6}$/i.test(obj)) {
$('').css('backgroundColor',obj).appendTo(e);
}
@@ -1503,6 +1518,7 @@ RED.utils = (function() {
parseContextKey: parseContextKey,
createIconElement: createIconElement,
sanitize: sanitize,
+ truncateString: truncateString,
renderMarkdown: renderMarkdown,
createNodeIcon: createNodeIcon,
getDarkerColor: getDarkerColor,
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 c92df8f99..8e8803f9d 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
@@ -237,10 +237,7 @@
.red-ui-debug-msg-type-number-toggle { cursor: pointer;}
.red-ui-debug-msg-type-string {
- display: block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
+ white-space: pre-wrap;
}
.red-ui-debug-msg-row {
From 6a13d2d544a4789882da0f7b4a18241d89440ba2 Mon Sep 17 00:00:00 2001
From: GogoVega <92022724+GogoVega@users.noreply.github.com>
Date: Mon, 25 Nov 2024 21:45:00 +0100
Subject: [PATCH 3/3] Remove logic of the topic truncation and fix the docs
---
.../@node-red/editor-client/src/js/ui/utils.js | 11 +++++++----
.../@node-red/editor-client/src/sass/debug.scss | 4 ----
2 files changed, 7 insertions(+), 8 deletions(-)
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
index 93baaa2df..1546f2eef 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
@@ -134,11 +134,14 @@ RED.utils = (function() {
}
/**
- * Truncates a string to a specified maximum length, adding ellipsis if truncated.
+ * Truncates a string to a specified maximum length, adding ellipsis
+ * if truncated.
*
- * @param {string} str - The string to be truncated.
- * @param {number} maxLength - The maximum length of the truncated string. Default `120`.
- * @returns {string} The truncated string with ellipsis if it exceeds the maximum length.
+ * @param {string} str The string to be truncated.
+ * @param {number} [maxLength = 120] The maximum length of the truncated
+ * string. Default `120`.
+ * @returns {string} The truncated string with ellipsis if it exceeds the
+ * maximum length.
*/
function truncateString(str, maxLength = 120) {
return str.length > maxLength ? str.slice(0, maxLength) + "..." : str;
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 8e8803f9d..eb550c6f5 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
@@ -131,10 +131,6 @@
}
.red-ui-debug-msg-topic {
display: block;
- max-width: 100%;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
color: var(--red-ui-debug-message-text-color-meta);
}
.red-ui-debug-msg-name {