fix(ty-chrome): make annotation drags work in mobile/touch responsive mode#607
Open
bborn wants to merge 1 commit into
Open
fix(ty-chrome): make annotation drags work in mobile/touch responsive mode#607bborn wants to merge 1 commit into
bborn wants to merge 1 commit into
Conversation
The annotation overlay drove Select hover, Box drawing, and region move/resize off mouse events (mousedown/mousemove/mouseup/mouseover). Under Chrome DevTools' mobile responsive (touch-emulation) mode those events don't fire — the browser dispatches pointer/touch events instead and steals the gesture for scrolling/zooming — so the annotation UX broke. Switch all drag interactions to Pointer Events, which unify mouse, touch, and pen, and add `touch-action: none` to the draggable surfaces so the browser no longer hijacks the gesture. Pointer capture keeps each drag bound to its surface even when the pointer leaves it. Buttons get `touch-action: manipulation` to drop the double-tap-zoom delay. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
1 participant
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.
Problem
The ty-chrome annotation extension breaks when Chrome is in mobile responsive simulation (DevTools device toolbar with touch emulation). The on-page overlay drove all of its interactions off mouse events:
mouseovermousedown/mousemove/mouseupmousedown+ documentmousemove/mouseupUnder touch emulation Chrome dispatches pointer/touch events, not mouse events, and (without
touch-action) consumes the drag gesture to scroll/zoom the page. So drawing a box, moving/resizing a region, and the hover highlight all stopped working.Fix
pointerdown/pointermove/pointerup/pointerover). Pointer events unify mouse, touch, and pen, and fire correctly in both normal and touch-emulation modes.touch-action: noneto the draggable surfaces (.boxlayer,.region,.marker) so the browser stops hijacking the gesture for scroll/zoom.setPointerCaptureon the box layer and region box so a fast drag stays bound to its surface even when the pointer leaves it.touch-action: manipulationto toolbar/popover buttons to drop the double-tap-zoom tap delay.Tap-to-select and marker taps already worked (Chrome synthesizes
clickfrom a tap); this restores the drag-based interactions, which were the broken part.Files changed
extensions/ty-chrome/content.js— mouse → pointer events +touch-actionon draggable/clickable surfacesextensions/ty-chrome/README.md— note that the drags work under DevTools mobile/responsive modeTesting
The extension is vanilla JS with no automated test harness (only a manual Playwright demo in
demo/). Verifiednode --checkpasses. Manual verification: open a localhost task page, toggle DevTools device toolbar, and confirm Box draw + region move/resize now work.🤖 Generated with Claude Code