feat(browser): Setting to limit click events to buttons and links (#1176)

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Johan Suleiko Allansson <allansson@users.noreply.github.com>

Author: allansson

extension/src/cdp/index.ts

@@ -12,5 +12,5 @@ if (!isInFrame()) {
 
   trackTabFocus(client)
   initializeView(client, storage)
-  startRecording(client)
+  startRecording(client, storage)
 }

extension/src/cdp/storage.ts

@@ -29,7 +29,7 @@ export function configureStorage(
   })
 
   return {
-    get initial() {
+    getCurrent() {
       return settings
     },
     load() {

extension/src/frontend/manager.ts

@@ -27,7 +27,14 @@ export class WindowEventManager {
    * avoid recording follow-up events that are triggered as a side-effect of the
    * original event.
    */
-  block<T extends keyof WindowEventMap>(type: T, target: EventTarget): this {
+  block<T extends keyof WindowEventMap>(
+    type: T,
+    target: EventTarget | null
+  ): this {
+    if (target === null) {
+      return this
+    }
+
     let blockedForType = this.#blockedEvents[type]
 
     if (blockedForType === undefined) {
@@ -106,3 +113,5 @@ export class WindowEventManager {
     return blockedForType.delete(ev.target)
   }
 }
+
+export const eventManager = new WindowEventManager()

extension/src/frontend/recording.ts

@@ -13,10 +13,31 @@ import {
   isNonButtonInput,
 } from '../utils/dom'
 
-import { WindowEventManager } from './manager'
+import { eventManager } from './manager'
 import { getTabId } from './utils'
+import { SettingsStorage } from './view/SettingsProvider'
+
+export function startRecording(
+  client: BrowserExtensionClient,
+  settings: SettingsStorage
+) {
+  function findClickTarget(element: Element): Element | null {
+    switch (settings.getCurrent().clickRecordingMode) {
+      case 'interactive-only':
+        return findInteractiveElement(element)
+
+      case 'any':
+        // From the user's point of view, they clicked a button and not a `<span />` inside a
+        // button. So whenever we record a click we try to find the underlying interactive
+        // element. Only if there's no such element do we record a click on the actual
+        // target.
+        return findInteractiveElement(element) ?? element
+
+      default:
+        return null
+    }
+  }
 
-export function startRecording(client: BrowserExtensionClient) {
   function getButton(button: number) {
     switch (button) {
       case 0:
@@ -40,31 +61,19 @@ export function startRecording(client: BrowserExtensionClient) {
     })
   }
 
-  const manager = new WindowEventManager()
+  const manager = eventManager
 
   manager.capture('click', (ev, manager) => {
     if (ev.target instanceof Element === false) {
       return
     }
 
-    // From the user's point of view, they clicked a button and not a `<span />` inside a
-    // button. So whenever we record a click we try to find the underlying interactive
-    // element. Only if there's no such element do we record a click on the actual
-    // target.
-    //
-    // In the future, we might want to have this behavior configurable:
-    //
-    // - Ignore any click on non-interactive elements
-    // - Record click on the interactive element with fallback (current behavior).
-    // - Record all clicks exactly as they happened.
-    //
-    // The first option would be especially useful since it can reduce noise
-    // in the recordings.
-    const clickTarget = findInteractiveElement(ev.target) ?? ev.target
+    const clickTarget = findClickTarget(ev.target)
 
     // We don't want to capture clicks on form elements since they will be
     // interacted with using e.g. the `selectOption` or `type` functions.
     if (
+      clickTarget === null ||
       isNonButtonInput(clickTarget) ||
       clickTarget instanceof HTMLTextAreaElement ||
       clickTarget instanceof HTMLSelectElement ||

extension/src/frontend/view/EventDrawer.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react'
+import { css, keyframes } from '@emotion/react'
 import * as Dialog from '@radix-ui/react-dialog'
 import { XIcon } from 'lucide-react'
 
@@ -8,23 +8,39 @@ import { BrowserEvent } from '@/schemas/recording'
 import { NodeSelector } from '@/schemas/selectors'
 import { RecordingContext } from '@/views/Recorder/RecordingContext'
 
+import { RecorderSettings } from './RecorderSettings'
+import { useInBrowserSettings } from './SettingsProvider'
 import { useStudioClient } from './StudioClientProvider'
+import { ToolBoxLogo } from './ToolBox/ToolBoxLogo'
+
+const slideIn = keyframes`
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+`
+
+const slideOut = keyframes`
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+`
 
 interface EventDrawerProps {
   open: boolean
-  editing: boolean
   events: BrowserEvent[]
   onOpenChange: (open: boolean) => void
 }
 
-export function EventDrawer({
-  open,
-  editing,
-  events,
-  onOpenChange,
-}: EventDrawerProps) {
+export function EventDrawer({ open, events, onOpenChange }: EventDrawerProps) {
   const client = useStudioClient()
   const container = useContainerElement()
+  const [settings, setSettings] = useInBrowserSettings()
 
   const handleHighlight = (selector: NodeSelector | null) => {
     client.send({
@@ -42,11 +58,32 @@ export function EventDrawer({
 
   return (
     <RecordingContext recording>
-      <Dialog.Root modal={false} open={open} onOpenChange={onOpenChange}>
-        <Dialog.Portal container={container} forceMount>
-          <Dialog.Overlay />
+      <Dialog.Root modal={true} open={open} onOpenChange={onOpenChange}>
+        <Dialog.Portal container={container}>
+          <Dialog.Overlay
+            css={css`
+              position: fixed;
+              inset: 0;
+              z-index: var(--studio-layer-0);
+              background: rgb(0 0 0 / 0.28);
+              opacity: 0;
+              pointer-events: none;
+              transition: opacity 0.2s ease-out;
+
+              &[data-state='open'] {
+                opacity: 1;
+                pointer-events: auto;
+              }
+
+              @media (prefers-reduced-motion: reduce) {
+                transition: none;
+              }
+            `}
+            onPointerDown={() => {
+              onOpenChange(false)
+            }}
+          />
           <Dialog.Content
-            forceMount
             css={css`
               position: fixed;
               top: 0;
@@ -66,32 +103,18 @@ export function EventDrawer({
               overflow-y: hidden;
               overscroll-behavior: contain;
 
-              /* Default closed state */
-              transform: translateX(100%);
-              transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
-
               &[data-state='open'] {
-                transform: translateX(0);
+                animation: ${slideIn} 0.3s cubic-bezier(0.22, 1, 0.36, 1);
               }
 
               &[data-state='closed'] {
-                transform: translateX(100%);
+                animation: ${slideOut} 0.3s cubic-bezier(0.22, 1, 0.36, 1);
               }
 
               @media (prefers-reduced-motion: reduce) {
                 transition: none;
               }
             `}
-            onEscapeKeyDown={(event) => {
-              // If the user is currently editing something, the escape key should deselect
-              // the tool and not close the drawer.
-              if (editing) {
-                event.preventDefault()
-              }
-            }}
-            onInteractOutside={(event) => {
-              event.preventDefault()
-            }}
           >
             <div
               css={css`
@@ -108,9 +131,13 @@ export function EventDrawer({
               <Dialog.Title
                 css={css`
                   margin: 0;
+                  display: flex;
+                  align-items: center;
+                  gap: var(--studio-spacing-2);
                 `}
               >
-                Events
+                <ToolBoxLogo size={24} />
+                <span>k6 Studio</span>
               </Dialog.Title>
               <Dialog.Close
                 aria-label="Close event list"
@@ -137,16 +164,47 @@ export function EventDrawer({
             </div>
             <div
               css={css`
-                padding: 0 var(--studio-spacing-4);
-                overflow-x: auto;
-                overscroll-behavior: contain;
+                display: flex;
+                flex-direction: column;
                 flex: 1 1 0;
               `}
             >
-              <BrowserEventList
-                events={events}
-                onNavigate={handleNavigate}
-                onHighlight={handleHighlight}
+              <div
+                css={css`
+                  overflow-x: auto;
+                  overflow-y: auto;
+                  overscroll-behavior: contain;
+                  flex: 1 1 0;
+                  min-height: 0;
+                `}
+              >
+                <BrowserEventList
+                  events={events}
+                  onNavigate={handleNavigate}
+                  onHighlight={handleHighlight}
+                />
+              </div>
+            </div>
+            <div
+              css={css`
+                flex-shrink: 0;
+                border-top: 1px solid var(--studio-border-color);
+                padding: var(--studio-spacing-4);
+                background-color: inherit;
+              `}
+            >
+              <h2
+                css={css`
+                  margin: 0 0 var(--studio-spacing-3);
+                  font-size: var(--studio-font-size-3);
+                  font-weight: 700;
+                `}
+              >
+                Settings
+              </h2>
+              <RecorderSettings
+                settings={settings}
+                onSettingsChange={setSettings}
               />
             </div>
           </Dialog.Content>

extension/src/frontend/view/InBrowserControls.tsx

@@ -8,6 +8,7 @@ import { TextSelectionPopover } from './TextSelectionPopover'
 import { ToolBox } from './ToolBox'
 import { useRecordedEvents } from './hooks/useRecordedEvents'
 import { useInBrowserUIStore } from './store'
+import { Tool } from './types'
 
 export function InBrowserControls() {
   const client = useStudioClient()
@@ -19,10 +20,23 @@ export function InBrowserControls() {
 
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
 
+  const handleSelectTool = (tool: Tool | null) => {
+    setIsDrawerOpen(false)
+    selectTool(tool)
+  }
+
   const handleDeselectTool = () => {
     selectTool(null)
   }
 
+  const handleToggleDrawer = (open: boolean) => {
+    if (open) {
+      selectTool(null)
+    }
+
+    setIsDrawerOpen(open)
+  }
+
   const handleStopRecording = () => {
     client.send({
       type: 'stop-recording',
@@ -40,15 +54,14 @@ export function InBrowserControls() {
         isDrawerOpen={isDrawerOpen}
         recordedEventCount={recordedEvents.length}
         tool={tool}
-        onSelectTool={selectTool}
+        onSelectTool={handleSelectTool}
         onStopRecording={handleStopRecording}
-        onToggleDrawer={setIsDrawerOpen}
+        onToggleDrawer={handleToggleDrawer}
       />
       <EventDrawer
         open={isDrawerOpen}
-        editing={tool !== null}
         events={recordedEvents}
-        onOpenChange={setIsDrawerOpen}
+        onOpenChange={handleToggleDrawer}
       />
     </>
   )