Visually truncate long strings in debug side-bar

When there is a long string in a property, would it be possible to have this actually truncated to 1 or 2 lines with a ... behind it when it is not expanded ?

Expanding it only adds linebreaks.

1 Like

+1 from me

Lets see what the consensus is.

3 Likes

Totally agree. :slight_smile:

What would be the max length before the ...?

If this is done via CSS, it would be "what fits on one line"

If done via code, then something sensible like 80 or 160 chars.


My preference is using CSS to form the ellipsis & clicking the item simply toggles the class.

Additionally, I would have the title set to the same value so that it can be "peeked" via a tooltip (but that's just me)

FYI: Truncate String With Ellipsis | CSS-Tricks

I can't do it with CSS, maybe I'm using it wrong :sweat_smile:

I find it annoying when a long SQL query is in msg.topic since the topic is always (?) shown at the top of the debug output.

And especially when the debug is set to show the complete msg because then I get the whole topic twice over.

An editor CSS file does let me truncate the first copy of the topic.

.red-ui-debug-msg-topic {
max-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
}

Unfortunately the ellipsis bit doesn't work (Firefox 130) :

1 Like

you may need a white-space: nowrap as well, but you may end up in conflict with the height (?)

I have, it works. Thanks

But for one line is short, no? For the topic it looks good but not for the payload.

Good suggestion, thanks.

That truncates msg.topic after a single line, making max-height redundant. I do now see the ellipsis but it's not clickable (which is OK).

@Steve-Mcl Does a mix of CSS for topic and code for payload suit you? Because for the payload one line seems insufficient to me.

Why not?

Can you show us some variations of how it looks with a pure CSS solution? (long topic, short payload, vice versa, both long, expanded + collapsed) - Ta.

Sorry for the delay. So...

That all looks good to me. :slight_smile:

VS topic with CSS and payload without:

  • Pure CSS solution for both topic and payload
  • Topic with CSS & payload truncated with code
  • Either
0 voters

(I'm having fun testing poll :joy:)

Did you try this with spaces in the string (it may behave differently due to white-space), but in conjunction with this request - the debug to the console also gets truncated (currently), which in my opinion should not be happening. ie. one sends it to console to see the full output.

Yep

1 Like

Can you add another option to the poll - "Either"! :slight_smile: I genuinely think both are good and I'd be happy either way. Great work.

1 Like

@GogoVega can you show us the CSS for your purely CSS alternative?

Of course :wink:

PS: I just realized that the collapse arrow only appears if the payload contains \t \r \n - I had added a length condition while testing.