Add Servo scroll snapshots

2026-05-08 13:54:56 -04:00
parent 8068d4ba32
commit 7178174e20
12 changed files with 738 additions and 268 deletions
@@ -74,6 +74,10 @@ impl ServoSidecarClient {
            .arg(request.width.to_string())
            .arg("--height")
            .arg(request.height.to_string())
+            .arg("--scroll-x")
+            .arg(request.scroll_x.to_string())
+            .arg("--scroll-y")
+            .arg(request.scroll_y.to_string())
            .stdout(Stdio::piped())
            .stderr(Stdio::piped())
            .spawn()
@@ -103,12 +107,21 @@ pub struct SidecarSnapshotRequest {
    url: UrlText,
    width: u32,
    height: u32,
+    scroll_x: i32,
+    scroll_y: i32,
 }

 impl SidecarSnapshotRequest {
    #[must_use]
    pub fn new(url: UrlText, width: u32, height: u32) -> Self {
-        Self { url, width, height }
+        Self { url, width, height, scroll_x: 0, scroll_y: 0 }
+    }
+
+    #[must_use]
+    pub fn with_scroll_offset(mut self, scroll_x: i32, scroll_y: i32) -> Self {
+        self.scroll_x = scroll_x;
+        self.scroll_y = scroll_y;
+        self
    }
 }

@@ -15,7 +15,10 @@ mod splits;
 mod tab_groups;
 mod tab_lifecycle;
 mod web_surface;
+mod web_surface_frame;
+mod web_surface_geometry;
 mod web_surface_image;
+mod web_surface_view;

 use ely_browser_core::{BrowserCore, InitialBrowserConfig};
 use ely_domain::{
@@ -1,25 +1,25 @@
-use std::{collections::BTreeMap, sync::Arc};
+use std::collections::BTreeMap;

 use ely_domain::{BrowserTab, TabId};
-use gpui::{
-    AnyElement, App, Bounds, Context, Entity, ImageSource, IntoElement, ObjectFit, ParentElement,
-    Pixels, RenderImage, Styled, StyledImage, Window, canvas, div, img, prelude::FluentBuilder, px,
-    rgb,
-};
-use gpui_component::StyledExt;
-use image::{ImageBuffer, Rgba};
-use thiserror::Error;
+use gpui::{AnyElement, Bounds, Context, Pixels};

 use crate::services::servo_sidecar::{
    ServoSidecarClient, ServoSidecarError, SidecarSnapshot, SidecarSnapshotRequest,
 };

-use super::{ElyShell, web_surface_image::renderable_image_buffer};
-use ely_design_system::{colors, spacing};
+use super::{
+    ElyShell,
+    web_surface_frame::WebSurfaceFrame,
+    web_surface_geometry::{WebSurfaceScrollDelta, WebSurfaceScrollOffset, WebSurfaceSize},
+    web_surface_view::{
+        render_failed_web_surface, render_loading_web_surface, render_ready_web_surface,
+    },
+};

 pub(super) struct WebSurfaceStore {
    client: WebSurfaceClient,
    pending_viewport_sizes: BTreeMap<TabId, WebSurfaceSize>,
+    scroll_offsets: BTreeMap<TabId, WebSurfaceScrollState>,
    viewport_sizes: BTreeMap<TabId, WebSurfaceSize>,
    states: BTreeMap<TabId, WebSurfaceState>,
 }
@@ -29,6 +29,7 @@ impl WebSurfaceStore {
        Self {
            client: WebSurfaceClient::new(),
            pending_viewport_sizes: BTreeMap::new(),
+            scroll_offsets: BTreeMap::new(),
            viewport_sizes: BTreeMap::new(),
            states: BTreeMap::new(),
        }
@@ -45,10 +46,11 @@ impl WebSurfaceStore {

        let size = self.viewport_sizes.get(tab.id()).copied()?;
        let requested_url = tab.url().as_str().to_string();
+        let scroll_offset = self.scroll_offset_for(tab.id(), requested_url.as_str());
        if self.is_loading_requested_url(tab.id(), requested_url.as_str()) {
            return None;
        }
-        if self.has_current_state(tab.id(), &requested_url, size) {
+        if self.has_current_state(tab.id(), &requested_url, size, scroll_offset) {
            return None;
        }

@@ -57,7 +59,12 @@ impl WebSurfaceStore {
            WebSurfaceClient::Unavailable(message) => {
                self.states.insert(
                    tab.id().clone(),
-                    WebSurfaceState::Failed { requested_url, size, message: message.clone() },
+                    WebSurfaceState::Failed {
+                        requested_url,
+                        size,
+                        scroll_offset,
+                        message: message.clone(),
+                    },
                );
                return None;
            }
@@ -68,6 +75,7 @@ impl WebSurfaceStore {
            WebSurfaceState::Loading {
                requested_url: requested_url.clone(),
                size,
+                scroll_offset,
                previous_frame: self.previous_ready_frame(tab.id(), requested_url.as_str()),
            },
        );
@@ -76,43 +84,72 @@ impl WebSurfaceStore {
            tab_id: tab.id().clone(),
            requested_url,
            size,
+            scroll_offset,
            client,
            snapshot_request: SidecarSnapshotRequest::new(
                tab.url().clone(),
                size.width,
                size.height,
-            ),
+            )
+            .with_scroll_offset(scroll_offset.x(), scroll_offset.y()),
        })
    }

-    fn has_current_state(&self, tab_id: &TabId, requested_url: &str, size: WebSurfaceSize) -> bool {
+    fn has_current_state(
+        &self,
+        tab_id: &TabId,
+        requested_url: &str,
+        size: WebSurfaceSize,
+        scroll_offset: WebSurfaceScrollOffset,
+    ) -> bool {
        match self.states.get(tab_id) {
            Some(WebSurfaceState::Loading {
                requested_url: current_url,
                size: current_size,
+                scroll_offset: current_scroll_offset,
                ..
-            }) => current_url == requested_url && *current_size == size,
+            }) => {
+                current_url == requested_url
+                    && *current_size == size
+                    && *current_scroll_offset == scroll_offset
+            }
            Some(WebSurfaceState::Ready(frame)) => {
-                frame.requested_url == requested_url && frame.size() == size
+                frame.requested_url == requested_url
+                    && frame.size() == size
+                    && frame.scroll_offset() == scroll_offset
            }
            Some(WebSurfaceState::Failed {
                requested_url: current_url,
                size: current_size,
+                scroll_offset: current_scroll_offset,
                ..
-            }) => current_url == requested_url && *current_size == size,
+            }) => {
+                current_url == requested_url
+                    && *current_size == size
+                    && *current_scroll_offset == scroll_offset
+            }
            None => false,
        }
    }

-    fn is_loading(&self, tab_id: &TabId, requested_url: &str, size: WebSurfaceSize) -> bool {
+    fn is_loading(
+        &self,
+        tab_id: &TabId,
+        requested_url: &str,
+        size: WebSurfaceSize,
+        scroll_offset: WebSurfaceScrollOffset,
+    ) -> bool {
        matches!(
            self.states.get(tab_id),
            Some(WebSurfaceState::Loading {
                requested_url: current_url,
                size: current_size,
+                scroll_offset: current_scroll_offset,
                ..
            })
-                if current_url == requested_url && *current_size == size
+                if current_url == requested_url
+                    && *current_size == size
+                    && *current_scroll_offset == scroll_offset
        )
    }

@@ -140,6 +177,33 @@ impl WebSurfaceStore {
        self.states.insert(tab_id, state);
    }

+    fn record_scroll_delta(
+        &mut self,
+        tab_id: &TabId,
+        requested_url: &str,
+        delta: gpui::Point<Pixels>,
+    ) -> bool {
+        let Some(delta) = WebSurfaceScrollDelta::from_point(delta) else {
+            return false;
+        };
+
+        let state = self
+            .scroll_offsets
+            .entry(tab_id.clone())
+            .or_insert_with(|| WebSurfaceScrollState::new(requested_url.to_string()));
+        if state.requested_url != requested_url {
+            *state = WebSurfaceScrollState::new(requested_url.to_string());
+        }
+
+        let next_offset = state.offset.scrolled_by(delta);
+        if next_offset == state.offset {
+            return false;
+        }
+
+        state.offset = next_offset;
+        true
+    }
+
    fn record_viewport_size(&mut self, tab_id: &TabId, bounds: Bounds<Pixels>) -> bool {
        let Some(size) = WebSurfaceSize::from_bounds(bounds) else {
            return false;
@@ -165,6 +229,25 @@ impl WebSurfaceStore {
        self.viewport_sizes.insert(tab_id.clone(), size);
        true
    }
+
+    fn scroll_offset_for(&self, tab_id: &TabId, requested_url: &str) -> WebSurfaceScrollOffset {
+        self.scroll_offsets
+            .get(tab_id)
+            .filter(|state| state.requested_url == requested_url)
+            .map(|state| state.offset)
+            .unwrap_or_default()
+    }
+}
+
+struct WebSurfaceScrollState {
+    requested_url: String,
+    offset: WebSurfaceScrollOffset,
+}
+
+impl WebSurfaceScrollState {
+    fn new(requested_url: String) -> Self {
+        Self { requested_url, offset: WebSurfaceScrollOffset::default() }
+    }
 }

 enum WebSurfaceClient {
@@ -185,85 +268,25 @@ struct WebSurfaceRequest {
    tab_id: TabId,
    requested_url: String,
    size: WebSurfaceSize,
+    scroll_offset: WebSurfaceScrollOffset,
    client: ServoSidecarClient,
    snapshot_request: SidecarSnapshotRequest,
 }

 enum WebSurfaceState {
-    Loading { requested_url: String, size: WebSurfaceSize, previous_frame: Option<WebSurfaceFrame> },
-    Ready(WebSurfaceFrame),
-    Failed { requested_url: String, size: WebSurfaceSize, message: String },
-}
-
-#[derive(Clone, Copy, Debug, Eq, PartialEq)]
-struct WebSurfaceSize {
-    width: u32,
-    height: u32,
-}
-
-impl WebSurfaceSize {
-    fn from_bounds(bounds: Bounds<Pixels>) -> Option<Self> {
-        Some(Self {
-            width: viewport_dimension(bounds.size.width)?,
-            height: viewport_dimension(bounds.size.height)?,
-        })
-    }
-}
-
-#[derive(Clone)]
-struct WebSurfaceFrame {
-    requested_url: String,
-    loaded_url: Option<String>,
-    title: Option<String>,
-    width: u32,
-    height: u32,
-    image: Arc<RenderImage>,
-}
-
-impl WebSurfaceFrame {
-    fn from_snapshot(
+    Loading {
        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 });
-        };
-
-        let image_buffer = renderable_image_buffer(buffer);
-
-        Ok(Self {
-            requested_url,
-            loaded_url,
-            title,
-            width,
-            height,
-            image: Arc::new(RenderImage::new([image::Frame::new(image_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())
-    }
-
-    fn size(&self) -> WebSurfaceSize {
-        WebSurfaceSize { width: self.width, height: self.height }
-    }
-}
-
-#[derive(Debug, Error)]
-enum WebSurfaceError {
-    #[error("invalid servo frame buffer for {width}x{height}")]
-    InvalidFrameBuffer { width: u32, height: u32 },
+        size: WebSurfaceSize,
+        scroll_offset: WebSurfaceScrollOffset,
+        previous_frame: Option<WebSurfaceFrame>,
+    },
+    Ready(WebSurfaceFrame),
+    Failed {
+        requested_url: String,
+        size: WebSurfaceSize,
+        scroll_offset: WebSurfaceScrollOffset,
+        message: String,
+    },
 }

 impl ElyShell {
@@ -296,7 +319,14 @@ impl ElyShell {
            return;
        };

-        let WebSurfaceRequest { tab_id, requested_url, size, client, snapshot_request } = request;
+        let WebSurfaceRequest {
+            tab_id,
+            requested_url,
+            size,
+            scroll_offset,
+            client,
+            snapshot_request,
+        } = request;
        cx.spawn(async move |shell, cx| {
            let result = cx
                .background_executor()
@@ -304,7 +334,13 @@ impl ElyShell {
                .await;

            _ = shell.update(cx, |shell, cx| {
-                shell.handle_external_web_frame_result(tab_id, requested_url, size, result);
+                shell.handle_external_web_frame_result(
+                    tab_id,
+                    requested_url,
+                    size,
+                    scroll_offset,
+                    result,
+                );
                cx.notify();
            });
        })
@@ -316,27 +352,37 @@ impl ElyShell {
        tab_id: TabId,
        requested_url: String,
        size: WebSurfaceSize,
+        scroll_offset: WebSurfaceScrollOffset,
        result: Result<SidecarSnapshot, ServoSidecarError>,
    ) {
-        if !self.web_surfaces.is_loading(&tab_id, requested_url.as_str(), size) {
+        if !self.web_surfaces.is_loading(&tab_id, requested_url.as_str(), size, scroll_offset) {
            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, size, message: error.to_string() }
+            Ok(snapshot) => {
+                match WebSurfaceFrame::from_snapshot(requested_url.clone(), scroll_offset, snapshot)
+                {
+                    Ok(frame) => WebSurfaceState::Ready(frame),
+                    Err(error) => WebSurfaceState::Failed {
+                        requested_url,
+                        size,
+                        scroll_offset,
+                        message: error.to_string(),
+                    },
                }
-            },
-            Err(error) => {
-                WebSurfaceState::Failed { requested_url, size, message: error.to_string() }
            }
+            Err(error) => WebSurfaceState::Failed {
+                requested_url,
+                size,
+                scroll_offset,
+                message: error.to_string(),
+            },
        };
        self.web_surfaces.finish(tab_id, state);
    }

-    fn record_external_web_viewport(
+    pub(super) fn record_external_web_viewport(
        &mut self,
        tab_id: TabId,
        bounds: Bounds<Pixels>,
@@ -346,151 +392,18 @@ impl ElyShell {
            cx.notify();
        }
    }
-}

-fn render_ready_web_surface(
-    frame: &WebSurfaceFrame,
-    tab: &BrowserTab,
-    state_entity: Entity<ElyShell>,
-) -> AnyElement {
-    render_web_surface(
-        tab,
-        state_entity,
-        frame.title_label(),
-        frame.url_label().to_string(),
-        Some(format!("{}x{}", frame.width, frame.height)),
-        img(ImageSource::Render(frame.image.clone())).size_full().object_fit(ObjectFit::Contain),
-    )
-}
-
-fn render_web_surface_header(title: String, url: String, detail: Option<String>) -> 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(title),
-        )
-        .when_some(detail, |this, detail| {
-            this.child(div().text_xs().text_color(rgb(colors::MUTED)).child(detail))
-        })
-        .child(
-            div().max_w(px(420.0)).truncate().text_xs().text_color(rgb(colors::MUTED)).child(url),
-        )
-        .into_any_element()
-}
-
-fn render_loading_web_surface(tab: &BrowserTab, state_entity: Entity<ElyShell>) -> AnyElement {
-    render_web_surface(
-        tab,
-        state_entity,
-        tab.title().to_string(),
-        tab.url().as_str().to_string(),
-        Some("Rendering".to_string()),
-        centered_status(tab.title(), tab.url().as_str(), "Rendering page with Servo", colors::BODY),
-    )
-}
-
-fn render_failed_web_surface(
-    tab: &BrowserTab,
-    message: &str,
-    state_entity: Entity<ElyShell>,
-) -> AnyElement {
-    render_web_surface(
-        tab,
-        state_entity,
-        tab.title().to_string(),
-        tab.url().as_str().to_string(),
-        Some("Render failed".to_string()),
-        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(
-    tab: &BrowserTab,
-    state_entity: Entity<ElyShell>,
-    title: String,
-    url: String,
-    detail: Option<String>,
-    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))
-                .flex()
-                .flex_col()
-                .child(render_web_surface_header(title, url, detail))
-                .child(
-                    div()
-                        .relative()
-                        .flex_1()
-                        .min_h_0()
-                        .overflow_hidden()
-                        .bg(rgb(colors::SURFACE_CARD))
-                        .child(content)
-                        .child(render_viewport_tracker(tab.id().clone(), state_entity)),
-                ),
-        )
-        .into_any_element()
-}
-
-fn render_viewport_tracker(tab_id: TabId, state_entity: Entity<ElyShell>) -> impl IntoElement {
-    canvas(
-        move |bounds, _window: &mut Window, cx: &mut App| {
-            state_entity.update(cx, |shell, cx| {
-                shell.record_external_web_viewport(tab_id, bounds, cx);
-            });
-        },
-        |_, _, _, _| {},
-    )
-    .absolute()
-    .size_full()
-}
-
-fn viewport_dimension(pixels: Pixels) -> Option<u32> {
-    let value = f32::from(pixels.round());
-    if !value.is_finite() || value < 1.0 || value > u32::MAX as f32 {
-        return None;
+    pub(super) fn scroll_external_web_viewport(
+        &mut self,
+        tab_id: TabId,
+        requested_url: String,
+        delta: gpui::Point<Pixels>,
+        cx: &mut Context<Self>,
+    ) {
+        if self.web_surfaces.record_scroll_delta(&tab_id, requested_url.as_str(), delta) {
+            cx.notify();
+        }
    }
-
-    Some(value as u32)
 }

 pub(super) fn is_external_web_url(url: &str) -> bool {
@@ -0,0 +1,79 @@
+use std::sync::Arc;
+
+use gpui::RenderImage;
+use image::{ImageBuffer, Rgba};
+use thiserror::Error;
+
+use crate::services::servo_sidecar::SidecarSnapshot;
+
+use super::{
+    web_surface_geometry::{WebSurfaceScrollOffset, WebSurfaceSize},
+    web_surface_image::renderable_image_buffer,
+};
+
+#[derive(Clone)]
+pub(super) struct WebSurfaceFrame {
+    pub(super) requested_url: String,
+    loaded_url: Option<String>,
+    title: Option<String>,
+    width: u32,
+    height: u32,
+    scroll_offset: WebSurfaceScrollOffset,
+    pub(super) image: Arc<RenderImage>,
+}
+
+impl WebSurfaceFrame {
+    pub(super) fn from_snapshot(
+        requested_url: String,
+        scroll_offset: WebSurfaceScrollOffset,
+        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 });
+        };
+
+        let image_buffer = renderable_image_buffer(buffer);
+
+        Ok(Self {
+            requested_url,
+            loaded_url,
+            title,
+            width,
+            height,
+            scroll_offset,
+            image: Arc::new(RenderImage::new([image::Frame::new(image_buffer)])),
+        })
+    }
+
+    pub(super) fn title_label(&self) -> String {
+        self.title.clone().unwrap_or_else(|| self.requested_url.clone())
+    }
+
+    pub(super) fn url_label(&self) -> &str {
+        self.loaded_url.as_deref().unwrap_or(self.requested_url.as_str())
+    }
+
+    pub(super) fn detail_label(&self) -> String {
+        self.scroll_offset.detail_label(self.size())
+    }
+
+    pub(super) fn size(&self) -> WebSurfaceSize {
+        WebSurfaceSize { width: self.width, height: self.height }
+    }
+
+    pub(super) fn scroll_offset(&self) -> WebSurfaceScrollOffset {
+        self.scroll_offset
+    }
+}
+
+#[derive(Debug, Error)]
+pub(super) enum WebSurfaceError {
+    #[error("invalid servo frame buffer for {width}x{height}")]
+    InvalidFrameBuffer { width: u32, height: u32 },
+}
@@ -0,0 +1,95 @@
+use gpui::{Bounds, Pixels, Point};
+
+#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+pub(super) struct WebSurfaceSize {
+    pub(super) width: u32,
+    pub(super) height: u32,
+}
+
+impl WebSurfaceSize {
+    pub(super) fn from_bounds(bounds: Bounds<Pixels>) -> Option<Self> {
+        Some(Self {
+            width: viewport_dimension(bounds.size.width)?,
+            height: viewport_dimension(bounds.size.height)?,
+        })
+    }
+}
+
+#[derive(Clone, Copy, Debug, Default, Eq, PartialEq)]
+pub(super) struct WebSurfaceScrollOffset {
+    x: i32,
+    y: i32,
+}
+
+impl WebSurfaceScrollOffset {
+    pub(super) fn scrolled_by(self, delta: WebSurfaceScrollDelta) -> Self {
+        Self {
+            x: positive_scroll_component(self.x, delta.x),
+            y: positive_scroll_component(self.y, delta.y),
+        }
+    }
+
+    pub(super) fn detail_label(self, size: WebSurfaceSize) -> String {
+        match (self.x, self.y) {
+            (0, 0) => format!("{}x{}", size.width, size.height),
+            (0, y) => format!("{}x{} y={y}", size.width, size.height),
+            (x, y) => format!("{}x{} x={x} y={y}", size.width, size.height),
+        }
+    }
+
+    pub(super) fn x(self) -> i32 {
+        self.x
+    }
+
+    pub(super) fn y(self) -> i32 {
+        self.y
+    }
+}
+
+#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+pub(super) struct WebSurfaceScrollDelta {
+    x: i32,
+    y: i32,
+}
+
+impl WebSurfaceScrollDelta {
+    pub(super) fn from_point(delta: Point<Pixels>) -> Option<Self> {
+        let x = scroll_dimension(delta.x)?;
+        let y = scroll_dimension(delta.y)?;
+        if x == 0 && y == 0 {
+            return None;
+        }
+
+        Some(Self { x, y })
+    }
+}
+
+fn viewport_dimension(pixels: Pixels) -> Option<u32> {
+    let value = f32::from(pixels.round());
+    if !value.is_finite() || value < 1.0 || value > u32::MAX as f32 {
+        return None;
+    }
+
+    Some(value as u32)
+}
+
+fn scroll_dimension(pixels: Pixels) -> Option<i32> {
+    let value = f32::from(pixels.round());
+    if !value.is_finite() {
+        return None;
+    }
+    if value > i32::MAX as f32 {
+        return Some(i32::MAX);
+    }
+    if value < i32::MIN as f32 {
+        return Some(i32::MIN);
+    }
+
+    Some(value as i32)
+}
+
+fn positive_scroll_component(current: i32, delta: i32) -> i32 {
+    let value = i64::from(current) + i64::from(delta);
+    let clamped = value.clamp(0, i64::from(i32::MAX));
+    clamped as i32
+}
@@ -0,0 +1,165 @@
+use ely_domain::{BrowserTab, TabId};
+use gpui::{
+    AnyElement, App, Entity, ImageSource, InteractiveElement, IntoElement, ObjectFit,
+    ParentElement, Styled, StyledImage, Window, canvas, div, img, prelude::FluentBuilder, px, rgb,
+};
+use gpui_component::StyledExt;
+
+use super::{ElyShell, web_surface_frame::WebSurfaceFrame};
+use ely_design_system::{colors, spacing};
+
+pub(super) fn render_ready_web_surface(
+    frame: &WebSurfaceFrame,
+    tab: &BrowserTab,
+    state_entity: Entity<ElyShell>,
+) -> AnyElement {
+    render_web_surface(
+        tab,
+        state_entity,
+        frame.title_label(),
+        frame.url_label().to_string(),
+        Some(frame.detail_label()),
+        img(ImageSource::Render(frame.image.clone())).size_full().object_fit(ObjectFit::Contain),
+    )
+}
+
+pub(super) fn render_loading_web_surface(
+    tab: &BrowserTab,
+    state_entity: Entity<ElyShell>,
+) -> AnyElement {
+    render_web_surface(
+        tab,
+        state_entity,
+        tab.title().to_string(),
+        tab.url().as_str().to_string(),
+        Some("Rendering".to_string()),
+        centered_status(tab.title(), tab.url().as_str(), "Rendering page with Servo", colors::BODY),
+    )
+}
+
+pub(super) fn render_failed_web_surface(
+    tab: &BrowserTab,
+    message: &str,
+    state_entity: Entity<ElyShell>,
+) -> AnyElement {
+    render_web_surface(
+        tab,
+        state_entity,
+        tab.title().to_string(),
+        tab.url().as_str().to_string(),
+        Some("Render failed".to_string()),
+        centered_status(tab.title(), tab.url().as_str(), message, colors::ERROR),
+    )
+}
+
+fn render_web_surface_header(title: String, url: String, detail: Option<String>) -> 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(title),
+        )
+        .when_some(detail, |this, detail| {
+            this.child(div().text_xs().text_color(rgb(colors::MUTED)).child(detail))
+        })
+        .child(
+            div().max_w(px(420.0)).truncate().text_xs().text_color(rgb(colors::MUTED)).child(url),
+        )
+        .into_any_element()
+}
+
+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(
+    tab: &BrowserTab,
+    state_entity: Entity<ElyShell>,
+    title: String,
+    url: String,
+    detail: Option<String>,
+    content: impl IntoElement,
+) -> AnyElement {
+    let scroll_tab_id = tab.id().clone();
+    let scroll_url = tab.url().as_str().to_string();
+    let scroll_entity = state_entity.clone();
+    let tracker_entity = state_entity;
+
+    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))
+                .flex()
+                .flex_col()
+                .child(render_web_surface_header(title, url, detail))
+                .child(
+                    div()
+                        .relative()
+                        .flex_1()
+                        .min_h_0()
+                        .overflow_hidden()
+                        .bg(rgb(colors::SURFACE_CARD))
+                        .on_scroll_wheel(move |event, window, cx| {
+                            let delta = event.delta.pixel_delta(window.line_height());
+                            scroll_entity.update(cx, |shell, cx| {
+                                shell.scroll_external_web_viewport(
+                                    scroll_tab_id.clone(),
+                                    scroll_url.clone(),
+                                    delta,
+                                    cx,
+                                );
+                            });
+                            cx.stop_propagation();
+                        })
+                        .child(content)
+                        .child(render_viewport_tracker(tab.id().clone(), tracker_entity)),
+                ),
+        )
+        .into_any_element()
+}
+
+fn render_viewport_tracker(tab_id: TabId, state_entity: Entity<ElyShell>) -> impl IntoElement {
+    canvas(
+        move |bounds, _window: &mut Window, cx: &mut App| {
+            state_entity.update(cx, |shell, cx| {
+                shell.record_external_web_viewport(tab_id, bounds, cx);
+            });
+        },
+        |_, _, _, _| {},
+    )
+    .absolute()
+    .size_full()
+}