From 9068abfe9c50a7a9aba928fd33b131c5fdac1eb2 Mon Sep 17 00:00:00 2001
From: renato97 <renato97@gitea.cbcren.online>
Date: Tue, 4 Nov 2025 05:06:43 +0000
Subject: [PATCH] Fix floating progress popup display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎨 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
---
 content.js | 52 ++++++++++++++++++++++++++++++----------------------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/content.js b/content.js
index 170ea3a..4269cc0 100644
--- a/content.js
+++ b/content.js
@@ -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;
   }