Stowage/ladybird
2
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-11-04 07:10:57 +00:00
Code Issues Projects Releases Packages Wiki Activity
ladybird/Libraries/LibWeb/Layout/LayoutImage.cpp

130 lines
4.7 KiB
C++
Raw Normal View History

Meta: Add license header to source files As suggested by Joshua, this commit adds the 2-clause BSD license as a comment block to the top of every source file. For the first pass, I've just added myself for simplicity. I encourage everyone to add themselves as copyright holders of any file they've added or modified in some significant way. If I've added myself in error somewhere, feel free to replace it with the appropriate copyright holder instead. Going forward, all new source files should include a license header.
2020-01-18 09:38:21 +01:00
/*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* 1. Redistributions of source code must retain the above copyright notice, this
* list of conditions and the following disclaimer.
*
* 2. Redistributions in binary form must reproduce the above copyright notice,
* this list of conditions and the following disclaimer in the documentation
* and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
* FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
* DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
* SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
* CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
* OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
LibWeb: Split out image loading logic from HTMLImageElement Since more DOM nodes are going to want to load images (<object>, ...) this patch splits out the image loading logic into an ImageLoader class and then HTMLImageElement simply has an ImageLoader. LayoutImage is then given a const ImageLoader& at construction and can then provide layout and rendering for many kinds of DOM nodes.
2020-06-13 22:22:54 +02:00
#include <LibGUI/Painter.h>
LibGfx: Rename from LibDraw :^)
2020-02-06 12:04:00 +01:00
#include <LibGfx/Font.h>
LibWeb: Split out image loading logic from HTMLImageElement Since more DOM nodes are going to want to load images (<object>, ...) this patch splits out the image loading logic into an ImageLoader class and then HTMLImageElement simply has an ImageLoader. LayoutImage is then given a const ImageLoader& at construction and can then provide layout and rendering for many kinds of DOM nodes.
2020-06-13 22:22:54 +02:00
#include <LibGfx/ImageDecoder.h>
LibGfx: Rename from LibDraw :^)
2020-02-06 12:04:00 +01:00
#include <LibGfx/StylePainter.h>
LibWeb: Rename directory LibHTML => LibWeb Let's rename this to LibWeb since it aims to provide more parts of the web platform than just HTML. :^)
2020-03-07 10:32:51 +01:00
#include <LibWeb/Layout/LayoutImage.h>
LibHTML: Flesh out <img> element with LayoutImage and LayoutReplaced This patch adds parsing of <img> into HTMLImageElement objects. It also adds LayoutImage and its parent class LayoutReplaced, which is going to represent CSS "replaced elements."
2019-10-05 22:07:45 +02:00
LibWeb: Move everything into the Web namespace
2020-03-07 10:27:02 +01:00
namespace Web {
LibWeb: Move border width and color into LayoutStyle To make this possible, I also had to give each LayoutNode a Document& so it can resolve document-specific colors correctly. There's probably ways to avoid having this extra member by resolving colors later, but this works for now.
2020-06-24 19:41:12 +02:00
LayoutImage::LayoutImage(Document& document, const Element& element, NonnullRefPtr<StyleProperties> style, const ImageLoader& image_loader)
: LayoutReplaced(document, element, move(style))
LibWeb: Split out image loading logic from HTMLImageElement Since more DOM nodes are going to want to load images (<object>, ...) this patch splits out the image loading logic into an ImageLoader class and then HTMLImageElement simply has an ImageLoader. LayoutImage is then given a const ImageLoader& at construction and can then provide layout and rendering for many kinds of DOM nodes.
2020-06-13 22:22:54 +02:00
, m_image_loader(image_loader)
LibHTML: Flesh out <img> element with LayoutImage and LayoutReplaced This patch adds parsing of <img> into HTMLImageElement objects. It also adds LayoutImage and its parent class LayoutReplaced, which is going to represent CSS "replaced elements."
2019-10-05 22:07:45 +02:00
{
}
LayoutImage::~LayoutImage()
{
}
LibWeb: Split out image loading logic from HTMLImageElement Since more DOM nodes are going to want to load images (<object>, ...) this patch splits out the image loading logic into an ImageLoader class and then HTMLImageElement simply has an ImageLoader. LayoutImage is then given a const ImageLoader& at construction and can then provide layout and rendering for many kinds of DOM nodes.
2020-06-13 22:22:54 +02:00
int LayoutImage::preferred_width() const
{
LibWeb+Browser: Decode non-animated images out-of-process :^) We now use the ImageDecoder service in LibWeb for everything except GIF images (we'll have to deal with them later, ofc.) This has a little bit of overhead but we should be able to optimize it until it becomes negligible.
2020-06-22 21:41:10 +02:00
return node().attribute(HTML::AttributeNames::width).to_int().value_or(m_image_loader.width());
LibWeb: Split out image loading logic from HTMLImageElement Since more DOM nodes are going to want to load images (<object>, ...) this patch splits out the image loading logic into an ImageLoader class and then HTMLImageElement simply has an ImageLoader. LayoutImage is then given a const ImageLoader& at construction and can then provide layout and rendering for many kinds of DOM nodes.
2020-06-13 22:22:54 +02:00
}
int LayoutImage::preferred_height() const
{
LibWeb+Browser: Decode non-animated images out-of-process :^) We now use the ImageDecoder service in LibWeb for everything except GIF images (we'll have to deal with them later, ofc.) This has a little bit of overhead but we should be able to optimize it until it becomes negligible.
2020-06-22 21:41:10 +02:00
return node().attribute(HTML::AttributeNames::height).to_int().value_or(m_image_loader.height());
LibWeb: Split out image loading logic from HTMLImageElement Since more DOM nodes are going to want to load images (<object>, ...) this patch splits out the image loading logic into an ImageLoader class and then HTMLImageElement simply has an ImageLoader. LayoutImage is then given a const ImageLoader& at construction and can then provide layout and rendering for many kinds of DOM nodes.
2020-06-13 22:22:54 +02:00
}
LibWeb: LayoutMode line_break_policy => LayoutMode layout_mode
2020-05-27 19:20:49 +02:00
void LayoutImage::layout(LayoutMode layout_mode)
LibHTML: Flesh out <img> element with LayoutImage and LayoutReplaced This patch adds parsing of <img> into HTMLImageElement objects. It also adds LayoutImage and its parent class LayoutReplaced, which is going to represent CSS "replaced elements."
2019-10-05 22:07:45 +02:00
{
LibWeb: Set the intrinsic width/height of <img> instead of hacking it Images were added before replaced element layout knew about intrinsic sizes, so this was a bit backwards. We now instead transfer the known intrinsic sizes from the ImageLoader to the LayoutImage.
2020-07-22 01:36:07 +02:00
if (m_image_loader.width()) {
LibWeb: Start implementing proper layout of replaced elements LayoutReplaced now has intrinsic width, height and ratio. Only some of the values may be present. The layout algorithm takes the various configurations into account per the CSS specification. This is still pretty immature but at least we're moving forward. :^)
2020-06-05 19:13:27 +02:00
set_has_intrinsic_width(true);
LibWeb: Set the intrinsic width/height of <img> instead of hacking it Images were added before replaced element layout knew about intrinsic sizes, so this was a bit backwards. We now instead transfer the known intrinsic sizes from the ImageLoader to the LayoutImage.
2020-07-22 01:36:07 +02:00
set_intrinsic_width(m_image_loader.width());
}
if (m_image_loader.height()) {
LibWeb: Start implementing proper layout of replaced elements LayoutReplaced now has intrinsic width, height and ratio. Only some of the values may be present. The layout algorithm takes the various configurations into account per the CSS specification. This is still pretty immature but at least we're moving forward. :^)
2020-06-05 19:13:27 +02:00
set_has_intrinsic_height(true);
LibWeb: Set the intrinsic width/height of <img> instead of hacking it Images were added before replaced element layout knew about intrinsic sizes, so this was a bit backwards. We now instead transfer the known intrinsic sizes from the ImageLoader to the LayoutImage.
2020-07-22 01:36:07 +02:00
set_intrinsic_height(m_image_loader.height());
}
if (m_image_loader.width() && m_image_loader.height()) {
set_has_intrinsic_ratio(true);
set_intrinsic_ratio((float)m_image_loader.width() / (float)m_image_loader.height());
} else {
set_has_intrinsic_ratio(false);
}
if (renders_as_alt_text()) {
LibWeb: Split out image loading logic from HTMLImageElement Since more DOM nodes are going to want to load images (<object>, ...) this patch splits out the image loading logic into an ImageLoader class and then HTMLImageElement simply has an ImageLoader. LayoutImage is then given a const ImageLoader& at construction and can then provide layout and rendering for many kinds of DOM nodes.
2020-06-13 22:22:54 +02:00
auto& image_element = to<HTMLImageElement>(node());
LibDraw: Put all classes in the Gfx namespace I started adding things to a Draw namespace, but it somehow felt really wrong seeing Draw::Rect and Draw::Bitmap, etc. So instead, let's rename the library to LibGfx. :^)
2020-02-06 11:56:38 +01:00
auto& font = Gfx::Font::default_font();
LibWeb: Split out image loading logic from HTMLImageElement Since more DOM nodes are going to want to load images (<object>, ...) this patch splits out the image loading logic into an ImageLoader class and then HTMLImageElement simply has an ImageLoader. LayoutImage is then given a const ImageLoader& at construction and can then provide layout and rendering for many kinds of DOM nodes.
2020-06-13 22:22:54 +02:00
auto alt = image_element.alt();
LibHTML: Use image URL as alt text if alt is missing
2019-10-06 23:13:54 +11:00
if (alt.is_empty())
LibWeb: Split out image loading logic from HTMLImageElement Since more DOM nodes are going to want to load images (<object>, ...) this patch splits out the image loading logic into an ImageLoader class and then HTMLImageElement simply has an ImageLoader. LayoutImage is then given a const ImageLoader& at construction and can then provide layout and rendering for many kinds of DOM nodes.
2020-06-13 22:22:54 +02:00
alt = image_element.src();
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:42:29 +02:00
set_width(font.width(alt) + 16);
set_height(font.glyph_height() + 16);
LibWeb: Set the intrinsic width/height of <img> instead of hacking it Images were added before replaced element layout knew about intrinsic sizes, so this was a bit backwards. We now instead transfer the known intrinsic sizes from the ImageLoader to the LayoutImage.
2020-07-22 01:36:07 +02:00
}
if (!has_intrinsic_width() && !has_intrinsic_height()) {
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:42:29 +02:00
set_width(16);
set_height(16);
LibHTML: Implement basic layout for inline <img alt> LayoutReplaced objects can now participate in inline layout. It's very hackish, but basically LayoutReplaced will just add itself to the last line in the containing block. This patch gets rid of the idea that only LayoutInline subclasses can be split into lines, by moving the split_into_lines() virtual up to LayoutNode and overriding it in LayoutReplaced.
2019-10-05 23:20:35 +02:00
}
LibWeb: LayoutMode line_break_policy => LayoutMode layout_mode
2020-05-27 19:20:49 +02:00
LayoutReplaced::layout(layout_mode);
LibHTML: Flesh out <img> element with LayoutImage and LayoutReplaced This patch adds parsing of <img> into HTMLImageElement objects. It also adds LayoutImage and its parent class LayoutReplaced, which is going to represent CSS "replaced elements."
2019-10-05 22:07:45 +02:00
}
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:35:44 +02:00
void LayoutImage::paint(PaintContext& context, PaintPhase phase)
LibHTML: Flesh out <img> element with LayoutImage and LayoutReplaced This patch adds parsing of <img> into HTMLImageElement objects. It also adds LayoutImage and its parent class LayoutReplaced, which is going to represent CSS "replaced elements."
2019-10-05 22:07:45 +02:00
{
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
if (!is_visible())
return;
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
// FIXME: This should be done at a different level. Also rect() does not include padding etc!
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:42:29 +02:00
if (!context.viewport_rect().intersects(enclosing_int_rect(absolute_rect())))
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
return;
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:35:44 +02:00
LayoutReplaced::paint(context, phase);
LibWeb: Fix LayoutImage stupidly painting backgrounds over itself The good boy fix here would be to implement all of the CSS paint phases but for now, let's at least not paint a background over our image. :^)
2020-06-13 22:18:12 +02:00
LibWeb: Separate layout tree rendering into phases CSS defines a very specific paint order. This patch starts steering us towards respecting that by introducing the PaintPhase enum with values: - Background - Border - Foreground - Overlay (internal overlays used by inspector) Basically, to get the right visual result, we have to render the page multiple times, going one phase at a time.
2020-06-18 18:57:35 +02:00
if (phase == PaintPhase::Foreground) {
if (renders_as_alt_text()) {
auto& image_element = to<HTMLImageElement>(node());
context.painter().set_font(Gfx::Font::default_font());
Gfx::StylePainter::paint_frame(context.painter(), enclosing_int_rect(absolute_rect()), context.palette(), Gfx::FrameShape::Container, Gfx::FrameShadow::Sunken, 2);
auto alt = image_element.alt();
if (alt.is_empty())
alt = image_element.src();
LibWeb: Rename LayoutNode::style() => specified_style() Let's make way for a slightly-more-cooked style() that will eventually replace the raw specified_style() for layout and paint purposes.
2020-06-24 13:51:14 +02:00
context.painter().draw_text(enclosing_int_rect(absolute_rect()), alt, Gfx::TextAlignment::Center, specified_style().color_or_fallback(CSS::PropertyID::Color, document(), Color::Black), Gfx::TextElision::Right);
LibWeb+Browser: Decode non-animated images out-of-process :^) We now use the ImageDecoder service in LibWeb for everything except GIF images (we'll have to deal with them later, ofc.) This has a little bit of overhead but we should be able to optimize it until it becomes negligible.
2020-06-22 21:41:10 +02:00
} else if (auto* bitmap = m_image_loader.bitmap()) {
context.painter().draw_scaled_bitmap(enclosing_int_rect(absolute_rect()), *bitmap, bitmap->rect());
LibWeb: Separate layout tree rendering into phases CSS defines a very specific paint order. This patch starts steering us towards respecting that by introducing the PaintPhase enum with values: - Background - Border - Foreground - Overlay (internal overlays used by inspector) Basically, to get the right visual result, we have to render the page multiple times, going one phase at a time.
2020-06-18 18:57:35 +02:00
}
LibWeb: Split out image loading logic from HTMLImageElement Since more DOM nodes are going to want to load images (<object>, ...) this patch splits out the image loading logic into an ImageLoader class and then HTMLImageElement simply has an ImageLoader. LayoutImage is then given a const ImageLoader& at construction and can then provide layout and rendering for many kinds of DOM nodes.
2020-06-13 22:22:54 +02:00
}
LibHTML: Flesh out <img> element with LayoutImage and LayoutReplaced This patch adds parsing of <img> into HTMLImageElement objects. It also adds LayoutImage and its parent class LayoutReplaced, which is going to represent CSS "replaced elements."
2019-10-05 22:07:45 +02:00
}
LibHTML: Implement basic layout for inline <img alt> LayoutReplaced objects can now participate in inline layout. It's very hackish, but basically LayoutReplaced will just add itself to the last line in the containing block. This patch gets rid of the idea that only LayoutInline subclasses can be split into lines, by moving the split_into_lines() virtual up to LayoutNode and overriding it in LayoutReplaced.
2019-10-05 23:20:35 +02:00
bool LayoutImage::renders_as_alt_text() const
{
LibWeb: Split out image loading logic from HTMLImageElement Since more DOM nodes are going to want to load images (<object>, ...) this patch splits out the image loading logic into an ImageLoader class and then HTMLImageElement simply has an ImageLoader. LayoutImage is then given a const ImageLoader& at construction and can then provide layout and rendering for many kinds of DOM nodes.
2020-06-13 22:22:54 +02:00
if (is<HTMLImageElement>(node()))
LibWeb+Browser: Decode non-animated images out-of-process :^) We now use the ImageDecoder service in LibWeb for everything except GIF images (we'll have to deal with them later, ofc.) This has a little bit of overhead but we should be able to optimize it until it becomes negligible.
2020-06-22 21:41:10 +02:00
return !m_image_loader.has_image();
LibWeb: Split out image loading logic from HTMLImageElement Since more DOM nodes are going to want to load images (<object>, ...) this patch splits out the image loading logic into an ImageLoader class and then HTMLImageElement simply has an ImageLoader. LayoutImage is then given a const ImageLoader& at construction and can then provide layout and rendering for many kinds of DOM nodes.
2020-06-13 22:22:54 +02:00
return false;
LibHTML: Implement basic layout for inline <img alt> LayoutReplaced objects can now participate in inline layout. It's very hackish, but basically LayoutReplaced will just add itself to the last line in the containing block. This patch gets rid of the idea that only LayoutInline subclasses can be split into lines, by moving the split_into_lines() virtual up to LayoutNode and overriding it in LayoutReplaced.
2019-10-05 23:20:35 +02:00
}
LibWeb: Move everything into the Web namespace
2020-03-07 10:27:02 +01:00
LibWeb: Move "visible in viewport" state tracking to ImageLoader This should technically apply to any LayoutImage, so let's just move it to ImageLoader.
2020-06-14 19:32:23 +02:00
void LayoutImage::set_visible_in_viewport(Badge<LayoutDocument>, bool visible_in_viewport)
{
m_image_loader.set_visible_in_viewport(visible_in_viewport);
}
LibWeb: Move everything into the Web namespace
2020-03-07 10:27:02 +01:00
}
Reference in a new issue Copy permalink