bee-ladybug 0.6.2 → 0.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bee-ladybug",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "Universal telemetry and visual inspection overlay for Canvas, DOM, Python and AI flows.",
   "type": "module",
   "main": "src/index.js",

package/src/adapters/AntAdapter.js

@@ -189,6 +189,7 @@ function isBeeChrome(node) {
         if (tag === 'BEE-LADYBUG-OVERLAY') return true;
         if (el.hasAttribute?.('data-bee-ladybug-dom')) return true;
         if (el.hasAttribute?.('data-bee-ladybug-canvas')) return true;
+        if (el.hasAttribute?.('data-bee-ladybug-css')) return true;
         el = el.parentElement;
     }
     return false;

package/src/adapters/CSSAdapter.js

@@ -61,9 +61,13 @@ export class CSSAdapter {
         this.#hoverBox = null;
         this.#pinBox = null;
         this.#observer = null;
+        this.#unsubscribe = null;
+        this.#hasPointer = false;
         this.#onMove = (event) => {
+            if (this.core && this.core.visible === false) return;
             this.#x = event.clientX;
             this.#y = event.clientY;
+            this.#hasPointer = true;
             this.#schedule();
         };
         this.#onKey = (event) => this.#handleKey(event);
@@ -71,7 +75,7 @@ export class CSSAdapter {
         this.#onMutate = (records) => {
             if (!records.some(touchesSheet)) return;
             this.#sheetsDirty = true;
-            this.#schedule();
+            if (this.#hasPointer) this.#schedule();
         };
     }
 
@@ -92,6 +96,9 @@ export class CSSAdapter {
     #hoverBox;
     #pinBox;
     #observer;
+    #unsubscribe;
+    /** True after the first mousemove: before that (x, y) is not a real pointer. */
+    #hasPointer;
     #onMove;
     #onKey;
     #onScroll;
@@ -104,6 +111,9 @@ export class CSSAdapter {
     attach() {
         if (this.#attached) return this;
         this.#attached = true;
+        if (this.core && typeof this.core.subscribe === 'function') {
+            this.#unsubscribe = this.core.subscribe((packet) => this.#onCore(packet));
+        }
         this.core?.registerAdapter('css', {
             label: this.label,
             hotkey: this.hotkey,
@@ -128,10 +138,21 @@ export class CSSAdapter {
         if (!this.#attached) return this;
         this.#disable();
         this.#attached = false;
+        if (this.#unsubscribe) this.#unsubscribe();
+        this.#unsubscribe = null;
         this.core?.unregisterAdapter('css');
         return this;
     }
 
+    #onCore(packet) {
+        if (packet.type !== 'sys' || packet.payload?.op !== 'visibility') return;
+        this.#placeBoxes();
+    }
+
+    #boxesVisible() {
+        return !(this.core && this.core.visible === false);
+    }
+
     /** Page scan. Click a row to outline one element of that group. */
     scan() {
         if (!this.#active || typeof document === 'undefined') return this;
@@ -141,15 +162,15 @@ export class CSSAdapter {
         const rows = [];
         for (let i = 0; i < nodes.length; i++) {
             const el = nodes[i];
-            if (!el || isBeeChrome(el) || isSkippedTag(el)) continue;
+            if (!el || isBeeChrome(el) || isSkippedTag(el) || isReportNoise(el)) continue;
             const measured = measureViewportOverflow(el);
             if (measured) overflow.push(measured);
             const findings = [];
             pushNegativeMargins(el, findings);
             pushInvisible(el, findings);
-            pushBlockers(el, findings);
+            pushBlockers(el, findings, true);
             pushImage(el, findings);
-            pushStacking(el, findings);
+            pushStacking(el, findings, true);
             pushImportant(el, this.#rules, findings);
             for (let j = 0; j < findings.length; j++) {
                 rows.push({ el, selector: cssPath(el), ...findings[j] });
@@ -245,7 +266,9 @@ export class CSSAdapter {
         for (let i = 0; i < rows.length; i++) {
             const row = rows[i];
             if (describeCause(row.kind, row.selector)) {
-                causes = addCause(causes, { kind: row.kind, path: row.selector, el: row.el }, MAX_SNAPSHOT);
+                // No cap here: MAX_SNAPSHOT applies after the severity sort, so an info row
+                // can never push a real error out.
+                causes = addCause(causes, { kind: row.kind, path: row.selector, el: row.el }, Infinity);
             } else {
                 plain.push(row);
             }
@@ -319,6 +342,7 @@ export class CSSAdapter {
     #disable() {
         if (!this.#active) return;
         this.#active = false;
+        this.#hasPointer = false;
         if (typeof window !== 'undefined') {
             window.removeEventListener('mousemove', this.#onMove, true);
             window.removeEventListener('keydown', this.#onKey);
@@ -340,11 +364,16 @@ export class CSSAdapter {
         this.core?.publishDetail([]);
         this.core?.publishIssues([]);
         this.core?.sendData('state', { source: this.source, key: 'css.hunt', value: 'off' });
+        this.core?.sendData('state', { source: this.source, key: 'css.target', value: '—' });
+        this.core?.sendData('state', { source: this.source, key: 'css.hits', value: '0' });
+        this.core?.sendData('state', { source: this.source, key: 'css.pin', value: 'off' });
         this.core?.sendData('log', { source: this.source, message: 'CSS hunt off.' });
     }
 
     #handleKey(event) {
         if (!this.#active || event.repeat) return;
+        if (event.ctrlKey || event.metaKey || event.altKey) return;
+        if (this.core && this.core.visible === false) return;
         if (isTypingTarget(event.target)) return;
         if (event.code === this.pinKey) {
             event.preventDefault();
@@ -377,22 +406,23 @@ export class CSSAdapter {
 
     #inspect(x, y) {
         const el = pickElement(x, y);
-        placeBox(this.#hoverBox, el);
+        placeBox(this.#hoverBox, el, this.#boxesVisible());
         if (this.#panelLock) return;
         if (el === this.#lastEl) return;
         this.#lastEl = el;
         if (!el) {
             this.core?.publishDetail([]);
             this.core?.sendData('state', { source: this.source, key: 'css.target', value: '—' });
+            this.core?.sendData('state', { source: this.source, key: 'css.hits', value: '0' });
             return;
         }
         const findings = [];
         pushImportant(el, this.#rules, findings);
         pushOverflow(el, findings);
         pushInvisible(el, findings);
-        pushBlockers(el, findings);
+        pushBlockers(el, findings, true);
         pushImage(el, findings);
-        pushStacking(el, findings);
+        pushStacking(el, findings, true);
         const path = cssPath(el);
         this.core?.sendData('state', { source: this.source, key: 'css.target', value: path });
         this.core?.sendData('state', {
@@ -419,7 +449,7 @@ export class CSSAdapter {
         if (this.#panelLock) {
             this.#panelLock = false;
             this.#pinned = null;
-            placeBox(this.#pinBox, null);
+            placeBox(this.#pinBox, null, this.#boxesVisible());
             this.core?.sendData('state', { source: this.source, key: 'css.pin', value: 'off' });
             this.core?.sendData('log', { source: this.source, message: 'CSS pin off.' });
             this.#lastEl = null;
@@ -504,15 +534,16 @@ export class CSSAdapter {
 
     #pin(el) {
         this.#pinned = el;
-        placeBox(this.#pinBox, el);
+        placeBox(this.#pinBox, el, this.#boxesVisible());
         if (el && typeof el.scrollIntoView === 'function') {
             el.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' });
         }
     }
 
     #placeBoxes() {
-        placeBox(this.#hoverBox, this.#lastEl);
-        placeBox(this.#pinBox, this.#pinned);
+        const visible = this.#boxesVisible();
+        placeBox(this.#hoverBox, this.#lastEl, visible);
+        placeBox(this.#pinBox, this.#pinned, visible);
     }
 
     #mountBoxes() {
@@ -538,6 +569,8 @@ function collectImportantRules() {
     const sheets = document.styleSheets;
     for (let i = 0; i < sheets.length; i++) {
         const sheet = sheets[i];
+        if (sheet.disabled === true) continue;
+        if (sheet.media && sheet.media.mediaText && !mediaMatches(sheet.media.mediaText)) continue;
         let list = null;
         try {
             list = sheet.cssRules;
@@ -550,21 +583,21 @@ function collectImportantRules() {
     return { rules, unreadable };
 }
 
+function mediaMatches(mediaText) {
+    try {
+        return typeof matchMedia === 'function' ? matchMedia(mediaText).matches : true;
+    } catch {
+        return true;
+    }
+}
+
 function walkRules(list, source, into) {
     if (!list) return;
     for (let i = 0; i < list.length; i++) {
         const rule = list[i];
         if (!rule) continue;
         if (rule.type === 4 && rule.media) {
-            let active = true;
-            try {
-                active = typeof matchMedia === 'function'
-                    ? matchMedia(rule.media.mediaText).matches
-                    : true;
-            } catch {
-                active = true;
-            }
-            if (active) walkRules(rule.cssRules, source, into);
+            if (mediaMatches(rule.media.mediaText)) walkRules(rule.cssRules, source, into);
             continue;
         }
         if (rule.type === 1 && rule.selectorText && rule.style) {
@@ -745,7 +778,9 @@ function pushInvisible(el, findings) {
         findings.push(issue('invisible text (opacity 0)', ISSUE_RANK.invisible, 30));
     }
     const color = parseColor(style.color);
-    if (!color || color.a === 0) {
+    // Unknown syntax (oklch, lab, color(), color-mix): nothing to compare, nothing to report.
+    if (!color) return;
+    if (color.a === 0) {
         findings.push(issue('invisible text (transparent color)', ISSUE_RANK.invisible, 30));
         return;
     }
@@ -1096,7 +1131,7 @@ function pickElement(x, y) {
     const stack = document.elementsFromPoint(x, y);
     for (let i = 0; i < stack.length; i++) {
         const el = stack[i];
-        if (!el || isBeeChrome(el)) continue;
+        if (!el || isBeeChrome(el) || isReportNoise(el)) continue;
         if (el === document.documentElement || el === document.body) continue;
         return el;
     }
@@ -1154,12 +1189,16 @@ function hasOwnText(el) {
 function cssPath(el) {
     if (!el || !el.tagName) return 'node';
     const tag = el.tagName.toLowerCase();
-    if (el.id) return `${tag}#${el.id}`;
+    if (el.id) return `${tag}#${cssEscape(el.id)}`;
     const classes = el.classList ? [...el.classList].slice(0, 2) : [];
-    if (classes.length) return `${tag}.${classes.join('.')}`;
+    if (classes.length) return `${tag}.${classes.map(cssEscape).join('.')}`;
     return tag;
 }
 
+function cssEscape(value) {
+    return String(value).replace(/[^\w-]/g, '\\$&');
+}
+
 function isSkippedTag(el) {
     const tag = el.tagName;
     return tag === 'SCRIPT' || tag === 'STYLE' || tag === 'LINK' || tag === 'META';
@@ -1179,7 +1218,10 @@ function touchesSheet(record) {
         const name = record.target?.nodeName;
         return name === 'STYLE' || name === 'LINK';
     }
-    const nodes = [record.target];
+    // Only what was added or removed: the target's whole subtree always holds some <style> or <link>.
+    // A <style> that receives new text is the one target worth checking, and that check is O(1).
+    if (record.target?.nodeName === 'STYLE') return true;
+    const nodes = [];
     if (record.addedNodes) {
         for (let i = 0; i < record.addedNodes.length; i++) nodes.push(record.addedNodes[i]);
     }
@@ -1220,9 +1262,9 @@ function makeBox(kind, border, fill) {
     return node;
 }
 
-function placeBox(node, el) {
+function placeBox(node, el, visible = true) {
     if (!node) return;
-    if (!el || typeof el.getBoundingClientRect !== 'function' || isBeeChrome(el)) {
+    if (visible === false || !el || typeof el.getBoundingClientRect !== 'function' || isBeeChrome(el)) {
         node.style.display = 'none';
         return;
     }

package/src/adapters/WebDOMAdapter.js

@@ -17,6 +17,12 @@
 import { isReportNoise } from '../core/ReportExporter.js';
 
 const MAX_PROBLEM_ROWS = 40;
+const OBSERVE_OPTIONS = Object.freeze({
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['class', 'style', 'hidden', 'disabled', 'open']
+});
 
 export const WEB_DOM_ADAPTER_DEFAULTS = Object.freeze({
     overlay: true,
@@ -74,6 +80,7 @@ export class WebDOMAdapter {
         this.#seenAttr = 0;
         this.#mutTimer = 0;
         this.#lastHoverKey = '';
+        this.#overlayStyle = null;
         this.#onMove = (event) => {
             this.#pointer.x = event.clientX;
             this.#pointer.y = event.clientY;
@@ -104,6 +111,8 @@ export class WebDOMAdapter {
     #seenAttr;
     #mutTimer;
     #lastHoverKey;
+    /** Last style values written to the overlay. */
+    #overlayStyle;
     #onMove;
     #onResize;
     #onTick;
@@ -118,6 +127,7 @@ export class WebDOMAdapter {
         if (this.core && typeof this.core.subscribe === 'function') {
             this.#unsubscribe = this.core.subscribe((packet) => this.#onCore(packet));
         }
+        this.#reporting = true;
         if (this.overlayEnabled) this.#mountOverlay();
         if (typeof window !== 'undefined') {
             window.addEventListener('mousemove', this.#onMove, true);
@@ -126,18 +136,12 @@ export class WebDOMAdapter {
         }
         if (this.root && typeof MutationObserver !== 'undefined') {
             this.#observer = new MutationObserver(this.#onMutate);
-            this.#observer.observe(this.root, {
-                childList: true,
-                subtree: true,
-                attributes: true,
-                attributeFilter: ['class', 'style', 'hidden', 'disabled', 'open']
-            });
+            this.#observer.observe(this.root, OBSERVE_OPTIONS);
         }
         if (this.autoTick && typeof requestAnimationFrame === 'function') {
             this.#rafId = requestAnimationFrame(this.#onTick);
         }
 
-        this.#reporting = true;
         this.core?.registerAdapter('dom', {
             label: 'DOM',
             enabled: true,
@@ -178,24 +182,41 @@ export class WebDOMAdapter {
             window.removeEventListener('scroll', this.#onResize, true);
         }
         this.#unmountOverlay();
+        this.hover = null;
+        this.#lastHoverKey = '';
+        this.#lastPump = 0;
+        this.#fps = 0;
+        this.#pointer = { x: 0, y: 0, dirty: false };
+        this.#mutAdded = 0;
+        this.#mutRemoved = 0;
+        this.#mutAttr = 0;
+        this.#seenAdded = 0;
+        this.#seenRemoved = 0;
+        this.#seenAttr = 0;
         return this;
     }
 
     /** @param {ParentNode | null} root */
     setRoot(root) {
         this.root = root;
-        if (this.#attached && this.#observer && root) {
-            this.#observer.disconnect();
-            this.#observer.observe(root, {
-                childList: true,
-                subtree: true,
-                attributes: true,
-                attributeFilter: ['class', 'style', 'hidden', 'disabled', 'open']
-            });
+        if (this.#observer) this.#observer.disconnect();
+        if (!root) {
+            this.#observer = null;
+        } else if (this.#attached && typeof MutationObserver !== 'undefined') {
+            if (!this.#observer) this.#observer = new MutationObserver(this.#onMutate);
+            this.#observer.observe(root, OBSERVE_OPTIONS);
         }
+        if (this.hover && !this.#rootHolds(this.hover)) this.hover = null;
         return this;
     }
 
+    #rootHolds(node) {
+        const root = this.root;
+        if (!root) return false;
+        if (typeof document !== 'undefined' && root === document) return true;
+        return node === root || Boolean(root.contains?.(node));
+    }
+
     /**
      * Box model of the hover and watched nodes, layout problems under root,
      * and the latest mutation counts. Returns null when detached.
@@ -311,6 +332,7 @@ export class WebDOMAdapter {
                 this.#lastHoverKey = '';
                 this.core.sendData('state', { source: this.source, key: 'hover', value: '—' });
                 this.core.sendData('state', { source: this.source, key: 'box', value: '—' });
+                this.core.sendData('state', { source: this.source, key: 'display', value: '—' });
             }
             return;
         }
@@ -341,7 +363,7 @@ export class WebDOMAdapter {
     }
 
     #queueMutations(records) {
-        if (this.frozen) return;
+        if (this.frozen || !this.#reporting) return;
         for (let i = 0; i < records.length; i++) {
             const rec = records[i];
             if (isBeeChrome(rec.target)) continue;
@@ -433,12 +455,14 @@ export class WebDOMAdapter {
         canvas.style.margin = '0';
         document.body.appendChild(canvas);
         this.#overlay = canvas;
+        this.#overlayStyle = null;
         this.#syncOverlay();
     }
 
     #unmountOverlay() {
         if (this.#overlay?.parentNode) this.#overlay.parentNode.removeChild(this.#overlay);
         this.#overlay = null;
+        this.#overlayStyle = null;
     }
 
     #syncOverlay() {
@@ -447,12 +471,22 @@ export class WebDOMAdapter {
         const dpr = Math.min(window.devicePixelRatio || 1, 2);
         const w = window.innerWidth;
         const h = window.innerHeight;
-        canvas.style.width = `${w}px`;
-        canvas.style.height = `${h}px`;
-        canvas.width = Math.round(w * dpr);
-        canvas.height = Math.round(h * dpr);
+        // Assigning width/height clears and reallocates the bitmap: only when they change.
+        const bitmapW = Math.round(w * dpr);
+        const bitmapH = Math.round(h * dpr);
+        if (canvas.width !== bitmapW) canvas.width = bitmapW;
+        if (canvas.height !== bitmapH) canvas.height = bitmapH;
         const hidden = !this.#reporting || (this.core && this.core.visible === false);
-        canvas.style.display = hidden ? 'none' : 'block';
+        const next = {
+            width: `${w}px`,
+            height: `${h}px`,
+            display: hidden ? 'none' : 'block'
+        };
+        const prev = this.#overlayStyle;
+        for (const key of Object.keys(next)) {
+            if (!prev || prev[key] !== next[key]) canvas.style[key] = next[key];
+        }
+        this.#overlayStyle = next;
     }
 
     #enable() {
@@ -462,6 +496,11 @@ export class WebDOMAdapter {
 
     #disable() {
         this.#reporting = false;
+        if (this.#mutTimer && typeof clearTimeout === 'function') clearTimeout(this.#mutTimer);
+        this.#mutTimer = 0;
+        this.#mutAdded = 0;
+        this.#mutRemoved = 0;
+        this.#mutAttr = 0;
         this.#syncOverlay();
     }
 
@@ -481,6 +520,7 @@ function isBeeChrome(node) {
         if (tag === 'BEE-LADYBUG-OVERLAY') return true;
         if (el.hasAttribute?.('data-bee-ladybug-dom')) return true;
         if (el.hasAttribute?.('data-bee-ladybug-canvas')) return true;
+        if (el.hasAttribute?.('data-bee-ladybug-css')) return true;
         el = el.parentElement;
     }
     return false;

package/src/core/BeeLadybugCore.js

@@ -10,7 +10,7 @@ import { UIOverlay } from './UIOverlay.js';
 import { buildAssistantSnapshot, normalizeAssistant } from './AiAssistant.js';
 import { exportReport as writeReport } from './ReportExporter.js';
 
-export const BEE_LADYBUG_VERSION = '0.6.2';
+export const BEE_LADYBUG_VERSION = '0.6.4';
 
 export const CORE_DEFAULTS = Object.freeze({
     toggleKey: 'F2',

package/src/index.d.ts

@@ -356,6 +356,8 @@ export interface WebDOMAdapterOptions {
 
 export const WEB_DOM_ADAPTER_DEFAULTS: Required<Omit<WebDOMAdapterOptions, 'root'>>;
 
+export function domNoiseQuiet(cssEnabled: boolean, frozen: boolean, timeScale: number): boolean;
+
 export class WebDOMAdapter {
     core: BeeLadybugCore | null;
     root: ParentNode | null;

package/src/index.js

@@ -2,7 +2,7 @@ export { BeeLadybugCore, BEE_LADYBUG_VERSION, CORE_DEFAULTS, WELL_KNOWN_TYPES, f
 export { exportReport, isReportNoise } from './core/ReportExporter.js';
 export { UIOverlay } from './core/UIOverlay.js';
 export { CanvasAdapter, CANVAS_ADAPTER_DEFAULTS } from './adapters/CanvasAdapter.js';
-export { WebDOMAdapter, WEB_DOM_ADAPTER_DEFAULTS } from './adapters/WebDOMAdapter.js';
+export { WebDOMAdapter, WEB_DOM_ADAPTER_DEFAULTS, domNoiseQuiet } from './adapters/WebDOMAdapter.js';
 export { CSSAdapter, CSS_ADAPTER_DEFAULTS } from './adapters/CSSAdapter.js';
 export { AntAdapter, ANT_ADAPTER_DEFAULTS } from './adapters/AntAdapter.js';
 export { SpiderAdapter, SPIDER_ADAPTER_DEFAULTS } from './adapters/SpiderAdapter.js';