feat: Add stop recording button to in-browser controls (#688)

Author: going-confetti

extension/src/background/routing.ts

@@ -24,5 +24,6 @@ studio.forward('highlight-elements', [frontend])
 frontend.forward('record-events', [background])
 frontend.forward('navigate', [background])
 frontend.forward('load-events', [background])
+frontend.forward('stop-recording', [studio])
 
 export { background as client }

extension/src/frontend/routing.ts

@@ -11,6 +11,7 @@ const background = new BrowserExtensionClient(
 frontend.forward('record-events', [background])
 frontend.forward('navigate', [background])
 frontend.forward('load-events', [background])
+frontend.forward('stop-recording', [background])
 
 background.forward('events-recorded', [frontend])
 background.forward('events-loaded', [frontend])

extension/src/frontend/view/InBrowserControls.tsx

@@ -1,5 +1,7 @@
 import { useState } from 'react'
 
+import { client } from '../routing'
+
 import { ElementInspector } from './ElementInspector'
 import { EventDrawer } from './EventDrawer'
 import { RemoteHighlights } from './RemoteHighlights'
@@ -17,6 +19,12 @@ export function InBrowserControls() {
     selectTool(null)
   }
 
+  const handleStopRecording = () => {
+    client.send({
+      type: 'stop-recording',
+    })
+  }
+
   return (
     <>
       <RemoteHighlights />
@@ -28,6 +36,7 @@ export function InBrowserControls() {
         isDrawerOpen={isDrawerOpen}
         tool={tool}
         onSelectTool={selectTool}
+        onStopRecording={handleStopRecording}
         onToggleDrawer={setIsDrawerOpen}
       />
       <EventDrawer

extension/src/frontend/view/ToolBox.tsx

@@ -3,6 +3,7 @@ import {
   CursorArrowIcon,
   CursorTextIcon,
   ReaderIcon,
+  StopIcon,
 } from '@radix-ui/react-icons'
 
 import { Toolbar } from '@/components/primitives/Toolbar'
@@ -14,13 +15,15 @@ interface ToolBoxProps {
   tool: Tool | null
   isDrawerOpen: boolean
   onSelectTool: (value: Tool | null) => void
+  onStopRecording: () => void
   onToggleDrawer: (open: boolean) => void
 }
 
 export function ToolBox({
   isDrawerOpen,
   tool,
   onSelectTool,
+  onStopRecording,
   onToggleDrawer,
 }: ToolBoxProps) {
   const handleToolChange = (value: string) => {
@@ -54,6 +57,12 @@ export function ToolBox({
         border: 1px solid var(--gray-6);
       `}
     >
+      <Tooltip delayDuration={0} asChild content="Stop recording">
+        <Toolbar.Button onClick={onStopRecording}>
+          <StopIcon />
+        </Toolbar.Button>
+      </Tooltip>
+      <Toolbar.Separator />
       <Toolbar.ToggleGroup
         type="single"
         value={tool ?? ''}

extension/src/messaging/types.ts

@@ -40,20 +40,27 @@ export const NavigateSchema = z.object({
   url: z.string(),
 })
 
+export const StopRecordingSchema = z.object({
+  type: z.literal('stop-recording'),
+})
+
 export const BrowserExtensionMessageSchema = z.discriminatedUnion('type', [
   LoadEventsSchema,
+
   EventsLoadedSchema,
   RecordEventsSchema,
   EventsRecordedSchema,
   HighlightElementsSchema,
   NavigateSchema,
+  StopRecordingSchema,
 ])
 
 export type RecordEvents = z.infer<typeof RecordEventsSchema>
 export type EventsRecorded = z.infer<typeof EventsRecordedSchema>
 export type HighlightSelector = z.infer<typeof HighlightSelectorSchema>
 export type HighlightElements = z.infer<typeof HighlightElementsSchema>
 export type Navigate = z.infer<typeof NavigateSchema>
+export type StopRecording = z.infer<typeof StopRecordingSchema>
 
 export type BrowserExtensionMessage = z.infer<
   typeof BrowserExtensionMessageSchema

src/components/primitives/Toolbar.tsx

@@ -1,7 +1,16 @@
 import styled from '@emotion/styled'
 import * as RadixToolbar from '@radix-ui/react-toolbar'
 
-const Button = styled(RadixToolbar.Button)``
+const Button = styled(RadixToolbar.Button)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  color: var(--studio-foreground);
+  background-color: var(--studio-toggle-bg-off);
+  border: none;
+  padding: var(--studio-spacing-2);
+`
 
 const Link = styled(RadixToolbar.Link)``
 

src/handlers/browser/index.ts

@@ -47,4 +47,8 @@ export function initialize(browserServer: BrowserServer) {
     console.info(`${BrowserHandler.OpenExternalLink} event received`)
     return shell.openExternal(url)
   })
+
+  browserServer.on('stop-recording', () => {
+    ipcMain.emit(BrowserHandler.Stop)
+  })
 }

src/services/browser/server.ts

@@ -1,10 +1,19 @@
 import { BrowserWindow } from 'electron'
 
 import { BrowserExtensionClient } from 'extension/src/messaging'
+import { Sender } from 'extension/src/messaging/transports/transport'
 import { WebSocketServerTransport } from 'extension/src/messaging/transports/webSocketServer'
 import { BrowserExtensionMessage } from 'extension/src/messaging/types'
+import { EventEmitter } from 'extension/src/utils/events'
 
-export class BrowserServer {
+type BrowserExtensionServerEvents = {
+  'stop-recording': {
+    sender?: Sender
+    data: Extract<BrowserExtensionMessage, { type: 'stop-recording' }>
+  }
+}
+
+export class BrowserServer extends EventEmitter<BrowserExtensionServerEvents> {
   #client: BrowserExtensionClient | null = null
 
   start(browserWindow: BrowserWindow) {
@@ -16,6 +25,10 @@ export class BrowserServer {
     this.#client.on('events-recorded', (event) => {
       browserWindow.webContents.send('browser:event', event.data.events)
     })
+
+    this.#client.on('stop-recording', (event) => {
+      this.emit('stop-recording', event)
+    })
   }
 
   send(message: BrowserExtensionMessage) {