Add resize handle to panels

[adrianbj]

• bug report? no
• feature request? yes

Description

I think it would be great to make panels resizable. Unfortunately because the panels are typically positioned based on their bottom/right corner, it's not really possible to make use of css resize property, so a custom solution would be needed that adds a handle to the top left of the panel.

This would be really useful for panels with overflowing content.

[adrianbj]

@dg - this is looking awesome - thanks very much!

I do have a few issues/tweaks though:

1. I think the max-width & max-height values for tracy-inner need to be removed, because otherwise if you drag the size of the panel larger than these, in the tracy-inner div doesn't fill the panel container.

2. The overflow scrollbars seem to be attached to the tracy-panel wrapper. I think they should be on tracy-inner so that the panel header doesn't scroll with the content - I think the header should always be visible. This is something I have done with my local modifications, but I think it belongs in the core. eg:

3. It's possible for the top of a panel to end up above the top of the viewport such that it's impossible to access the panel header to drag it back down. This can happen with the panel is large and you open the browser dev tools, forcing it up above.

Please let me know if you have any problem reproducing any of these, or have questions as to what I mean.

Thanks again!

[dg]

IMHO it should be fixed

[adrianbj]

IMHO it should be fixed

Yeah, it look great here too!

Thanks again for this - it's a really nice enhancement :)

[adrianbj]

@dg - Sorry I just discovered what I think should be considered a bug. I think that it stems from changing the coords system from right-bottom to left-top. The problem is that now when you toggle open a section in a panel and the panel expands its size, much of the panel ends up offscreen to the right and bottom. I think there needs to be a listener (ResizeObserver perhaps) to check if a panel increases in size when a section is toggled open and if so, move its position up and left enough for everything to fit in the viewport.

Does that sound reasonable?

[adrianbj]

Here's a screencap if it helps to explain:

[dg]

Fixed

[rostenkowski]

@dg can you please release this?

[dg]

Within a few weeks

[adrianbj]

Thanks @dg for the toggle position fix (it mostly works - I just need to tweak my custom css I think).

A new issue I am seeing is that each time a reload a page, the debug bar moves left. This is with all my custom css disabled:

[dg]

@adrianbj This does not happen to me. Can you try to find out what is causing it?

[adrianbj]

This does not happen to me. Can you try to find out what is causing it?

Sorry, it was due to my replacement of the standard close icon with a custom hide/show icon. It worked as is before, but since the recent changes I now need to add:

window.Tracy.Debug.bar.restorePosition();

after I removeChild on the close icon and appendChild with the hide/show icon.

Anyway, all sorted now.