PR# 19908 Window resizing can hide UI elements

Problem Report Summary
Submitter: thomas_goering
Category: EiffelVision
Priority: Low
Date: 2024/03/26
Class: Bug
Severity: Non-critical
Number: 19908
Release: 23.09
Confidential: No
Status: Analyzed
Responsible:
Environment: Windows, Linux
Synopsis: Window resizing can hide UI elements

Description
When using EiffelStudio I noticed that some UI elements were suddenly hidden when I changed the window size (mostly I switch from the original size to maximized). I was able to strip the steps to reproduce down and away from EiffelStudio. The issue seems to be the resizing algorithm in the docking library (maybe Vision2 is involved as well).

I noticed that the problem occurs when the window has toolbar(s) that are nearly as wide (many buttons etc.) as the main window. When the window width gets smaller than the toolbar's width to display every button, the toolbar hides some buttons and displays a small icon that can be used to reach the hidden toolbar buttons. This is ok.
But the other window UI elements (in EiffelStudio the right-most tools are affected) are still resized to a width that seems to be calculated from the width of the toolbar with all its buttons and not the shortened toolbar width. Therefore the right-most part of these UI elements is hidden behind the right window border.

In EiffelStudio I use the default window size (fresh installation) and reset the tools layout. Then a simple window maximize and restore to original size already hides the three right-most icons in the right active tool (e.g. in the Groups tool the Auto-Hide, Maximize and Close buttons in the mini toolbar are hidden). I also can see that the split area for the Groups tools has moved a bit to the right (it is displayed with a smaller width).

But in the steps to reproduce I describe a more simple way without EiffelStudio.

I debugged the docking library and dived (among others) into feature on_resize of class SD_DOCKING_MANAGER_AGENTS. To me it seems that only in the last five lines of this feature the toolbar is shortened (with the small icon) and before the larger width is used to layout all the other UI elements. But this is a complex process and I don't understand it completely.

I know that this is low priority but to me such user interface issues are annoying... ;-)
To Reproduce
I can reproduce the issue with EiffelStudio 23.09 on Windows and Ubuntu Linux.

To reproduce open the following project file from the EiffelStudio examples folder: docking/simple/docking_simple.ecf

Follow these steps:

1. Compile and run the application from within EiffelStudio. It should look like in the attached screenshots windows_1.png and linux_1.png. Note, that on Linux the three buttons in the panes' mini toolbars are all visible, whereas on Windows the close button is not completely visible. Also worth noting is that in the screenshots the toolbars are already shortened and the little icon is visible for reaching the hidden toolbar buttons.

2. Then please maximize the window using the maximize button on the right in the window titlebar. Everything looks good in maximized state.

3. Then please restore the window size again to its original size using the same button in the window titlebar. The window now has the original size and looks different on Linux (see linux_2.png). The window on Windows looks the same as in window_1.png.

4. Now, when you put the mouse cursor on the right border of the window you can resize the window width. Do this for a few pixels to the right. The window gets wider a little bit and now the issue is gone, everything is visible now. Screenshot windows_2.png shows you my result (please ignore the different window position in the screenshot, I restarted the application between taking the screenshots, but this is irrelevant for the issue itself).

You could do the resizing without the step for maximizing the window, this was only to show you that also that step changes the layout.

The same can the reproduced with EiffelStudio. You can even see the issue in the windows screenshots in EiffelStudio in the Call Stack tool on the right.

You could remove buttons from the toolbar so it gets less wide. With that the issue cannot be reproduced anymore which shows me that the root cause is: Different widths of the toolbar (with and without the small icon to reach hidden buttons) are taken into account for layouting other UI elements in the window.
Problem Report Interactions
From:thomas_goering    Date:2024/03/27    Status: Analyzed    Download   
If you mean the buttons in the upper window's toolbar, then yes. Although I think I also saw some of the right buttons in EiffelStudio's project toolbar (the ones to the right of Run) hidden and there was no small icon to reach them. But I cannot reproduce this anymore...

If you mean the buttons in the mini toolbars of the panes in my example, then usually yes:

1. If I resize the window larger in its width I haven't seen a case in which I have the visual issue. So for this case I can confirm.

2. But if I resize the window smaller it depends. I can explain:

If you start the simple docking application (I mentioned in my steps to reproduce) on Windows you see that the toolbar button "Button 4" is not visible. The toolbar is "shortened" and you can reach "Button 4" with the small icon. You also see that the close buttons are not completely visible for the two panes. It looks like in screenshot windows_1.png.

If you now resize the window large in its width by dragging the right border to the right, 
....
Output truncated, Click download to get the full message

From:jfiat_es    Date:2024/03/27    Status: Analyzed    Download   
Dear Thomas,

Do you confirm that when you have this visual issue, if you resize the windows either smaller or bigger (even by a few pixels), the buttons are back ?

From:thomas_goering    Date:2024/03/26    Download   
Attachments for problem report #19908

Attachment: windows_2.png     Size:470909
Attachment: linux_2.png     Size:396789
Attachment: linux_1.png     Size:412753
Attachment: windows_1.png     Size:584436