@tindalabs/shield 0.1.0

package/dist/utils/detectors/sizeDetector.js

@@ -0,0 +1,134 @@
+import { isBrowser, getBrowser } from "../environment";
+import { eventManager } from "../eventManager";
+import { AbstractDevToolsDetector, DetectorErrorType } from "./AbstractDevToolsDetector";
+/**
+ * Utility class for detecting DevTools using window size differences
+ * This approach works by detecting unusual differences between outer and inner window dimensions
+ * that typically occur when DevTools are open
+ */
+export class SizeDetector extends AbstractDevToolsDetector {
+    /**
+     * Create a new SizeDetector
+     * @param options Configuration options
+     */
+    constructor(options = {}) {
+        super("SizeDetector", options);
+        this.resizeEventId = "";
+        this.widthThreshold = options.widthThreshold || 200;
+        this.heightThreshold = options.heightThreshold || 300;
+        // Initialize resize listener
+        this.initResizeListener();
+        this.logger.log(`Initialized with thresholds - width: ${this.widthThreshold}px, height: ${this.heightThreshold}px`);
+    }
+    /**
+     * Initialize resize event listener
+     */
+    initResizeListener() {
+        this.safeExecute("initResizeListener", DetectorErrorType.INITIALIZATION_ERROR, () => {
+            if (!isBrowser())
+                return;
+            // Create resize handler
+            const resizeHandler = () => {
+                // Use setTimeout to avoid too many checks during resize
+                setTimeout(() => {
+                    this.checkDevTools();
+                }, 100);
+            };
+            // Register resize event using eventManager
+            this.resizeEventId = eventManager.addEventListener(window, "resize", resizeHandler, "SizeDetector", {
+                passive: true,
+                priority: 5, // Medium-high priority
+            });
+            // Perform initial check
+            this.checkDevTools();
+            this.logger.log(`Resize listener initialized with event ID: ${this.resizeEventId}`);
+        });
+    }
+    /**
+     * Calculate screen zoom ratio
+     * @returns The screen zoom ratio or false if it can't be determined
+     */
+    getScreenZoomRatio() {
+        return (this.safeExecute("getScreenZoomRatio", DetectorErrorType.DETECTION_ERROR, () => {
+            if (!isBrowser())
+                return false;
+            // Try to use devicePixelRatio first (most reliable)
+            if (typeof window.devicePixelRatio !== "undefined") {
+                return window.devicePixelRatio;
+            }
+            // Fallback to screen properties for older browsers
+            const screen = window.screen;
+            if (!screen)
+                return false;
+            if (screen.deviceXDPI && screen.logicalXDPI) {
+                return screen.deviceXDPI / screen.logicalXDPI;
+            }
+            return false;
+        }) || false);
+    }
+    /**
+     * Check if DevTools is open using window size differences
+     */
+    checkDevTools() {
+        if (this.isChecking || !isBrowser())
+            return;
+        this.isChecking = true;
+        this.safeExecute("checkDevTools", DetectorErrorType.DETECTION_ERROR, () => {
+            // Get screen zoom ratio
+            const screenRatio = this.getScreenZoomRatio();
+            // If we can't get the screen ratio, we can't reliably detect
+            if (screenRatio === false) {
+                this.isChecking = false;
+                return;
+            }
+            // Calculate size differences accounting for zoom
+            const widthDiff = window.outerWidth - window.innerWidth * screenRatio;
+            const heightDiff = window.outerHeight - window.innerHeight * screenRatio;
+            // Check if differences exceed thresholds
+            const widthUneven = widthDiff > this.widthThreshold;
+            const heightUneven = heightDiff > this.heightThreshold;
+            // DevTools is considered open if either dimension is uneven
+            const isOpen = widthUneven || heightUneven;
+            // Log detailed size information in debug mode
+            this.logger.log(`Window sizes - outer: ${window.outerWidth}x${window.outerHeight}, inner: ${window.innerWidth}x${window.innerHeight}, zoom: ${screenRatio}`);
+            this.logger.log(`Size differences - width: ${widthDiff.toFixed(2)}px, height: ${heightDiff.toFixed(2)}px`);
+            // Update DevTools state and notify listeners if changed
+            this.updateDevToolsState(isOpen);
+            this.isChecking = false;
+        });
+        // Ensure isChecking is reset even if an error occurs
+        if (this.isChecking) {
+            this.isChecking = false;
+        }
+    }
+    /**
+     * Clean up resources
+     */
+    dispose() {
+        this.safeExecute("dispose", DetectorErrorType.DISPOSAL_ERROR, () => {
+            if (isBrowser() && this.resizeEventId) {
+                // Remove the resize event listener using eventManager
+                eventManager.removeEventListener(window, this.resizeEventId);
+                this.resizeEventId = "";
+                this.logger.log("Removed resize event listener");
+                this.logger.log("Disposed");
+            }
+        });
+        super.dispose();
+    }
+    /**
+     * Check if this detector is supported in the current browser
+     * @returns True if supported
+     */
+    static isSupported() {
+        if (!isBrowser())
+            return false;
+        const browser = getBrowser();
+        const isIframe = window.self !== window.top;
+        // Not supported in iframes or Edge
+        if (isIframe || browser.name === "edge") {
+            return false;
+        }
+        return true;
+    }
+}

package/dist/utils/detectors/timingDetector.d.ts

@@ -0,0 +1,55 @@
+import { AbstractDevToolsDetector } from "./AbstractDevToolsDetector";
+import { DevToolsDetectorOptions } from "./detectorInterface";
+/**
+ * Options for the TimingDetector
+ */
+export interface TimingDetectorOptions extends DevToolsDetectorOptions {
+    /**
+     * Threshold multiplier for detection
+     * Higher values make detection less sensitive
+     */
+    thresholdMultiplier?: number;
+}
+/**
+ * Utility class for detecting DevTools using console timing differences
+ * This approach works especially well in Firefox
+ */
+export declare class TimingDetector extends AbstractDevToolsDetector {
+    private largeObjectArray;
+    private maxPrintTime;
+    private thresholdMultiplier;
+    /**
+     * Create a new TimingDetector
+     * @param options Configuration options
+     */
+    constructor(options?: TimingDetectorOptions);
+    /**
+     * Initialize the large object array used for timing tests
+     */
+    private initLargeObjectArray;
+    /**
+     * Create a large object for timing tests
+     */
+    private createLargeObject;
+    /**
+     * Create an array of large objects for timing tests
+     */
+    private createLargeObjectArray;
+    /**
+     * Calculate execution time of a function
+     */
+    private calculateTime;
+    /**
+     * Check if DevTools is open using console timing
+     */
+    checkDevTools(): void;
+    /**
+     * Clean up resources
+     */
+    dispose(): void;
+    /**
+     * Check if this detector is supported in the current browser
+     * @returns True if supported
+     */
+    static isSupported(): boolean;
+}

package/dist/utils/detectors/timingDetector.js

@@ -0,0 +1,143 @@
+import { getBrowser, isBrowser, isMobile } from "../environment";
+import { AbstractDevToolsDetector, DetectorErrorType } from "./AbstractDevToolsDetector";
+/**
+ * Utility class for detecting DevTools using console timing differences
+ * This approach works especially well in Firefox
+ */
+export class TimingDetector extends AbstractDevToolsDetector {
+    /**
+     * Create a new TimingDetector
+     * @param options Configuration options
+     */
+    constructor(options = {}) {
+        super("TimingDetector", options);
+        this.largeObjectArray = [];
+        this.maxPrintTime = 0;
+        this.thresholdMultiplier = options.thresholdMultiplier || 10; //DIFFERENCE BETWEEN .log AND .table
+        // Initialize the large object array
+        this.initLargeObjectArray();
+        this.logger.log("Initialized with threshold multiplier:", this.thresholdMultiplier);
+    }
+    /**
+     * Initialize the large object array used for timing tests
+     */
+    initLargeObjectArray() {
+        this.safeExecute("initLargeObjectArray", DetectorErrorType.INITIALIZATION_ERROR, () => {
+            if (!isBrowser())
+                return;
+            this.largeObjectArray = this.createLargeObjectArray();
+            this.maxPrintTime = 0;
+            this.logger.log("Large object array initialized with size:", this.largeObjectArray.length);
+        });
+    }
+    /**
+     * Create a large object for timing tests
+     */
+    createLargeObject() {
+        return (this.safeExecute("createLargeObject", DetectorErrorType.INITIALIZATION_ERROR, () => {
+            const largeObject = {};
+            for (let i = 0; i < 500; i++) {
+                largeObject[`${i}`] = `${i}`;
+            }
+            return largeObject;
+        }) || {});
+    }
+    /**
+     * Create an array of large objects for timing tests
+     */
+    createLargeObjectArray() {
+        return (this.safeExecute("createLargeObjectArray", DetectorErrorType.INITIALIZATION_ERROR, () => {
+            const largeObject = this.createLargeObject();
+            const largeObjectArray = [];
+            for (let i = 0; i < 50; i++) {
+                largeObjectArray.push(largeObject);
+            }
+            return largeObjectArray;
+        }) || []);
+    }
+    /**
+     * Calculate execution time of a function
+     */
+    calculateTime(func) {
+        return (this.safeExecute("calculateTime", DetectorErrorType.DETECTION_ERROR, () => {
+            const start = performance.now();
+            func();
+            return performance.now() - start;
+        }) || 0);
+    }
+    /**
+     * Check if DevTools is open using console timing
+     */
+    checkDevTools() {
+        if (this.isChecking || !isBrowser())
+            return;
+        this.isChecking = true;
+        this.safeExecute("checkDevTools", DetectorErrorType.DETECTION_ERROR, () => {
+            // Measure time to print large object array using console.table
+            const tablePrintTime = this.calculateTime(() => {
+                console.table(this.largeObjectArray.slice(0, 8)); // Use a smaller slice to avoid freezing
+            });
+            // Measure time to print large object array using console.log
+            const logPrintTime = this.calculateTime(() => {
+                console.log(this.largeObjectArray.slice(0, 8)); // Use a smaller slice to avoid freezing
+            });
+            // Update max print time
+            this.maxPrintTime = Math.max(this.maxPrintTime, logPrintTime);
+            // Clear console
+            console.clear();
+            // Skip detection if we don't have valid measurements yet
+            if (tablePrintTime === 0 || this.maxPrintTime === 0) {
+                this.isChecking = false;
+                return;
+            }
+            // If table print time is significantly higher than max log print time,
+            // DevTools is likely open
+            const isOpen = tablePrintTime > this.maxPrintTime * this.thresholdMultiplier;
+            // Update state and notify listeners if changed
+            this.updateDevToolsState(isOpen);
+            this.logger.log(`Timing check - table: ${tablePrintTime.toFixed(2)}ms, log: ${logPrintTime.toFixed(2)}ms, max: ${this.maxPrintTime.toFixed(2)}ms, ratio: ${(tablePrintTime / this.maxPrintTime).toFixed(2)}x`);
+            this.isChecking = false;
+        });
+    }
+    /**
+     * Clean up resources
+     */
+    dispose() {
+        this.safeExecute("dispose", DetectorErrorType.DISPOSAL_ERROR, () => {
+            this.largeObjectArray = [];
+            this.maxPrintTime = 0;
+            this.logger.log("Disposed");
+        });
+        super.dispose();
+    }
+    /**
+     * Check if this detector is supported in the current browser
+     * @returns True if supported
+     */
+    static isSupported() {
+        if (!isBrowser())
+            return false;
+        // Check if required console methods exist
+        if (typeof console === "undefined" || typeof console.table !== "function" || typeof console.log !== "function") {
+            return false;
+        }
+        // Check if performance API is available
+        if (typeof performance === "undefined" || typeof performance.now !== "function") {
+            return false;
+        }
+        // Get browser info
+        const browser = getBrowser();
+        const isMobileDevice = isMobile();
+        // This detector works best in Firefox and desktop browsers
+        // It's less reliable in mobile browsers and some WebKit browsers
+        // Not recommended for mobile Chrome or Edge
+        if (isMobileDevice && (browser.name === "chrome" || browser.name === "edge")) {
+            return false;
+        }
+        // Not recommended for Safari (desktop or mobile) as it has inconsistent timing behavior
+        if (browser.name === "safari") {
+            return false;
+        }
+        return true;
+    }
+}

package/dist/utils/dom.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Safely add event listener with error handling
+ */
+export declare const safeAddEventListener: (element: HTMLElement | Document | Window, event: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => boolean;
+/**
+ * Safely remove event listener with error handling
+ */
+export declare const safeRemoveEventListener: (element: HTMLElement | Document | Window, event: string, handler: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => boolean;
+/**
+ * Create and inject a style element
+ */
+export declare const injectStyles: (css: string, id?: string) => HTMLStyleElement | null;
+/**
+ * Remove a style element by ID
+ */
+export declare const removeStyles: (id: string) => boolean;
+/**
+ * Create an element with attributes and styles
+ */
+export declare const createElement: <T extends HTMLElement>(tag: string, attributes?: Record<string, string>, styles?: Partial<CSSStyleDeclaration>) => T;

package/dist/utils/dom.js

@@ -0,0 +1,83 @@
+// DOM UTILITIES
+/**
+ * Safely add event listener with error handling
+ */
+export const safeAddEventListener = (element, event, handler, options) => {
+    try {
+        element.addEventListener(event, handler, options);
+        return true;
+    }
+    catch (error) {
+        console.error(`Failed to add event listener for ${event}:`, error);
+        return false;
+    }
+};
+/**
+ * Safely remove event listener with error handling
+ */
+export const safeRemoveEventListener = (element, event, handler, options) => {
+    try {
+        element.removeEventListener(event, handler, options);
+        return true;
+    }
+    catch (error) {
+        console.error(`Failed to remove event listener for ${event}:`, error);
+        return false;
+    }
+};
+/**
+ * Create and inject a style element
+ */
+export const injectStyles = (css, id) => {
+    if (typeof document === 'undefined')
+        return null;
+    try {
+        const style = document.createElement('style');
+        style.setAttribute('type', 'text/css');
+        if (id) {
+            style.id = id;
+        }
+        style.textContent = css;
+        document.head.appendChild(style);
+        return style;
+    }
+    catch (error) {
+        console.error('Failed to inject styles:', error);
+        return null;
+    }
+};
+/**
+ * Remove a style element by ID
+ */
+export const removeStyles = (id) => {
+    if (typeof document === 'undefined')
+        return false;
+    try {
+        const style = document.getElementById(id);
+        if (style && style.parentNode) {
+            style.parentNode.removeChild(style);
+            return true;
+        }
+        return false;
+    }
+    catch (error) {
+        console.error(`Failed to remove styles with ID ${id}:`, error);
+        return false;
+    }
+};
+/**
+ * Create an element with attributes and styles
+ */
+export const createElement = (tag, attributes = {}, styles = {}) => {
+    if (typeof document === 'undefined') {
+        throw new Error('Document is not available');
+    }
+    const element = document.createElement(tag);
+    // Set attributes
+    Object.entries(attributes).forEach(([key, value]) => {
+        element.setAttribute(key, value);
+    });
+    // Set styles
+    Object.assign(element.style, styles);
+    return element;
+};

package/dist/utils/environment.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Detect browser environment
+ */
+export declare const isBrowser: () => boolean;
+/**
+ * Detect mobile device
+ */
+export declare const isMobile: () => boolean;
+/**
+ * Detect specific browser
+ */
+export declare const getBrowser: () => {
+    name: string;
+    version: string;
+};
+/**
+ * Detect operating system
+ */
+export declare const getOS: () => {
+    name: "mac" | "linux" | "windows" | "unknown";
+};
+/**
+ * Check if print is supported
+ */
+export declare const isPrintSupported: () => boolean;
+/**
+ * Check if beforeprint event is supported
+ */
+export declare const isBeforePrintSupported: () => boolean;