andrew
6596c13d4d
Introduces an About tab in the settings page displaying app, runtime, and system diagnostics. Adds IPC and preload bridge for about info, clipboard copy functionality, and external navigation for GitHub and Help links. Updates site-history.json with relevant links.
740 lines
26 KiB
HTML
740 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Settings</title>
|
|
<link rel="stylesheet" href="settings.css" />
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚙️</text></svg>">
|
|
<style>
|
|
body { font-family: sans-serif; padding: 20px; }
|
|
section { margin-bottom: 30px; }
|
|
h2 { border-bottom: 1px solid #ccc; padding-bottom: 5px; }
|
|
h3 { margin: 15px 0 10px 0; color: var(--accent); font-size: 1.1rem; }
|
|
ul { list-style: none; padding-left: 0; }
|
|
li { padding: 5px 0; border-bottom: 1px solid #eee; }
|
|
.debug-info { background: #f0f0f0; padding: 10px; margin: 10px 0; font-family: monospace; font-size: 12px; }
|
|
|
|
/* Customization Styles */
|
|
.customization-group {
|
|
margin-bottom: 25px;
|
|
padding: 15px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.theme-selector {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: 15px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.theme-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 8px;
|
|
background: transparent;
|
|
border: 2px solid transparent;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
color: var(--text);
|
|
text-align: center;
|
|
font-size: 0.85rem;
|
|
min-height: 90px;
|
|
}
|
|
|
|
.theme-btn:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.theme-btn.active {
|
|
border-color: var(--primary);
|
|
background: rgba(123, 46, 255, 0.1);
|
|
}
|
|
|
|
.custom-theme-btn {
|
|
border: 2px dashed rgba(255, 255, 255, 0.3) !important;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.custom-theme-btn:hover {
|
|
border-color: var(--accent) !important;
|
|
opacity: 1;
|
|
}
|
|
|
|
.custom-theme-btn.active {
|
|
border-color: var(--primary) !important;
|
|
background: rgba(123, 46, 255, 0.15) !important;
|
|
opacity: 1;
|
|
}
|
|
|
|
.theme-preview {
|
|
width: 60px;
|
|
height: 40px;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.theme-preview::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 4px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.color-controls {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.color-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.color-group label {
|
|
font-size: 0.9rem;
|
|
color: var(--text);
|
|
}
|
|
|
|
.color-group input[type="color"] {
|
|
width: 100%;
|
|
height: 40px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.layout-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.layout-options label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.layout-options label:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.logo-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.logo-options label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.logo-options input[type="text"] {
|
|
flex: 1;
|
|
padding: 8px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 4px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.theme-management {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.theme-management button {
|
|
padding: 8px 16px;
|
|
background: var(--primary);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.theme-management button:hover {
|
|
background: var(--accent);
|
|
}
|
|
|
|
.theme-management button:last-child {
|
|
background: #e53e3e;
|
|
}
|
|
|
|
.theme-management button:last-child:hover {
|
|
background: #c53030;
|
|
}
|
|
|
|
.preview-container {
|
|
background: var(--dark-blue);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.preview-home {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 20px;
|
|
background: var(--bg);
|
|
border-radius: 8px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.preview-logo {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.preview-text {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.preview-search {
|
|
width: 60%;
|
|
height: 40px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.preview-bookmarks {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.preview-bookmark {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: var(--accent);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* About actions */
|
|
.about-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.github-btn, .help-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
background: var(--primary);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease;
|
|
}
|
|
.github-btn:hover, .help-btn:hover {
|
|
background: var(--accent);
|
|
}
|
|
.github-btn svg, .help-btn svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
fill: currentColor;
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container" role="application">
|
|
<aside class="sidebar" aria-label="Settings categories">
|
|
<h1>⚙️ Settings</h1>
|
|
<nav class="tabs" role="tablist">
|
|
<button class="tab-link active" role="tab" aria-selected="true" aria-controls="panel-general" id="tab-general" data-tab="general">General</button>
|
|
<button class="tab-link" role="tab" aria-selected="false" aria-controls="panel-appearance" id="tab-appearance" data-tab="appearance">Appearance</button>
|
|
<button class="tab-link" role="tab" aria-selected="false" aria-controls="panel-history" id="tab-history" data-tab="history">History</button>
|
|
<button class="tab-link" role="tab" aria-selected="false" aria-controls="panel-about" id="tab-about" data-tab="about">About</button>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="content">
|
|
<!-- General Panel -->
|
|
<section class="tab-panel active" id="panel-general" role="tabpanel" aria-labelledby="tab-general">
|
|
<h2>General</h2>
|
|
<div class="setting-group">
|
|
<label for="clear-data-btn">Clear All Cookies & Data</label>
|
|
<button id="clear-data-btn">Clear Data</button>
|
|
</div>
|
|
<p class="note">Settings are stored locally on this device.</p>
|
|
<div class="debug-info" id="debug-info">Loading debug info...</div>
|
|
</section>
|
|
|
|
<!-- Appearance Panel -->
|
|
<section class="tab-panel" id="panel-appearance" role="tabpanel" aria-labelledby="tab-appearance">
|
|
<h2>🎨 Appearance</h2>
|
|
<!-- Theme Selection -->
|
|
<div class="customization-group">
|
|
<h3>Theme Presets</h3>
|
|
<div class="theme-selector">
|
|
<button id="theme-default" class="theme-btn" data-theme="default">
|
|
<div class="theme-preview" style="background: linear-gradient(145deg, #121418, #1B1035);"></div>
|
|
<span>Default</span>
|
|
</button>
|
|
<button id="theme-ocean" class="theme-btn" data-theme="ocean">
|
|
<div class="theme-preview" style="background: linear-gradient(145deg, #1a365d, #2c5282);"></div>
|
|
<span>Ocean</span>
|
|
</button>
|
|
<button id="theme-forest" class="theme-btn" data-theme="forest">
|
|
<div class="theme-preview" style="background: linear-gradient(145deg, #1a202c, #2d3748);"></div>
|
|
<span>Forest</span>
|
|
</button>
|
|
<button id="theme-sunset" class="theme-btn" data-theme="sunset">
|
|
<div class="theme-preview" style="background: linear-gradient(145deg, #744210, #c05621);"></div>
|
|
<span>Sunset</span>
|
|
</button>
|
|
<button id="theme-cyberpunk" class="theme-btn" data-theme="cyberpunk">
|
|
<div class="theme-preview" style="background: linear-gradient(145deg, #0a0a0a, #2a0a3a, #1a0520);"></div>
|
|
<span>Cyberpunk</span>
|
|
</button>
|
|
<button id="theme-midnight-rose" class="theme-btn" data-theme="midnight-rose">
|
|
<div class="theme-preview" style="background: linear-gradient(145deg, #1c1820, #3d3046);"></div>
|
|
<span>Midnight Rose</span>
|
|
</button>
|
|
<button id="theme-arctic-ice" class="theme-btn" data-theme="arctic-ice">
|
|
<div class="theme-preview" style="background: linear-gradient(145deg, #f0f8ff, #d1e7ff);"></div>
|
|
<span>Arctic Ice</span>
|
|
</button>
|
|
<button id="theme-cherry-blossom" class="theme-btn" data-theme="cherry-blossom">
|
|
<div class="theme-preview" style="background: linear-gradient(145deg, #fff5f8, #ffd4db);"></div>
|
|
<span>Cherry Blossom</span>
|
|
</button>
|
|
<button id="theme-cosmic-purple" class="theme-btn" data-theme="cosmic-purple">
|
|
<div class="theme-preview" style="background: linear-gradient(145deg, #0f0524, #2d1b69, #4b0082);"></div>
|
|
<span>Cosmic Purple</span>
|
|
</button>
|
|
<button id="theme-emerald-dream" class="theme-btn" data-theme="emerald-dream">
|
|
<div class="theme-preview" style="background: linear-gradient(145deg, #0d2818, #2d5a44);"></div>
|
|
<span>Emerald Dream</span>
|
|
</button>
|
|
<button id="theme-mocha-coffee" class="theme-btn" data-theme="mocha-coffee">
|
|
<div class="theme-preview" style="background: linear-gradient(145deg, #3c2414, #5d3a26);"></div>
|
|
<span>Mocha Coffee</span>
|
|
</button>
|
|
<button id="theme-lavender-fields" class="theme-btn" data-theme="lavender-fields">
|
|
<div class="theme-preview" style="background: linear-gradient(145deg, #f8f4ff, #e6d8ff);"></div>
|
|
<span>Lavender Fields</span>
|
|
</button>
|
|
<button id="theme-custom" class="theme-btn custom-theme-btn" data-theme="custom" style="display: none;">
|
|
<div class="theme-preview" style="background: linear-gradient(145deg, var(--bg), var(--gradient-color));"></div>
|
|
<span>Custom</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Color Customization -->
|
|
<div class="customization-group">
|
|
<h3>Custom Colors</h3>
|
|
<div class="color-controls">
|
|
<div class="color-group">
|
|
<label for="bg-color">Background:</label>
|
|
<input type="color" id="bg-color" value="#121418">
|
|
</div>
|
|
<div class="color-group">
|
|
<label for="gradient-color">Gradient End:</label>
|
|
<input type="color" id="gradient-color" value="#1B1035">
|
|
</div>
|
|
<div class="color-group">
|
|
<label for="accent-color">Accent:</label>
|
|
<input type="color" id="accent-color" value="#7B2EFF">
|
|
</div>
|
|
<div class="color-group">
|
|
<label for="secondary-color">Secondary:</label>
|
|
<input type="color" id="secondary-color" value="#00C6FF">
|
|
</div>
|
|
<div class="color-group">
|
|
<label for="text-color">Text:</label>
|
|
<input type="color" id="text-color" value="#E0E0E0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Home Page Layout -->
|
|
<div class="customization-group">
|
|
<h3>Home Page Layout</h3>
|
|
<div class="layout-options">
|
|
<label>
|
|
<input type="radio" name="layout" value="centered" checked>
|
|
<span>Centered (Default)</span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="layout" value="sidebar">
|
|
<span>Sidebar Navigation</span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="layout" value="compact">
|
|
<span>Compact View</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logo Customization -->
|
|
<div class="customization-group">
|
|
<h3>Logo & Branding</h3>
|
|
<div class="logo-options">
|
|
<label for="show-logo">
|
|
<input type="checkbox" id="show-logo" checked>
|
|
Show Nebula Logo
|
|
</label>
|
|
<label for="custom-title">
|
|
Custom Title:
|
|
<input type="text" id="custom-title" placeholder="Nebula Browser" maxlength="50">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Theme Management -->
|
|
<div class="customization-group">
|
|
<h3>Theme Management</h3>
|
|
<div class="theme-management">
|
|
<button id="save-custom-theme">Save Current as Custom Theme</button>
|
|
<button id="export-theme">Export Theme</button>
|
|
<button id="import-theme">Import Theme</button>
|
|
<input type="file" id="theme-file-input" accept=".json" style="display: none;">
|
|
<button id="reset-to-default">Reset to Default</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Live Preview -->
|
|
<div class="customization-group">
|
|
<h3>Preview</h3>
|
|
<div class="preview-container" id="preview-container">
|
|
<div class="preview-home">
|
|
<div class="preview-logo" id="preview-logo">../assets/images/Logos/Nebula-Logo.svg</div>
|
|
<div class="preview-text">Nebula</div>
|
|
<div class="preview-search"></div>
|
|
<div class="preview-bookmarks">
|
|
<div class="preview-bookmark"></div>
|
|
<div class="preview-bookmark"></div>
|
|
<div class="preview-bookmark"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- History Panel -->
|
|
<section class="tab-panel" id="panel-history" role="tabpanel" aria-labelledby="tab-history">
|
|
<h2>History</h2>
|
|
<div class="customization-group">
|
|
<h3>Search History</h3>
|
|
<ul id="search-history-list"></ul>
|
|
<button id="clear-search-history-btn" style="margin-top: 10px;">Clear Search History</button>
|
|
</div>
|
|
<div class="customization-group">
|
|
<h3>Site History</h3>
|
|
<ul id="site-history-list"></ul>
|
|
<div style="display:flex; gap:10px; margin-top:10px; flex-wrap:wrap;">
|
|
<button id="clear-site-history-btn">Clear Site History</button>
|
|
<button id="add-test-history-btn">Add Test History</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Panel -->
|
|
<section class="tab-panel" id="panel-about" role="tabpanel" aria-labelledby="tab-about">
|
|
<h2>About</h2>
|
|
<div class="customization-group">
|
|
<h3>Application</h3>
|
|
<ul id="about-app">
|
|
<li><strong>Name:</strong> <span id="about-app-name">Loading...</span></li>
|
|
<li><strong>Version:</strong> <span id="about-app-version">Loading...</span></li>
|
|
<li><strong>Packaged:</strong> <span id="about-packaged">Loading...</span></li>
|
|
<li><strong>User data:</strong> <span id="about-userdata" style="word-break: break-all;">Loading...</span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="customization-group">
|
|
<h3>Runtime</h3>
|
|
<ul id="about-runtime">
|
|
<li><strong>Electron:</strong> <span id="about-electron">Loading...</span></li>
|
|
<li><strong>Chromium:</strong> <span id="about-chrome">Loading...</span></li>
|
|
<li><strong>Node.js:</strong> <span id="about-node">Loading...</span></li>
|
|
<li><strong>V8:</strong> <span id="about-v8">Loading...</span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="customization-group">
|
|
<h3>System</h3>
|
|
<ul id="about-system">
|
|
<li><strong>OS:</strong> <span id="about-os">Loading...</span></li>
|
|
<li><strong>CPU:</strong> <span id="about-cpu">Loading...</span></li>
|
|
<li><strong>Architecture:</strong> <span id="about-arch">Loading...</span></li>
|
|
<li><strong>Memory:</strong> <span id="about-mem">Loading...</span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="customization-group about-actions">
|
|
<button id="copy-about-btn">Copy diagnostics</button>
|
|
<a id="github-link" href="https://github.com/Bobbybear007/NebulaBrowser" class="github-btn" rel="noopener noreferrer">
|
|
<!-- GitHub mark (Octicons) MIT License -->
|
|
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" role="img">
|
|
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.01.08-2.11 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.91.08 2.11.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
|
|
</svg>
|
|
<span>GitHub</span>
|
|
</a>
|
|
<a id="help-link" href="https://nebula.zambazosmedia.group" class="help-btn" rel="noopener noreferrer">
|
|
<!-- Help icon -->
|
|
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" role="img">
|
|
<path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 15a1.25 1.25 0 1 1 0 2.5A1.25 1.25 0 0 1 12 17zm-.02-1.9c-.6 0-1.02-.42-1.02-.98 0-1.97 2.76-1.95 2.76-3.62 0-.77-.66-1.4-1.72-1.4-1 0-1.67.5-2.06 1.22-.3.54-.95.73-1.45.44-.54-.31-.72-1-.42-1.53C7.7 7.7 9.06 6.5 12 6.5c2.26 0 3.98 1.3 3.98 3.35 0 2.74-2.96 2.77-3 3.83-.03.6-.43 1.02-1 1.02z"/>
|
|
</svg>
|
|
<span>Help</span>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- status overlay moved outside of .container -->
|
|
<div id="status" class="status hidden">
|
|
<div class="spinner"></div>
|
|
<span id="status-text"></span>
|
|
</div>
|
|
|
|
<script src="settings.js"></script>
|
|
<script src="customization.js"></script>
|
|
<script>
|
|
// Apply saved theme immediately when page loads
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
BrowserCustomizer.applyThemeToPage();
|
|
});
|
|
|
|
// Update debug info
|
|
function updateDebugInfo() {
|
|
const debugDiv = document.getElementById('debug-info');
|
|
const localStorage = window.localStorage;
|
|
const hasElectronAPI = !!window.electronAPI;
|
|
const siteHistory = localStorage ? localStorage.getItem('siteHistory') : 'N/A';
|
|
|
|
debugDiv.innerHTML = `
|
|
localStorage available: ${!!localStorage}<br>
|
|
electronAPI available: ${hasElectronAPI}<br>
|
|
siteHistory in localStorage: ${siteHistory || 'null'}<br>
|
|
Current domain: ${window.location.hostname}<br>
|
|
Current protocol: ${window.location.protocol}
|
|
`;
|
|
}
|
|
|
|
// Get site history from localStorage in this webview context
|
|
function getSiteHistoryFromLocalStorage() {
|
|
try {
|
|
const history = localStorage.getItem('siteHistory');
|
|
console.log('[SETTINGS DEBUG] localStorage siteHistory:', history);
|
|
return history ? JSON.parse(history) : [];
|
|
} catch (err) {
|
|
console.error('[SETTINGS DEBUG] Error reading from localStorage:', err);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
// Sync site history from main browser's localStorage to this webview's localStorage
|
|
function syncSiteHistoryFromMain() {
|
|
try {
|
|
// Try to get the parent window's localStorage
|
|
if (window.parent && window.parent !== window) {
|
|
const parentHistory = window.parent.localStorage.getItem('siteHistory');
|
|
if (parentHistory) {
|
|
localStorage.setItem('siteHistory', parentHistory);
|
|
console.log('[SETTINGS DEBUG] Synced history from parent window');
|
|
return JSON.parse(parentHistory);
|
|
}
|
|
}
|
|
return [];
|
|
} catch (err) {
|
|
console.log('[SETTINGS DEBUG] Could not sync from parent:', err.message);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
function addTestHistory() {
|
|
const testSites = [
|
|
'https://www.google.com',
|
|
'https://github.com',
|
|
'https://stackoverflow.com',
|
|
'https://developer.mozilla.org',
|
|
'https://www.wikipedia.org'
|
|
];
|
|
|
|
testSites.forEach(site => {
|
|
try {
|
|
let history = getSiteHistoryFromLocalStorage();
|
|
history = history.filter(item => item !== site);
|
|
history.unshift(site);
|
|
localStorage.setItem('siteHistory', JSON.stringify(history));
|
|
console.log('[SETTINGS DEBUG] Added test site:', site);
|
|
} catch (err) {
|
|
console.error('Error adding test history:', err);
|
|
}
|
|
});
|
|
|
|
loadHistories();
|
|
}
|
|
|
|
async function loadHistories() {
|
|
try {
|
|
console.log('[SETTINGS DEBUG] Loading histories...');
|
|
updateDebugInfo();
|
|
|
|
// First try to sync from parent window
|
|
let siteHistory = syncSiteHistoryFromMain();
|
|
|
|
// If that didn't work, get from local storage
|
|
if (siteHistory.length === 0) {
|
|
siteHistory = getSiteHistoryFromLocalStorage();
|
|
}
|
|
|
|
// Try to get search history via message passing to parent or direct file access
|
|
let searchHistory = [];
|
|
|
|
const searchList = document.getElementById('search-history-list');
|
|
const siteList = document.getElementById('site-history-list');
|
|
|
|
// Clear existing content
|
|
searchList.innerHTML = '';
|
|
siteList.innerHTML = '';
|
|
|
|
// Populate search history
|
|
const searchLi = document.createElement('li');
|
|
searchLi.textContent = 'Search history not available in webview context';
|
|
searchLi.style.fontStyle = 'italic';
|
|
searchLi.style.color = '#666';
|
|
searchList.appendChild(searchLi);
|
|
|
|
// Populate site history
|
|
if (siteHistory && siteHistory.length > 0) {
|
|
console.log('[SETTINGS DEBUG] Displaying', siteHistory.length, 'site history items');
|
|
siteHistory.forEach(item => {
|
|
const li = document.createElement('li');
|
|
li.style.wordBreak = 'break-all';
|
|
// Create a clickable link that asks host to navigate in a new tab
|
|
const a = document.createElement('a');
|
|
a.href = item;
|
|
a.textContent = item;
|
|
a.target = '_blank';
|
|
a.rel = 'noopener noreferrer';
|
|
a.style.color = 'var(--accent)';
|
|
a.style.textDecoration = 'none';
|
|
a.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
if (window.electronAPI && typeof window.electronAPI.sendToHost === 'function') {
|
|
// Ask the host to open this URL in a new tab to keep Settings open
|
|
window.electronAPI.sendToHost('navigate', item, { newTab: true });
|
|
} else if (window.parent) {
|
|
// Fallback: postMessage to parent if available
|
|
window.parent.postMessage({ type: 'navigate', url: item }, '*');
|
|
} else {
|
|
// Last resort: open in this webview
|
|
window.location.href = item;
|
|
}
|
|
} catch (err) {
|
|
console.error('[SETTINGS DEBUG] Failed to trigger navigation for', item, err);
|
|
}
|
|
});
|
|
li.appendChild(a);
|
|
siteList.appendChild(li);
|
|
});
|
|
} else {
|
|
console.log('[SETTINGS DEBUG] No site history to display');
|
|
const li = document.createElement('li');
|
|
li.textContent = 'No browsing history found. Browse some websites first!';
|
|
li.style.fontStyle = 'italic';
|
|
li.style.color = '#666';
|
|
siteList.appendChild(li);
|
|
}
|
|
} catch(err) {
|
|
console.error('[SETTINGS DEBUG] Error loading histories:', err);
|
|
|
|
const searchList = document.getElementById('search-history-list');
|
|
const siteList = document.getElementById('site-history-list');
|
|
|
|
const errorLi1 = document.createElement('li');
|
|
errorLi1.textContent = 'Error loading search history: ' + err.message;
|
|
errorLi1.style.color = 'red';
|
|
searchList.appendChild(errorLi1);
|
|
|
|
const errorLi2 = document.createElement('li');
|
|
errorLi2.textContent = 'Error loading site history: ' + err.message;
|
|
errorLi2.style.color = 'red';
|
|
siteList.appendChild(errorLi2);
|
|
}
|
|
}
|
|
|
|
async function clearSiteHistory() {
|
|
try {
|
|
// Clear from localStorage
|
|
localStorage.removeItem('siteHistory');
|
|
console.log('[SETTINGS DEBUG] Cleared site history from localStorage');
|
|
|
|
loadHistories(); // Refresh the display
|
|
} catch (err) {
|
|
console.error('Error clearing site history:', err);
|
|
}
|
|
}
|
|
|
|
async function clearSearchHistory() {
|
|
console.log('Search history clearing not available in webview context');
|
|
}
|
|
|
|
// Load histories on page load
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
console.log('[SETTINGS DEBUG] DOM loaded, window.electronAPI:', !!window.electronAPI);
|
|
loadHistories();
|
|
|
|
// Refresh history every few seconds to pick up new browsing
|
|
setInterval(loadHistories, 3000);
|
|
|
|
// Add test history button functionality
|
|
const addTestBtn = document.getElementById('add-test-history-btn');
|
|
if (addTestBtn) {
|
|
addTestBtn.addEventListener('click', addTestHistory);
|
|
}
|
|
|
|
// Add clear buttons functionality
|
|
const clearSiteBtn = document.getElementById('clear-site-history-btn');
|
|
const clearSearchBtn = document.getElementById('clear-search-history-btn');
|
|
|
|
if (clearSiteBtn) {
|
|
clearSiteBtn.addEventListener('click', clearSiteHistory);
|
|
}
|
|
if (clearSearchBtn) {
|
|
clearSearchBtn.addEventListener('click', clearSearchHistory);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|