Redesign Electron updater UI and restrict updates to dev mode

Revamps the Electron update section in settings with a new UI, status banner, and clearer messaging. The updater logic is now only available in development mode; the main process disables update attempts in packaged builds. Updates to the renderer and main process ensure users on Steam or packaged builds are informed that updates are handled externally, while developers can check and install Electron updates during development.

main.js

@@ -920,7 +920,9 @@ ipcMain.handle('get-app-info', () => {
     node: process.versions.node,
     v8: process.versions.v8,
     platform: process.platform,
-    arch: process.arch
+    arch: process.arch,
+    isPackaged: app.isPackaged,
+    isDevelopment: !app.isPackaged
   };
 });
 
@@ -1392,48 +1394,88 @@ ipcMain.handle('get-electron-versions', async (event, buildType = 'stable') => {
 });
 
 ipcMain.handle('upgrade-electron', async (event, buildType = 'stable') => {
+  const https = require('https');
   const { exec } = require('child_process');
-  const packageName = buildType === 'nightly' ? 'electron-nightly' : 'electron';
+
+  console.log('[ELECTRON-UPGRADE] Checking environment...');
+  console.log('[ELECTRON-UPGRADE] app.isPackaged:', app.isPackaged);
+  console.log('[ELECTRON-UPGRADE] __dirname:', __dirname);
+  console.log('[ELECTRON-UPGRADE] process.resourcesPath:', process.resourcesPath);
+
+  // For packaged apps (like win-unpacked), we can't use npm
+  // This feature is only for development with `npm start`
+  // Steam users will get updates through Steam
 
   return new Promise((resolve) => {
-    // First, remove the other electron package if switching types
+    resolve({
-    const otherPackage = buildType === 'nightly' ? 'electron' : 'electron-nightly';
+      success: false,
+      error: 'Electron updates are not available in packaged builds',
+      message: 'For Steam users: Updates are delivered through Steam.\n\nFor developers: Use "npm start" to enable Electron updates during development.'
+    });
+  });
+
+  /* Keeping this code commented for future reference if needed
+  const packageName = buildType === 'nightly' ? 'electron-nightly' : 'electron';
+  const packageJsonPath = path.join(__dirname, 'package.json');
+  const nodeModulesPath = path.join(__dirname, 'node_modules');
+
+  return new Promise((resolve) => {
+    // Check if we're in a real development environment
+    if (app.isPackaged || !fs.existsSync(packageJsonPath) || !fs.existsSync(nodeModulesPath)) {
+      resolve({
+        success: false,
+        error: 'Electron updates are only available in development mode',
+        message: 'Run the app with "npm start" to enable Electron updates.'
+      });
+      return;
+    }
 
     // Run npm install to upgrade the package
     const command = `npm install --save-dev ${packageName}@latest`;
 
+    console.log('[ELECTRON-UPGRADE] Running command:', command);
+    console.log('[ELECTRON-UPGRADE] Working directory:', __dirname);
+
     exec(command,
-      { cwd: __dirname, maxBuffer: 10 * 1024 * 1024 },
+      {
+        cwd: __dirname,
+        maxBuffer: 10 * 1024 * 1024,
+        shell: true,
+        env: process.env
+      },
       (error, stdout, stderr) => {
         if (error) {
-          console.error('Upgrade failed:', error);
+          console.error('[ELECTRON-UPGRADE] Upgrade failed:', error);
-          console.error('stderr:', stderr);
+          console.error('[ELECTRON-UPGRADE] stderr:', stderr);
+
+          let errorMsg = error.message;
+          if (errorMsg.includes('ENOENT')) {
+            errorMsg = 'npm command not found. Please ensure Node.js and npm are installed.';
+          } else if (errorMsg.includes('EACCES')) {
+            errorMsg = 'Permission denied. Try running as administrator.';
+          }
+
           resolve({
             success: false,
-            error: error.message,
+            error: errorMsg,
             message: 'Failed to upgrade Electron'
           });
         } else {
-          console.log('Upgrade output:', stdout);
+          console.log('[ELECTRON-UPGRADE] Upgrade output:', stdout);
-          console.log('Upgrade stderr:', stderr);
+          if (stderr) console.log('[ELECTRON-UPGRADE] stderr:', stderr);
 
-          // Update package.json to remove the other electron variant if needed
+          // Clean up alternate package
           try {
-            const packageJsonPath = path.join(__dirname, 'package.json');
             const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
-            
-            // Remove electron if we're upgrading to nightly
             if (buildType === 'nightly' && packageJson.devDependencies?.electron) {
               delete packageJson.devDependencies.electron;
               fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
-            }
+            } else if (buildType === 'stable' && packageJson.devDependencies?.['electron-nightly']) {
-            // Remove electron-nightly if we're upgrading to stable
-            else if (buildType === 'stable' && packageJson.devDependencies?.['electron-nightly']) {
               delete packageJson.devDependencies['electron-nightly'];
               fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
             }
           } catch (err) {
-            console.warn('Could not clean up alternate electron package:', err);
+            console.warn('[ELECTRON-UPGRADE] Could not clean up alternate package:', err);
           }
 
           resolve({
@@ -1444,6 +1486,7 @@ ipcMain.handle('upgrade-electron', async (event, buildType = 'stable') => {
       }
     );
   });
+  */
 });
 
 ipcMain.handle('restart-app', async (event) => {

renderer/settings.html

@@ -270,27 +270,45 @@
         </div>
 
         <div class="customization-group">
-          <h3>Electron Upgrade</h3>
+          <h3>Security Updates</h3>
+          <p class="note" style="margin-bottom: 12px;">Nebula Browser is distributed via Steam, but the Electron runtime can be updated separately for security patches and performance improvements.</p>
+
           <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="display: flex; gap: 8px; align-items: center;">
+            <!-- Update Status Banner -->
-              <label for="electron-version-select" style="min-width: 100px;">Select Build:</label>
+            <div id="electron-update-banner" style="display: none; padding: 12px; border-radius: 8px; background: rgba(123, 46, 255, 0.1); border: 1px solid rgba(123, 46, 255, 0.3);">
-              <select id="electron-version-select" style="flex: 1; padding: 8px; border-radius: 4px; background-color: var(--secondary, #00C6FF); color: var(--bg, #121418); border: none; cursor: pointer;">
+              <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
-                <option value="stable">Stable</option>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <option value="nightly">Nightly</option>
+                  <path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83"/>
-              </select>
+                </svg>
+                <span id="electron-update-status" style="font-weight: 600;">Checking for updates...</span>
               </div>
-            <div id="electron-versions-container" style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
+              <div id="electron-update-details" style="font-size: 0.9em; opacity: 0.85; margin-bottom: 8px;"></div>
-              <span id="electron-loading" style="color: #888;">Loading available versions...</span>
+              <div id="electron-update-progress" style="display: none; margin-bottom: 8px;">
-              <div id="electron-version-info" style="display: none;">
+                <div style="width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden;">
-                <span id="electron-version-text"></span>
+                  <div id="electron-update-progress-bar" style="width: 0%; height: 100%; background: var(--accent, #7B2EFF); transition: width 0.3s;"></div>
                 </div>
+                <div id="electron-update-progress-text" style="font-size: 0.85em; margin-top: 4px; opacity: 0.7;">Downloading and installing...</div>
               </div>
               <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+                <button id="electron-upgrade-btn" style="display: none;">Install Update</button>
                 <button id="check-electron-versions">Check for Updates</button>
-              <button id="upgrade-electron-btn" style="display: none;" disabled>Upgrade Electron</button>
-              <span id="electron-status-text" style="display: none; color: #888; align-self: center;"></span>
               </div>
-            <p class="note" style="margin-top: 8px;">Upgrading Electron will require the application to restart.</p>
+            </div>
+
+            <!-- Version Info -->
+            <div style="font-size: 0.9em; opacity: 0.8;">
+              <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px;">
+                <label for="electron-version-select" style="min-width: 100px;">Update Channel:</label>
+                <select id="electron-version-select" style="flex: 1; padding: 8px; border-radius: 4px; background-color: var(--secondary, #00C6FF); color: var(--bg, #121418); border: none; cursor: pointer;">
+                  <option value="stable">Stable (Recommended)</option>
+                  <option value="nightly">Nightly (Latest Features)</option>
+                </select>
+              </div>
+              <div id="electron-version-info-text" style="margin-top: 8px;">
+                <p><strong>Current Electron:</strong> <span id="electron-current-version">Loading...</span></p>
+                <p><strong>Nebula Browser:</strong> <span id="about-app-version-copy">Loading...</span></p>
+              </div>
+            </div>
           </div>
         </div>
 

renderer/settings.js

@@ -355,7 +355,7 @@ async function populateAbout() {
 // Populate about info after DOM is ready
 window.addEventListener('DOMContentLoaded', () => {
   populateAbout();
-  setupElectronUpgrade();
+  setupElectronUpdater();
 
   // Refresh about info when About tab is clicked
   const aboutTabBtn = document.getElementById('tab-about');
@@ -364,165 +364,220 @@ window.addEventListener('DOMContentLoaded', () => {
       // Refresh after a short delay to allow tab transition
       setTimeout(() => {
         populateAbout();
+        // Auto-check for updates when About tab is opened
+        const checkBtn = document.getElementById('check-electron-versions');
+        if (checkBtn && !checkBtn.disabled) {
+          checkBtn.click();
+        }
       }, 100);
     });
   }
 });
 
-// Electron upgrade feature setup
+// Electron updater feature setup (for security updates)
-async function setupElectronUpgrade() {
+async function setupElectronUpdater() {
-  const versionSelect = document.getElementById('electron-version-select');
+  const securityUpdatesSection = document.querySelector('.customization-group:has(#electron-update-banner)');
+  const banner = document.getElementById('electron-update-banner');
+  const statusSpan = document.getElementById('electron-update-status');
+  const detailsDiv = document.getElementById('electron-update-details');
+  const progressDiv = document.getElementById('electron-update-progress');
   const checkBtn = document.getElementById('check-electron-versions');
-  const upgradeBtn = document.getElementById('upgrade-electron-btn');
+  const upgradeBtn = document.getElementById('electron-upgrade-btn');
-  const loadingSpan = document.getElementById('electron-loading');
+  const versionSelect = document.getElementById('electron-version-select');
-  const versionContainer = document.getElementById('electron-versions-container');
+  const currentVersionSpan = document.getElementById('electron-current-version');
-  const versionInfo = document.getElementById('electron-version-info');
+  const appVersionSpan = document.getElementById('about-app-version-copy');
-  const versionText = document.getElementById('electron-version-text');
-  const statusText = document.getElementById('electron-status-text');
 
-  if (!checkBtn || !versionSelect) return;
-
-  let availableVersion = null;
-  let currentVersion = null;
-
-  const checkVersions = async () => {
-    try {
   if (!ipc) {
-        showStatus('IPC not available');
+    console.warn('[ELECTRON-UPDATER] IPC not available');
     return;
   }
 
+  // Check if app is packaged - if so, hide the entire Security Updates section
+  try {
+    const appInfo = await ipc.invoke('get-app-info');
+    console.log('[ELECTRON-UPDATER] App info:', appInfo);
+
+    if (appInfo && appInfo.isPackaged) {
+      console.log('[ELECTRON-UPDATER] Packaged build detected - hiding Security Updates section');
+      if (securityUpdatesSection) {
+        securityUpdatesSection.style.display = 'none';
+      }
+      return;
+    }
+
+    console.log('[ELECTRON-UPDATER] Development mode - showing Security Updates section');
+  } catch (err) {
+    console.error('[ELECTRON-UPDATER] Failed to get app info:', err);
+    // On error, hide the section to be safe
+    if (securityUpdatesSection) {
+      securityUpdatesSection.style.display = 'none';
+    }
+    return;
+  }
+
+  let availableVersion = null;
+  let currentVersion = null;
+  let isUpgrading = false;
+
+  // Get current app version
+  try {
+    const info = await window.aboutAPI?.getInfo();
+    if (info && appVersionSpan) {
+      appVersionSpan.textContent = info.appVersion || 'Unknown';
+    }
+  } catch (err) {
+    console.error('[ELECTRON-UPDATER] Failed to get app version:', err);
+  }
+
+  // Check for Electron updates
+  const checkVersions = async () => {
+    if (isUpgrading) return;
+
+    try {
       checkBtn.disabled = true;
-      loadingSpan.style.display = 'block';
+      banner.style.display = 'block';
-      versionInfo.style.display = 'none';
+      statusSpan.textContent = 'Checking for updates...';
-      statusText.style.display = 'none';
+      detailsDiv.textContent = '';
-      statusText.textContent = '';
+      progressDiv.style.display = 'none';
+      upgradeBtn.style.display = 'none';
+      banner.style.borderColor = 'rgba(123, 46, 255, 0.3)';
+      banner.style.background = 'rgba(123, 46, 255, 0.1)';
 
       const buildType = versionSelect.value;
       const result = await ipc.invoke('get-electron-versions', buildType);
 
       if (result.error) {
-        statusText.textContent = `Error: ${result.error}`;
+        statusSpan.textContent = 'Update check failed';
-        statusText.style.display = 'block';
+        detailsDiv.textContent = result.error;
-        showStatus(`Failed to check versions: ${result.error}`);
+        banner.style.borderColor = 'rgba(244, 67, 54, 0.5)';
+        banner.style.background = 'rgba(244, 67, 54, 0.1)';
+        showStatus(`Failed: ${result.error}`);
       } else {
         availableVersion = result.available;
         currentVersion = result.current;
 
-        if (availableVersion) {
+        if (currentVersionSpan) {
-          versionText.textContent = `Available: ${availableVersion} | Current: ${currentVersion}`;
+          currentVersionSpan.textContent = currentVersion || 'Unknown';
-          versionInfo.style.display = 'block';
+        }
 
-          // Enable upgrade button only if there's a newer version
         const isNewer = compareVersions(availableVersion, currentVersion) > 0;
-          upgradeBtn.disabled = !isNewer;
-          upgradeBtn.style.display = 'block';
 
         if (isNewer) {
-            statusText.textContent = 'Update available!';
+          statusSpan.textContent = 'Security update available';
-            statusText.style.color = '#4CAF50';
+          detailsDiv.textContent = `Electron ${availableVersion} is available (you have ${currentVersion}). This update includes security patches and performance improvements.`;
+          upgradeBtn.style.display = 'inline-block';
+          upgradeBtn.disabled = false;
+          banner.style.borderColor = 'rgba(76, 175, 80, 0.5)';
+          banner.style.background = 'rgba(76, 175, 80, 0.1)';
+          showStatus(`Update available: ${availableVersion}`);
         } else {
-            statusText.textContent = 'You are running the latest version.';
+          statusSpan.textContent = 'Up to date';
-            statusText.style.color = '#888';
+          detailsDiv.textContent = `You are running the latest ${buildType} version of Electron (${currentVersion}).`;
-          }
+          upgradeBtn.style.display = 'none';
-          statusText.style.display = 'block';
+          banner.style.borderColor = 'rgba(100, 100, 100, 0.3)';
-          showStatus(`Current: ${currentVersion} | Latest ${buildType}: ${availableVersion}`);
+          banner.style.background = 'rgba(100, 100, 100, 0.1)';
+          showStatus('Electron is up to date');
         }
       }
-
+    } catch (err) {
+      console.error('[ELECTRON-UPDATER] Check failed:', err);
+      statusSpan.textContent = 'Update check failed';
+      detailsDiv.textContent = err.message;
+      banner.style.borderColor = 'rgba(244, 67, 54, 0.5)';
+      banner.style.background = 'rgba(244, 67, 54, 0.1)';
+      showStatus('Check failed');
+    } finally {
       checkBtn.disabled = false;
-      loadingSpan.style.display = 'none';
-    } catch (error) {
-      console.error('Error checking versions:', error);
-      statusText.textContent = `Error: ${error.message}`;
-      statusText.style.display = 'block';
-      showStatus('Failed to check versions');
-      checkBtn.disabled = false;
-      loadingSpan.style.display = 'none';
     }
   };
 
+  // Install Electron update
   const handleUpgrade = async () => {
+    if (isUpgrading) return;
+
     const buildType = versionSelect.value;
     if (!availableVersion) {
-      showStatus('No version information available');
+      showStatus('No update available');
       return;
     }
 
     const confirmed = confirm(
-      `Upgrade Electron from ${currentVersion} to ${availableVersion} (${buildType})?\n\nThe application will restart automatically.`
+      `Update Electron from ${currentVersion} to ${availableVersion}?\n\nThis will download and install the ${buildType} version, then restart the application.\n\nThis process may take a few minutes.`
     );
 
     if (!confirmed) return;
 
     try {
+      isUpgrading = true;
       upgradeBtn.disabled = true;
       checkBtn.disabled = true;
       versionSelect.disabled = true;
-      statusText.textContent = 'Downloading and installing...';
+
-      statusText.style.color = '#FFC107';
+      statusSpan.textContent = 'Installing update...';
-      statusText.style.display = 'block';
+      detailsDiv.textContent = `Downloading and installing Electron ${availableVersion}. Please wait...`;
-      showStatus('Starting Electron upgrade...');
+      progressDiv.style.display = 'block';
+      banner.style.borderColor = 'rgba(255, 193, 7, 0.5)';
+      banner.style.background = 'rgba(255, 193, 7, 0.1)';
+      showStatus('Installing Electron update...');
 
       const result = await ipc.invoke('upgrade-electron', buildType);
 
       if (result.success) {
-        statusText.textContent = result.message;
+        statusSpan.textContent = 'Update installed';
-        statusText.style.color = '#4CAF50';
+        detailsDiv.textContent = 'Electron has been updated successfully. The application will restart now.';
-        showStatus(result.message);
+        progressDiv.style.display = 'none';
+        banner.style.borderColor = 'rgba(76, 175, 80, 0.5)';
+        banner.style.background = 'rgba(76, 175, 80, 0.1)';
+        showStatus('Update complete - restarting...');
 
-        // Restart the app after a short delay
+        // Restart the app
         setTimeout(() => {
           if (ipc) {
-            ipc.invoke('restart-app').catch(err => console.error('Restart failed:', err));
+            ipc.invoke('restart-app').catch(err => {
+              console.error('Restart failed:', err);
+              showStatus('Please restart the app manually');
+            });
           }
-        }, 1500);
+        }, 2000);
       } else {
-        statusText.textContent = `Failed: ${result.error}`;
+        throw new Error(result.error || 'Upgrade failed');
-        statusText.style.color = '#F44336';
-        showStatus(`Upgrade failed: ${result.error}`);
-        upgradeBtn.disabled = false;
-        checkBtn.disabled = false;
-        versionSelect.disabled = false;
       }
-    } catch (error) {
+    } catch (err) {
-      console.error('Upgrade error:', error);
+      console.error('[ELECTRON-UPDATER] Upgrade failed:', err);
-      statusText.textContent = `Error: ${error.message}`;
+      statusSpan.textContent = 'Update failed';
-      statusText.style.color = '#F44336';
+      detailsDiv.textContent = `Failed to install update: ${err.message}`;
-      statusText.style.display = 'block';
+      progressDiv.style.display = 'none';
-      showStatus(`Upgrade error: ${error.message}`);
+      banner.style.borderColor = 'rgba(244, 67, 54, 0.5)';
+      banner.style.background = 'rgba(244, 67, 54, 0.1)';
+      showStatus(`Update failed: ${err.message}`);
+
+      isUpgrading = false;
       upgradeBtn.disabled = false;
       checkBtn.disabled = false;
       versionSelect.disabled = false;
     }
   };
 
+  // Wire up event handlers
+  if (checkBtn) {
     checkBtn.addEventListener('click', checkVersions);
-  upgradeBtn.addEventListener('click', handleUpgrade);
+  }
 
+  if (upgradeBtn) {
+    upgradeBtn.addEventListener('click', handleUpgrade);
+  }
+
+  if (versionSelect) {
     versionSelect.addEventListener('change', () => {
       // Reset UI when build type changes
-    versionInfo.style.display = 'none';
+      banner.style.display = 'none';
       upgradeBtn.style.display = 'none';
       upgradeBtn.disabled = true;
-    statusText.style.display = 'none';
-    loadingSpan.style.display = 'block';
       availableVersion = null;
     });
+  }
+}
 
-  // Auto-refresh about tab and electron versions when this section comes into view
-  const aboutTabBtn = document.getElementById('tab-about');
-  if (aboutTabBtn) {
-    aboutTabBtn.addEventListener('click', () => {
-      setTimeout(() => {
-        // Refresh about info when About tab is clicked
-        populateAbout();
-        // Also refresh electron versions display
-        checkVersions();
-      }, 100);
-    });
-  }
-}
 
 // Helper function to compare semantic versions
 function compareVersions(v1, v2) {