@midscene/recorder-ui 0.0.0

package/dist/components/shiny-text.css

@@ -0,0 +1,73 @@
+.shiny-text {
+  color: #0000;
+  letter-spacing: .5px;
+  text-shadow: 0 1px 2px #0000000d;
+  background-image: linear-gradient(45deg, #2b83ff, #6a11cb, #2575fc, #4481eb);
+  background-size: 300%;
+  background-clip: text;
+  font-weight: 600;
+  animation: 8s infinite textGradient;
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+}
+
+.shiny-text:after {
+  content: "";
+  width: 120%;
+  height: 120%;
+  animation: shine var(--animation-duration, 5s) cubic-bezier(.25, .1, .25, 1) infinite;
+  z-index: 1;
+  pointer-events: none;
+  background: linear-gradient(90deg, #fff0 0%, #ffffff1a 10%, #fff9 50%, #ffffff1a 90%, #fff0 100%);
+  position: absolute;
+  top: -10%;
+  left: -150%;
+  transform: skewX(-20deg)translateY(0);
+}
+
+.shiny-text.disabled {
+  background: #2b83ff;
+  background-clip: text;
+  animation: none;
+}
+
+.shiny-text.disabled:after {
+  animation: none;
+  display: none;
+}
+
+@keyframes shine {
+  0% {
+    opacity: .7;
+    left: -150%;
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  80% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: .7;
+    left: 250%;
+  }
+}
+
+@keyframes textGradient {
+  0% {
+    background-position: 0%;
+  }
+
+  50% {
+    background-position: 100%;
+  }
+
+  100% {
+    background-position: 0%;
+  }
+}
+

package/dist/components/shiny-text.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import "./shiny-text.css";
+const ShinyText = ({ text, disabled = false, speed = 5, className = '' })=>{
+    const style = {
+        '--animation-duration': `${speed}s`
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: `shiny-text ${disabled ? 'disabled' : ''} ${className}`,
+        style: style,
+        children: text
+    });
+};
+export { ShinyText };

package/dist/index.js

@@ -0,0 +1,4 @@
+import { Button } from "./Button.js";
+import { EventRecorder, convertToChromeEvent, convertToChromeEvents } from "./recorder.js";
+import { RecordTimeline } from "./RecordTimeline.js";
+export { Button, EventRecorder, RecordTimeline, convertToChromeEvent, convertToChromeEvents };

package/dist/recorder-iife-index.js

@@ -0,0 +1,2 @@
+import { EventRecorder } from "./recorder.js";
+window.EventRecorder = EventRecorder;

package/dist/recorder-iife.js

@@ -0,0 +1,455 @@
+(()=>{
+    "use strict";
+    const RECORDER_SCROLL_BATCH_DELAY_MS = 200;
+    const RECORDER_INPUT_BATCH_DELAY_MS = 300;
+    function isFormElement(node) {
+        return node instanceof HTMLElement && ('input' === node.tagName.toLowerCase() || 'textarea' === node.tagName.toLowerCase() || 'select' === node.tagName.toLowerCase() || 'option' === node.tagName.toLowerCase());
+    }
+    function isButtonElement(node) {
+        return node instanceof HTMLElement && 'button' === node.tagName.toLowerCase();
+    }
+    function isAElement(node) {
+        return node instanceof HTMLElement && 'a' === node.tagName.toLowerCase();
+    }
+    function isSvgElement(node) {
+        return node instanceof SVGElement;
+    }
+    function isImgElement(node) {
+        if (!includeBaseElement(node) && node instanceof Element) {
+            const computedStyle = window.getComputedStyle(node);
+            const backgroundImage = computedStyle.getPropertyValue('background-image');
+            if ('none' !== backgroundImage) return true;
+        }
+        if (isIconfont(node)) return true;
+        return node instanceof HTMLElement && 'img' === node.tagName.toLowerCase() || node instanceof SVGElement && 'svg' === node.tagName.toLowerCase();
+    }
+    function isIconfont(node) {
+        if (node instanceof Element) {
+            const computedStyle = window.getComputedStyle(node);
+            const fontFamilyValue = computedStyle.fontFamily || '';
+            return fontFamilyValue.toLowerCase().indexOf('iconfont') >= 0;
+        }
+        return false;
+    }
+    function isNotContainerElement(node) {
+        return isTextElement(node) || isIconfont(node) || isImgElement(node) || isButtonElement(node) || isAElement(node) || isFormElement(node);
+    }
+    function isTextElement(node) {
+        if (node instanceof Element) {
+            if (node?.childNodes?.length === 1 && node?.childNodes[0] instanceof Text) return true;
+        }
+        return node.nodeName?.toLowerCase?.() === '#text' && !isIconfont(node);
+    }
+    function includeBaseElement(node) {
+        if (!(node instanceof HTMLElement)) return false;
+        if (node.innerText) return true;
+        const includeList = [
+            'svg',
+            'button',
+            'input',
+            'textarea',
+            'select',
+            'option',
+            'img',
+            'a'
+        ];
+        for (const tagName of includeList){
+            const element = node.querySelectorAll(tagName);
+            if (element.length > 0) return true;
+        }
+        return false;
+    }
+    let debugMode = false;
+    function util_logger(..._msg) {
+        if (!debugMode) return;
+        console.log(..._msg);
+    }
+    const SUB_XPATH_SEPARATOR = '|>>|';
+    const getElementXpathIndex = (element)=>{
+        let index = 1;
+        let prev = element.previousElementSibling;
+        while(prev){
+            if (prev.nodeName.toLowerCase() === element.nodeName.toLowerCase()) index++;
+            prev = prev.previousElementSibling;
+        }
+        return index;
+    };
+    const normalizeXpathText = (text)=>{
+        if ('string' != typeof text) return '';
+        return text.replace(/\s+/g, ' ').trim();
+    };
+    const buildCurrentElementXpath = (element, isOrderSensitive, isLeafElement, limitToCurrentDocument = false)=>{
+        const parentPath = element.parentNode ? getElementXpath(element.parentNode, isOrderSensitive, false, limitToCurrentDocument) : '';
+        const prefix = parentPath ? `${parentPath}/` : '/';
+        const tagName = element.nodeName.toLowerCase();
+        const textContent = element.textContent?.trim();
+        const isSVGNamespace = 'http://www.w3.org/2000/svg' === element.namespaceURI;
+        const tagSelector = isSVGNamespace ? `*[name()="${tagName}"]` : tagName;
+        if (isOrderSensitive) {
+            const index = getElementXpathIndex(element);
+            return `${prefix}${tagSelector}[${index}]`;
+        }
+        if (isLeafElement && textContent) return `${prefix}${tagSelector}[normalize-space()="${normalizeXpathText(textContent)}"]`;
+        const index = getElementXpathIndex(element);
+        return `${prefix}${tagSelector}[${index}]`;
+    };
+    const getElementXpath = (element, isOrderSensitive = false, isLeafElement = false, limitToCurrentDocument = false)=>{
+        if (element.nodeType === Node.TEXT_NODE) {
+            const parentNode = element.parentNode;
+            if (parentNode && parentNode.nodeType === Node.ELEMENT_NODE) {
+                const parentXPath = getElementXpath(parentNode, isOrderSensitive, true, limitToCurrentDocument);
+                const textContent = element.textContent?.trim();
+                if (textContent) return `${parentXPath}/text()[normalize-space()="${normalizeXpathText(textContent)}"]`;
+                return `${parentXPath}/text()`;
+            }
+            return '';
+        }
+        if (element.nodeType !== Node.ELEMENT_NODE) return '';
+        const el = element;
+        try {
+            const nodeName = el.nodeName.toLowerCase();
+            if (el === el.ownerDocument?.documentElement || 'html' === nodeName) {
+                if (!limitToCurrentDocument) {
+                    const frameElement = el.ownerDocument?.defaultView?.frameElement;
+                    if (frameElement) {
+                        const framePath = getElementXpath(frameElement, isOrderSensitive, false, limitToCurrentDocument);
+                        return `${framePath}${SUB_XPATH_SEPARATOR}/html`;
+                    }
+                }
+                return '/html';
+            }
+            if (el === el.ownerDocument?.body || 'body' === nodeName) {
+                if (!limitToCurrentDocument) {
+                    const frameElement = el.ownerDocument?.defaultView?.frameElement;
+                    if (frameElement) {
+                        const framePath = getElementXpath(frameElement, isOrderSensitive, false, limitToCurrentDocument);
+                        return `${framePath}${SUB_XPATH_SEPARATOR}/html/body`;
+                    }
+                }
+                return '/html/body';
+            }
+        } catch (error) {
+            util_logger('[midscene:locator] ownerDocument access failed:', error);
+            if ('html' === el.nodeName.toLowerCase()) return '/html';
+            if ('body' === el.nodeName.toLowerCase()) return '/html/body';
+        }
+        if (isSvgElement(el)) {
+            const tagName = el.nodeName.toLowerCase();
+            if ('svg' === tagName) return buildCurrentElementXpath(el, isOrderSensitive, isLeafElement, limitToCurrentDocument);
+            let parent = el.parentNode;
+            while(parent && parent.nodeType === Node.ELEMENT_NODE){
+                const parentEl = parent;
+                if (!isSvgElement(parentEl)) return getElementXpath(parentEl, isOrderSensitive, isLeafElement, limitToCurrentDocument);
+                const parentTag = parentEl.nodeName.toLowerCase();
+                if ('svg' === parentTag) return getElementXpath(parentEl, isOrderSensitive, isLeafElement, limitToCurrentDocument);
+                parent = parent.parentNode;
+            }
+            const fallbackParent = el.parentNode;
+            if (fallbackParent && fallbackParent.nodeType === Node.ELEMENT_NODE) return getElementXpath(fallbackParent, isOrderSensitive, isLeafElement, limitToCurrentDocument);
+            return '';
+        }
+        return buildCurrentElementXpath(el, isOrderSensitive, isLeafElement, limitToCurrentDocument);
+    };
+    const DEBUG = 'undefined' != typeof localStorage && 'true' === localStorage.getItem('DEBUG');
+    function debugLog(...args) {
+        if (DEBUG) console.log('[EventRecorder]', ...args);
+    }
+    function recorder_generateHashId(type, elementRect) {
+        const rectStr = elementRect ? `${elementRect.left}_${elementRect.top}_${elementRect.width}_${elementRect.height}${void 0 !== elementRect.x ? `_${elementRect.x}` : ''}${void 0 !== elementRect.y ? `_${elementRect.y}` : ''}` : 'no_rect';
+        const combined = `${type}_${rectStr}_${Date.now()}`;
+        let hash = 0;
+        for(let i = 0; i < combined.length; i++){
+            const char = combined.charCodeAt(i);
+            hash = (hash << 5) - hash + char;
+            hash &= hash;
+        }
+        return Math.abs(hash).toString(36);
+    }
+    const isSameInputTarget = (event1, event2)=>event1.element === event2.element;
+    const isSameScrollTarget = (event1, event2)=>event1.element === event2.element;
+    const getLastLabelClick = (events)=>{
+        for(let i = events.length - 1; i >= 0; i--){
+            const event = events[i];
+            if ('click' === event.type && event.isLabelClick) return event;
+        }
+    };
+    class EventRecorder {
+        isRecording = false;
+        eventCallback;
+        scrollThrottleTimer = null;
+        scrollThrottleDelay = RECORDER_SCROLL_BATCH_DELAY_MS;
+        inputThrottleTimer = null;
+        inputThrottleDelay = RECORDER_INPUT_BATCH_DELAY_MS;
+        lastViewportScroll = null;
+        sessionId;
+        mutationObserver = null;
+        constructor(eventCallback, sessionId){
+            this.eventCallback = eventCallback;
+            this.sessionId = sessionId;
+        }
+        createNavigationEvent(url, title) {
+            return {
+                type: 'navigation',
+                url,
+                title,
+                pageInfo: {
+                    width: window.innerWidth,
+                    height: window.innerHeight
+                },
+                timestamp: Date.now(),
+                hashId: `navigation_${Date.now()}`
+            };
+        }
+        start() {
+            if (this.isRecording) return void debugLog('Recording already active, ignoring start request');
+            this.isRecording = true;
+            debugLog('Starting event recording');
+            setTimeout(()=>{
+                const navigationEvent = this.createNavigationEvent(window.location.href, document.title);
+                this.eventCallback(navigationEvent);
+                debugLog('Added final navigation event', navigationEvent);
+            }, 0);
+            document.addEventListener('click', this.handleClick, true);
+            document.addEventListener('input', this.handleInput);
+            document.addEventListener('scroll', this.handleScroll, {
+                capture: true,
+                passive: true
+            });
+        }
+        stop() {
+            if (!this.isRecording) return void debugLog('Recording not active, ignoring stop request');
+            this.isRecording = false;
+            debugLog('Stopping event recording');
+            if (this.scrollThrottleTimer) {
+                clearTimeout(this.scrollThrottleTimer);
+                this.scrollThrottleTimer = null;
+            }
+            if (this.inputThrottleTimer) {
+                clearTimeout(this.inputThrottleTimer);
+                this.inputThrottleTimer = null;
+            }
+            document.removeEventListener('click', this.handleClick, true);
+            document.removeEventListener('input', this.handleInput);
+            document.removeEventListener('scroll', this.handleScroll, true);
+            debugLog('Removed all event listeners');
+        }
+        handleClick = (event)=>{
+            if (!this.isRecording) return;
+            const target = event.target;
+            const { isLabelClick, labelInfo } = this.checkLabelClick(target);
+            const rect = target.getBoundingClientRect();
+            const elementRect = {
+                x: Number(event.clientX.toFixed(2)),
+                y: Number(event.clientY.toFixed(2))
+            };
+            console.log('isNotContainerElement', isNotContainerElement(target));
+            if (isNotContainerElement(target)) {
+                elementRect.left = Number(rect.left.toFixed(2));
+                elementRect.top = Number(rect.top.toFixed(2));
+                elementRect.width = Number(rect.width.toFixed(2));
+                elementRect.height = Number(rect.height.toFixed(2));
+            }
+            const clickEvent = {
+                type: 'click',
+                elementRect,
+                pageInfo: {
+                    width: window.innerWidth,
+                    height: window.innerHeight
+                },
+                value: '',
+                timestamp: Date.now(),
+                hashId: recorder_generateHashId('click', {
+                    ...elementRect
+                }),
+                element: target,
+                isLabelClick,
+                labelInfo,
+                isTrusted: event.isTrusted,
+                detail: event.detail
+            };
+            this.eventCallback(clickEvent);
+        };
+        handleScroll = (event)=>{
+            if (!this.isRecording) return;
+            function isDocument(target) {
+                return target instanceof Document;
+            }
+            const target = event.target;
+            const scrollXTarget = isDocument(target) ? window.scrollX : target.scrollLeft;
+            const scrollYTarget = isDocument(target) ? window.scrollY : target.scrollTop;
+            const rect = isDocument(target) ? {
+                left: 0,
+                top: 0,
+                width: window.innerWidth,
+                height: window.innerHeight
+            } : target.getBoundingClientRect();
+            if (this.scrollThrottleTimer) clearTimeout(this.scrollThrottleTimer);
+            this.scrollThrottleTimer = window.setTimeout(()=>{
+                if (this.isRecording) {
+                    const elementRect = {
+                        left: isDocument(target) ? 0 : Number(rect.left.toFixed(2)),
+                        top: isDocument(target) ? 0 : Number(rect.top.toFixed(2)),
+                        width: isDocument(target) ? window.innerWidth : Number(rect.width.toFixed(2)),
+                        height: isDocument(target) ? window.innerHeight : Number(rect.height.toFixed(2))
+                    };
+                    const scrollEvent = {
+                        type: 'scroll',
+                        elementRect,
+                        pageInfo: {
+                            width: window.innerWidth,
+                            height: window.innerHeight
+                        },
+                        value: `${scrollXTarget.toFixed(2)},${scrollYTarget.toFixed(2)}`,
+                        timestamp: Date.now(),
+                        hashId: recorder_generateHashId('scroll', {
+                            ...elementRect
+                        }),
+                        element: target
+                    };
+                    this.eventCallback(scrollEvent);
+                }
+                this.scrollThrottleTimer = null;
+            }, this.scrollThrottleDelay);
+        };
+        handleInput = (event)=>{
+            if (!this.isRecording) return;
+            const target = event.target;
+            if ('checkbox' === target.type) return;
+            const rect = target.getBoundingClientRect();
+            const elementRect = {
+                left: Number(rect.left.toFixed(2)),
+                top: Number(rect.top.toFixed(2)),
+                width: Number(rect.width.toFixed(2)),
+                height: Number(rect.height.toFixed(2))
+            };
+            if (this.inputThrottleTimer) clearTimeout(this.inputThrottleTimer);
+            this.inputThrottleTimer = window.setTimeout(()=>{
+                if (this.isRecording) {
+                    const inputEvent = {
+                        type: 'input',
+                        value: 'password' !== target.type ? target.value : '*****',
+                        timestamp: Date.now(),
+                        hashId: recorder_generateHashId('input', {
+                            ...elementRect
+                        }),
+                        element: target,
+                        inputType: target.type || 'text',
+                        elementRect,
+                        pageInfo: {
+                            width: window.innerWidth,
+                            height: window.innerHeight
+                        }
+                    };
+                    debugLog('Throttled input event:', {
+                        value: inputEvent.value,
+                        timestamp: inputEvent.timestamp,
+                        target: target.tagName,
+                        inputType: target.type
+                    });
+                    this.eventCallback(inputEvent);
+                }
+                this.inputThrottleTimer = null;
+            }, this.inputThrottleDelay);
+        };
+        checkLabelClick(target) {
+            let isLabelClick = false;
+            let labelInfo;
+            if (target) if ('LABEL' === target.tagName) {
+                isLabelClick = true;
+                labelInfo = {
+                    htmlFor: target.htmlFor,
+                    textContent: target.textContent?.trim(),
+                    xpath: getElementXpath(target)
+                };
+            } else {
+                let parent = target.parentElement;
+                while(parent){
+                    if ('LABEL' === parent.tagName) {
+                        isLabelClick = true;
+                        labelInfo = {
+                            htmlFor: parent.htmlFor,
+                            textContent: parent.textContent?.trim(),
+                            xpath: getElementXpath(parent)
+                        };
+                        break;
+                    }
+                    parent = parent.parentElement;
+                }
+            }
+            return {
+                isLabelClick,
+                labelInfo
+            };
+        }
+        isActive() {
+            return this.isRecording;
+        }
+        optimizeEvent(event, events) {
+            const lastEvent = events[events.length - 1];
+            if ('click' === event.type) {
+                const lastEvent = getLastLabelClick(events);
+                if (event.element) {
+                    const { isLabelClick, labelInfo } = this.checkLabelClick(event.element);
+                    if (lastEvent && isLabelClick && 'click' === lastEvent.type && lastEvent.isLabelClick && (lastEvent.labelInfo?.htmlFor && event.element.id && lastEvent.labelInfo?.htmlFor === event.element.id || labelInfo?.xpath && lastEvent.labelInfo?.xpath && lastEvent.labelInfo?.xpath === labelInfo?.xpath)) {
+                        debugLog('Skip input event triggered by label click:', event.element);
+                        return events;
+                    }
+                    return [
+                        ...events,
+                        event
+                    ];
+                }
+            }
+            if ('input' === event.type) {
+                if (lastEvent && 'click' === lastEvent.type && lastEvent.isLabelClick && lastEvent.labelInfo?.htmlFor === event.targetId) {
+                    debugLog('Skipping input event - triggered by label click:', {
+                        labelHtmlFor: getLastLabelClick(events)?.labelInfo?.htmlFor,
+                        inputId: event.targetId,
+                        element: event.element
+                    });
+                    return events;
+                }
+                if (lastEvent && 'input' === lastEvent.type && isSameInputTarget(lastEvent, event)) {
+                    const oldInputEvent = events[events.length - 1];
+                    const newEvents = [
+                        ...events
+                    ];
+                    newEvents[events.length - 1] = {
+                        value: event.element?.value,
+                        ...event
+                    };
+                    debugLog('Merging input event:', {
+                        oldValue: oldInputEvent.value,
+                        newValue: event.value,
+                        oldTimestamp: oldInputEvent.timestamp,
+                        newTimestamp: event.timestamp,
+                        target: event.targetTagName
+                    });
+                    return newEvents;
+                }
+            }
+            if ('scroll' === event.type) {
+                if (lastEvent && 'scroll' === lastEvent.type && isSameScrollTarget(lastEvent, event)) {
+                    const oldScrollEvent = events[events.length - 1];
+                    const newEvents = [
+                        ...events
+                    ];
+                    newEvents[events.length - 1] = event;
+                    debugLog('Replacing last scroll event with new scroll event:', {
+                        oldPosition: `${oldScrollEvent.elementRect?.left},${oldScrollEvent.elementRect?.top}`,
+                        newPosition: `${event.elementRect?.left},${event.elementRect?.top}`,
+                        oldTimestamp: oldScrollEvent.timestamp,
+                        newTimestamp: event.timestamp,
+                        target: event.targetTagName
+                    });
+                    return newEvents;
+                }
+            }
+            return [
+                ...events,
+                event
+            ];
+        }
+    }
+    window.EventRecorder = EventRecorder;
+})();