Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Panel height needs to not exceed the height of the viewport #184

Closed
adrianbj opened this issue May 20, 2016 · 7 comments
Closed

Panel height needs to not exceed the height of the viewport #184

adrianbj opened this issue May 20, 2016 · 7 comments

Comments

@adrianbj
Copy link
Contributor

@adrianbj adrianbj commented May 20, 2016

This can easily become a problem when you have the console open and a panel has a lot of height. The panel needs to be resized to fit, which then triggers scrolling on tracy-inner.

At the moment it's impossible to see all the content as the panel just overflows off the viewport.

@JanTvrdik

This comment has been minimized.

Copy link
Contributor

@JanTvrdik JanTvrdik commented May 20, 2016

That seems more like a problem with specific panel. Can you post more specific example? Do you have the latest @dev Tracy?

@adrianbj

This comment has been minimized.

Copy link
Contributor Author

@adrianbj adrianbj commented May 20, 2016

I don't think it is panel specific - you can replicate with the System Info panel
screen shot 2016-05-20 at 7 21 42 am

Obviously I have set an extremely small viewport height for this, but for panels with more content this happens easily with the browser dev console set to a normal height.

I have quickly hacked around this by setting the height for certain custom panels and a percentage max-height which triggers the scrolling of tracy-inner. This kinda works, but it really needs a core JS solution so that the height of the panel can fit the content if there is enough viewport height.

I might find some time to work on a proper solution at some point but I haven't had a good look through bar.js yet.

@JanTvrdik

This comment has been minimized.

Copy link
Contributor

@JanTvrdik JanTvrdik commented May 20, 2016

This sort-of fixes the problem, but it is not nice and there are likely edge cases it does not handle.

window.addEventListener('resize', function () {
    forEach(document.querySelectorAll('#tracy-debug .tracy-mode-float'), function (panel) {
        var inner = panel.querySelector('.tracy-inner');
        var padding = panel.offsetHeight - inner.offsetHeight;
        inner.style.maxHeight = Math.min(document.documentElement.clientHeight - padding, 500) + 'px';
    });
});
@adrianbj

This comment has been minimized.

Copy link
Contributor Author

@adrianbj adrianbj commented May 20, 2016

Thanks - a couple of thoughts.

  1. I think a little bit of a margin top and bottom of the panel would be nice.
  2. It also needs to be triggered when the debugger bar is ready, not just resize, because when developing you often have the console open while reloading a page. Currently you need to trigger a window resize to get the panels to fit.
dg added a commit to dg/tracy that referenced this issue May 21, 2016
@dg

This comment has been minimized.

Copy link
Member

@dg dg commented May 21, 2016

Possible solution #188

@adrianbj

This comment has been minimized.

Copy link
Contributor Author

@adrianbj adrianbj commented May 21, 2016

Thanks - this seems to work well. My only suggestion is to prevent the bottom of the panels from being covered by the debug bar.

dg added a commit to dg/tracy that referenced this issue May 21, 2016
dg added a commit to dg/tracy that referenced this issue May 21, 2016
dg added a commit to dg/tracy that referenced this issue May 21, 2016
@dg dg closed this in b2e89a2 May 21, 2016
@adrianbj

This comment has been minimized.

Copy link
Contributor Author

@adrianbj adrianbj commented May 22, 2016

Just a quick follow up on this - maybe not the most appropriate place to post, but didn't think it was worth opening a new issue. The following are some additional rules I am applying that helps solve a few things. It lets panels take up as much height as needed when viewport height allows. It also prevents the horizontal scrollbar unless needed - this means that panels with logs and the like can take up the width of the viewport if needed, but still become scrollable if the viewport is narrow. The #tracy-debug h1 declaration makes the entire width of the panel title draggable. I also have table wrapping which is really nice for log panels.

Anyway, I hope you find some things in here that you think are useful for the core.

                #tracy-debug h1 {
                    max-width: calc(100vw - 40px) !important;
                }

                .tracy-inner {
                    max-height: calc(100vh - 85px) !important;
                    max-width: calc(100vw - 40px) !important;
                    padding-right: 30px !important;
                }

                .tracy-inner p {
                    font-size:15px !important;
                }

                #tracy-debug pre.tracy-dump {
                    padding: .4em 2em .4em .7em;
                }

                .tracy-inner td {
                    word-wrap: break-word;
                }

                .tracy-inner td.tracy-force-break {
                    white-space: pre;           /* CSS 2.0 */
                    white-space: pre-wrap;      /* CSS 2.1 */
                    white-space: pre-line;      /* CSS 3.0 */
                    white-space: -pre-wrap;     /* Opera 4-6 */
                    white-space: -o-pre-wrap;   /* Opera 7 */
                    white-space: -moz-pre-wrap; /* Mozilla */
                    white-space: -hp-pre-wrap;  /* HP Printers */
                    word-wrap: break-word;      /* IE 5+ */
                }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.