zIndex behavior improvements

[adrianbj]

• bug report? yes
• feature request? yes
• version: 2.4.10

Description

Sometimes it can be quite annoying trying to get the panel you are interested in to appear on top of others. This is particularly problematic when some panels are already in FLOAT mode when the page is loaded.

Here are a couple of screencasts:

This first one shows the problem when trying to hover to show the User panel when those other two are in FLOAT mode. Often the zIndex of the hovered panel is not increased appropriately.

This is a different problem which is more difficult to solve - what you do when clicking an icon on the bar to open a panel in FLOAT mode when the panel is positioned such that you need to move across another panel to get the mouse cursor to it. The one you pass over gains the focus. Could we possibly delay the mousemove checks for a second or two after clicking a panel icon. This is especially important with panels with overflow content so you actually need to access them to scroll to see content.

I have played around a little with the Panel.prototype.focus function and have made some improvements, but I am wondering if you have any definitive ideas on how this might be improved.

[dg]

What about focusing floating panels when user clicks instead of moves mouse over?

[adrianbj]

What about focusing floating panels when user clicks instead of moves mouse over?

Yeah, that might take care of things, but I'd need to experience it to see if there were any usability downsides - certainly worth a try though I think because the current behavior can definitely be a little frustrating at times :)

OT, but the other that would be nice is a way to change the base zIndex from the default 20000. I currently override this with JS because it is higher than the dropdown navigation in ProcessWire which means you can't get to the menu if you have a large panel open, but it would be nice to have a $baseZindex option.

[dg]

We can test how the new behavior will suit 0548858.

ad baseZindex: IMHO it can be overwriten Tracy.DebugPanel.zIndex = 12345.

[adrianbj]

Thanks for the change in focus - I'll take a look soon.

ad baseZindex: IMHO it can be overwriten Tracy.DebugPanel.zIndex = 12345.

This is what I currently do, but it's a bit messy because you need to loop through all panels so they are not all the same. You also have to deal with the zIndex of the bluescreen. You can see what I am doing here: https://github.com/adrianbj/TracyDebugger/blob/42f7e23297ac905efc2be64a539ecd00fc8d3be2/TracyDebugger.module#L875-L898

I just thought a proper base settings would make things a lot cleaner, but if you don't think it's a good idea, I can live with my hacks.

[adrianbj]

Ok, I've been playing around with this and it works great, but the catch is that it messes with my ability to override the base zIndex using the code I linked to above. If you have multiple panels open and reload the page and try to click on a panel that is behind another panel, it won't be promoted to the top. Any chance you'd reconsider a baseIndex setting? I guess the main issue would be setting the value in the two bar.css and bluescreen.css files - these would have to be moved

[dg]

I have added Tracy.panelZIndex, you can set it before Tracy is loaded.

[adrianbj]

I have added Tracy.panelZIndex, you can set it before Tracy is loaded.

Thanks, that should be great, but I think the 20000 in bluescreen.css will also need attention, otherwise the panels will be covered by the bluescreen. I could probably override that the way I am currently, but it would be nicer to be able to set it before loading, rather than overwriting - would you be OK with adding that option too please?

[dg]

I do not think how to overwrite it more simply than using CSS.

[adrianbj]

I do not think how to overwrite it more simply than using CSS.

I thought if you defined a Tracy.bsZIndex and applied it in bluescreen.js (like you've done with bar.js), rather than defining it in bluescreen.css.

The problem with overwriting via CSS is that I can't really make it configurable at my end. I give users the ability to set their own zIndex which means they can adjust for the frontend of their site if needed.