renato97/manga-mass-downloader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix floating progress popup display

Browse Source 
🎨 Popup improvements:
- Changed to inline styles (no cssText) for better compatibility
- Set display: block by default (always visible)
- Increased z-index to 999999 (maximum priority)
- Better styling with backdrop filter
- Added comprehensive console logging for debugging
- Popup now shows immediately when created

Debugging:
- Added logs for popup creation, DOM insertion, and element access
- Better error tracking for popup visibility issues
This commit is contained in:
renato97
2025-11-04 05:06:43 +00:00
parent 121210ca84
commit 9068abfe9c
1 changed files with 30 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
content.js
View File

@@ -11,46 +11,54 @@
// Crear popup flotante de progreso
function createFloatingProgressPopup() {
console.log('🎨 Creando popup de progreso...');
// Remover popup anterior si existe
const existingPopup = document.getElementById('mass-downloader-progress-popup');
if (existingPopup) {
console.log('🗑️ Removiendo popup anterior');
existingPopup.remove();
}
const popup = document.createElement('div');
popup.id = 'mass-downloader-progress-popup';
popup.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
z-index: 10001;
font-family: Arial, sans-serif;
display: none;
`;
// Estilos inline para máxima compatibilidad
popup.style.position = 'fixed';
popup.style.top = '50%';
popup.style.left = '50%';
popup.style.transform = 'translate(-50%, -50%)';
popup.style.width = '450px';
popup.style.background = '#667eea';
popup.style.backgroundImage = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
popup.style.color = 'white';
popup.style.padding = '30px';
popup.style.borderRadius = '15px';
popup.style.boxShadow = '0 10px 50px rgba(0,0,0,0.6)';
popup.style.zIndex = '999999'; // ¡Muy alto!
popup.style.fontFamily = 'Arial, sans-serif';
popup.style.display = 'block'; // Visible por defecto
popup.style.backdropFilter = 'blur(10px)';
popup.innerHTML = `
<div style="text-align: center; margin-bottom: 15px;">
<h3 style="margin: 0 0 10px 0; font-size: 18px;">📦 Descargando Manga</h3>
<div id="progress-title" style="font-size: 14px; opacity: 0.9; max-height: 40px; overflow: hidden;">Preparando descarga...</div>
<div style="text-align: center; margin-bottom: 20px;">
<h3 style="margin: 0 0 15px 0; font-size: 20px; font-weight: bold;">📦 Descargando Manga</h3>
<div id="progress-title" style="font-size: 16px; font-weight: bold; margin-bottom: 10px;">Preparando...</div>
</div>
<div style="background: rgba(255,255,255,0.3); height: 12px; border-radius: 6px; overflow: hidden;">
<div id="progress-bar-fill" style="height: 100%; width: 0%; background: white; transition: width 0.3s ease;"></div>
<div style="background: rgba(255,255,255,0.4); height: 15px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);">
<div id="progress-bar-fill" style="height: 100%; width: 0%; background: white; transition: width 0.4s ease; box-shadow: 0 2px 8px rgba(255,255,255,0.5);"></div>
</div>
<div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px;">
<div style="display: flex; justify-content: space-between; margin-top: 12px; font-size: 14px; font-weight: bold;">
<span id="progress-count">0 / 0</span>
<span id="progress-percent">0%</span>
</div>
<div id="progress-status" style="margin-top: 10px; font-size: 12px; opacity: 0.8; text-align: center;"></div>
<div id="progress-status" style="margin-top: 15px; font-size: 13px; text-align: center; opacity: 0.9;"></div>
`;
console.log('✅ Popup creado, agregando al DOM...');
document.body.appendChild(popup);
console.log('✅ Popup agregado al DOM:', popup);
return popup;
}