Visually truncate long strings in debug side-bar

Core Development Feature Requests
21

OK I put this in an editor CSS file (specified in settings.js). Does it look right?

.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-type-string {
    white-space: pre-wrap;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Just considering msg.topic I get this

image
image792×262 9.87 KB

The topic in the first line is truncated at the end of the line :heavy_check_mark:
The ellipsis shows up but clicking does nothing. I'm happy with this on line 1.

But in the main body topic is truncated after 30 characters?
It expands in two stages

image
image791×304 7.1 KB

and
image
image769×406 8.3 KB

A very nice result but once clicked it can't be reshrunk.

22

Like topic in the first line, the msg max length is the container max width. So if you play with the size of the sidebar, the message length before truncating varies.

Did you click on the topic: string line?

23

No, but if I do, it goes back to the full single line.

That's not what I get, as my first pic shows. It's not really a problem though.

24

So I don't understand what you mean.

I see but I think it's a CSS problem at the row level. It's like the comma at the start of the line rather than at the end of the line.

25

It did not occur to me to click either the topic: string line or indeed the small triangle next to it.
Operator error!

26

:joy: beginner's mistake :face_with_hand_over_mouth: :slightly_smiling_face:

27

@knolleary should i open an issue for this one?

PS: I will send the pure CSS version.

28
1 Like