From 1cf9e54f5a9383053da534650a009f6ccecb5772 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 24 Mar 2023 12:07:20 +0100
Subject: [PATCH] change(tracker): more configs for mouse module

---
 tracker/tracker/CHANGELOG.md              |  3 ++-
 tracker/tracker/src/main/modules/mouse.ts | 33 ++++++++++++++++++-----
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/tracker/tracker/CHANGELOG.md b/tracker/tracker/CHANGELOG.md
index 90c68a91f..fa8ab398a 100644
--- a/tracker/tracker/CHANGELOG.md
+++ b/tracker/tracker/CHANGELOG.md
@@ -4,7 +4,8 @@
 - Capture DOM node drop event (>30% nodes removed)
 - Capture iframe network requests
 - Detect cached requests to img, css and js resources; send transferred size
-- added `{ network: { disableClickmaps: boolean } }` to disable calculating el. selectors
+- added `{ mouse: { disableClickmaps: boolean } }` to disable calculating el. selectors
+- added `{ mouse: { minSelectorDepth?: number; nthThreshold?: number; maxOptimiseTries?: number }` for selector finding optimisations
 
 ## 5.0.1
 
diff --git a/tracker/tracker/src/main/modules/mouse.ts b/tracker/tracker/src/main/modules/mouse.ts
index fb69bef08..5bba2ddda 100644
--- a/tracker/tracker/src/main/modules/mouse.ts
+++ b/tracker/tracker/src/main/modules/mouse.ts
@@ -5,13 +5,13 @@ import { MouseMove, MouseClick, MouseThrashing } from '../app/messages.gen.js'
 import { getInputLabel } from './input.js'
 import { finder } from '@medv/finder'
 
-function _getSelector(target: Element, document: Document) {
+function _getSelector(target: Element, document: Document, options?: MouseHandlerOptions): string {
   const selector = finder(target, {
     root: document.body,
     seedMinLength: 3,
-    optimizedMinLength: 2,
-    threshold: 1000,
-    maxNumberOfTries: 10_000,
+    optimizedMinLength: options?.minSelectorDepth || 2,
+    threshold: options?.nthThreshold || 1000,
+    maxNumberOfTries: options?.maxOptimiseTries || 10_000,
   })
 
   return selector
@@ -75,6 +75,25 @@ function _getTarget(target: Element, document: Document): Element | null {
 
 export interface MouseHandlerOptions {
   disableClickmaps?: boolean
+  /** minimum length of an optimised selector.
+   *
+   * body > div > div > p => body > p for example
+   *
+   * default 2
+   * */
+  minSelectorDepth?: number
+  /** how many selectors to try before falling back to nth-child selectors
+   * performance expensive operation
+   *
+   * default 1000
+   * */
+  nthThreshold?: number
+  /**
+   * how many tries to optimise and shorten the selector
+   *
+   * default 10_000
+   * */
+  maxOptimiseTries?: number
 }
 
 export default function (app: App, options?: MouseHandlerOptions): void {
@@ -155,8 +174,8 @@ export default function (app: App, options?: MouseHandlerOptions): void {
   }
 
   const patchDocument = (document: Document, topframe = false) => {
-    function getSelector(id: number, target: Element): string {
-      return (selectorMap[id] = selectorMap[id] || _getSelector(target, document))
+    function getSelector(id: number, target: Element, options?: MouseHandlerOptions): string {
+      return (selectorMap[id] = selectorMap[id] || _getSelector(target, document, options))
     }
 
     const attachListener = topframe
@@ -202,7 +221,7 @@ export default function (app: App, options?: MouseHandlerOptions): void {
             id,
             mouseTarget === target ? Math.round(performance.now() - mouseTargetTime) : 0,
             getTargetLabel(target),
-            isClickable(target) && !disableClickmaps ? getSelector(id, target) : '',
+            isClickable(target) && !disableClickmaps ? getSelector(id, target, options) : '',
           ),
           true,
         )