Render Servo sidecar frames in shell

2026-05-08 12:43:38 -04:00
parent fcdc2de076
commit 2fb6b15e2d
10 changed files with 656 additions and 30 deletions
@@ -0,0 +1,24 @@
+use gpui::{App, Context, FocusHandle, Focusable, Window};
+
+use super::{ElyShell, ShellState};
+
+impl ElyShell {
+    pub(super) fn sync_address_input(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+        let ShellState::Ready(core) = &mut self.state else {
+            return;
+        };
+
+        if let Ok(active_tab) = core.active_tab() {
+            let value = active_tab.url().as_str().to_string();
+            self.command_input.update(cx, |input, cx| {
+                input.set_value(value, window, cx);
+            });
+        }
+    }
+}
+
+impl Focusable for ElyShell {
+    fn focus_handle(&self, _: &App) -> FocusHandle {
+        self.focus_handle.clone()
+    }
+}
@@ -85,6 +85,9 @@ impl ElyShell {
            "ely://settings/profiles" => self.render_profiles_page(snapshot, cx),
            "ely://settings/sync" => self.render_sync_page(snapshot, cx),
            "ely://sync/status" => self.render_sync_page(snapshot, cx),
+            url if super::web_surface::is_external_web_url(url) => {
+                self.render_external_web_canvas(tab, cx)
+            }
            _ => render_default_page(tab),
        }
    }
@@ -1,6 +1,7 @@
 mod archive_labels;
 mod bookmarks;
 mod downloads;
+mod focus;
 mod history;
 mod internal_pages;
 mod notes;
@@ -13,6 +14,7 @@ mod spaces;
 mod splits;
 mod tab_groups;
 mod tab_lifecycle;
+mod web_surface;

 use ely_browser_core::{BrowserCore, InitialBrowserConfig};
 use ely_domain::{
@@ -20,13 +22,14 @@ use ely_domain::{
    NewTabDestination, ProfileId, ProfileSyncPolicy, SearchEngine, SpaceId, SyncObjectKind,
    SyncObjectPolicy, TabId, UrlText,
 };
-use gpui::{App, AppContext, Context, Entity, FocusHandle, Focusable, Subscription, Window};
+use gpui::{AppContext, Context, Entity, FocusHandle, Subscription, Window};
 use gpui_component::input::{InputEvent, InputState, SelectAll};

 use bookmarks::PendingBookmarkEdit;
 use downloads::PendingDownloadFileAction;
 use history::{PendingHistoryDomainClear, PendingHistoryTimeClear};
 use plugins::{PendingPluginInstall, PendingPluginUninstall};
+use web_surface::WebSurfaceStore;

 use crate::{
    CloseCurrentTab, FocusAddressBar, FocusCommandMode, OpenDownloads, OpenHistory, OpenNewTab,
@@ -57,6 +60,7 @@ pub struct ElyShell {
    plugin_install_error: Option<String>,
    pending_plugin_install: Option<PendingPluginInstall>,
    pending_plugin_uninstall: Option<PendingPluginUninstall>,
+    web_surfaces: WebSurfaceStore,
    _command_subscription: Subscription,
 }

@@ -125,6 +129,7 @@ impl ElyShell {
            plugin_install_error: None,
            pending_plugin_install: None,
            pending_plugin_uninstall: None,
+            web_surfaces: WebSurfaceStore::new(),
            _command_subscription: command_subscription,
        }
    }
@@ -477,23 +482,4 @@ impl ElyShell {
    ) {
        self.toggle_active_tab_pinned(cx);
    }
-
-    fn sync_address_input(&mut self, window: &mut Window, cx: &mut Context<Self>) {
-        let ShellState::Ready(core) = &mut self.state else {
-            return;
-        };
-
-        if let Ok(active_tab) = core.active_tab() {
-            let value = active_tab.url().as_str().to_string();
-            self.command_input.update(cx, |input, cx| {
-                input.set_value(value, window, cx);
-            });
-        }
-    }
-}
-
-impl Focusable for ElyShell {
-    fn focus_handle(&self, _: &App) -> FocusHandle {
-        self.focus_handle.clone()
-    }
 }
@@ -0,0 +1,338 @@
+use std::{collections::BTreeMap, sync::Arc};
+
+use ely_domain::{BrowserTab, TabId};
+use gpui::{
+    AnyElement, Context, ImageSource, IntoElement, ObjectFit, ParentElement, RenderImage, Styled,
+    StyledImage, div, img, px, rgb,
+};
+use gpui_component::StyledExt;
+use image::{ImageBuffer, Rgba};
+use thiserror::Error;
+
+use crate::services::servo_sidecar::{
+    ServoSidecarClient, ServoSidecarError, SidecarSnapshot, SidecarSnapshotRequest,
+};
+
+use super::ElyShell;
+use ely_design_system::{colors, spacing};
+
+const WEB_SURFACE_WIDTH: u32 = 1024;
+const WEB_SURFACE_HEIGHT: u32 = 768;
+
+pub(super) struct WebSurfaceStore {
+    client: WebSurfaceClient,
+    states: BTreeMap<TabId, WebSurfaceState>,
+}
+
+impl WebSurfaceStore {
+    pub(super) fn new() -> Self {
+        Self { client: WebSurfaceClient::new(), states: BTreeMap::new() }
+    }
+
+    fn state(&self, tab_id: &TabId) -> Option<&WebSurfaceState> {
+        self.states.get(tab_id)
+    }
+
+    fn prepare_request(&mut self, tab: &BrowserTab) -> Option<WebSurfaceRequest> {
+        if !is_external_web_url(tab.url().as_str()) {
+            return None;
+        }
+
+        let requested_url = tab.url().as_str().to_string();
+        if self.has_current_state(tab.id(), &requested_url) {
+            return None;
+        }
+
+        let client = match &self.client {
+            WebSurfaceClient::Ready(client) => client.clone(),
+            WebSurfaceClient::Unavailable(message) => {
+                self.states.insert(
+                    tab.id().clone(),
+                    WebSurfaceState::Failed { requested_url, message: message.clone() },
+                );
+                return None;
+            }
+        };
+
+        self.states.insert(
+            tab.id().clone(),
+            WebSurfaceState::Loading { requested_url: requested_url.clone() },
+        );
+
+        Some(WebSurfaceRequest {
+            tab_id: tab.id().clone(),
+            requested_url,
+            client,
+            snapshot_request: SidecarSnapshotRequest::new(
+                tab.url().clone(),
+                WEB_SURFACE_WIDTH,
+                WEB_SURFACE_HEIGHT,
+            ),
+        })
+    }
+
+    fn has_current_state(&self, tab_id: &TabId, requested_url: &str) -> bool {
+        match self.states.get(tab_id) {
+            Some(WebSurfaceState::Loading { requested_url: current_url }) => {
+                current_url == requested_url
+            }
+            Some(WebSurfaceState::Ready(frame)) => frame.requested_url == requested_url,
+            Some(WebSurfaceState::Failed { requested_url: current_url, .. }) => {
+                current_url == requested_url
+            }
+            None => false,
+        }
+    }
+
+    fn is_loading(&self, tab_id: &TabId, requested_url: &str) -> bool {
+        matches!(
+            self.states.get(tab_id),
+            Some(WebSurfaceState::Loading { requested_url: current_url })
+                if current_url == requested_url
+        )
+    }
+
+    fn finish(&mut self, tab_id: TabId, state: WebSurfaceState) {
+        self.states.insert(tab_id, state);
+    }
+}
+
+enum WebSurfaceClient {
+    Ready(ServoSidecarClient),
+    Unavailable(String),
+}
+
+impl WebSurfaceClient {
+    fn new() -> Self {
+        match ServoSidecarClient::new() {
+            Ok(client) => Self::Ready(client),
+            Err(error) => Self::Unavailable(error.to_string()),
+        }
+    }
+}
+
+struct WebSurfaceRequest {
+    tab_id: TabId,
+    requested_url: String,
+    client: ServoSidecarClient,
+    snapshot_request: SidecarSnapshotRequest,
+}
+
+enum WebSurfaceState {
+    Loading { requested_url: String },
+    Ready(WebSurfaceFrame),
+    Failed { requested_url: String, message: String },
+}
+
+struct WebSurfaceFrame {
+    requested_url: String,
+    loaded_url: Option<String>,
+    title: Option<String>,
+    width: u32,
+    height: u32,
+    image: Arc<RenderImage>,
+}
+
+impl WebSurfaceFrame {
+    fn from_snapshot(
+        requested_url: String,
+        snapshot: SidecarSnapshot,
+    ) -> Result<Self, WebSurfaceError> {
+        let width = snapshot.width();
+        let height = snapshot.height();
+        let loaded_url = snapshot.loaded_url().map(str::to_string);
+        let title = snapshot.title().map(str::to_string);
+        let rgba_bytes = snapshot.into_rgba_bytes();
+
+        let Some(buffer) = ImageBuffer::<Rgba<u8>, _>::from_raw(width, height, rgba_bytes) else {
+            return Err(WebSurfaceError::InvalidFrameBuffer { width, height });
+        };
+
+        Ok(Self {
+            requested_url,
+            loaded_url,
+            title,
+            width,
+            height,
+            image: Arc::new(RenderImage::new([image::Frame::new(buffer)])),
+        })
+    }
+
+    fn title_label(&self) -> String {
+        self.title.clone().unwrap_or_else(|| self.requested_url.clone())
+    }
+
+    fn url_label(&self) -> &str {
+        self.loaded_url.as_deref().unwrap_or(self.requested_url.as_str())
+    }
+}
+
+#[derive(Debug, Error)]
+enum WebSurfaceError {
+    #[error("invalid servo frame buffer for {width}x{height}")]
+    InvalidFrameBuffer { width: u32, height: u32 },
+}
+
+impl ElyShell {
+    pub(super) fn render_external_web_canvas(
+        &mut self,
+        tab: &BrowserTab,
+        cx: &mut Context<Self>,
+    ) -> AnyElement {
+        self.ensure_external_web_frame(tab, cx);
+
+        match self.web_surfaces.state(tab.id()) {
+            Some(WebSurfaceState::Ready(frame)) => render_ready_web_surface(frame),
+            Some(WebSurfaceState::Failed { message, .. }) => {
+                render_failed_web_surface(tab, message.as_str())
+            }
+            Some(WebSurfaceState::Loading { .. }) | None => render_loading_web_surface(tab),
+        }
+    }
+
+    fn ensure_external_web_frame(&mut self, tab: &BrowserTab, cx: &mut Context<Self>) {
+        let Some(request) = self.web_surfaces.prepare_request(tab) else {
+            return;
+        };
+
+        let WebSurfaceRequest { tab_id, requested_url, client, snapshot_request } = request;
+        cx.spawn(async move |shell, cx| {
+            let result = cx
+                .background_executor()
+                .spawn(async move { client.snapshot(snapshot_request) })
+                .await;
+
+            _ = shell.update(cx, |shell, cx| {
+                shell.handle_external_web_frame_result(tab_id, requested_url, result);
+                cx.notify();
+            });
+        })
+        .detach();
+    }
+
+    fn handle_external_web_frame_result(
+        &mut self,
+        tab_id: TabId,
+        requested_url: String,
+        result: Result<SidecarSnapshot, ServoSidecarError>,
+    ) {
+        if !self.web_surfaces.is_loading(&tab_id, requested_url.as_str()) {
+            return;
+        }
+
+        let state = match result {
+            Ok(snapshot) => match WebSurfaceFrame::from_snapshot(requested_url.clone(), snapshot) {
+                Ok(frame) => WebSurfaceState::Ready(frame),
+                Err(error) => WebSurfaceState::Failed { requested_url, message: error.to_string() },
+            },
+            Err(error) => WebSurfaceState::Failed { requested_url, message: error.to_string() },
+        };
+        self.web_surfaces.finish(tab_id, state);
+    }
+}
+
+fn render_ready_web_surface(frame: &WebSurfaceFrame) -> AnyElement {
+    render_web_surface(
+        div()
+            .size_full()
+            .flex()
+            .flex_col()
+            .bg(rgb(colors::SURFACE_CARD))
+            .child(render_web_surface_header(frame))
+            .child(
+                div().flex_1().min_h_0().overflow_hidden().bg(rgb(colors::SURFACE_CARD)).child(
+                    img(ImageSource::Render(frame.image.clone()))
+                        .size_full()
+                        .object_fit(ObjectFit::Contain),
+                ),
+            ),
+    )
+}
+
+fn render_web_surface_header(frame: &WebSurfaceFrame) -> AnyElement {
+    div()
+        .h(px(34.0))
+        .px_3()
+        .gap_3()
+        .flex()
+        .items_center()
+        .border_b_1()
+        .border_color(rgb(colors::HAIRLINE))
+        .bg(rgb(colors::CANVAS_SOFT))
+        .child(
+            div()
+                .min_w_0()
+                .flex_1()
+                .truncate()
+                .text_sm()
+                .font_semibold()
+                .text_color(rgb(colors::INK))
+                .child(frame.title_label()),
+        )
+        .child(
+            div()
+                .text_xs()
+                .text_color(rgb(colors::MUTED))
+                .child(format!("{}x{}", frame.width, frame.height)),
+        )
+        .child(
+            div()
+                .max_w(px(420.0))
+                .truncate()
+                .text_xs()
+                .text_color(rgb(colors::MUTED))
+                .child(frame.url_label().to_string()),
+        )
+        .into_any_element()
+}
+
+fn render_loading_web_surface(tab: &BrowserTab) -> AnyElement {
+    render_web_surface(centered_status(
+        tab.title(),
+        tab.url().as_str(),
+        "Rendering page with Servo",
+        colors::BODY,
+    ))
+}
+
+fn render_failed_web_surface(tab: &BrowserTab, message: &str) -> AnyElement {
+    render_web_surface(centered_status(tab.title(), tab.url().as_str(), message, colors::ERROR))
+}
+
+fn centered_status(title: &str, url: &str, detail: &str, detail_color: u32) -> impl IntoElement {
+    div()
+        .size_full()
+        .p_8()
+        .flex()
+        .flex_col()
+        .items_center()
+        .justify_center()
+        .gap_2()
+        .bg(rgb(colors::SURFACE_CARD))
+        .child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child(title.to_string()))
+        .child(div().text_sm().text_color(rgb(colors::MUTED)).child(url.to_string()))
+        .child(div().text_sm().text_color(rgb(detail_color)).child(detail.to_string()))
+}
+
+fn render_web_surface(content: impl IntoElement) -> AnyElement {
+    div()
+        .flex_1()
+        .h_full()
+        .p(px(spacing::SM))
+        .bg(rgb(colors::CANVAS_SOFT))
+        .child(
+            div()
+                .size_full()
+                .overflow_hidden()
+                .rounded_md()
+                .border_1()
+                .border_color(rgb(colors::HAIRLINE))
+                .bg(rgb(colors::SURFACE_CARD))
+                .child(content),
+        )
+        .into_any_element()
+}
+
+pub(super) fn is_external_web_url(url: &str) -> bool {
+    url.starts_with("https://") || url.starts_with("http://")
+}