Instrumentar FAB→overlay: logs [CUT-DIAG] y __claudeUsageTracker

El FAB se ve y muestra datos cacheados (47%/40%) pero el click no abre
el overlay. Añado:
- console.log en cada paso del camino click→cache→openOverlayPanel
- try/catch en onFabClick y openOverlayPanel para cazar fallos silenciosos
- pointerdown listener en FAB para diferenciar "click cancelado por
  Claude" de "handler nunca conectado"
- window.__claudeUsageTracker con loadCache, openOverlayPanel,
  forceShowOverlay, etc. para reproducir cada paso desde la consola

Cambios temporales: una vez identificada la causa se retiran.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Carlos Narro
2026-06-04 14:38:32 +02:00
parent 673bd0bced
commit d2bc177376

View File

@@ -815,7 +815,12 @@
<span class="claude-usage-tracker-fab-text">…</span>
`;
fab.addEventListener('click', onFabClick);
// DIAG: si pointerdown fira pero click no, algo está cancelando el click
fab.addEventListener('pointerdown', () => {
console.log('[CUT-DIAG] FAB pointerdown recibido');
});
document.body.appendChild(fab);
console.log('[CUT-DIAG] FAB inyectado en DOM. id:', fab.id, 'parent:', fab.parentElement?.tagName);
loadCache().then(updateFabState);
}
@@ -837,18 +842,28 @@
else fab.classList.remove('claude-usage-tracker-fab--hidden');
}
async function onFabClick() {
async function onFabClick(event) {
console.log('[CUT-DIAG] onFabClick entrada, event:', event?.type, 'target:', event?.target?.tagName);
try {
const cache = await loadCache();
console.log('[CUT-DIAG] cache cargada:', cache ? 'OK pageData=' + !!cache.pageData + ' dailyData=' + !!cache.dailyData : 'null');
openOverlayPanel(cache);
// Auto-refresh si la caché está rancia
const ov = document.getElementById(OVERLAY_ID);
console.log('[CUT-DIAG] overlay tras openOverlayPanel: existe=' + !!ov,
ov ? 'display=' + getComputedStyle(ov).display + ' zIndex=' + getComputedStyle(ov).zIndex + ' opacity=' + getComputedStyle(ov).opacity : '');
const ageMin = cache ? cacheAgeMin(cache.scrapedAt) : Infinity;
if (ageMin > CACHE_TTL_MS / 60000) {
refreshInBackground('overlay-stale');
}
} catch (e) {
console.error('[CUT-DIAG] onFabClick ERROR:', e);
}
}
// -------- Overlay propio --------
function openOverlayPanel(cache) {
console.log('[CUT-DIAG] openOverlayPanel called, cache válida:', !!(cache && cache.pageData));
try {
closeOverlayPanel();
const overlay = document.createElement('div');
overlay.id = OVERLAY_ID;
@@ -889,6 +904,10 @@
document.body.appendChild(overlay);
document.addEventListener('keydown', overlayEscapeHandler);
console.log('[CUT-DIAG] overlay appended OK. body.lastChild.id=', document.body.lastChild?.id);
} catch (e) {
console.error('[CUT-DIAG] openOverlayPanel ERROR:', e);
}
}
function overlayEscapeHandler(e) {
@@ -1054,6 +1073,30 @@
}, 500);
}
// Exposición para depuración manual desde la consola
window.__claudeUsageTracker = {
version: 'debug-fab-click',
loadCache,
saveCache,
openOverlayPanel,
closeOverlayPanel,
refreshInBackground,
findUsageDialog,
isUsageDialogOpen,
parsePageData,
injectFloatingButton,
updateFabState,
fabExists: () => !!document.getElementById(FAB_ID),
overlayExists: () => !!document.getElementById(OVERLAY_ID),
forceShowOverlay: async () => {
const cache = await loadCache();
console.log('[CUT-DIAG forceShowOverlay] cache:', cache);
openOverlayPanel(cache);
return !!document.getElementById(OVERLAY_ID);
}
};
console.log('[CUT-DIAG] window.__claudeUsageTracker expuesto. Métodos:', Object.keys(window.__claudeUsageTracker).join(', '));
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', bootstrap);
} else {