usadson / retina

🔗 Retina is a web engine ✨, written in Rust. It aims to stay close to web standards and specifications, focusing on correctness, performance, and safety.

✨ Retina - A Browser Engine Project 🔗

Retina is a fresh approach to web browser engines, written entirely in Rust. It aims to stay close to web standards and specifications, focusing on correctness, performance, and safety. This is a monorepo that contains the main binary retina, alongside several libraries that define different aspects of the browser's operations.

📦️ Components

• retina - The main application entry point.
• retina-common - Shared types and utilities used across other libraries.
• retina-compositor - Responsible for drawing the layout to the screen.
• retina-dom - Implements the Document Object Model, managing and manipulating the tree structure of the webpage.
• retina-fetch - Responsible for making HTTP requests to retrieve resources over the internet. This implements the Fetch API
• retina-gfx - Graphics subsystem for both the compositor and the GUI.
• retina-layout - Implements the CSS box model and layout algorithms.
• retina-page - Orchestrates the creation and management of web pages.
• retina-style - Implements the CSS representation.
• retina-style-computation - Computes the final style of the elements based on CSS rules.
• retina-style-parser - Parses CSS stylesheets and inline styles.
• retina-user-agent - Handles the behavior and identity of the web browser, and also specifies the browser/implementation-specific behavior.

🏃 Process Flow

This section describes the current process flow, which is currently simple but is crafted in such a way that a multi-page and multi-process architecture is eventually possible, without coupling these too much to the current single-page architecture.

1. retina starts up, creates a window and a page
2. retina-page resolves the URL and starts a page load
3. retina-fetch loads the HTML contents of the URL
4. retina-page invokes retina-dom
5. retina-dom parses the HTML and constructs a DOM tree
6. retina-page collects the stylesheets
7. retina-page invokes retina-style
8. retina-style_parser parses the CSS associated with these stylesheets
9. retina-page invokes retina-layout
10. retina-layout invokes retina-style-computation
11. retina-style-computation resolves and computes the style per element
12. retina-layout creates a CSS Box tree per element using the computed style
13. retina-page invokes retina-compositor
14. retina-compositor sends drawing commands to retina-gfx using the Box tree
15. retina-gfx translates the draw commands to wgpu-specific calls
16. retina-gfx executes these commands on the page surface
17. wgpu invokes the underlying graphics library (OpenGL, Vulkan, etc.)
18. retina-page sends a texture view of the page surface to the main process
19. retina calls retina-gfx to paint this texture view to the window surface

📚 Quick Links

• CSS 2.2
• CSS Cascading and Inheritance Level 4
• CSS Display Module Level 4
• CSS Indices
• CSS Selectors Module Level 4
• CSS Syntax Module Level 4
• CSS Values and Units Module Level 4
• DOM Standard
• Fetch Standard
• HTML Living Standard
• WebGPU

⚖️ License

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

retina's Issues

[page+style] Support external fonts using @font-face

[style-computation] Wiktionary improperly cascades `font-size`

A lot of the following warnings will be generated on https://en.wiktionary.org/:

[2023-08-30T19:55:50Z WARN  retina_style_computation::cascade] Node has relative font size, but parent is: Percentage(
        1.0,
    )
[2023-08-30T19:55:50Z WARN  retina_style_computation::cascade] Node has relative font size, but parent is: FontSize(
        0.75,
    )
[2023-08-30T19:55:50Z WARN  retina_style_computation::cascade] Node has relative font size, but parent is: Percentage(
        1.0,
    )
[2023-08-30T19:55:50Z WARN  retina_style_computation::cascade] Node has relative font size, but parent is: FontSize(
        0.75,
    )
[2023-08-30T19:55:50Z WARN  retina_style_computation::cascade] Node has relative font size, but parent is: FontSize(
        0.75,
    )

The ideal approach is to store the computed value in a special non-CssLength wrapper (just a number), but that will require a lot of rewrite, so I'm mainly focused on fixing this issue first :)

[css] `border-width` follows spec, but isn't the same computed value in FF and Chrome

Reproduction

Take the following example from ACID 1

html {
    font: 10px/1 Verdana, sans-serif;
    background-color: blue;
    color: white;
}

li {
    display: inline;
    /* i.e., suppress marker */
    color: black;
    height: 9em;
    width: 5em;
    margin: 0;
    border: .5em solid black;
    padding: 1em;
    float: left;
    background-color: #FC0;
}

Explanation

Here, the computed value of font-size is 10px. This is the same as in other browsers.

Setting a border-width of .5em would “obviously” compute to 10 * 0.5 = 5px right? No. Firefox and Chrome both compute the value to 4.8px:

The weirdest part is, when rendering the given borders, both browser engines render a rect of 6 pixels wide!

Specification

The definition of the em unit (CSS-VALUES-4) is as follows:

Equal to the computed value of the font-size property of the element on which it is used.

The definition of the border-width property (CSS-BACKGROUNDS-3) is as follows:

These properties set the thickness of the border. Where = <length [0,∞]> | thin | medium | thick

Negative values are invalid. The thin, medium, and thick keywords are equivalent to 1px, 3px, and 5px, respectively.

The border-width property is a shorthand property for setting border-top-width, border-right-width, border-bottom-width, and border-left-width in a single declaration.

If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

[dom] Support `<meta http-equiv="refresh">`

For example, some (legacy) sites use this as a non-JavaScript/HTTP redirection mechanisms, and makes the site reload after 0 or more seconds.

[gfx] Rewrite the graphics stack to support other libraries

Support Direct2D gives the project a big advantage, as it isn't needed to write the graphics code first before implementing an SVG/CSS feature. After writing it using the DirectX-stack, we can then port that code over to support a wide range of devices using the wgpu stack and e.g. lyon.

This effort consists of a few different tasks:

• Port the font-specific stuff over to the main retina-gfx crate
• Move the wgpu-specific parts over to another crate from retina-gfx
• Make the retina-gfx APIs agnostic to DX/wgpu
• Initialize the retina-gfx API using DX on Windows and wgpu on other platforms

Some optional, nice-to-have's are:

• Identify resources (images, fonts, etc) by an identifier instead of a dynamic trait

[ui] Basic UI

On Windows:

• URL bar
• Status panel containing the PageProgress

[font] Variadic fonts aren't rasterized with the correct weight

At least on DirectWrite, the FontKit properties are also the lowest weight (e.g. 200 for Cascadia Code), and might be responsible for this problem. DirectWrite should handle this correctly, and is probably a problem with FontKit.

[compat] Apple Developer page fails to load

Description

The Apple Developer page fails to load, with status code 401 Unauthorized.

Details

It might be related to missing HTTP-headers, since a problem like that has occurred before with Ladybird.

Investigation

• Check the required headers as per IETF RFC 9110 - HTTP Semantics
• Check the required headers as per the Fetch Standard

Screenshot

[docs] Add per-crate README

[compositor] Support repainting a portion of the surface

In cases of e.g. an image/video frame, only that portion of the page needs to be repainted, not the entire case (as is now).

Blocked by #12.

[gfx+paint] Paint the page canvas using tile-based rendering

Using tile-based rendering results in better performance in general. This is because this rendering strategy can be highly optimized and parallelized, since multiple tiles can be painted at the same time.

[layout] Simple ❤️ emoji aren't recognized as such anymore

[graphics] Support WOFF and WOFF2 formats

https://www.w3.org/TR/WOFF2/

[style] Automatically generate value enumerations and parser

Currently, the parsing of CSS in the engine by retina-style-parser translates the CSS syntax into the format in retina-style, but doing this by hand is quite tedious and error-prone. It would be better to have the properties in some kind of syntax file that will generate a Rust file at compile time.

Looks like W3C already has a JSON representation for the CSS properties, see https://github.com/w3c/webref/tree/main/ed/css

[gfx] Font sizes should respect the DPI

Currently, the font sizes are absolute values, and not accounting the scale factor of the operating system. This makes the text have incorrect sizes when using a 125% scale factor on Windows.

Incidentally, the whole layout system is miscalculated in that case, since almost all websites depend on the size of fonts for their responsiveness.

[paint] Paint based on a paint tree instead of the layout tree

At the moment, the page is painted by walking the layout tree, and invoking paint calls if needed. This is fine, but having a paint tree that is constructed based on a layout tree is better for a few reasons:

1. The paint tree can be individually optimized, for example if there are two overlapping background with the same size, only the last one is needed.
2. The paint tree can be divided to compliment the tile-based rendering.
3. Scrolling the page can reuse existing tiles that are painted using these paint nodes, and new tiles can be painted without losing the complete page.

Blocks #21.

[dom] Separate HTML from DOM

[layout] Lines shouldn't break when encountering emoji

The problem is that emoji rendering uses a different font, so it requires to switch to another LayoutBoxFragment. Currently, breaking a fragment means continuing on a new line, but that shouldn't be the case for this fragment specifically.

[style+layout] Support all font-variant properties

Property	Support
font-variant	❌
font-variant-alternates	❌
font-variant-caps	✔️ b31f277
font-variant-east-asian	❌
font-variant-emoji	✔️
font-variant-ligatures	✔️ 9a0e50d
font-variant-numeric	❌
font-variant-position	✔️

[font] System font collections don't get loaded correctly

E.g. the Cascadia Code font is a font collection of multiple fonts, but loading a specific weight always results in the first font in the collection, i.e. 200.

[docs] Add LICENSE

[retina] Don't hang before HTML `<title>` was parsed

[layout] Anonymous text layout is broken

This problem is probably due to the recent changes with white-space: pre, and needs investigating.

[fetch] Support `Content-Encoding`

Content-Encoding is (in most cases) compression for HTTP responses. The HTTP crate that we use, hyper, does not provide this functionality out of the box, so we would need to depend on another library for this.

[style] Support `@import` rules

[retina] Prevent crashing program when Page crashes / disconnects

[dom+html] Add `<!-- comment -->` nodes

[docs] Add workspace README

[style] Make `CssValue` more compact

The size of this value is currently 160 bytes, which adds up quite fast.
I don't know how to approach this issue just yet, since having a dynamic pointer per Value makes the memory usage much more fragmented.

[page] Isolated process (multi-process)

[style] Support named absolute `font-weight`s (normal and bold)

This property is already supported, it just needs to translate these identifiers into their respective value.

[dom+layout] Bidirectionally link the DOM Nodes and LayoutNodes

Animated images require a portion of the screen to be repainted. To only repaint that region, we need to be able to figure out which LayoutNode is generated for that given HTMLImgElement.

[gfx] Extended Event Support

Ideally an enum containing a discriminant for PageMessage