Skip to content

Fix scratchbook window z-index stacking and improve styling#21738

Merged
guerler merged 3 commits intogalaxyproject:devfrom
dannon:scratchbook-tweaks
Feb 4, 2026
Merged

Fix scratchbook window z-index stacking and improve styling#21738
guerler merged 3 commits intogalaxyproject:devfrom
dannon:scratchbook-tweaks

Conversation

@dannon
Copy link
Copy Markdown
Member

@dannon dannon commented Feb 4, 2026

Fix scratchbook window z-index stacking, iframe click-to-front, and improve styling.

  • Stop passing index to every WinBox.new() call — WinBox's constructor calls focus() which auto-increments z-index, but then the index parameter overwrites it. Pass it only on the first window to set a z-index floor above Galaxy UI.
  • Add a transparent click overlay on unfocused windows so clicking iframe content brings the window to front. WinBox's mousedown-based focus can't detect clicks inside iframes. The overlay uses pointer-events:none on the focused window so the iframe works normally.
  • Style windows to match Galaxy UI — brand-primary title bar, Bootstrap modal shadow, Galaxy font family, proper body background. Shadow and border removed when maximized.

Addresses feedback from @nekrut

How to test the changes?

(Select all options that apply)

  • I've included appropriate automated tests.
  • This is a refactoring of components with existing test coverage.
  • Instructions for manual testing are as follows:
    1. Enable Window Manager (grid icon in masthead)
    2. Open multiple dataset visualizations — each new window should appear on top
    3. Click inside a background window's content — it should come to front
    4. Verify styling: shadow, Galaxy font, dark blue title bar
    5. Maximize a window — shadow/border should disappear

License

  • I agree to license these and all my past contributions to the core galaxy codebase under the MIT license.

Focus new WinBox windows on creation so they appear on top of existing
windows instead of behind them. Update window styling to match Galaxy's
UI -- use brand-primary for the title bar, add a box shadow for depth,
apply the Galaxy font family (with higher specificity on .wb-title to
override WinBox defaults), and set proper body background. Shadow and
border are removed when maximized.
@dannon dannon marked this pull request as ready for review February 4, 2026 03:18
@github-actions github-actions Bot added this to the 26.1 milestone Feb 4, 2026
@guerler
Copy link
Copy Markdown
Contributor

guerler commented Feb 4, 2026

Some of the newly opened windows remain behind already existing ones, and the last one does not come to the front even when clicked on. The workaround right now is to select another window first and then reselect the last window.

screencast

WinBox's constructor calls focus() (which auto-increments z-index) and
then the index parameter overwrites it back to the passed value. Passing
index:850 to every window meant they all ended up at z-index 850
regardless of creation order. Now we only pass index on the first window
to establish the z-index floor above Galaxy UI, and let WinBox
auto-manage from there.
WinBox's click-to-focus relies on mousedown events, which don't
propagate out of iframes. Since scratchbook windows load content in
iframes, clicking inside a window's content area couldn't bring it to
front. Add a transparent overlay on each window that captures clicks
when the window is unfocused, then use CSS pointer-events:none on the
focused window's overlay so the iframe works normally.
@dannon
Copy link
Copy Markdown
Member Author

dannon commented Feb 4, 2026

Thanks for the screencast! There were actually two separate issues here:

  1. Z-index stacking — WinBox's constructor calls focus() (which auto-increments z-index) and then the index parameter immediately overwrites it back to the passed value. Since we were passing index: 850 to every window, they all ended up at the same z-index. Fixed by only passing index on the first window to establish a floor, then letting WinBox auto-manage from there.

  2. Click-to-front not working through iframes — This is a pre-existing issue, not introduced by this PR. WinBox's focus management relies on mousedown events, which don't propagate out of iframes. But since we're in here anyway, added a fix: a transparent overlay on unfocused windows captures clicks and brings the window to front, then gets out of the way (via pointer-events: none) so the iframe content works normally.

Copy link
Copy Markdown
Contributor

@guerler guerler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works very well! Thank you.

@guerler guerler merged commit 169331b into galaxyproject:dev Feb 4, 2026
31 of 34 checks passed
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Feb 4, 2026

This PR was merged without a "kind/" label, please correct.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants