fix: listen for mousemove events (previously was not listening)

Fixes an issue where the TOOLTIP_DISPLAY_DELAY behavior (not showing the tooltip until the mouse had stopped moving for 100msec) was ineffective because no mousemove events were being received. This was because there was no mousemove event listener.

Test plan:

1. Before applying this fix, move your mouse quickly over a token without stopping for 100msec. (You can increase the TOOLTIP_DISPLAY_DELAY constant to make this easier.) Notice that the tooltip appears despite your mouse not ever being stopped for any period of 100msec.
2. Apply this fix. Now try the same. Notice that the tooltip does not appear until your mouse stops moving for 100msec.

Author: sqs

src/hoverifier.test.ts

@@ -10,11 +10,12 @@ import {
     AdjustmentDirection,
     createHoverifier,
     LOADER_DELAY,
+    MOUSEOVER_DELAY,
     PositionAdjuster,
     TOOLTIP_DISPLAY_DELAY,
 } from './hoverifier'
 import { HoverOverlayProps } from './HoverOverlay'
-import { findPositionsFromEvents } from './positions'
+import { findPositionsFromEvents, SupportedMouseEvent } from './positions'
 import { CodeViewProps, DOM } from './testutils/dom'
 import { createHoverMerged, createStubHoverFetcher, createStubJumpURLFetcher } from './testutils/lsp'
 import { dispatchMouseEventAtPositionImpure } from './testutils/mouse'
@@ -112,6 +113,147 @@ describe('Hoverifier', () => {
         }
     })
 
+    it('debounces mousemove events before showing overlay', () => {
+        for (const codeView of testcases) {
+            const scheduler = new TestScheduler((a, b) => chai.assert.deepEqual(a, b))
+
+            const hover = {}
+            const defURL = 'def url'
+
+            scheduler.run(({ cold, expectObservable }) => {
+                const hoverifier = createHoverifier({
+                    closeButtonClicks: new Observable<MouseEvent>(),
+                    goToDefinitionClicks: new Observable<MouseEvent>(),
+                    hoverOverlayElements: of(null),
+                    hoverOverlayRerenders: EMPTY,
+                    fetchHover: createStubHoverFetcher(hover),
+                    fetchJumpURL: createStubJumpURLFetcher(defURL),
+                    pushHistory: noop,
+                    getReferencesURL: () => null,
+                })
+
+                const positionJumps = new Subject<{
+                    position: Position
+                    codeView: HTMLElement
+                    scrollElement: HTMLElement
+                }>()
+
+                const positionEvents = of(codeView.codeView).pipe(findPositionsFromEvents(codeView))
+
+                const subscriptions = new Subscription()
+
+                subscriptions.add(hoverifier)
+                subscriptions.add(
+                    hoverifier.hoverify({
+                        dom: codeView,
+                        positionEvents,
+                        positionJumps,
+                        resolveContext: () => codeView.revSpec,
+                    })
+                )
+
+                const hoverAndDefinitionUpdates = hoverifier.hoverStateUpdates.pipe(
+                    filter(propertyIsDefined('hoverOverlayProps')),
+                    map(({ hoverOverlayProps }) => !!hoverOverlayProps),
+                    distinctUntilChanged(isEqual)
+                )
+
+                const mousemoveDelay = 25
+                const outputDiagram = `${TOOLTIP_DISPLAY_DELAY + mousemoveDelay}ms a`
+
+                const outputValues: { [key: string]: boolean } = {
+                    a: true,
+                }
+
+                // Mousemove on https://sourcegraph.sgdev.org/github.com/gorilla/mux@cb4698366aa625048f3b815af6a0dea8aef9280a/-/blob/mux.go#L24:6
+                cold(`a b ${mousemoveDelay - 2}ms c ${TOOLTIP_DISPLAY_DELAY - 1}ms`, {
+                    a: 'mouseover',
+                    b: 'mousemove',
+                    c: 'mousemove',
+                } as Record<string, SupportedMouseEvent>).subscribe(eventType =>
+                    dispatchMouseEventAtPositionImpure(eventType, codeView, {
+                        line: 24,
+                        character: 6,
+                    })
+                )
+
+                expectObservable(hoverAndDefinitionUpdates).toBe(outputDiagram, outputValues)
+            })
+        }
+    })
+
+    it('dedupes mouseover and mousemove event on same token', () => {
+        for (const codeView of testcases) {
+            const scheduler = new TestScheduler((a, b) => chai.assert.deepEqual(a, b))
+
+            const hover = {}
+            const defURL = 'def url'
+
+            scheduler.run(({ cold, expectObservable }) => {
+                const hoverifier = createHoverifier({
+                    closeButtonClicks: new Observable<MouseEvent>(),
+                    goToDefinitionClicks: new Observable<MouseEvent>(),
+                    hoverOverlayElements: of(null),
+                    hoverOverlayRerenders: EMPTY,
+                    fetchHover: createStubHoverFetcher(hover),
+                    fetchJumpURL: createStubJumpURLFetcher(defURL),
+                    pushHistory: noop,
+                    getReferencesURL: () => null,
+                })
+
+                const positionJumps = new Subject<{
+                    position: Position
+                    codeView: HTMLElement
+                    scrollElement: HTMLElement
+                }>()
+
+                const positionEvents = of(codeView.codeView).pipe(findPositionsFromEvents(codeView))
+
+                const subscriptions = new Subscription()
+
+                subscriptions.add(hoverifier)
+                subscriptions.add(
+                    hoverifier.hoverify({
+                        dom: codeView,
+                        positionEvents,
+                        positionJumps,
+                        resolveContext: () => codeView.revSpec,
+                    })
+                )
+
+                const hoverAndDefinitionUpdates = hoverifier.hoverStateUpdates.pipe(
+                    filter(propertyIsDefined('hoverOverlayProps')),
+                    map(({ hoverOverlayProps }) => !!hoverOverlayProps),
+                    distinctUntilChanged(isEqual)
+                )
+
+                // Add 2 for 1 tick each for "c" and "d" below.
+                const outputDiagram = `${TOOLTIP_DISPLAY_DELAY + MOUSEOVER_DELAY + 2}ms a`
+
+                const outputValues: { [key: string]: boolean } = {
+                    a: true,
+                }
+
+                // Mouse on https://sourcegraph.sgdev.org/github.com/gorilla/mux@cb4698366aa625048f3b815af6a0dea8aef9280a/-/blob/mux.go#L24:6
+                cold(`a b ${MOUSEOVER_DELAY - 2}ms c d e`, {
+                    a: 'mouseover',
+                    b: 'mousemove',
+                    // Now perform repeated mousemove/mouseover events on the same token.
+                    c: 'mousemove',
+                    d: 'mouseover',
+                    e: 'mousemove',
+                } as Record<string, SupportedMouseEvent>).subscribe(eventType =>
+                    dispatchMouseEventAtPositionImpure(eventType, codeView, {
+                        line: 24,
+                        character: 6,
+                    })
+                )
+
+                expectObservable(hoverAndDefinitionUpdates).toBe(outputDiagram, outputValues)
+            })
+        }
+    })
+
     /**
      * This test ensures that the adjustPosition options is being called in the ways we expect. This test is actually not the best way to ensure the feature
      * works as expected. This is a good example of a bad side effect of how the main `hoverifier.ts` file is too tightly integrated with itself. Ideally, I'd be able to assert

src/hoverifier.ts

@@ -266,6 +266,9 @@ export const LOADER_DELAY = 1200
 /** The time in ms after the mouse has stopped moving in which to show the tooltip */
 export const TOOLTIP_DISPLAY_DELAY = 100
 
+/** The time in ms to debounce mouseover events. */
+export const MOUSEOVER_DELAY = 50
+
 /**
  * @template C Extra context for the hovered token.
  */
@@ -360,7 +363,7 @@ export function createHoverifier<C extends object>({
             target: event.target as HTMLElement,
             ...rest,
         })),
-        debounceTime(50),
+        debounceTime(MOUSEOVER_DELAY),
         // Do not consider mouseovers while overlay is pinned
         filter(() => !container.values.hoverOverlayIsFixed),
         switchMap(

src/positions.ts

@@ -31,8 +31,10 @@ export const findPositionsFromEvents = (options: DOMFunctions) => (
 ): Observable<PositionEvent> =>
     merge(
         from(elements).pipe(
-            switchMap(element => fromEvent<MouseEvent>(element, 'mouseover')),
-            map(event => ({ event, eventType: 'mouseover' as 'mouseover' })),
+            switchMap(element =>
+                merge(fromEvent<MouseEvent>(element, 'mouseover'), fromEvent<MouseEvent>(element, 'mousemove'))
+            ),
+            map(event => ({ event, eventType: event.type as 'mouseover' | 'mousemove' })),
             filter(({ event }) => event.currentTarget !== null),
             map(({ event, ...rest }) => ({
                 event,