feat(ie-render): add browser chrome overlay rendering #78

thomasnemer · thomasnemer · commit e87304dd9529 · 2026-04-01T18:53:56.000+02:00
Chrome overlay system (chrome.rs):
- ChromeOverlay struct with optional address bar, tab list, bookmarks
- build_chrome_display_list generates PaintCommands for overlays
- Address bar: dark semi-transparent bar at top with URL text and
  cursor indicator
- Tab list: left-side panel with tab titles/URLs, active tab highlighted
- Bookmarks: right-side panel with title/URL entries
- Styled with consistent dark theme colors

Shell integration (app.rs):
- build_chrome_overlay() maps OverlayState to ChromeOverlay data
- paint() appends chrome commands after page content
- request_redraw() after every action and address bar keypress
- Overlays appear on Ctrl+L/Ctrl+Shift+T/Ctrl+Shift+B, dismiss on Escape
diff --git a/crates/ie-render/src/chrome.rs b/crates/ie-render/src/chrome.rs
@@ -0,0 +1,262 @@
+use crate::paint::{Color, PaintCommand};
+
+/// Browser chrome overlay data for rendering.
+pub struct ChromeOverlay {
+    pub address_bar: Option<AddressBarOverlay>,
+    pub tab_list: Option<TabListOverlay>,
+    pub bookmarks: Option<BookmarkListOverlay>,
+}
+
+pub struct AddressBarOverlay {
+    pub text: String,
+    pub cursor: usize,
+}
+
+pub struct TabListOverlay {
+    pub tabs: Vec<TabEntry>,
+    pub active_index: usize,
+}
+
+pub struct TabEntry {
+    pub id: u64,
+    pub title: String,
+    pub url: String,
+}
+
+pub struct BookmarkListOverlay {
+    pub bookmarks: Vec<BookmarkEntry>,
+}
+
+pub struct BookmarkEntry {
+    pub title: String,
+    pub url: String,
+}
+
+impl ChromeOverlay {
+    pub fn none() -> Self {
+        Self {
+            address_bar: None,
+            tab_list: None,
+            bookmarks: None,
+        }
+    }
+
+    pub fn is_active(&self) -> bool {
+        self.address_bar.is_some() || self.tab_list.is_some() || self.bookmarks.is_some()
+    }
+}
+
+/// Build paint commands for chrome overlays (rendered on top of page content).
+pub fn build_chrome_display_list(
+    chrome: &ChromeOverlay,
+    viewport_width: f32,
+    _viewport_height: f32,
+) -> Vec<PaintCommand> {
+    let mut commands = Vec::new();
+
+    if let Some(bar) = &chrome.address_bar {
+        render_address_bar(&mut commands, bar, viewport_width);
+    }
+
+    if let Some(tabs) = &chrome.tab_list {
+        render_tab_list(&mut commands, tabs, viewport_width);
+    }
+
+    if let Some(bookmarks) = &chrome.bookmarks {
+        render_bookmark_list(&mut commands, bookmarks, viewport_width);
+    }
+
+    commands
+}
+
+const BAR_HEIGHT: f32 = 40.0;
+const BAR_BG: Color = Color {
+    r: 30,
+    g: 30,
+    b: 50,
+    a: 230,
+};
+const BAR_TEXT: Color = Color {
+    r: 255,
+    g: 255,
+    b: 255,
+    a: 255,
+};
+const BAR_CURSOR: Color = Color {
+    r: 100,
+    g: 180,
+    b: 255,
+    a: 255,
+};
+const PANEL_BG: Color = Color {
+    r: 40,
+    g: 40,
+    b: 60,
+    a: 240,
+};
+const ACTIVE_BG: Color = Color {
+    r: 60,
+    g: 80,
+    b: 120,
+    a: 240,
+};
+const ITEM_TEXT: Color = Color {
+    r: 220,
+    g: 220,
+    b: 230,
+    a: 255,
+};
+const URL_TEXT: Color = Color {
+    r: 140,
+    g: 160,
+    b: 200,
+    a: 255,
+};
+
+fn render_address_bar(commands: &mut Vec<PaintCommand>, bar: &AddressBarOverlay, width: f32) {
+    // Background bar across top
+    commands.push(PaintCommand::FillRect {
+        x: 0.0,
+        y: 0.0,
+        width,
+        height: BAR_HEIGHT,
+        color: BAR_BG,
+    });
+
+    // URL text
+    let text_x = 12.0;
+    let text_y = 10.0;
+    let font_size = 16.0;
+    if !bar.text.is_empty() {
+        commands.push(PaintCommand::Text {
+            text: bar.text.clone(),
+            x: text_x,
+            y: text_y,
+            font_size,
+            color: BAR_TEXT,
+        });
+    }
+
+    // Cursor
+    let cursor_x = text_x + bar.cursor as f32 * font_size * 0.5;
+    commands.push(PaintCommand::FillRect {
+        x: cursor_x,
+        y: text_y,
+        width: 2.0,
+        height: font_size,
+        color: BAR_CURSOR,
+    });
+}
+
+fn render_tab_list(commands: &mut Vec<PaintCommand>, tabs: &TabListOverlay, width: f32) {
+    let panel_width = 300.0f32.min(width * 0.4);
+    let item_height = 36.0;
+    let panel_height = (tabs.tabs.len() as f32 * item_height).max(item_height);
+
+    // Panel background
+    commands.push(PaintCommand::FillRect {
+        x: 0.0,
+        y: 0.0,
+        width: panel_width,
+        height: panel_height,
+        color: PANEL_BG,
+    });
+
+    for (i, tab) in tabs.tabs.iter().enumerate() {
+        let y = i as f32 * item_height;
+
+        // Active tab highlight
+        if i == tabs.active_index {
+            commands.push(PaintCommand::FillRect {
+                x: 0.0,
+                y,
+                width: panel_width,
+                height: item_height,
+                color: ACTIVE_BG,
+            });
+        }
+
+        // Tab title
+        let title = if tab.title.is_empty() {
+            "New Tab"
+        } else {
+            &tab.title
+        };
+        commands.push(PaintCommand::Text {
+            text: title.to_string(),
+            x: 12.0,
+            y: y + 6.0,
+            font_size: 14.0,
+            color: ITEM_TEXT,
+        });
+
+        // Tab URL (smaller, below title)
+        if !tab.url.is_empty() {
+            let url_display = if tab.url.len() > 35 {
+                format!("{}...", &tab.url[..35])
+            } else {
+                tab.url.clone()
+            };
+            commands.push(PaintCommand::Text {
+                text: url_display,
+                x: 12.0,
+                y: y + 22.0,
+                font_size: 10.0,
+                color: URL_TEXT,
+            });
+        }
+    }
+}
+
+fn render_bookmark_list(
+    commands: &mut Vec<PaintCommand>,
+    bookmarks: &BookmarkListOverlay,
+    width: f32,
+) {
+    let panel_width = 350.0f32.min(width * 0.5);
+    let item_height = 32.0;
+    let panel_height = (bookmarks.bookmarks.len() as f32 * item_height)
+        .max(item_height)
+        .min(400.0);
+
+    // Panel background
+    commands.push(PaintCommand::FillRect {
+        x: width - panel_width,
+        y: 0.0,
+        width: panel_width,
+        height: panel_height,
+        color: PANEL_BG,
+    });
+
+    for (i, bm) in bookmarks.bookmarks.iter().enumerate() {
+        let y = i as f32 * item_height;
+        if y + item_height > panel_height {
+            break;
+        }
+
+        let x_offset = width - panel_width + 12.0;
+
+        // Title
+        commands.push(PaintCommand::Text {
+            text: bm.title.clone(),
+            x: x_offset,
+            y: y + 6.0,
+            font_size: 13.0,
+            color: ITEM_TEXT,
+        });
+
+        // URL
+        let url_display = if bm.url.len() > 40 {
+            format!("{}...", &bm.url[..40])
+        } else {
+            bm.url.clone()
+        };
+        commands.push(PaintCommand::Text {
+            text: url_display,
+            x: x_offset,
+            y: y + 20.0,
+            font_size: 10.0,
+            color: URL_TEXT,
+        });
+    }
+}
diff --git a/crates/ie-render/src/lib.rs b/crates/ie-render/src/lib.rs
@@ -3,11 +3,16 @@
 //! Rendering engine for Internet Exploder.
 //! GPU-accelerated via wgpu, with software fallback for tests.
 
+pub mod chrome;
 pub mod gpu;
 pub mod paint;
 pub mod software;
 pub mod text;
 
+pub use chrome::{
+    AddressBarOverlay, BookmarkEntry, BookmarkListOverlay, ChromeOverlay, TabEntry, TabListOverlay,
+    build_chrome_display_list,
+};
 pub use gpu::GpuRenderer;
 pub use paint::{Color, PaintCommand, build_display_list};
 pub use software::{SoftwareTextMeasure, render_to_buffer};
diff --git a/crates/ie-shell/src/app.rs b/crates/ie-shell/src/app.rs
@@ -171,6 +171,10 @@ impl Browser {
                 event_loop.exit();
             }
         }
+        // Redraw after any action to update chrome overlays
+        if let Some(window) = &self.window {
+            window.request_redraw();
+        }
     }
 
     fn handle_address_bar_input(&mut self, event: &winit::event::KeyEvent) {
@@ -291,14 +295,82 @@ impl Browser {
     }
 
     fn paint(&mut self) {
-        let commands = self.render_page();
+        let mut commands = self.render_page();
+
+        // Append chrome overlay commands on top of page content
+        let (vw, vh) = self
+            .gpu_renderer
+            .as_ref()
+            .map(|r| r.size())
+            .unwrap_or((800, 600));
+        let chrome = self.build_chrome_overlay();
+        commands.extend(ie_render::build_chrome_display_list(
+            &chrome, vw as f32, vh as f32,
+        ));
+
         if let Some(renderer) = &mut self.gpu_renderer
             && let Err(e) = renderer.render(&commands)
         {
             tracing::error!("render error: {e}");
         }
     }
 
+    fn build_chrome_overlay(&self) -> ie_render::ChromeOverlay {
+        match &self.overlay {
+            OverlayState::None => ie_render::ChromeOverlay::none(),
+            OverlayState::AddressBar(bar) => ie_render::ChromeOverlay {
+                address_bar: Some(ie_render::AddressBarOverlay {
+                    text: bar.input.clone(),
+                    cursor: bar.cursor,
+                }),
+                tab_list: None,
+                bookmarks: None,
+            },
+            OverlayState::TabList => {
+                let tabs = self
+                    .tab_manager
+                    .tabs()
+                    .iter()
+                    .map(|t| ie_render::TabEntry {
+                        id: t.id.0,
+                        title: t.title.clone(),
+                        url: t
+                            .url
+                            .as_ref()
+                            .map(|u| u.as_str().to_string())
+                            .unwrap_or_default(),
+                    })
+                    .collect();
+                let active_index = self
+                    .tab_manager
+                    .active_tab()
+                    .and_then(|at| self.tab_manager.tabs().iter().position(|t| t.id == at.id))
+                    .unwrap_or(0);
+                ie_render::ChromeOverlay {
+                    address_bar: None,
+                    tab_list: Some(ie_render::TabListOverlay { tabs, active_index }),
+                    bookmarks: None,
+                }
+            }
+            OverlayState::Bookmarks => {
+                let bookmarks = self
+                    .bookmark_store
+                    .list()
+                    .iter()
+                    .map(|b| ie_render::BookmarkEntry {
+                        title: b.title.clone(),
+                        url: b.url.clone(),
+                    })
+                    .collect();
+                ie_render::ChromeOverlay {
+                    address_bar: None,
+                    tab_list: None,
+                    bookmarks: Some(ie_render::BookmarkListOverlay { bookmarks }),
+                }
+            }
+        }
+    }
+
     fn render_page(&self) -> Vec<ie_render::PaintCommand> {
         let source = self
             .tab_manager
@@ -447,6 +519,9 @@ impl ApplicationHandler<UserEvent> for Browser {
                             return;
                         }
                         self.handle_address_bar_input(key_event);
+                        if let Some(window) = &self.window {
+                            window.request_redraw();
+                        }
                     } else {
                         // TabList / Bookmarks: Escape dismisses, other keys go through
                         if let Some(action) =
