Commit graph

102 commits

Author SHA1 Message Date
Andreas Kling
70a4678d77 LibHTML: Paint a magenta rectangle around the currently inspected node
Document now tracks one "inspected" node, set by set_inspected_node()
which is called by Browser's DOM inspector view on_selection callback.
2019-11-09 11:58:50 +01:00
Andreas Kling
71f249fd2c LibHTML: Draw box borders even if we don't have a border-color
In those cases we should fall back to currentColor, which is hackishly
implemented by falling back to "color" for now.
2019-11-07 21:36:32 +01:00
Andreas Kling
f3f0b08d43 LibHTML: Build some foundation for text selection
Add LayoutPosition and LayoutRange classes. The layout tree root node
now has a selection() LayoutRange. It's essentially a start and end
LayoutPosition.

A LayoutPosition is a LayoutNode, and an optional index into that node.
The index is only relevant for text nodes, where it's the character
index into the rendered text.

HtmlView now updates the selection start/end of the LayoutDocument when
clicking and dragging with the left mouse button.

We don't paint the selection yet, and there's no way to copy what's
selected. It only exists as a LayoutRange.
2019-11-05 22:13:26 +01:00
Andreas Kling
715d7a8532 LibHTML: Add a convenient way to get from any layout node to the root 2019-11-04 20:45:47 +01:00
Andreas Kling
3bd29ad98c LibHTML: Remove trailing whitespace in line boxes
After the splitting-into-lines pass, remove any trailing whitespace
from all of a block's line boxes.

This improves the appearance of text-align: justify/right :^)
2019-10-20 17:20:20 +02:00
Andreas Kling
eb77e680ed LibHTML: Implement "text-align: justify"
In order for this to work nicely, I made the line box classes use float
instead of int for its geometry information.

Justification works by distributing all of the whitespace on the line
(including the trailing whitespace before the line break) evenly across
the spaces in-between words.

We should probably use floating point (or maybe fixed point?) for all
the layout metrics stuff. But one thing at a time. :^)
2019-10-20 12:55:55 +02:00
Andreas Kling
457e49f528 LibHTML: Rename HTMLImageElement::m_image_loader => m_image_decoder
This matches the new class name, ImageDecoder.
2019-10-20 12:55:55 +02:00
Andreas Kling
c41bae3d54 LibHTML+Browser: Support scrolling to anchor with <a href="#foo">
This patch implements basic support for <a href="#foo"> fragment links.

To figure out where we actually want to scroll to, we have to do
something different based on the layout node's box type. So if it's a
regular LayoutBox we can just use the LayoutBox::position().

However, if it's an inline layout node, we use the position of the
first line box fragment in the containing block contributed by this
layout node or one of its descendants.
2019-10-20 10:07:26 +02:00
Andreas Kling
8b07025145 LibHTML: Don't insert unnecessary line breaks at start of text lines
Basically the same exact fix as I did for replaced elements. There's no
point in inserting a line break at the start of a line if all you're
trying to achieve is make more horizontal space for something.
2019-10-19 21:34:15 +02:00
Andreas Kling
6cbf8a3426 LibHTML: Use the correct inherited color for LayoutListItemMarker 2019-10-19 11:54:28 +02:00
Andreas Kling
5a34225999 LibHTML: Implement basic tiled background image support
It's now possible to set a page background image via <body background>.
Also, HtmlView now officially handles rendering the body element's
background (color, image or both.) LayoutBox is responsible for all
other background rendering.

Note that it's not yet possible to use CSS background-image properties
directly, since we can't parse them yet. :^)
2019-10-19 11:49:46 +02:00
Andreas Kling
762f20944c LibHTML: Replaced elements should not break lines at start of line
If the current line box already has zero width, there's no point in
inserting a line break to make space, since we'll just be at x=0 after
breaking as well.

This removes an ugly unnecessary line break before images wider than
their containing block. :^)
2019-10-19 09:44:40 +02:00
Andreas Kling
07cbe2daa4 LibHTML: Preserve UTF-8 codepoints when collapsing whitespace
This is extremely awkward and I'm sure there are many better ways to
achieve this..
2019-10-18 22:50:44 +02:00
Andreas Kling
2305dee455 LibHTML: Add LayoutNode::first_ancestor_of_type<T>() 2019-10-18 10:16:33 +02:00
Andreas Kling
65ad6c35f0 LibHTML: Add typed child/sibling traversal helpers for LayoutNode
Also add some special variants for the table classes, to make it a bit
more pleasant to write table code. :^)
2019-10-18 09:38:12 +02:00
Andreas Kling
6c22b46b37 LibHTML: Hard-code LayoutTable to never have inline children
This is a total hack to get around the auto-detection mechanism for
whether a block has inline or block children. We'll say that tables
never have inline children for now, and then anything that actually
turns out to be an inline child will just be ignored by layout.
2019-10-17 23:39:31 +02:00
Andreas Kling
b4c2621ed7 LibHTML: Add is<T> helpers for the table-related LayoutNode subclasses 2019-10-17 23:39:31 +02:00
Andreas Kling
5e29238a49 LibHTML: Make "children are inline" flag imperative
Instead of computing whether a block's children are inline based on the
first child, make it an imperatively-set flag.

This gives us some flexibility to ignore things like text nodes inside
a <table>, for example. I'm still unsure what the "correct" way to deal
with those will be. We'll find out sooner or later. :^)
2019-10-17 23:39:31 +02:00
Andreas Kling
41896ff521 LibHTML: Add stub classes for basic table layout
This class introduces LayoutTable, LayoutTableRow and LayoutTableCell.
These are produced by "display" values table, table-row and table-cell
respectively.

Note that there's no layout happening yet, I'm just adding the classes.
2019-10-17 23:39:31 +02:00
Andreas Kling
14f380f87a LibHTML: Use is_inline() instead of !is_block() when building tree 2019-10-17 23:39:31 +02:00
Andreas Kling
6dbba6ad85 LibHTML: Implement CSS text-align: left/center/right
This was easier than I imagined; we just shift each line box to the
left based on the alignment and the remaining space on each line. :^)
2019-10-16 20:32:17 +02:00
Andreas Kling
38b55ee067 LibHTML: LayoutBlock::hit_test() was calling the wrong parent class
Oops, we now need to call LayoutBox instead of LayoutNode for blocks
with non-inline children.
2019-10-15 22:02:58 +02:00
Andreas Kling
18fa662eb2 LibHTML: Use ImageLoader for <img> elements to defer bitmap decoding
We now wait until the pixels are actually needed before fully decoding
images in <img> elements.

This needs some more work and is currently a bit memory-wasteful since
we'll hang on to the raw image data forever.
2019-10-15 21:53:08 +02:00
Andreas Kling
5c2b21705a LibHTML: LayoutNode::set_needs_display() needs to invalidate fragments
If a LayoutNode is split into line box fragments, we need to walk our
fragments and invalidate them. It was not enough to do this only for
LayoutBox nodes.
2019-10-15 20:45:52 +02:00
Andreas Kling
110b2d52f2 LibHTML: Fix missing backgrounds an borders after LayoutBox refactoring
The render() implementation in both LayoutBlock and LayoutBox need to
be calling the immediate parent class. :^)
2019-10-15 19:12:56 +02:00
Andreas Kling
4814253589 LibHTML: Introduce LayoutBox and LayoutNodeWithStyleAndBoxModelMetrics
To streamline the layout tree and remove irrelevant data from classes
that don't need it, this patch adds two new LayoutNode subclasses.

LayoutNodeWithStyleAndBoxModelMetrics should be inherited by any layout
node that cares about box model metrics (margin, border, and padding.)
LayoutBox should be inherited by any layout node that can have a rect.

This makes LayoutText significantly smaller (from 140 to 40 bytes) and
clarifies a lot of things about the layout tree.

I'm also adding next_sibling() and previous_sibling() overloads to
LayoutBlock that return a LayoutBlock*. This is okay since blocks only
ever have block siblings.

Do also note that the semantics of is<T> slightly change in this patch:
is<T>(nullptr) now returns true, to facilitate allowing to<T>(nullptr).
2019-10-15 16:48:38 +02:00
Andreas Kling
f4f5ede10a LibHTML: Simplify Node::create_layout_node()
There's no need to pass the StyleResolver to this function. Nodes that
need it can just get it from the document.
2019-10-15 15:06:16 +02:00
Andreas Kling
f7cd5662ef LibHTML: Move layout tree building to a LayoutTreeBuilder class
Building a whole layout tree shouldn't be a concern of Node, so this
patch moves it to a separate class.
2019-10-15 14:24:26 +02:00
Andreas Kling
d14b60533f LibHTML: Add is<T> and to<T> helpers for LayoutNode class family 2019-10-15 14:24:26 +02:00
Andreas Kling
735f02900b LibHTML: Implement basic partial style invalidation
This patch makes it possible to call Node::invalidate_style() and have
that node and all of its ancestors recompute their style.

We then figure out if the new style is visually different from the old
style, and if so do a paint invalidation with set_needs_display().
Note that the "are they visually different" code is very incomplete!

Use this to make hover effects a lot more efficient. They no longer
cause a full relayout+repaint, but only a style invalidation.
Style invalidations are still quite heavy though, and there's a lot of
room for improvement there. :^)
2019-10-14 18:33:23 +02:00
Andreas Kling
3309bdf722 LibHTML: Add some convenient geometry getters on LayoutNode
Add x(), y(), size() and position() and use them around the codebase.
2019-10-13 18:47:16 +02:00
Andreas Kling
aefc7f9b22 LibHTML: Use LayoutBlock::add_line_box() in LayoutBreak 2019-10-13 18:47:16 +02:00
Andreas Kling
44979ad7a5 LibHTML: Fix broken line splitting behavior in LayoutReplaced
Replaced elements will now properly create line breaks when they use up
the available horizontal space.

This fixes an issue with <img>'s lining up instead of breaking.
2019-10-13 18:47:16 +02:00
Andreas Kling
49ac0c2e24 LibHTML: Move layout root from HtmlView to Document
The layout root is now kept alive via Document::m_layout_root.
This will allow us to do more layout-related things inside the inner
layer of LibHTML without reaching out to the HtmlView.

I'd like to keep HtmlView at a slightly higher level, to prevent it
from getting too complex.

This patch also fixes accidental disconnection of the layout tree from
the DOM after doing a layout tree rebuild. ~LayoutNode() now only
unsets the DOM node's layout_node() if it's itself.
2019-10-13 12:43:31 +02:00
Andreas Kling
2530378f59 LibHTML+Browser: Add debug option to draw borders around line boxes
This will be very useful when debugging line layout.
2019-10-12 15:02:53 +02:00
Andreas Kling
6242459c0f LibHTML: Implement the <br> element for line breaking
The <br> element will produce a special LayoutBreak node in the layout
tree, which forces a break in the line layout whenever encountered.

This patch also makes LayoutBlock use the current line-height as the
minimum effective height for each line box. This ensures that having
multiple <br> elements in a row doesn't create 0-height line boxes.
2019-10-12 13:47:49 +02:00
Andreas Kling
92b6a7a18f LibHTML: Add StyleProperties::line_height()
We currently hard-code the line height to 140% of the font glyph height
and this patch doesn't fix the hard-coding, but at least moves it out
of LayoutText and into StyleProperties where it can be re-used until
the day we go and do a proper implementation of CSS line-height. :^)
2019-10-12 13:42:58 +02:00
Andreas Kling
1f9c4ffd21 LibHTML: Make sure the marker has the same inline state as siblings
Or LayoutBlock will assert when trying to layout its children since
they have inconsistent inline state.
2019-10-11 23:26:25 +02:00
Andreas Kling
724754e39a LibHTML: LayoutBlock::children_are_inline() should check is_inline()
Instead of asking if the first child is not a block, ask if it thinks
it's inline.
2019-10-11 23:23:48 +02:00
Andreas Kling
f5bf8f6380 LibHTML: Add LayoutNode classes for "display: list-item" and its marker
This patch removes the hard-coded hack for "display: list-item" from
LayoutBlock and adds LayoutListItem and LayoutListItemMarker.

Elements with "display: list-item" now generate a LayoutListItem, which
may then also generate a LayoutListItemMarker if appropriate. :^)
2019-10-11 23:16:53 +02:00
Andreas Kling
159507f2a6 LibHTML: Move is_ancestor_of() from LayoutNode to TreeNode
This way it becomes available to all the different TreeNode subclasses.
2019-10-09 21:33:34 +02:00
Andreas Kling
fdbad6284c LibHTML: Implement the <blink> element
Just in time for Serenity's 1st birthday, here is the <blink> element!

This patch adds a bunch of different mechanisms to enable partial
repaints of the layout tree (LayoutNode::set_needs_display()))
It also adds LayoutNode::is_visible(), which can be toggled to prevent
a LayoutNode from rendering anything (it still takes up space though.)
2019-10-09 21:25:29 +02:00
Andreas Kling
2ac190dc5f LibHTML: Collapse whitespace in LayoutText unless white-space: pre;
Before breaking the Text node contents into words, collapse all of the
whitespace into single space (' ') characters. This fixes broken
rendering of paragraphs with newlines in them. :^)
2019-10-09 16:29:35 +02:00
Andreas Kling
31ac19543a LibHTML: Use an enum for CSS property ID's
Instead of using string everywhere, have the CSS parser produce enum
values, since they are a lot nicer to work with.

In the future we should generate most of this code based on a list of
supported CSS properties.
2019-10-08 15:35:05 +02:00
Andreas Kling
749e3f0f30 LibHTML: Add LayoutNodeWithStyle class, make LayoutText style-less
Since LayoutText always inherits style, it shouldn't store any style of
its own. This patch adds a LayoutNodeWithStyle class to sit between
LayoutNode and everyone who wants to inherit from LayoutNode except
LayoutText :^)

Since LayoutText can never have children, we also know that the parent
of any LayoutNode is always going to be a LayoutNodeWithStyle.
So this patch makes LayoutNode::parent() return LayoutNodeWithStyle*.
2019-10-07 10:56:44 +02:00
Andreas Kling
15f3e64862 LibHTML: Rename "style_properties" to "style" everywhere 2019-10-07 10:56:44 +02:00
Andreas Kling
f52f2736e1 LibHTML: Add is<ElementType> and to<ElementType> helper functions
These will help us write node-type-aware template functions.
2019-10-06 20:38:26 +02:00
Conrad Pankoff
2cf5d69a67 LibHTML: Use current style's text colour for alt text on images 2019-10-06 14:33:00 +02:00
Conrad Pankoff
451730000c LibHTML: Trim image alt text to the right if necessary 2019-10-06 14:33:00 +02:00
Conrad Pankoff
b240500107 LibHTML: Support width/height attributes on images 2019-10-06 14:33:00 +02:00