Labels in call stack for breakpoints, variables and threads are misaligned and unreadable

[keithrussell42]

I have been struggling with this issue for some time now and can't find a reasonable solution. My environment(s):

• Sublime Text 4 Build 4143 (and happened with previous ST4 builds as well)
• Happens on Windows (10 and 11) and Ubuntu 20.04
• I see this when debugging Go (Delve) and Rust (lldb cargo). I haven't tried anything else.
• Font size is 11 on Linux, 10 on Windows.
• Debugger package v0.10.1

I have tried to reduce the UI scale in the debugger settings. This sometimes fixes it for specific instances but another debug session would have some misaligned labels. I've even tried to use my preferred font but that didn't help either.

This is 100% reproducible for me. I'm quite willing to play with the code if there are suggestions where to look.

[daveleroy]

You could try playing around with the value here https://github.com/daveleroy/SublimeDebugger/blob/7c88fa6402e154f41e4db1075bd336bc539b035f/modules/ui/style.py#L100

[daveleroy]

Not currently on package control but you can adjust this with the internal_font_scale setting

https://github.com/daveleroy/SublimeDebugger/blob/805614b704da4f61f11fefcc13a833de25cad229/Debugger.sublime-settings#L12

[WZ-Tong]

I have been struggling with this issue for some time now and can't find a reasonable solution. My environment(s):

• Sublime Text 4 Build 4143 (and happened with previous ST4 builds as well)
• Happens on Windows (10 and 11) and Ubuntu 20.04
• I see this when debugging Go (Delve) and Rust (lldb cargo). I haven't tried anything else.
• Font size is 11 on Linux, 10 on Windows.
• Debugger package v0.10.1

I have tried to reduce the UI scale in the debugger settings. This sometimes fixes it for specific instances but another debug session would have some misaligned labels. I've even tried to use my preferred font but that didn't help either.

This is 100% reproducible for me. I'm quite willing to play with the code if there are suggestions where to look.

Hello kei, I encountered the same as you, have you already tried out a set of value that displays correctly? I found my "Variable" panel been "Squeesed" into "Next page"

[daveleroy]

@WZ-Tong Are you using internal_font_scale or ui_scale?

[WZ-Tong]

@WZ-Tong Are you using internal_font_scale or ui_scale?

Yes, but I found it's useless to "un-squeeze" the Variable panel even if I use internal_font_scale=0.75, ui_scale=10 (Cannot be reduced while keeps readability). Under this setting, the UI looks like:

[WZ-Tong]

@WZ-Tong Are you using internal_font_scale or ui_scale?

But the question kei met on this issue, just changing the internal_font_scale to 0.97 may help, but the Variable panel is still squeezed out.

[WZ-Tong]

@WZ-Tong Are you using internal_font_scale or ui_scale?

I think this is caused by rust's backtrace name (it contains the full module path, and it's often quite long).

And I believe the Variable panel is also "just a little bit bigger, so cannot fit in a line", since I can just fix kei's problem by shirinking internal_font_scale just a little bit, and the UI's break point happens to the middle of the panel (Notice the scroll bar in the last comment's last picture: https://github.com/daveleroy/SublimeDebugger/issues/223#issuecomment-2123844205)

[WZ-Tong]

@daveleroy So, could I ask politely that if it's easy to fix because it's really a problem for rust user to use the debugger. I would appreciate it if some small improvements can be applied, but it's hard for me to create a PR myself, since I'm not familiar with related things.

[daveleroy]

I don't think the issue is with rust here many adapters have content that is too large for the space.

Everything rendered in the debugger has to be sized and clipped to fit inside the available space and that isn't happening for some users but its not clear why the calculations aren't working. I believe setting internal_font_scale fixes the issue for most people which changes the size of the text.

You appear to have some other issue where the panel (not the text/images) are too large or at least thats what it appears since the text/images is smaller than the panel when setting internal_font_scale

[WZ-Tong]

Yes, so I think my problem is more similar to the closed one #253. I'm trying to figure out where is the key point

[WZ-Tong]

https://github.com/daveleroy/SublimeDebugger/blob/cb9971093bdb255d943c6d0ae5caff3641130f2f/modules/callstack.py#L63

In my case, I can change this code to fix my problem:

with TabbedViewContainer(width_scale=0.5, width_additional=-32, width_additional_dip=-32):

But I don't know that if there are any side effects.

After applying this, my ui appears like: There are some empty spaces, so I don't know why the original panel is "wrapped" into the second line

Whatever, it's now useable and useful. Thanks for providing this plugin!

[daveleroy]

@WZ-Tong That shouldn't cause any issues is basically making the panels smaller than the window size. The panels are intended to be sized to exactly fit the window and that appears to be calculated wrong. The current calculation is basically the window size - 30 dip since each phantom has some padding around them that appears to be 10 dip (5 on each side)

If you are willing to try something that might get everything to line up correctly you could remove all your changes and try making a change here.

https://github.com/daveleroy/SublimeDebugger/blob/cb9971093bdb255d943c6d0ae5caff3641130f2f/modules/ui/layout.py#L149

into

def from_dip(self, dip: float) -> float:
    return (dip / self.em_width) * self.internal_font_scale // (maybe try adding - 0.001) or something as well

And then using the internal_font_scale setting and see if just setting that causes everything to line up perfectly and not wrap the panel. Including the end of lines here with the end of the panel. That change would only change how the 30 additional dip is calculated so it might not actually work idk.

[WZ-Tong]

Tried, substracting 0.001 is not enough, I made this work by changing it to

def from_dip(self, dip: float) -> float:
    return (dip / self.em_width) * self.internal_font_scale - 1

The constant 0.75 failed to work, changing to this won't work, either:

return ((dip / self.em_width) - 0.01) * self.internal_font_scale

Current scale: 0.97

[daveleroy]

Yeah thats too far off to be the issue with the panel width calculation.

I think the solution here for now is to change the width_additional_dip which adds the 30dip for the space sublime adds between the phantoms to something larger.

If you remove all the changes you made besides your internal_font_scale setting what value for width_additional_dip works here?

https://github.com/daveleroy/SublimeDebugger/blob/cb9971093bdb255d943c6d0ae5caff3641130f2f/modules/callstack.py#L63

If you don't have to fudge width_additional_dip too much I'll make a change and commit it.

Leave width_additional at -30 thats for the size of the breakpoints panel

[WZ-Tong]

Sorry, but seems it's my fault that I forget to remove width_additional=-32 in the prev test. (The variable panel pops up with a little delay, but that time I just closed the session and mark it as "failed")

I get a fresh install using package control remove + install, here are some data (All of these are under internal_font_scale=0.97):

Failed:

width_additional=-30, width_additional_dip=-35
width_additional=-30, width_additional_dip=-40
width_additional=-31, width_additional_dip=-30

Works:

width_additional=-32, width_additional_dip=-30

[WZ-Tong]

After applying width_additional=-32, width_additional_dip=-30, the UI works under internal_font_scale=1 (unmodified) perfectly

[daveleroy]

That unfortunately causes a pretty big gap so I'll add an additional setting to change this because I can't seem to figure out what is why the calculations are not working here.

From your screenshot if you make the window really small does the gap on the very right stay the same size? or decrease in size?

If it stays the same size I will make a fixed internal_width_modifer setting that adds to width_additional.

If it changes size I will make an internal_width_scale setting that scales the width that the ui thinks is available.

[WZ-Tong]

Take internal_font_scale=1, width_additional=-32, width_additional_dip=-30 for example

If the window is smaller than 948*Height pixel, the variable panel is sqeezed out (like issue #253)

But I noticed that if the window is 940~947 pixel wide, and I'm dragging it from smaller (e.g 930 pixel) to bigger, the variable panel pops up, and after maybe re-calc its size, it is squeezed out again. This maybe the threashhold.

By calc the pixel from the right side of the panel, to the edge of sublime text window, I got the following:

It stays in the same size

[daveleroy]

I'll go ahead and add an internal_width_modifer setting.

Thanks for going through all this stuff, grabbing screenshots and testing all the cases its been a big help!

[daveleroy]

The changes are on the main branch. You would put -2 for your internal_width_modifer.

I'm a little confused though because when I use the new setting and make the panel too big it just adds a horizontal scroll bar not sure why yours is even wrapping instead of doing the same.

[WZ-Tong]

Sorry to be late. It works perfectly now!

I don't know why either, but I have to mention that I'm using Sublime Text Dev build 4175, which maybe cause some differences?

BTW, the version is different from package control, maybe you should push to package control again?