Overlay scrollbars: painting, hover/active styling, and thumb dragging#461
Open
UMCEKO wants to merge 1 commit into
Open
Overlay scrollbars: painting, hover/active styling, and thumb dragging#461UMCEKO wants to merge 1 commit into
UMCEKO wants to merge 1 commit into
Conversation
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
blitz previously never painted scrollbars: an overflow: auto/scroll container gave no visual indication that it scrolls or where within the content the viewport sits. Draw an overlay thumb (no reserved gutter, so no layout change) per overflowing axis: always for overflow: scroll, only when the content overflows for overflow: auto, never for hidden/clip (programmatic-only scrolling). Geometry derives from Layout::scroll_width/scroll_height and node.scroll_offset; the thumb is drawn unscrolled, above the clipped content, inside the opacity/filter layer. Like other overlay scrollbar UIs (macOS, Firefox on Linux), thumbs only appear while the scroll container is hovered or scrolled away from the origin. Beyond matching platform conventions this keeps thumbs out of static reftest screenshots: an always-visible variant regressed 10 WPT overflow reftests whose reference pages cannot scroll; the hover/scroll rule regresses none. Pixel-level tests in packages/blitz-html/tests/scrollbars.rs. Not yet implemented: thumb hit-testing/dragging, css-scrollbars-1 styling (scrollbar-width/scrollbar-color), and show/hide fade animations.
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
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.
Stacked on #460 (contains its commit — the test infrastructure dev-dependencies; will rebase once it lands).
blitz previously never painted scrollbars: an
overflow: auto/scrollcontainer gave no visual indication that it scrolls or where within the content the viewport sits. This implements overlay scrollbars end-to-end, in two commits:Painting. An overlay thumb (no reserved gutter, so no layout change) per overflowing axis: always for
overflow: scroll, only when the content overflows foroverflow: auto, never forhidden/clip(programmatic-only scrolling). Geometry derives fromLayout::scroll_width/scroll_heightandnode.scroll_offset; the thumb is drawn unscrolled, above the clipped content, inside the opacity/filter layer. Like other overlay scrollbar UIs (macOS, Firefox on Linux), thumbs only appear while the scroll container is hovered or scrolled away from the origin — beyond matching platform conventions, this keeps thumbs out of static reftest screenshots: an always-visible variant regressed 10 WPT overflow reftests (whose reference pages cannot scroll); the hover/scroll rule regresses none.Interaction. Thumb geometry lives in a shared helper on
Node(scrollbar_thumb/wants_scrollbar/scrollbar_drag_ratio) so painting and hit testing cannot drift. Pointer handling gains aDragMode::ScrollbarDragstate: on pointerdown the layout ancestor chain of the hit node is walked for a scroll container whose thumb contains the pointer (the hit test returns the content under the overlay thumb). While dragging, pointer movement maps thumb px to content px via the track ratio and scrolls through the existing clampedscroll_bypath; scrollbar drags are not dispatched to the page, and the existingDragModehandling suppresses the synthetic click on release. The document tracks which thumb the pointer is over (hovered_scrollbar, repainting on change) and the painter renders three thumb states: normal, hovered, dragged — a dragged thumb stays visible if the pointer leaves the container mid-drag.Tests: pixel-level paint tests in
packages/blitz-html/tests/scrollbars.rs(render viaanyrender_vello_cpu, assert pixels) and synthetic-pointer-event tests inpackages/blitz-html/tests/scrollbar_drag.rsdriving theEventDriver(drags scroll proportionally and clamp; content drags don't scroll; hover/drag restyle the thumb).Not yet implemented (follow-ups): css-scrollbars-1 styling (
scrollbar-color/scrollbar-width— implemented and tested locally, but blocked on enabling those two properties for the servo engine in stylo, where theirengine = "gecko"gate inlonghands.tomlappears to be the only obstacle; will PR stylo), track click-to-page, show/hide fade animations.