pixeldev/feedback-tool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: picker element highlight during mousemove
All checks were successful
Deploy to dev.bl.pixeldev.eu / deploy (push) Successful in 2s
Details

Browse Source 
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
This commit is contained in:
OpenClaw Agent 2026-03-13 13:27:16 +00:00
parent 838e8dbcb7
commit 9712705f5a
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
server.js
View File

@ -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; 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); } 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-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); 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 // Mousemove on page during picker: highlight hovered element
document.addEventListener('mousemove', function(e) { document.addEventListener('mousemove', function(e) {
if (!pickerActive) return; 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); var el = document.elementFromPoint(e.clientX, e.clientY);
shield.style.visibility = 'visible';
// Skip our own UI elements // 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) { if (pickerHighlighted && pickerHighlighted !== el) {
pickerHighlighted.classList.remove('_fb-hover-highlight'); pickerHighlighted.classList.remove('_fb-hover-highlight');
} }