From 9712705f5a266fa0375a3eed6f76a54cd9d9af7b Mon Sep 17 00:00:00 2001 From: OpenClaw Agent Date: Fri, 13 Mar 2026 13:27:16 +0000 Subject: [PATCH] fix: picker element highlight during mousemove The picker shield overlay was blocking elementFromPoint during mousemove, so the highlight class never got applied to actual page elements. Fix: temporarily set shield visibility:hidden during the elementFromPoint call so the cursor position resolves to the real element underneath. Also enhanced the highlight with a subtle background tint for better visual feedback. Closes #3 --- server.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/server.js b/server.js index 794f79d..f5b43d5 100644 --- a/server.js +++ b/server.js @@ -169,7 +169,7 @@ app.get(['/widget.js', BASE + '/widget.js'], (req, res) => { padding:.6rem 1.1rem; color:#e0e0e0; font-size:.85rem; z-index:200000; font-family:'Segoe UI',system-ui,sans-serif; display:none; box-shadow:0 4px 16px rgba(0,0,0,.5); } #_fb-picker-toast.active { display:block; } - ._fb-hover-highlight { outline:2px solid #7c9ef5 !important; outline-offset:2px !important; } + ._fb-hover-highlight { outline:2px solid #7c9ef5 !important; outline-offset:2px !important; background-color:rgba(124,158,245,.08) !important; } \`; document.head.appendChild(style); @@ -310,9 +310,12 @@ app.get(['/widget.js', BASE + '/widget.js'], (req, res) => { // Mousemove on page during picker: highlight hovered element document.addEventListener('mousemove', function(e) { if (!pickerActive) return; + // Temporarily hide the shield so elementFromPoint reaches actual page elements + shield.style.visibility = 'hidden'; var el = document.elementFromPoint(e.clientX, e.clientY); + shield.style.visibility = 'visible'; // Skip our own UI elements - if (!el || el.closest('#_fb-picker-shield') || el.closest('#_fb-picker-toast')) return; + if (!el || el.closest('#_fb-picker-toast')) return; if (pickerHighlighted && pickerHighlighted !== el) { pickerHighlighted.classList.remove('_fb-hover-highlight'); }