- Implement PNG rendering for DOM graphs, with fallback to DOT format.
- Add support for max-width constraints in image layout based on CSS styles.
- Introduce caching mechanisms for image loading, including tracking failed and pending loads.
- Update HTML parser to handle void elements correctly.
- Modify template rendering to support PNG graph files.
- **Link Detection and Navigation**: Added functionality to detect if a mouse click falls within a link area. If a link is clicked, the browser now navigates to the corresponding URL while logging the action. This also includes handling relative URLs based on the current page context.
- **Line Layout Enhancements**: The `LayoutLine` class now includes optional attributes for color and href, allowing links to maintain their designated colors in the rendered output.
- **Color Parsing**: Implemented a new `_parse_color` method in the `RenderPipeline` class to convert various color formats (hex and named colors) to Skia-compatible values. This ensures that default link colors are correctly applied and that extremely light colors are rendered as black for visibility.
- **Rendering Links**: During the rendering process, links in the text layout are now rendered with their specified colors, and an underline is drawn under links to indicate interactivity.
- **Document Layout Updates**: The document parsing system has been updated to extract link information correctly while preserving text hierarchy.
- **Tests**: A comprehensive suite of tests has been added, including tests for link parsing, layout characteristics, styling application, and default color handling for links.
This commit introduces support for loading and rendering images in the Bowser web browser, enhancing the rendering engine to handle various image sources. Key changes include:
- Updated README.md to reflect the new milestone status and added features for image support.
- Added `ImageLayout` class to manage image layout and loading.
- Implemented synchronous and asynchronous image loading in `src/network/images.py`, including caching mechanisms.
- Expanded the DOM parsing capabilities in `DocumentLayout` to handle `<img>` tags and manage their layout directives.
- Created a new `DrawImage` command in the rendering pipeline, which handles the drawing of both loaded images and placeholders for unloaded images.
- Introduced a task queue for managing asynchronous image loads, ensuring UI remains responsive during image fetching.
- Added unit tests for image loading, layout management, and the async task queue to ensure robust functionality and prevent regressions.
- Added a comprehensive CSS parser with support for tag, class, and ID selectors.
- Implemented property declaration parsing and inline style handling.
- Introduced a Selector class for specificity calculation and matching against HTML elements.
- Created a CSSRule class to represent individual CSS rules.
- Developed a StyleResolver class to compute final styles for elements, considering cascade and inheritance.
- Added integration tests for CSS parsing and style application in HTML documents.
- Updated HTML parser to retain <style> tags for CSS extraction.
- Enhanced tests for CSS parsing, inline styles, and computed styles.
- Removed unused imports from various test files to streamline code.
- Cleaned up whitespace in test cases for better consistency.
- Updated dependency management in `uv.lock` to reflect changes in optional dependencies.
- Ensured all tests maintain functionality while enhancing clarity and organization.
- Introduced a new feature to visualize the Document Object Model (DOM) tree of the loaded web page.
- Implemented keyboard shortcut (Ctrl+Shift+D) for generating and displaying the DOM graph.
- Added core implementation files:
- src/debug/dom_graph.py: Handles generation and rendering of graphs in DOT and SVG formats.
- Created templates and documentation for the new feature, including:
- docs/DOM_VISUALIZATION.md: Overview and usage instructions.
- docs/DOM_GRAPH_UX.md: User experience design documentation.
- Allowed the visualization to open in a new browser tab instead of an external viewer.
- Enhanced visual representation through color coding of different HTML elements.
- Implemented comprehensive tests for graph generation and page rendering.
- Updated README.md to include usage instructions for DOM visualization.
- Included test_holder.html as an example test page.
- Modified various components in the browser to integrate tab management and enhance the graphical rendering experience.
Simplified tab bar implementation:
- Remove complex CSS provider logic that was causing issues
- Simple box-based layout with tab label + close button per tab
- Direct button click handlers with tab reference stored on widget
- Much simpler and more reliable event handling
Tab bar features:
- Each tab shown as: [tab label button] [close button ✕]
- Active tab highlighted with suggested-action style
- Inactive tabs use flat style for cleaner look
- Close button is small and flat (36px width)
- New tab button with ＋ symbol (48px width)
Event handling:
- _on_tab_clicked: Activates the clicked tab
- _on_close_clicked: Closes the clicked tab
- _on_new_tab_clicked: Opens new tab to about:startpage
- Tab reference stored directly on button widget for easy access
Benefits:
- Much simpler codebase
- No complex CSS provider per widget
- Reliable event handling
- Easy to debug and maintain
- No style context issues
All tests passing (15/15)
Enhanced tab widget design:
- Unified tab widget with integrated close button (no visual separation)
- Close button on the right with rounded right corners
- Tab button with rounded left corners for seamless integration
- Custom CSS styling for professional appearance
- Hover effects: close button highlights in warning color
- Tab highlights as suggested-action when active
Visual improvements:
- Tabs have rounded corners (4px radius)
- Proper borders matching theme colors
- Better padding and spacing
- Flat buttons by default except active tab
- Close button marked with ✕ instead of ×
- Better visual feedback on hover
UX improvements:
- Tooltips on all buttons (tab URL, close tab, new tab)
- Small square close button (32px) for easy clicking
- Active tab uses blue suggested-action styling
- Tabs show full URL on hover
- New tab uses about:startpage instead of example.com
CSS styling:
- Theme-aware colors using @view_bg_color, @borders, @warning_color
- Proper border-radius on tab and close button
- Visual separation between tab and close button
- Hover state for better feedback
All tests passing (15/15)
Benefits of libadwaita:
- Modern, polished UI following GNOME Human Interface Guidelines
- Professional HeaderBar with proper navigation button grouping
- Better visual hierarchy and spacing
- Consistent with modern GNOME applications
- Built on GTK 4, same foundation as before
Changes:
- Replace Gtk.ApplicationWindow with Adw.ApplicationWindow
- Use Gtk.HeaderBar for professional top bar with navigation buttons
- Improve address bar presentation (placeholder text, better sizing)
- Add CSS classes for consistent styling (linked, suggested-action, toolbar)
- Better tooltip support for navigation buttons
- Add visual frame around tabs bar
- Improved status bar styling with toolbar class
- Adw.init() called during window creation
UI Improvements:
- Navigation buttons (Back/Forward/Reload) now grouped with linked styling
- Go button highlighted with suggested-action styling
- Address bar uses placeholder text instead of default value
- Better spacing and margins throughout
- More professional appearance overall
All tests passing (23/23 in core modules)
- Support for 301, 302, 303, 307, 308 redirects
- Automatic Location header following
- Relative URL resolution for redirects
- Max redirect limit (default 10) to prevent infinite loops
- 303 (See Other) automatically changes method to GET
- 4 new unit tests for redirect functionality
- All 73 tests passing
- Add tests for URL parsing, cookies, HTML/CSS parsing
- Add tests for browser/tab management and history
- Add tests for layout and rendering components
- Configure pytest with coverage reporting
- Add test documentation and runner commands
- All 54 tests passing
- Added README.md with project description, building instructions, and development milestones.
- Created the project structure with directories for source code, assets, and tests.
- Implemented a basic entry point in main.py with argument parsing and logging configuration.
- Developed preliminary browser orchestration in browser.py, including tab management and navigation.
- Established a GTK-based UI framework in chrome.py, integrating key UI components including the address bar and navigation buttons.
- Incorporated HTTP request handling in http.py, with enhanced logging of requests and responses.
- Added initial assets: logo and images for browser UI.
- Configured dependencies in pyproject.toml for development and runtime environments.
- Initialized version control with uv.lock for dependency management.
