Replace WinBox with native Vue scratchbook component#22095
Merged
mvdbeek merged 16 commits intogalaxyproject:devfrom May 1, 2026
Merged
Replace WinBox with native Vue scratchbook component#22095mvdbeek merged 16 commits intogalaxyproject:devfrom
mvdbeek merged 16 commits intogalaxyproject:devfrom
Conversation
github-actions
Bot
added
area/UI-UX
area/testing
area/testing/selenium
area/client
labels
guerler
reviewed
Mar 15, 2026
guerler
reviewed
Mar 15, 2026
dannon
force-pushed
the
scratchbook-styling
branch
from
353263e to
0c5d3db
Compare
dannon
force-pushed
the
scratchbook-styling
branch
2 times, most recently
from
4b326fc to
b81a690
Compare
dannon
force-pushed
the
scratchbook-styling
branch
from
b81a690 to
619cb26
Compare
Replaces the plain JS WindowManager class with a reactive Pinia store that tracks window state, handles persistence to localStorage (ported from the persistent-scratchbook branch), and provides the same public interface (active, add, toggle, beforeUnload) so Galaxy.frame compat is straightforward.
Draggable, resizable floating window rendered with position:fixed and scoped styles matching the GModal aesthetic (rounded corners, white header, soft layered shadow, clean typography). Drag is delta-based via mousedown/mousemove on the header; resize via a bottom-right handle. Focus management uses an iframe overlay that passes through pointer events on the focused window.
App.vue now uses useWindowManagerStore and renders ScratchbookWindow components directly instead of delegating to the WinBox-based WindowManager class. Galaxy.frame still points to the store for backward compat with router-push, ContentItem, and ChatGXY. Masthead test updated to use a plain windowTab object instead of importing the old WindowManager.
Drop the winbox npm package, delete window-manager.js and windows.scss, remove the SCSS import from base.scss. Update navigation YAML selectors and Selenium test helpers to use the new .scratchbook-window class names. The core.windows.yaml tour still references #winbox-1 which will need a follow-up update.
Scratchbook iframes load Galaxy with hide_masthead=true. Without this guard, the inner App.vue would call restore(), read the parent's saved windows from localStorage, and create windows inside itself recursively. Gate both the store setup and window rendering on showMasthead.
Minimized windows collapse to just their title bar and stack horizontally along the bottom edge, matching WinBox's minimize behavior. Clicking a minimized window's header restores it.
Prevents windows from being dragged off-screen or resized beyond the viewport edges, matching WinBox's default boundary behavior.
The old #winbox-1 ID no longer exists now that WinBox has been replaced with a native Vue component.
…ddSearchParams, guard focus()
Nothing in the tree uses it; it was added during the rename out of an abundance of caution but there are no callers.
Drop the stray blank line where 'winbox' lived, and let prettier sort the imports while we're here.
The earlier rename commit replaced 'WinBox' with 'scratchbook' in the selenium helper docstrings and the frame() context manager, which just swapped one inconsistent name for another. Converge on 'window manager' for everything I'm touching here.
ahmedhamidawan
force-pushed
the
scratchbook-styling
branch
from
ec116b5 to
5f037de
Compare
ahmedhamidawan
approved these changes
May 1, 2026
Member
ahmedhamidawan
left a comment
ahmedhamidawan
left a comment
There was a problem hiding this comment.
Ran locally, works well and looks very sleek! Thank you @dannon !
(I believe failing tests are unrelated but reran one just to make sure...)
github-project-automation
Bot
moved this from Needs Review
to Done
in Galaxy Dev - weeklies
github-project-automation
Bot
moved this from In Progress
to Done
in GCC Live Planning Board
guerler
added
the
release-testing-26.1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the third-party WinBox dependency with a native Vue
WindowManagerWindowcomponent backed by a Pinia store. Styling follows Galaxy's GModal aesthetic -- rounded corners, white header, layered shadow, clean typography -- and the window manager supports minimize with taskbar-style stacking at the bottom of the viewport, clamps drag/resize to viewport bounds, and persists open windows across page reloads via localStorage.Builds on #22088 (merged), which landed the persistence plumbing. Also adds a Vitest smoke suite covering the new
windowManagerStore: add/remove, focus z-index, position/size updates, minimize/maximize,beforeUnload, and the localStorage round-trip.