Add host platform detection and macOS styles

Expose host platform to the UI and apply platform-specific styling. Backend: add CurrentPlatformName() and include "platform" in the JSON sent from NebulaController so the frontend can know the host OS. Frontend: detectHostPlatform() initializes state.platform, applyPlatform() sets a platform-* body class, and applyState() applies it. CSS: add .platform-macos rules to adjust title padding and hide window controls on macOS. Also fix FilePathToUrl to avoid producing an extra slash when the encoded path already starts with '/'.
This commit is contained in:
2026-05-22 10:55:16 +12:00
parent ce92b3841f
commit b7596674ab
4 changed files with 38 additions and 1 deletions
+13
View File
@@ -165,6 +165,18 @@ std::string GetChromeDisplayUrl(const std::string& url) {
return nebula::ui::IsInternalHomeUrl(url) ? std::string{} : url; return nebula::ui::IsInternalHomeUrl(url) ? std::string{} : url;
} }
const char* CurrentPlatformName() {
#if defined(_WIN32)
return "windows";
#elif defined(__APPLE__)
return "macos";
#elif defined(__linux__)
return "linux";
#else
return "unknown";
#endif
}
void SetBrowserVisible(CefRefPtr<CefBrowser> browser, bool visible) { void SetBrowserVisible(CefRefPtr<CefBrowser> browser, bool visible) {
if (!browser) { if (!browser) {
return; return;
@@ -1127,6 +1139,7 @@ void NebulaController::SendChromeState(const nebula::browser::NebulaTab& tab) {
",\"canGoForward\":" + std::string(tab.CanGoForward() ? "true" : "false") + ",\"canGoForward\":" + std::string(tab.CanGoForward() ? "true" : "false") +
",\"favicon\":\"" + nebula::browser::JsonEscape(tab.favicon_url) + "\"" + ",\"favicon\":\"" + nebula::browser::JsonEscape(tab.favicon_url) + "\"" +
",\"zoomLevel\":" + std::to_string(zoom_level) + ",\"zoomLevel\":" + std::to_string(zoom_level) +
",\"platform\":\"" + CurrentPlatformName() + "\"" +
",\"tabs\":" + tabs_json + ",\"tabs\":" + tabs_json +
"});"; "});";
+1 -1
View File
@@ -174,7 +174,7 @@ std::string FilePathToUrl(std::filesystem::path path) {
for (char ch : value) { for (char ch : value) {
encoded += ch == ' ' ? "%20" : std::string(1, ch); encoded += ch == ' ' ? "%20" : std::string(1, ch);
} }
return "file:///" + encoded; return encoded.starts_with('/') ? "file://" + encoded : "file:///" + encoded;
} }
std::string GetChromeUrl() { std::string GetChromeUrl() {
+8
View File
@@ -89,6 +89,10 @@ button:disabled {
background: var(--bg); background: var(--bg);
} }
.platform-macos .title-row {
padding: 0 12px 0 78px;
}
/* ── Tabs ───────────────────────────────────────────────────── */ /* ── Tabs ───────────────────────────────────────────────────── */
.tabs { .tabs {
@@ -257,6 +261,10 @@ button:disabled {
color: white; color: white;
} }
.platform-macos .window-controls {
display: none;
}
/* ── Toolbar ────────────────────────────────────────────────── */ /* ── Toolbar ────────────────────────────────────────────────── */
.toolbar { .toolbar {
+16
View File
@@ -28,9 +28,24 @@ const state = {
canGoBack: false, canGoBack: false,
canGoForward: false, canGoForward: false,
favicon: '', favicon: '',
platform: detectHostPlatform(),
tabs: [] tabs: []
}; };
function detectHostPlatform() {
const platform = `${navigator.userAgentData?.platform || ''} ${navigator.platform || ''} ${navigator.userAgent || ''}`.toLowerCase();
if (platform.includes('mac')) return 'macos';
if (platform.includes('win')) return 'windows';
if (platform.includes('linux')) return 'linux';
return 'unknown';
}
function applyPlatform(platform) {
const normalized = ['macos', 'windows', 'linux'].includes(platform) ? platform : 'unknown';
document.body.classList.remove('platform-macos', 'platform-windows', 'platform-linux', 'platform-unknown');
document.body.classList.add(`platform-${normalized}`);
}
function hexToRgb(hex) { function hexToRgb(hex) {
if (!hex || typeof hex !== 'string') return null; if (!hex || typeof hex !== 'string') return null;
let normalized = hex.trim().replace(/^#/, ''); let normalized = hex.trim().replace(/^#/, '');
@@ -191,6 +206,7 @@ function renderTabs() {
function applyState(nextState) { function applyState(nextState) {
Object.assign(state, nextState || {}); Object.assign(state, nextState || {});
applyPlatform(state.platform);
const title = state.title || 'New Tab'; const title = state.title || 'New Tab';
const url = state.url || ''; const url = state.url || '';