Commit Graph

57 Commits

Author SHA1 Message Date
Andreas Kling
d65bebd8cf LibWeb: Cache parsed inline style of DOM elements
Instead of invoking the CSS parser every time we compute the style for
an element that has a "style" attribute, we now cache the result of
parsing the inline style whenever the "style" attribute is set.

This is a nice boost to relayout performance since we no longer hit the
CSS parser at all.
2020-12-07 20:00:27 +01:00
Andreas Kling
c189897e29 LibWeb: Fix wrong forward declaration of LineBox & LineBoxFragment 2020-12-03 21:45:55 +01:00
Andreas Kling
d129e68da8 LibWeb: Move PaintPhase enum out of Layout::Node
Now it's just Layout::PaintPhase instead of Layout::Node::PaintPhase.
2020-12-03 21:45:41 +01:00
Luke
773df8826d LibWeb: Add the submit event to HTMLFormElement
Also adds the ability to submit from JavaScript.
2020-11-22 18:20:56 +01:00
Andreas Kling
5aeab9878e LibWeb: Rename LayoutNode classes and move them into Layout namespace
Bring the names of various boxes closer to spec language. This should
hopefully make things easier to understand and hack on. :^)

Some notable changes:

- LayoutNode -> Layout::Node
- LayoutBox -> Layout::Box
- LayoutBlock -> Layout::BlockBox
- LayoutReplaced -> Layout::ReplacedBox
- LayoutDocument -> Layout::InitialContainingBlockBox
- LayoutText -> Layout::TextNode
- LayoutInline -> Layout::InlineNode

Note that this is not strictly a "box tree" as we also hang inline/text
nodes in the same tree, and they don't generate boxes. (Instead, they
contribute line box fragments to their containing block!)
2020-11-22 15:56:27 +01:00
Andreas Kling
e1a24edfa9 LibWeb: Reorganize layout system in terms of formatting contexts
This is a first (huge) step towards modernizing the layout architecture
and bringing it closer to spec language.

Layout is now performed by a stack of formatting contexts, operating on
the box tree (or layout tree, if you will.)

There are currently three types of formatting context:

- BlockFormattingContext (BFC)
- InlineFormattingContext (IFC)
- TableFormattingContext (TFC)

Document::layout() creates the initial BlockFormattingContext (BFC)
which lays out the initial containing block (ICB), and then we recurse
through the tree, creating BFC, IFC or TFC as appropriate and handing
over control at the context boundaries.

The majority of this patch is just refactoring the old logic spread out
in LayoutBlock and LayoutTableRowGroup, and turning into these context
classes instead. A lot more cleanup will be needed.

There are many architectural wins here, the main one being that layout
is no longer performed by boxes themselves, which gives us much greater
flexibility in the outer/inner layout of a given box.
2020-11-22 14:36:56 +01:00
Luke
dcb21b0c3a LibWeb: Add initial implementation of document.implementation 2020-11-13 09:51:07 +01:00
Luke
3f73b0f896 LibWeb: Add almost all obsolete but required IDL attributes
As according to https://html.spec.whatwg.org/multipage/obsolete.html
Section 16.3 "Requirements for implementations"

Not all of these attributes are included due to requiring a bit more
functionality.
2020-11-12 10:38:26 +01:00
Linus Groh
f6af2d747e TextEditor: Replace InProcessWebView with OutOfProcessWebView 2020-10-08 23:20:52 +02:00
Luke
9dee140a9f LibWeb: Add empty IDL bindings for current SVG elements
Nothing in them right now as the classes don't contain the IDL
methods.
2020-10-03 00:30:49 +02:00
Andreas Kling
97d0acc5b6 LibWeb: Implement performance.now()
This patch introduces the HighResolutionTime namespace which is home to
the Performance object (exposed via window.performance)

performance.now() is currently the only function, and it returns the
number of milliseconds since the window object was constructed. :^)
2020-09-29 18:19:18 +02:00
Andreas Kling
618dcbe405 LibWeb: Dispatch DOM "load" event on <iframe> elements 2020-09-22 20:10:20 +02:00
Andreas Kling
c6ae0c41d9 LibWeb: Add Bindings::ScriptExecutionContext
This will be inherited by documents and workers, to provide a common
abstraction for script execution. (We don't have workers yet, but we
might as well make this little space for them now to simplify things
down the road.)
2020-09-20 19:22:44 +02:00
Andreas Kling
cd5570670c LibWeb: Implement <input type=submit> without using LibGUI
Following in the footsteps of <input type=checkbox>, this patch adds
LayoutButton which implements a basic push button using LibGfx styling
primitives.
2020-09-12 18:18:20 +02:00
Luke
7902d215b3 LibWeb: Implement <template> parsing
Note that there is currently no way to display them as we can't
currently clone nodes.

Adds special case for templates for dumping to console.
Doesn't add it to the DOM inspector as I'm not sure how to do it.
2020-08-21 11:57:11 +02:00
Luke
8b807e65d7 LibWeb: Add Comment and DocumentFragment bindings, move querySelector...
...{All} to ParentNode. Exposes createDocumentFragment and
createComment on Document. Stubs out the document.body setter. 

Also adds ParentNode back :^).
2020-08-17 22:57:05 +02:00
Andreas Kling
56c3748dcc LibWeb: Rename PageView => InProcessWebView 2020-08-17 18:05:35 +02:00
Andreas Kling
6b4a7d1ee3 LibWeb: Add "focused frame" concept, one focused Frame per Page
Focus currently only moves when doing a mousedown in a frame.
2020-08-14 12:15:11 +02:00
Luke
5724ac8e72 LibWeb: Add HTML elements to factories, add missing tags and attributes
This is mostly to get the grunt work of the way. This is split up into
multiple commits to hopefully make it more manageable to review.

Note that these are not full implementations, and the bindings mostly
get the low hanging fruit.

Also implements some attributes that I kept out because they had
dashes in them. Therefore, this closes #2905.
2020-08-09 21:14:51 +02:00
Andreas Kling
73645e11c4 LibWeb: Add CharacterData and Text IDL interfaces 2020-08-03 20:50:45 +02:00
Andreas Kling
e496a74bb3 LibWeb: Add a basic DOM::Position class
This will be used for editable content. :^)
2020-08-02 17:34:50 +02:00
Andreas Kling
a4eadeb80d LibWeb: Oops, provide the correct WrapperType for UIEvent 2020-07-28 19:40:11 +02:00
Andreas Kling
c46439f240 LibWeb: Move HTML classes into the Web::HTML namespace 2020-07-28 18:55:48 +02:00
Luke
a2b40de0cc LibWeb: Add a whole bunch of HTML DOM bindings
Note that these aren't full implementations of the bindings. This
mostly implements the low hanging fruit (namely, basic reflections)

There are some attributes that should be USVString instead of
DOMString. However, USVString is a slightly different definition
of DOMString, so it should suffice for now.
2020-07-27 19:51:45 +02:00
Andreas Kling
1f008c95b6 LibWeb: Move CSS classes into the Web::CSS namespace 2020-07-26 20:05:15 +02:00
Andreas Kling
11ff9d0f17 LibWeb: Move DOM classes into the Web::DOM namespace
LibWeb keeps growing and the Web namespace is filling up fast.
Let's put DOM stuff into Web::DOM, just like we already started doing
with SVG stuff in Web::SVG.
2020-07-26 20:05:15 +02:00
Andreas Kling
685e006e27 LibWeb: Use "namespace Web::Foo {" since C++20 allows it :^)
Thanks @nico for teaching me about this!
2020-07-21 16:23:08 +02:00
Luke
19d6884529 LibWeb: Implement quirks mode detection
This allows us to determine which mode to render the page in.

Exposes "doctype" and "compatMode" on Document.
Exposes "name", "publicId" and "systemId" on DocumentType.
2020-07-21 01:08:32 +02:00
Andreas Kling
8d2194bdbd LibWeb: Make DOM timers cancellable and stop leaking them
This patch adds a Web::Timer object that represents a single timer
registration made with window.setTimeout() or window.setInterval().
All live timers are owned by the DOM Window object.

The timers can be stopped via clearTimeout() or clearInterval().
Note that those API's are actually interchangeable, but we have to
support both.
2020-06-27 20:02:04 +02:00
Andreas Kling
1914f52371 LibWeb: Add HTMLElement wrapper
Expose the "title" attribute just to expose something. :^)
2020-06-21 14:39:15 +02:00
Andreas Kling
8c82d26668 LibWeb: Rename LayoutNode::render() to paint()
"Paint" matches what we call this in the rest of the system. Let's not
confuse things by mixing paint/render/draw all the time. I'm guilty of
this in more places..

Also rename RenderingContext => PaintContext.
2020-06-18 21:37:20 +02:00
Andreas Kling
96da15a8a4 LibWeb: Respect CSS z-index property while painting
To support z-ordering when painting, the layout tree now has a parallel
sparse tree of stacking contexts. The rules for which layout boxes
establish a stacking context are a bit complex, but the intent is to
encapsulate the decision making into establishes_stacking_context().

When we paint, we start from the ICB (LayoutDocument) who always has a
StackingContext and then paint the tree of StackingContexts where each
node has its children sorted by z-index.

This is pretty crude, but gets the basic job done. Note that this does
not yet support hit testing; hit testing is still done using a naive
treewalk from the root.
2020-06-15 17:56:00 +02:00
Andreas Kling
c7d9229a0f LibWeb: Reorganize layout algorithm
Previously, layout recursively performed these steps (roughly):

1. Compute own width
2. Compute own position
3. Layout in-flow children
4. Compute own height
5. Layout absolutely positioned descendants

However, step (2) was pretty inconsistent. Some things computed their
own position, others had their parent do it for them, etc.
To get closer to CSS spec language, and make things easier in general,
this patch reorganizes the algorithm into:

1. Compute own width & height
2. Compute width & height of in-flow managed descendants
3. Move in-flow managed descendants to their final position
4. Layout absolutely positioned descendants

Block layout is now driven by the containing block, which will iterate
the descendants it's responsible for. There are a lot of inefficient
patterns in this logic right now, but they can easily be replaced with
better iteration functions once we settle on a long-term architecture.

Since the ICB (LayoutDocument) is at (0, 0), it doesn't rely on a
containing block to move it into place.

This code is still evolving along with my understanding of CSS layout,
so it's likely that we'll reorganize this again sooner or later. :^)
2020-06-14 19:01:54 +02:00
Andreas Kling
656b01eb0f LibWeb: Rework the layout engine to use relative offsets
The box tree and line boxes now all store a relative offset from their
containing block, instead of an absolute (document-relative) position.

This removes a huge pain point from the layout system which was having
to adjust offsets recursively when something moved. It also makes some
layout logic significantly simpler.

Every box can still find its absolute position by walking its chain
of containing blocks and accumulating the translation from the root.
This is currently what we do both for rendering and hit testing.
2020-06-10 10:46:57 +02:00
Andreas Kling
b4d4d6b32a LibWeb: Add some iteration helpers to LayoutNode
- for_each_child_of_type<T>
- previous_sibling_of_type<T>
2020-06-09 21:13:16 +02:00
Andreas Kling
92392398a2 LibWeb: Add Page abstraction between PageView and main Frame
* A PageView is a view onto a Page object.
* A Page always has a main Frame (root of Frame tree.)
* Page has a PageClient. PageView is a PageClient.

The goal here is to allow building another kind of view onto
a Page while keeping the rest of LibWeb intact.
2020-06-08 21:12:20 +02:00
Andreas Kling
d1852b4547 LibWeb: Add per-Frame EventHandler, handle mouse events recursively
We now handle mouse events by recursing into subframes. This makes
links, tooltips, etc, work inside <iframe> content.
2020-06-07 14:40:38 +02:00
Andreas Kling
7af337764e LibWeb: Add a naive Resource cache
This patch introduces a caching mechanism in ResourceLoader. It's keyed
on a LoadRequest object which is what you provide to load_resource()
when you want to load a resource.

We currently never prune the cache, so resources will stay in there
forever. This is obviously not gonna stay that way, but we're just
getting started here. :^)

This should drastically reduce the number of requests when loading
some sites (like Twitter) that reuse the same images over and over.
2020-06-01 21:58:29 +02:00
Andreas Kling
5ed66cb8d9 LibWeb: Start building a new Resource class to share more resources
A Resource represents a resource that we're loading, have loaded or
will soon load. Basically, it's a downloadable resource that can be
shared by multiple clients.

A typical usecase is multiple <img> elements with the same src.
In a future patch, we will try to make sure that those <img> elements
get the same Resource if possible. This will reduce network usage,
memory usage, and CPU usage. :^)

For now, this first patch simply introduces the mechanism.

You get a Resource by calling ResourceLoader::load_resource().
To get notified about changes to a Resource's load status, you inherit
from ResourceClient and implement the callbacks you're interested in.

This patch turns HTMLImageElement into a ResourceClient.
2020-06-01 21:36:43 +02:00
Andreas Kling
42243d2e06 LibWeb: Rename Web::HtmlView => Web::PageView
This widget doesn't just view HTML, it views a web page. :^)
2020-05-28 18:22:54 +02:00
Andreas Kling
3a30180e1e LibWeb: Add HTMLScriptElement to the forwarding header 2020-05-24 23:54:22 +02:00
Andreas Kling
20911efd4d LibWeb: More work on the HTML parser and tokenizer
The parser can now switch the state of the tokenizer! Very webby. :^)
2020-05-24 23:54:22 +02:00
Andreas Kling
0b61e21873 LibWeb: Add HTMLFormElement to forwarding header 2020-05-24 00:12:27 +02:00
Andreas Kling
efdfdbabdb LibWeb: Allow navigating to a new URL by setting window.location.href 2020-05-18 21:52:50 +02:00
Andreas Kling
9d7ab13b32 LibWeb: Add Text to the forwarding header 2020-05-10 22:32:12 +02:00
Andreas Kling
2d4c91df8e LibWeb: Add ImageData objects and implement 2D context putImageData()
An ImageData is a wrapper around a Bitmap wrapper around a
JS::Uint8ClampedArray.
2020-04-21 23:49:51 +02:00
Andreas Kling
370befbf52 LibWeb: Add a JavaScript wrapper for HTMLImageElement :^) 2020-04-14 20:37:01 +02:00
Andreas Kling
4ffac713b9 LibWeb: Add XMLHttpRequest object :^)
This patch adds very basic XMLHttpRequest support to LibWeb. Here's an
example that currently works:

    var callback = function() { alert(this.responseText); }
    var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", callback);
    xhr.open("GET", "http://serenityos.org/~kling/test/example.txt");
    xhr.send();

There are many limitations and bugs, but it's pretty dang awesome that
we have XHR. :^)
2020-04-08 21:46:43 +02:00
Andreas Kling
7382b27c22 LibWeb: Add Origin concept (protocol, host, port tuple)
Every Document now has an Origin, found via Document::origin().
It's based on the URL of the document.

This will be used to implement things like the same-origin policy.
2020-04-07 23:01:45 +02:00
Andreas Kling
d062d7baa7 LibWeb+LibJS: Move DOM Window object to dedicated classes
LibWeb now creates a WindowObject which inherits from GlobalObject.
Allocation of the global object is moved out of the Interpreter ctor
to allow for specialized construction.

The existing Window interfaces are moved to WindowObject with their
implementation code in the new Window class.
2020-04-01 18:57:00 +02:00