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 // Crear popup flotante de progreso
function createFloatingProgressPopup() { function createFloatingProgressPopup() {
console.log('🎨 Creando popup de progreso...');
// Remover popup anterior si existe // Remover popup anterior si existe
const existingPopup = document.getElementById('mass-downloader-progress-popup'); const existingPopup = document.getElementById('mass-downloader-progress-popup');
if (existingPopup) { if (existingPopup) {
console.log('🗑️ Removiendo popup anterior');
existingPopup.remove(); existingPopup.remove();
} }
const popup = document.createElement('div'); const popup = document.createElement('div');
popup.id = 'mass-downloader-progress-popup'; popup.id = 'mass-downloader-progress-popup';
popup.style.cssText = `
position: fixed; // Estilos inline para máxima compatibilidad
top: 50%; popup.style.position = 'fixed';
left: 50%; popup.style.top = '50%';
transform: translate(-50%, -50%); popup.style.left = '50%';
width: 400px; popup.style.transform = 'translate(-50%, -50%)';
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); popup.style.width = '450px';
color: white; popup.style.background = '#667eea';
padding: 25px; popup.style.backgroundImage = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
border-radius: 12px; popup.style.color = 'white';
box-shadow: 0 10px 40px rgba(0,0,0,0.5); popup.style.padding = '30px';
z-index: 10001; popup.style.borderRadius = '15px';
font-family: Arial, sans-serif; popup.style.boxShadow = '0 10px 50px rgba(0,0,0,0.6)';
display: none; 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 = ` popup.innerHTML = `
<div style="text-align: center; margin-bottom: 15px;"> <div style="text-align: center; margin-bottom: 20px;">
<h3 style="margin: 0 0 10px 0; font-size: 18px;">📦 Descargando Manga</h3> <h3 style="margin: 0 0 15px 0; font-size: 20px; font-weight: bold;">📦 Descargando Manga</h3>
<div id="progress-title" style="font-size: 14px; opacity: 0.9; max-height: 40px; overflow: hidden;">Preparando descarga...</div> <div id="progress-title" style="font-size: 16px; font-weight: bold; margin-bottom: 10px;">Preparando...</div>
</div> </div>
<div style="background: rgba(255,255,255,0.3); height: 12px; border-radius: 6px; overflow: hidden;"> <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.3s ease;"></div> <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>
<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-count">0 / 0</span>
<span id="progress-percent">0%</span> <span id="progress-percent">0%</span>
</div> </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); document.body.appendChild(popup);
console.log('✅ Popup agregado al DOM:', popup);
return popup; return popup;
} }