Repository navigation
feat(browser): notes follow their element: reveal on open, clip to scrolling boxes, hover tween - #957
Merged
Merged
Conversation
Opening a note from the tray or its pin asks browser.Locate to scroll its element into view first (Reveal), instant and centered, so the popover opens beside it. Boxes from browser.Locate and browser.ElementAt are cut to every ancestor that clips its overflow, up to a fixed one: a row a scrolling list hides answers an empty box instead of a pin over its neighbour.
While picking, the hover outline slides from the element it left to the one under the pointer in 160 ms, ease-in-out, starting from where it stands when the pointer moves mid-slide. The maintainer chose it from a mockup over the jump, a 100 ms slide and a cross-fade.
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.
Three follow-ups to the notes on the page (#952).
1. A note opened from the tray or its pin scrolls its element into view
browser.Locatetakes an optionalRevealselector (one options struct, contract golden updated). The page scrolls that element into view first, unless it already shows whole (inside the viewport and not cut by a scrolling box): centered, or block start when it is taller than the viewport;inline: 'nearest'so a wide page does not jump sideways. The scroll isbehavior: 'instant', so the boxes the same call answers are where the element stops and the popover follows them through the existing relocate. On the window side, the tray row and the pin both go throughopenListed, which asks the next lookup to reveal and runs it right away; a reveal is queued unmerged so the plain lookups behind it cannot drop it.2. Pins and outlines are cut to the scrolling boxes they sit in
visibleScript, shared bylocateScriptandelementScript, intersects the element's box with the client box of every ancestor whose overflow is notvisible, stopping at aposition: fixedancestor and at body/html. Fully hidden answers the empty box, which the pane already does not draw.Partially visible: clip, not empty. The part that shows is what the person sees and points at, so the ring and pin stay on it; returning empty would make a note vanish while half its element is still on screen, and keeping the full box is the bug this fixes (ring drawn over the neighbour).
hiddenandclipcount as well asauto/scroll: they cut what the page draws the same way.Known limits, written in
docs/ceilings.md: an absolutely positioned element that escapes a non-positioned clipping ancestor is cut anyway, and an element a sibling covers keeps its pin.3. The pick's outline slides between elements
While picking, the hover outline slides from the element it left to the one under the pointer in 160 ms, easeInOutQuad (
noteHoverGlide). A move mid-slide starts the next one from where the outline stands; the probe answering the same element again does not restart it. The window redraws every frame only during the slide, since the dashes' march is paced at 20 frames a second. Chosen from a mockup over today's jump, a 100 ms slide and a 120 ms cross-fade.Test plan
internal/browser/notes_live_test.go, failing before the change: a row scrolled out of an overflow list answered{Y:160 H:40}(now empty), a half-visible row answered its full 40px (now the 20px that show),ElementAtboxes only the visible part, andRevealbrings a row into its list and a far button to the middle of the viewport, leaving it in place when already whole.native/gofmt, vet and tests green.