From 16b0ab6b863871004e25e611b8046a70fb64efac Mon Sep 17 00:00:00 2001 From: webbeef Date: Tue, 12 May 2026 20:41:00 -0700 Subject: [PATCH] ui: refactor system app to cleanly split up mobile and desktop Signed-off-by: webbeef --- crates/beaver_shell/src/main.rs | 12 +- ui/system/app.js | 95 ++ ui/system/{ => desktop}/index.html | 20 +- ui/system/desktop/index.js | 29 + ui/system/desktop/init.js | 122 ++ ui/system/{ => desktop}/layout_manager.js | 0 .../{ => desktop}/notification_panel.css | 0 ui/system/{ => desktop}/notification_panel.js | 2 +- ui/system/{ => desktop}/overview.css | 0 ui/system/{ => desktop}/overview.js | 0 ui/system/{ => desktop}/system_menu.css | 0 ui/system/{ => desktop}/system_menu.js | 4 +- ui/system/index.js | 1158 ----------------- ui/system/mediacenter/sources.json | 8 +- ui/system/mobile/index.html | 3 +- ui/system/mobile/index.js | 25 +- ui/system/mobile/init.js | 155 +++ ui/system/search.js | 4 +- ui/system/services/channels.js | 151 +++ ui/system/services/index.js | 63 + ui/system/services/keyboard.js | 62 + ui/system/services/media_session.js | 138 ++ ui/system/services/notifications.js | 112 ++ ui/system/services/shortcuts.js | 103 ++ 24 files changed, 1082 insertions(+), 1184 deletions(-) create mode 100644 ui/system/app.js rename ui/system/{ => desktop}/index.html (73%) create mode 100644 ui/system/desktop/index.js create mode 100644 ui/system/desktop/init.js rename ui/system/{ => desktop}/layout_manager.js (100%) rename ui/system/{ => desktop}/notification_panel.css (100%) rename ui/system/{ => desktop}/notification_panel.js (98%) rename ui/system/{ => desktop}/overview.css (100%) rename ui/system/{ => desktop}/overview.js (100%) rename ui/system/{ => desktop}/system_menu.css (100%) rename ui/system/{ => desktop}/system_menu.js (98%) delete mode 100644 ui/system/index.js create mode 100644 ui/system/mobile/init.js create mode 100644 ui/system/services/channels.js create mode 100644 ui/system/services/index.js create mode 100644 ui/system/services/keyboard.js create mode 100644 ui/system/services/media_session.js create mode 100644 ui/system/services/notifications.js create mode 100644 ui/system/services/shortcuts.js diff --git a/crates/beaver_shell/src/main.rs b/crates/beaver_shell/src/main.rs index c02ec0f..d7ca5a7 100644 --- a/crates/beaver_shell/src/main.rs +++ b/crates/beaver_shell/src/main.rs @@ -363,7 +363,8 @@ impl AppState { match command { UserInterfaceCommand::NewWindow(maybe_url, maybe_features) => { let url = maybe_url.unwrap_or( - Url::parse("beaver://system/index.html").expect("Invalid default URL"), + Url::parse("beaver://system/desktop/index.html") + .expect("Invalid default URL"), ); self.open_window(event_loop, url, maybe_features); }, @@ -439,9 +440,10 @@ impl AppState { /// Open the settings window. #[cfg(feature = "status-tray")] fn open_settings_window(self: &Rc, event_loop: &ActiveEventLoop) { - let url = - Url::parse("beaver://system/index.html?open=beaver%3A%2F%2Fsettings%2Findex.html") - .expect("Invalid URL"); + let url = Url::parse( + "beaver://system/desktop/index.html?open=beaver%3A%2F%2Fsettings%2Findex.html", + ) + .expect("Invalid URL"); self.open_window(event_loop, url, None); } @@ -889,7 +891,7 @@ fn index_url(event_loop: &ActiveEventLoop) -> String { if pref_override || mobile_screen { "beaver://system/mobile/index.html".into() } else { - "beaver://system/index.html".into() + "beaver://system/desktop/index.html".into() } } diff --git a/ui/system/app.js b/ui/system/app.js new file mode 100644 index 0000000..f14fe2d --- /dev/null +++ b/ui/system/app.js @@ -0,0 +1,95 @@ +// SPDX-License-Identifier: AGPL-3.0-or-later + +import { WebView } from "./web_view.js"; +import { PairingHandler } from "./p2p.js"; +import { notifications, initAll } from "./services/index.js"; + +let NEW_FRAME_DEFAULT_URL = + navigator.servo.getStringPreference("beaver.start_url"); + +const windowId = `browser-${Date.now()}-${Math.random().toString(36).slice(2)}`; + +navigator.embedder.addEventListener("servoerror", (event) => { + console.error(`[Servo] ${event.type} ${event.detail}`); +}); + +navigator.embedder.addEventListener("preferencechanged", (event) => { + if (event.detail.name == "beaver.start_url") { + NEW_FRAME_DEFAULT_URL = event.detail.value; + } +}); + +// P2P pairing handler +const pairingHandler = new PairingHandler({ + onNotificationAdd: notifications.add, + onNotificationRemove: notifications.removeByTag, +}); + +export function createNewView(layoutManager) { + const webView = new WebView(NEW_FRAME_DEFAULT_URL, "", {}); + layoutManager.addWebView(webView); +} + +export function switchToHomescreen(layoutManager) { + if (layoutManager.homescreenWebviewId) { + layoutManager.setActiveWebView(layoutManager.homescreenWebviewId); + } +} + +export function openView(layoutManager, url, title) { + const view = new WebView(url, title, {}); + layoutManager.addWebView(view); +} + +export function newWebViewBuilder() { + return new WebView(NEW_FRAME_DEFAULT_URL, "", {}); +} + +export function initApp(layoutManager, isMobileMode, mobileComponents) { + const services = initAll(layoutManager, { + windowId, + isMobileMode, + createNewView: () => createNewView(layoutManager), + switchToHomescreen: () => switchToHomescreen(layoutManager), + openView: (url, title) => openView(layoutManager, url, title), + mobileComponents, + }); + + window.servo = { + adoptNewWebView(url, webviewId, browsingContextId, pipelineId) { + const attrs = { + "adopt-webview-id": webviewId, + "adopt-browsing-context-id": browsingContextId, + "adopt-pipeline-id": pipelineId, + }; + try { + layoutManager.addWebView(new WebView(url, "", attrs)); + } catch (e) { + console.error(e); + } + }, + + openKeyboard(inputType, currentValue, position) { + services.keyboard.open({ + inputType, + currentValue, + placeholder: "", + position, + }); + }, + + closeEmbedderControl(controlId) { + services.keyboard.close(); + }, + }; + + // Open URL from query params if present + const params = new URLSearchParams(window.location.search); + const openValue = params.get("open"); + if (openValue) { + layoutManager.addWebView(new WebView(openValue, "", {})); + } + + return { services, pairingHandler }; +} + diff --git a/ui/system/index.html b/ui/system/desktop/index.html similarity index 73% rename from ui/system/index.html rename to ui/system/desktop/index.html index 7ce600b..098a6c4 100644 --- a/ui/system/index.html +++ b/ui/system/desktop/index.html @@ -4,21 +4,21 @@ Beaver - + - - - - + + + + - - - - - + + + + +