Fixing long names

[WojcikMike]

fixes #612
This is how the screen looks in current version:

And this is the new presentation:

I decided to remove line wrapping, as normally we display the data in 2 lines. If the name is to long then it is being shortened by ellipsis and the name is available using a tooltip.

I decided to use css to shorten the text so that it automatically works with any width of the container. It seems like the easiest solution to fix the problem.

Next steps could be to display only the actual type of the message ignoring the namespace and showing it in a tooltip. That would give us more space.

[sergioc]

I decided to use css to shorten the text so that it automatically works with any width of the container. It seems like the easiest solution to fix the problem.

Then it's just a bug fix. I've implemented that before and there was a regression somewhere.

Still the solution that @HEskandari was better. Truncate at the beginning so that you can see the end which is what varies among message types. Otherwise you only see repetition. Also his solution involved striping all segments (names between periods) of the message type name as as soon as the characters in a segment would begin to truncate.

Will you also address the parsing of "properties" into that second line of grey text?

[WojcikMike]

Then it's just a bug fix. I've implemented that before and there was a regression somewhere.

Yes it is a bug fix, and regression could have happened.

Still the solution that @HEskandari was better. ...

Yes and no. It is better in the sense that presented information, in this case, are more meaningful. However css solution is not bound to any given number of character, so when you have more narrow screen and only 15 chars fit it will apply. With javascript you have to depend on the usage of this algorithm to char length (if the string is longer than 20 than do the magic). So you are writing for 1 given size, and any change in zoom setting or making the screen more narrow still cause bad rendering of the page.

Also his solution involved striping all segments (names between periods) of the message type name as as soon as the characters in a segment would begin to truncate.

I don't understand this, could you provide an example? I couldn't find anything in the closed PR that would relate to stripping any of the segments.

Will you also address the parsing of "properties" into that second line of grey text?

The problem exists when there is inheritance hierarchy which needs to be handled in SC. We can't do anything about it.

[WojcikMike]

After the last changes this is how it looks:

And the tooltip now looks as follows:

[sergioc]

Feedback

• on endpoints screen, the ellipsis need to be the same color as the endpoint name (dark blue)
• Message type name tooltip doesn't include all properties

• Message type name tooltip should also display when hovering properties (sometimes only a property is truncated and nothing else, so the natural thing to do is hover the truncated property)
• Remove unnecessary padding before truncation ellipsis (for better alignment, maybe fit extra character for name)

• tooltip not showing for instance names in endpoint details
• tooltip should only show if something is truncated (otherwise it adds noise when scanning the page with the mouse cursor)

[WojcikMike]

@sergioc regarding your feedback:

on endpoints screen, the ellipsis need to be the same color as the endpoint name (dark blue)

I need your help with that., to change the color of the ellipsis you need to set css color property to the color that you want to get. The color need to be set on the container that you configure ellipsis on. The problem is that this container is div with class lead. The class lead has color set to black with !important. Could you help with that?

Message type name tooltip doesn't include all properties

fixed

Message type name tooltip should also display when hovering properties

done

Remove unnecessary padding before truncation

I can't reproduce it, it might be related to string length, depending on the width of the chars there might be some space left. There is no padding on this element. I doubt that we will be able to fix it. Or it could be browsers specifid.

tooltip not showing for instance names in endpoint details

Done

tooltip should only show if something is truncated

This is very hard to achieve, Overall we are using CSS to truncate text, so to check it there are hacks in javascript but due to amount of places that we now use ellipsis on it would be really messy and performance would suffer. I suggest to not do it.

[sergioc]

This is very hard to achieve, Overall we are using CSS to truncate text, so to check it there are hacks in javascript but due to amount of places that we now use ellipsis on it would be really messy and performance would suffer. I suggest to not do it.

Can you detect if there's an ellipsis in the content, and if not, hide the tooltip?

[WojcikMike]

Can you detect if there's an ellipsis in the content, and if not, hide the tooltip?

The suggested approach is to compare offsetWidth with scroll width, which would indicate if the ellipsis kicked in or not. The problem is that we would have to do it for every row, So when moving your mouse through the screen there would be quite a few activities happening in the background to determine if tooltip should be visible or not. On endpoint details screen there are 2 lists each showing tooltip on every row. Plus few other places.

[sergioc]

Fixed endpoint ellipsis color. Just need to use a more specific selector with important to override .lead with important.