andrew
a0e76e623d
Introduces a BrowserView-based tab management system for desktop mode, replacing webview elements for tab content. Adds IPC handlers and state management for creating, activating, destroying, and communicating with BrowserViews. Implements an overlay menu popup window for tab actions and zoom controls. Updates renderer UI to use a dedicated view host container, and refactors tab creation and navigation logic to use BrowserViews. Improves focus styling in CSS and updates preload and IPC messaging to support BrowserView contexts.
112 lines
3.9 KiB
HTML
112 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Nebula Browser</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
/* Removed custom draggable bar CSS to allow use of native title bar */
|
|
|
|
:root { --resize-border: 8px; }
|
|
|
|
body {
|
|
padding: var(--resize-border);
|
|
margin: 0;
|
|
height: calc(100vh - 2 * var(--resize-border));
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
::placeholder {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
/* Adjust the color and transparency as needed */
|
|
}
|
|
|
|
#view-host {
|
|
flex: 1;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Windows title bar controls wrapper - sits above tab bar -->
|
|
<div id="titlebar-container">
|
|
<div id="tab-bar"></div>
|
|
<div id="window-controls">
|
|
<button id="min-btn" title="Minimize" aria-label="Minimize">
|
|
<svg width="10" height="10" viewBox="0 0 10 10">
|
|
<path d="M0 5h10" stroke="currentColor" stroke-width="1" fill="none"/>
|
|
</svg>
|
|
</button>
|
|
<button id="max-btn" title="Maximize" aria-label="Maximize">
|
|
<svg width="10" height="10" viewBox="0 0 10 10" class="maximize-icon">
|
|
<rect x="0.5" y="0.5" width="9" height="9" stroke="currentColor" stroke-width="1" fill="none"/>
|
|
</svg>
|
|
<svg width="10" height="10" viewBox="0 0 10 10" class="restore-icon" style="display:none">
|
|
<path d="M2.5 0.5h7v7M0.5 2.5h7v7h-7z" stroke="currentColor" stroke-width="1" fill="none"/>
|
|
</svg>
|
|
</button>
|
|
<button id="close-btn" title="Close" aria-label="Close">
|
|
<svg width="10" height="10" viewBox="0 0 10 10">
|
|
<path d="M0 0l10 10M10 0l-10 10" stroke="currentColor" stroke-width="1" fill="none"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="nav">
|
|
<div class="nav-left">
|
|
<button onclick="goBack()">←</button>
|
|
<button onclick="goForward()">→</button>
|
|
<button id="reload-btn">⟳</button>
|
|
</div>
|
|
|
|
<div class="nav-center">
|
|
<input id="url" type="text" placeholder="Type URL here" />
|
|
<button onclick="navigate()">Go</button>
|
|
</div>
|
|
|
|
<div class="nav-right">
|
|
<div class="downloads-wrapper">
|
|
<button id="downloads-btn" title="Downloads" aria-label="Downloads">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M12 3v12"/>
|
|
<path d="M7 10l5 5 5-5"/>
|
|
<path d="M5 21h14"/>
|
|
</svg>
|
|
</button>
|
|
<div id="downloads-popup" class="hidden">
|
|
<div class="downloads-pop-header">
|
|
<span>Downloads</span>
|
|
<button id="downloads-show-all">Show all</button>
|
|
</div>
|
|
<div id="downloads-list" class="downloads-pop-list"></div>
|
|
<div id="downloads-empty" class="downloads-empty">No downloads</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-wrapper">
|
|
<button id="menu-btn">☰</button>
|
|
<div id="menu-popup" class="hidden">
|
|
<button onclick="openSettings()">Settings</button>
|
|
<!-- You can add more options here -->
|
|
<button id="bigpicture-btn" title="Launch Big Picture Mode (Controller/Steam Deck UI)">🎮 Big Picture Mode</button>
|
|
<button id="devtools-btn" title="Open / Close Developer Tools">Toggle Developer Tools</button>
|
|
<div class="zoom-controls">
|
|
<button id="zoom-out-btn">-</button>
|
|
<span id="zoom-percent">100%</span>
|
|
<button id="zoom-in-btn">+</button>
|
|
</div>
|
|
<button id="hard-reload-btn">Hard Reload (Ignore Cache)</button>
|
|
<button id="fresh-reload-btn">Reload Fresh (Add Cache-Buster)</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="view-host"></div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |