feat: implement browser scrollbar overlay and clipboard support via upstream integration

sguzman · sguzman · commit 8ab1484868f7 · 2026-04-29T09:17:25.000-06:00
diff --git a/run.log b/run.log
diff --git a/src/app/input.rs b/src/app/input.rs
@@ -235,14 +235,17 @@ impl BrazenApp {
                         let config = &self.config.shortcuts;
                         
                         if matches_shortcut(&config.select_all, &key, &modifiers) {
+                            tracing::info!(target: "brazen::input", "SHORTCUT: select all detected");
                             self.engine.select_all();
                             self.shell_state.record_event("shortcut: select all");
                             handled_shortcut = true;
                         } else if matches_shortcut(&config.copy, &key, &modifiers) {
+                            tracing::info!(target: "brazen::input", "SHORTCUT: copy detected");
                             self.engine.copy();
                             self.shell_state.record_event("shortcut: copy");
                             handled_shortcut = true;
                         } else if matches_shortcut(&config.paste, &key, &modifiers) {
+                            tracing::info!(target: "brazen::input", "SHORTCUT: paste detected");
                             self.engine.paste();
                             self.shell_state.record_event("shortcut: paste");
                             handled_shortcut = true;
diff --git a/src/app/mod.rs b/src/app/mod.rs
@@ -564,7 +564,7 @@ impl BrazenApp {
                     self.load_status_started_at = Some(Instant::now());
                 }
                 if let Some(started_at) = self.load_status_started_at
-                    && started_at.elapsed() >= Duration::from_secs(10)
+                    && started_at.elapsed() >= Duration::from_secs(30)
                     && !self.load_status_warned
                 {
                     self.load_status_warned = true;
diff --git a/src/app/ui_components.rs b/src/app/ui_components.rs
@@ -38,7 +38,9 @@ fn beautify_url(url: &str) -> String {
 
 impl super::BrazenApp {
     pub fn render_browser_view(&mut self, ctx: &eframe::egui::Context) {
-        eframe::egui::CentralPanel::default().show(ctx, |ui| {
+        eframe::egui::CentralPanel::default()
+            .frame(eframe::egui::Frame::central_panel(&ctx.style()).inner_margin(8.0))
+            .show(ctx, |ui| {
             let available = ui.available_size();
             let available = eframe::egui::vec2(available.x.floor(), available.y.floor());
             let (rect, _response_opt) = if let Some(texture) = &self.render_texture {
@@ -80,6 +82,11 @@ impl super::BrazenApp {
 
             self.render_viewport_rect = Some(rect);
                 
+            // Draw Scrollbar Overlay
+            if let Some(scroll_info) = self.engine.scroll_info() {
+                self.render_scrollbar(ui, rect, &scroll_info);
+            }
+
             // Scaffold Mode Overlay
             if self.shell_state.backend_name == "scaffold" {
                 let painter = ui.painter().with_clip_rect(rect);
@@ -603,4 +610,34 @@ impl super::BrazenApp {
             self.shell_state.pending_context_menu = None;
         }
     }
+
+    fn render_scrollbar(&self, ui: &mut eframe::egui::Ui, rect: eframe::egui::Rect, info: &crate::engine::ScrollInfo) {
+        if info.content_size.1 <= info.viewport_size.1 || info.viewport_size.1 <= 0.0 {
+            return;
+        }
+
+        let bar_width = 6.0;
+        let bar_bg_color = eframe::egui::Color32::from_black_alpha(30);
+        let bar_handle_color = eframe::egui::Color32::from_white_alpha(100);
+
+        let max_scroll = (info.content_size.1 - info.viewport_size.1).max(1.0);
+        let scroll_ratio = (info.scroll_pos.1 / max_scroll).clamp(0.0, 1.0);
+        let handle_height_ratio = (info.viewport_size.1 / info.content_size.1).clamp(0.1, 1.0);
+        let handle_height = rect.height() * handle_height_ratio;
+        let handle_top = (rect.height() - handle_height) * scroll_ratio;
+
+        let bar_rect = eframe::egui::Rect::from_min_size(
+            rect.right_top() - eframe::egui::vec2(bar_width + 4.0, 0.0),
+            eframe::egui::vec2(bar_width, rect.height()),
+        );
+
+        let handle_rect = eframe::egui::Rect::from_min_size(
+            bar_rect.left_top() + eframe::egui::vec2(0.0, handle_top),
+            eframe::egui::vec2(bar_width, handle_height),
+        );
+
+        let painter = ui.painter().with_clip_rect(rect);
+        painter.rect_filled(bar_rect, 3.0, bar_bg_color);
+        painter.rect_filled(handle_rect, 3.0, bar_handle_color);
+    }
 }
diff --git a/src/engine.rs b/src/engine.rs
@@ -9,6 +9,13 @@ use crate::servo_embedder::{ServoEmbedder, ServoEmbedderConfig};
 
 pub type EngineInstanceId = u64;
 
+#[derive(Debug, Clone, PartialEq)]
+pub struct ScrollInfo {
+    pub scroll_pos: (f32, f32),
+    pub content_size: (f32, f32),
+    pub viewport_size: (f32, f32),
+}
+
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum FocusState {
     Focused,
@@ -380,6 +387,9 @@ pub trait BrowserEngine {
     fn take_screenshot(&mut self) -> Result<EngineFrame, String>;
     fn health(&self) -> RenderHealth;
     fn select_all(&mut self);
+    fn copy(&mut self);
+    fn paste(&mut self);
+    fn scroll_info(&self) -> Option<ScrollInfo>;
 }
 
 
@@ -642,6 +652,12 @@ impl BrowserEngine for ScaffoldEngine {
     }
 
     fn select_all(&mut self) {}
+    fn copy(&mut self) {}
+    fn paste(&mut self) {}
+
+    fn scroll_info(&self) -> Option<ScrollInfo> {
+        None
+    }
 }
 use std::sync::{Arc, RwLock};
 use crate::session::SessionSnapshot;
@@ -1138,4 +1154,14 @@ impl BrowserEngine for ServoEngine {
     fn select_all(&mut self) {
         self.embedder.select_all();
     }
+    fn copy(&mut self) {
+        self.embedder.copy();
+    }
+    fn paste(&mut self) {
+        self.embedder.paste();
+    }
+
+    fn scroll_info(&self) -> Option<ScrollInfo> {
+        self.embedder.scroll_info()
+    }
 }
diff --git a/src/servo_embedder.rs b/src/servo_embedder.rs
@@ -489,6 +489,32 @@ impl ServoEmbedder {
         }
     }
 
+    pub fn copy(&mut self) {
+        #[cfg(feature = "servo-upstream")]
+        if let Some(upstream) = &self.upstream {
+            upstream.copy();
+        }
+    }
+
+    pub fn paste(&mut self) {
+        #[cfg(feature = "servo-upstream")]
+        if let Some(upstream) = &self.upstream {
+            upstream.paste();
+        }
+    }
+
+    pub fn scroll_info(&self) -> Option<crate::engine::ScrollInfo> {
+        #[cfg(feature = "servo-upstream")]
+        if let Some(snapshot) = &self.last_snapshot {
+            return Some(crate::engine::ScrollInfo {
+                scroll_pos: snapshot.scroll_pos,
+                content_size: snapshot.content_size,
+                viewport_size: snapshot.viewport_size,
+            });
+        }
+        None
+    }
+
     pub fn handle_input(&mut self, event: &InputEvent) {
         if self.verbose_logging {
             tracing::trace!(target: "brazen::servo", ?event, "input forwarded");
@@ -566,6 +592,7 @@ impl ServoEmbedder {
                         self.last_pointer.0,
                         self.last_pointer.1,
                     );
+                    upstream.update_scroll_info();
                 }
                 #[cfg(not(feature = "servo-upstream"))]
                 let _ = (delta_x, delta_y);
@@ -760,6 +787,7 @@ impl ServoEmbedder {
             pixel_format: self.config.pixel_format,
             alpha_mode: self.config.alpha_mode,
             color_space: self.config.color_space,
+            scale_factor: surface.metadata.scale_factor_basis_points as f32 / 100.0,
             enable_pixel_probe: self.config.enable_pixel_probe,
             resources_dir: self.config.resources_dir.clone(),
             certificate_path: self.config.certificate_path.clone(),
diff --git a/src/servo_upstream.rs b/src/servo_upstream.rs
@@ -43,6 +43,9 @@ pub struct UpstreamSnapshot {
     pub history_index: usize,
     pub animating: bool,
     pub last_error: Option<String>,
+    pub scroll_pos: (f32, f32),
+    pub content_size: (f32, f32),
+    pub viewport_size: (f32, f32),
 }
 
 #[derive(Debug, Clone)]
@@ -61,6 +64,7 @@ pub struct ServoUpstreamConfig {
     pub pixel_format: PixelFormat,
     pub alpha_mode: AlphaMode,
     pub color_space: ColorSpace,
+    pub scale_factor: f32,
     pub enable_pixel_probe: bool,
     pub resources_dir: Option<PathBuf>,
     pub certificate_path: Option<PathBuf>,
@@ -88,6 +92,9 @@ impl Default for UpstreamSnapshot {
             history_index: 0,
             animating: false,
             last_error: None,
+            scroll_pos: (0.0, 0.0),
+            content_size: (0.0, 0.0),
+            viewport_size: (0.0, 0.0),
         }
     }
 }
@@ -319,6 +326,7 @@ pub struct ServoUpstreamRuntime {
     resource_source: ResourceDirSource,
     pending_clipboard_request: Arc<std::sync::Mutex<Option<StringRequest>>>,
     event_sender: std::sync::mpsc::Sender<EngineEvent>,
+    scale_factor: f32,
 }
 
 impl std::fmt::Debug for ServoUpstreamRuntime {
@@ -437,6 +445,7 @@ impl ServoUpstreamRuntime {
             pending_clipboard_request.clone(),
         ));
         let webview = WebViewBuilder::new(&servo, rendering_context.clone())
+            .hidpi_scale_factor(libservo::Scale::new(config.scale_factor))
             .delegate(delegate)
             .clipboard_delegate(clipboard_delegate)
             .build();
@@ -480,6 +489,7 @@ impl ServoUpstreamRuntime {
             resource_source: source,
             pending_clipboard_request,
             event_sender,
+            scale_factor: config.scale_factor,
         })
     }
 
@@ -511,6 +521,7 @@ impl ServoUpstreamRuntime {
     }
 
     pub fn select_all(&self) {
+        tracing::info!(target: "brazen::servo", "UPSTREAM: select_all executed");
         let script = "document.execCommand('selectAll', false, null);".to_string();
         let webview_id = self.webview.id();
         self.servo.javascript_evaluator_mut().evaluate(
@@ -520,6 +531,67 @@ impl ServoUpstreamRuntime {
         );
     }
 
+    pub fn copy(&self) {
+        tracing::info!(target: "brazen::servo", "UPSTREAM: copy executed");
+        let script = "document.execCommand('copy', false, null);".to_string();
+        let webview_id = self.webview.id();
+        self.servo.javascript_evaluator_mut().evaluate(
+            webview_id,
+            script,
+            Box::new(|_| {}),
+        );
+    }
+
+    pub fn paste(&self) {
+        tracing::info!(target: "brazen::servo", "UPSTREAM: paste executed");
+        let script = "document.execCommand('paste', false, null);".to_string();
+        let webview_id = self.webview.id();
+        self.servo.javascript_evaluator_mut().evaluate(
+            webview_id,
+            script,
+            Box::new(|_| {}),
+        );
+    }
+
+    pub fn update_scroll_info(&self) {
+        let script = "JSON.stringify({
+            scrollX: window.scrollX,
+            scrollY: window.scrollY,
+            contentWidth: document.documentElement.scrollWidth,
+            contentHeight: document.documentElement.scrollHeight,
+            viewportWidth: window.innerWidth,
+            viewportHeight: window.innerHeight
+        })".to_string();
+        
+        let snapshot = self.snapshot.clone();
+        let webview_id = self.webview.id();
+        self.servo.javascript_evaluator_mut().evaluate(
+            webview_id,
+            script,
+            Box::new(move |res| {
+                if let Ok(val) = res {
+                    if let libservo::JSValue::String(s) = val {
+                        if let Ok(json) = serde_json::from_str::<serde_json::Value>(&s) {
+                            let mut snap = snapshot.borrow_mut();
+                            snap.scroll_pos = (
+                                json["scrollX"].as_f64().unwrap_or(0.0) as f32,
+                                json["scrollY"].as_f64().unwrap_or(0.0) as f32
+                            );
+                            snap.content_size = (
+                                json["contentWidth"].as_f64().unwrap_or(0.0) as f32,
+                                json["contentHeight"].as_f64().unwrap_or(0.0) as f32
+                            );
+                            snap.viewport_size = (
+                                json["viewportWidth"].as_f64().unwrap_or(0.0) as f32,
+                                json["viewportHeight"].as_f64().unwrap_or(0.0) as f32
+                            );
+                        }
+                    }
+                }
+            }),
+        );
+    }
+
     pub fn navigate(&self, url: &str) -> Result<(), String> {
         let url = Url::parse(url).map_err(|error| format!("invalid url: {error}"))?;
         self.webview.load(url);
@@ -620,8 +692,9 @@ impl ServoUpstreamRuntime {
     }
 
     pub fn handle_mouse_move(&self, x: f32, y: f32) {
+        let scale = self.scale_factor;
         self.handle_input(InputEvent::MouseMove(MouseMoveEvent::new(
-            WebViewPoint::Device(DevicePoint::new(x, y)),
+            WebViewPoint::Device(DevicePoint::new(x * scale, y * scale)),
         )));
     }
 
@@ -631,10 +704,11 @@ impl ServoUpstreamRuntime {
         } else {
             MouseButtonAction::Up
         };
+        let scale = self.scale_factor;
         self.handle_input(InputEvent::MouseButton(MouseButtonEvent::new(
             action,
             MouseButton::from(button),
-            WebViewPoint::Device(DevicePoint::new(x, y)),
+            WebViewPoint::Device(DevicePoint::new(x * scale, y * scale)),
         )));
     }
 
@@ -651,9 +725,10 @@ impl ServoUpstreamRuntime {
             z: 0.0,
             mode: WheelMode::DeltaPixel,
         };
+        let scale = self.scale_factor;
         self.handle_input(InputEvent::Wheel(WheelEvent::new(
             delta,
-            WebViewPoint::Device(DevicePoint::new(x, y)),
+            WebViewPoint::Device(DevicePoint::new(x * scale, y * scale)),
         )));
     }
 

Original file line number	Diff line number	Diff line change
`@@ -564,7 +564,7 @@ impl BrazenApp {`
`564`	`564`	`self.load_status_started_at = Some(Instant::now());`
`565`	`565`	`}`
`566`	`566`	`if let Some(started_at) = self.load_status_started_at`
`567`		`- && started_at.elapsed() >= Duration::from_secs(10)`
	`567`	`+ && started_at.elapsed() >= Duration::from_secs(30)`
`568`	`568`	`&& !self.load_status_warned`
`569`	`569`	`{`
`570`	`570`	`self.load_status_warned = true;`