feat: Expand selection to parent elements when adding text assertions (#875)

Author: allansson

extension/src/frontend/view/ElementInspector/ElementInspector.hooks.ts

@@ -1,91 +1,12 @@
-import { last } from 'lodash-es'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
-import { ElementSelector } from '@/schemas/recording'
-import { uuid } from '@/utils/uuid'
-import { ElementRole, getElementRoles } from 'extension/src/utils/aria'
-
-import { generateSelectors } from '../../../selectors'
 import { useGlobalClass } from '../GlobalStyles'
 import { useHighlightDebounce } from '../hooks/useHighlightDebounce'
 import { usePreventClick } from '../hooks/usePreventClick'
 import { Bounds, Position } from '../types'
-import { getElementBounds } from '../utils'
-
-function* getAncestors(element: Element) {
-  let current: Element | null = element.parentElement
-
-  while (current !== null) {
-    yield current
-
-    if (current === document.documentElement) {
-      break
-    }
-
-    current = current.parentElement
-  }
-}
-
-function findLabelFor(label: HTMLLabelElement): Element | null {
-  const id = label.getAttribute('for')
-
-  if (id === null) {
-    return null
-  }
-
-  return document.getElementById(id)
-}
 
-function findInChildren(label: HTMLLabelElement): Element | null {
-  return label.querySelector('input, select, textarea')
-}
-
-function findLabelledBy(label: HTMLLabelElement): Element | null {
-  if (label.id === '') {
-    return null
-  }
-
-  return document.querySelector(`[aria-labelledby="${label.id}"]`)
-}
-
-export function findRelatedInput(element: Element): TrackedElement | null {
-  const label = [...getAncestors(element)].find(
-    (ancestor) => ancestor instanceof HTMLLabelElement
-  )
-
-  if (label === undefined) {
-    return null
-  }
-
-  const input =
-    findLabelFor(label) ?? findInChildren(label) ?? findLabelledBy(label)
-
-  if (input === null) {
-    return null
-  }
-
-  return toTrackedElement(input)
-}
-
-export interface TrackedElement {
-  id: string
-  roles: ElementRole[]
-  selector: ElementSelector
-  target: Element
-  bounds: Bounds
-}
-
-function toTrackedElement(element: Element): TrackedElement {
-  const roles = getElementRoles(element)
-
-  return {
-    id: uuid(),
-    roles: [...roles],
-    selector: generateSelectors(element),
-    target: element,
-    bounds: getElementBounds(element),
-  }
-}
+import { usePinnedElement } from './hooks'
+import { toTrackedElement, TrackedElement } from './utils'
 
 function isInsideBounds(
   position: Position,
@@ -118,9 +39,10 @@ export function useInspectedElement() {
    *    the selection and removed when the user contracts the selection. If the
    *    stack is empty, then no element is pinned.
    */
-  const [pinnedEl, setPinnedElement] = useState<TrackedElement[]>([])
   const [hoveredEl, setHoveredEl] = useState<TrackedElement | null>(null)
 
+  const { selected, pinned, pin, unpin, expand, contract } = usePinnedElement()
+
   useGlobalClass('inspecting')
 
   useEffect(() => {
@@ -155,23 +77,23 @@ export function useInspectedElement() {
     }
   }, [])
 
-  const unpin = useCallback(() => {
+  const reset = useCallback(() => {
     setMousePosition({
       top: 0,
       left: 0,
     })
 
-    setPinnedElement([])
-  }, [])
+    unpin()
+  }, [unpin])
 
   usePreventClick({
     callback: (ev) => {
       if (hoveredEl === null) {
         return
       }
 
-      if (pinnedEl.length > 0) {
-        unpin()
+      if (pinned !== null) {
+        reset()
 
         return
       }
@@ -191,53 +113,18 @@ export function useInspectedElement() {
       }
 
       setMousePosition(position)
-      setPinnedElement([hoveredEl])
+      pin(hoveredEl)
     },
-    dependencies: [pinnedEl, hoveredEl, unpin],
+    dependencies: [pinned, hoveredEl, unpin],
   })
 
-  const expand = useMemo(() => {
-    const [head] = pinnedEl
-
-    if (head === undefined) {
-      return undefined
-    }
-
-    const parent = head.target.parentElement
-
-    if (parent === null || parent === document.documentElement) {
-      return undefined
-    }
-
-    return () => {
-      setPinnedElement((pinned) => {
-        return [toTrackedElement(parent), ...pinned]
-      })
-    }
-  }, [pinnedEl])
-
-  const contract = useMemo(() => {
-    const [head, ...tail] = pinnedEl
-
-    // If head is undefined, that means no element is pinned. If tail is
-    // empty, that means we're back at the intial element. In either case
-    // we can't decrease the selection any further.
-    if (head === undefined || tail.length === 0) {
-      return undefined
-    }
-
-    return () => {
-      setPinnedElement(tail)
-    }
-  }, [pinnedEl])
-
   const highlightedEl = useHighlightDebounce(hoveredEl)
 
   return {
-    pinned: last(pinnedEl) ?? null,
-    element: pinnedEl[0] ?? highlightedEl,
+    pinned,
+    element: selected ?? highlightedEl,
     mousePosition,
-    unpin,
+    reset,
     expand,
     contract,
   }

extension/src/frontend/view/ElementInspector/ElementInspector.tsx

@@ -1,10 +1,7 @@
 import { css } from '@emotion/react'
 import { upperFirst } from 'lodash-es'
-import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 
-import { Flex } from '@/components/primitives/Flex'
-import { IconButton } from '@/components/primitives/IconButton'
 import { Tooltip } from '@/components/primitives/Tooltip'
 import { uuid } from '@/utils/uuid'
 import { ElementRole } from 'extension/src/utils/aria'
@@ -20,6 +17,7 @@ import { ElementMenu } from './ElementMenu'
 import { ElementPopover } from './ElementPopover'
 import { AssertionEditor } from './assertions/AssertionEditor'
 import { AssertionData } from './assertions/types'
+import { useElementHighlight } from './hooks'
 
 function getHeader(assertion: AssertionData | null) {
   switch (assertion?.type) {
@@ -50,40 +48,6 @@ function getHeader(assertion: AssertionData | null) {
   }
 }
 
-interface ElementSelectorProps {
-  selector: string
-  onExpand?: () => void
-  onContract?: () => void
-}
-
-function ElementSelector({
-  selector,
-  onExpand,
-  onContract,
-}: ElementSelectorProps) {
-  return (
-    <Flex align="center" gap="1">
-      <Tooltip asChild content="Select parent element">
-        <IconButton disabled={onExpand === undefined} onClick={onExpand}>
-          <ChevronLeftIcon />
-        </IconButton>
-      </Tooltip>
-      <ElementPopover.Heading
-        css={css`
-          flex: 1 1 0;
-        `}
-      >
-        {selector}
-      </ElementPopover.Heading>
-      <Tooltip asChild content="Select child element">
-        <IconButton disabled={onContract === undefined} onClick={onContract}>
-          <ChevronRightIcon />
-        </IconButton>
-      </Tooltip>
-    </Flex>
-  )
-}
-
 function formatRoles(roles: ElementRole[]) {
   if (roles.length === 0) {
     return 'None'
@@ -97,40 +61,23 @@ interface ElementInspectorProps {
 }
 
 export function ElementInspector({ onClose }: ElementInspectorProps) {
-  const { pinned, element, mousePosition, unpin, expand, contract } =
+  const { pinned, element, mousePosition, reset, expand, contract } =
     useInspectedElement()
 
   const [assertion, setAssertion] = useState<AssertionData | null>(null)
 
+  useElementHighlight(element)
+
   useEscape(() => {
     if (pinned) {
-      unpin()
+      reset()
 
       return
     }
 
     onClose()
   }, [pinned, onClose])
 
-  useEffect(() => {
-    client.send({
-      type: 'highlight-elements',
-      selector: element && {
-        type: 'css',
-        selector: element.selector.css,
-      },
-    })
-  }, [element])
-
-  useEffect(() => {
-    return () => {
-      client.send({
-        type: 'highlight-elements',
-        selector: null,
-      })
-    }
-  }, [])
-
   const handleOpenChange = () => {
     setAssertion(null)
   }
@@ -201,8 +148,8 @@ export function ElementInspector({ onClose }: ElementInspectorProps) {
       anchor={<Anchor position={mousePosition} />}
       header={
         getHeader(assertion) ?? (
-          <ElementSelector
-            selector={element.selector.css}
+          <ElementPopover.Selector
+            element={element}
             onContract={contract}
             onExpand={expand}
           />

extension/src/frontend/view/ElementInspector/ElementMenu.tsx

@@ -11,7 +11,6 @@ import { ComponentProps, ReactNode } from 'react'
 import { Toolbar } from '@/components/primitives/Toolbar'
 import { ElementRole } from 'extension/src/utils/aria'
 
-import { TrackedElement } from './ElementInspector.hooks'
 import {
   findAssociatedControl,
   getCheckedState,
@@ -20,6 +19,7 @@ import {
   getTextBoxValue,
 } from './ElementMenu.utils'
 import { AssertionData, CheckAssertionData } from './assertions/types'
+import { TrackedElement } from './utils'
 
 function ToolbarRoot(props: ComponentProps<typeof Toolbar.Root>) {
   return (

extension/src/frontend/view/ElementInspector/ElementMenu.utils.ts

@@ -3,8 +3,8 @@ import { generateSelectors } from 'extension/src/selectors'
 import { ElementRole, getElementRoles } from 'extension/src/utils/aria'
 import { findAssociatedElement } from 'extension/src/utils/dom'
 
-import { TrackedElement } from './ElementInspector.hooks'
 import { CheckAssertionData } from './assertions/types'
+import { TrackedElement } from './utils'
 
 function* getAncestors(element: Element) {
   let currentElement: Element | null = element