mirror of
https://github.com/RGBCube/serenity
synced 2025-07-24 19:27:35 +00:00
LibWeb: Extract shared lazy-loading behavior into a base class
`<iframe>` and `<img>` tags share the same spec for several aspects of lazy-loading: how the `loading` attribute works, the "will lazy load element" steps, and a member for storing the lazy-load resumption steps. So let's share the implementation by using a base class. This mostly involves moving things around. However, we also change the `start_intersection_observing_a_lazy_loading_element()` method to take a LazyLoadingElement, and operate on one, instead of always casting to HTMLImageElement. We do unfortunately have to do some shenanigans to make the cast work, by adding a virtual function stub in DOM::Element.
This commit is contained in:
parent
cc2008ea0d
commit
cc633123ca
7 changed files with 111 additions and 56 deletions
|
@ -3310,6 +3310,8 @@ void Document::run_the_update_intersection_observations_steps(HighResolutionTime
|
||||||
// https://html.spec.whatwg.org/multipage/urls-and-fetching.html#start-intersection-observing-a-lazy-loading-element
|
// https://html.spec.whatwg.org/multipage/urls-and-fetching.html#start-intersection-observing-a-lazy-loading-element
|
||||||
void Document::start_intersection_observing_a_lazy_loading_element(Element& element)
|
void Document::start_intersection_observing_a_lazy_loading_element(Element& element)
|
||||||
{
|
{
|
||||||
|
VERIFY(element.is_lazy_loading());
|
||||||
|
|
||||||
auto& realm = this->realm();
|
auto& realm = this->realm();
|
||||||
|
|
||||||
// 1. Let doc be element's node document.
|
// 1. Let doc be element's node document.
|
||||||
|
@ -3333,7 +3335,8 @@ void Document::start_intersection_observing_a_lazy_loading_element(Element& elem
|
||||||
// 2. If entry.isIntersecting is true, then set resumptionSteps to entry.target's lazy load resumption steps.
|
// 2. If entry.isIntersecting is true, then set resumptionSteps to entry.target's lazy load resumption steps.
|
||||||
if (entry.is_intersecting()) {
|
if (entry.is_intersecting()) {
|
||||||
// 5. Set entry.target's lazy load resumption steps to null.
|
// 5. Set entry.target's lazy load resumption steps to null.
|
||||||
resumption_steps = verify_cast<HTML::HTMLImageElement>(*entry.target()).take_lazy_load_resumption_steps({});
|
VERIFY(entry.target()->is_lazy_loading());
|
||||||
|
resumption_steps = entry.target()->take_lazy_load_resumption_steps({});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3. If resumptionSteps is null, then return.
|
// 3. If resumptionSteps is null, then return.
|
||||||
|
|
|
@ -27,6 +27,7 @@
|
||||||
#include <LibWeb/HTML/DocumentReadyState.h>
|
#include <LibWeb/HTML/DocumentReadyState.h>
|
||||||
#include <LibWeb/HTML/HTMLScriptElement.h>
|
#include <LibWeb/HTML/HTMLScriptElement.h>
|
||||||
#include <LibWeb/HTML/History.h>
|
#include <LibWeb/HTML/History.h>
|
||||||
|
#include <LibWeb/HTML/LazyLoadingElement.h>
|
||||||
#include <LibWeb/HTML/Origin.h>
|
#include <LibWeb/HTML/Origin.h>
|
||||||
#include <LibWeb/HTML/SandboxingFlagSet.h>
|
#include <LibWeb/HTML/SandboxingFlagSet.h>
|
||||||
#include <LibWeb/HTML/Scripting/Environments.h>
|
#include <LibWeb/HTML/Scripting/Environments.h>
|
||||||
|
@ -519,7 +520,7 @@ public:
|
||||||
|
|
||||||
void run_the_update_intersection_observations_steps(HighResolutionTime::DOMHighResTimeStamp time);
|
void run_the_update_intersection_observations_steps(HighResolutionTime::DOMHighResTimeStamp time);
|
||||||
|
|
||||||
void start_intersection_observing_a_lazy_loading_element(Element& element);
|
void start_intersection_observing_a_lazy_loading_element(Element&);
|
||||||
|
|
||||||
void shared_declarative_refresh_steps(StringView input, JS::GCPtr<HTML::HTMLMetaElement const> meta_element = nullptr);
|
void shared_declarative_refresh_steps(StringView input, JS::GCPtr<HTML::HTMLMetaElement const> meta_element = nullptr);
|
||||||
|
|
||||||
|
|
|
@ -20,6 +20,7 @@
|
||||||
#include <LibWeb/DOM/Slottable.h>
|
#include <LibWeb/DOM/Slottable.h>
|
||||||
#include <LibWeb/HTML/AttributeNames.h>
|
#include <LibWeb/HTML/AttributeNames.h>
|
||||||
#include <LibWeb/HTML/EventLoop/Task.h>
|
#include <LibWeb/HTML/EventLoop/Task.h>
|
||||||
|
#include <LibWeb/HTML/LazyLoadingElement.h>
|
||||||
#include <LibWeb/HTML/ScrollOptions.h>
|
#include <LibWeb/HTML/ScrollOptions.h>
|
||||||
#include <LibWeb/HTML/TagNames.h>
|
#include <LibWeb/HTML/TagNames.h>
|
||||||
#include <LibWeb/IntersectionObserver/IntersectionObserver.h>
|
#include <LibWeb/IntersectionObserver/IntersectionObserver.h>
|
||||||
|
@ -372,6 +373,11 @@ public:
|
||||||
|
|
||||||
Optional<FlyString> const& id() const { return m_id; }
|
Optional<FlyString> const& id() const { return m_id; }
|
||||||
|
|
||||||
|
virtual JS::GCPtr<JS::HeapFunction<void()>> take_lazy_load_resumption_steps(Badge<DOM::Document>)
|
||||||
|
{
|
||||||
|
return nullptr;
|
||||||
|
}
|
||||||
|
|
||||||
protected:
|
protected:
|
||||||
Element(Document&, DOM::QualifiedName);
|
Element(Document&, DOM::QualifiedName);
|
||||||
virtual void initialize(JS::Realm&) override;
|
virtual void initialize(JS::Realm&) override;
|
||||||
|
|
|
@ -105,6 +105,7 @@ public:
|
||||||
virtual bool is_html_button_element() const { return false; }
|
virtual bool is_html_button_element() const { return false; }
|
||||||
virtual bool is_html_slot_element() const { return false; }
|
virtual bool is_html_slot_element() const { return false; }
|
||||||
virtual bool is_navigable_container() const { return false; }
|
virtual bool is_navigable_container() const { return false; }
|
||||||
|
virtual bool is_lazy_loading() const { return false; }
|
||||||
|
|
||||||
WebIDL::ExceptionOr<JS::NonnullGCPtr<Node>> pre_insert(JS::NonnullGCPtr<Node>, JS::GCPtr<Node>);
|
WebIDL::ExceptionOr<JS::NonnullGCPtr<Node>> pre_insert(JS::NonnullGCPtr<Node>, JS::GCPtr<Node>);
|
||||||
WebIDL::ExceptionOr<JS::NonnullGCPtr<Node>> pre_remove(JS::NonnullGCPtr<Node>);
|
WebIDL::ExceptionOr<JS::NonnullGCPtr<Node>> pre_remove(JS::NonnullGCPtr<Node>);
|
||||||
|
|
|
@ -71,7 +71,7 @@ void HTMLImageElement::visit_edges(Cell::Visitor& visitor)
|
||||||
Base::visit_edges(visitor);
|
Base::visit_edges(visitor);
|
||||||
visitor.visit(m_current_request);
|
visitor.visit(m_current_request);
|
||||||
visitor.visit(m_pending_request);
|
visitor.visit(m_pending_request);
|
||||||
visitor.visit(m_lazy_load_resumption_steps);
|
visit_lazy_loading_element(visitor);
|
||||||
}
|
}
|
||||||
|
|
||||||
void HTMLImageElement::apply_presentational_hints(CSS::StyleProperties& style) const
|
void HTMLImageElement::apply_presentational_hints(CSS::StyleProperties& style) const
|
||||||
|
@ -165,11 +165,6 @@ void HTMLImageElement::set_visible_in_viewport(bool)
|
||||||
// FIXME: Loosen grip on image data when it's not visible, e.g via volatile memory.
|
// FIXME: Loosen grip on image data when it's not visible, e.g via volatile memory.
|
||||||
}
|
}
|
||||||
|
|
||||||
void HTMLImageElement::set_lazy_load_resumption_steps(Function<void()> steps)
|
|
||||||
{
|
|
||||||
m_lazy_load_resumption_steps = JS::create_heap_function(vm().heap(), move(steps));
|
|
||||||
}
|
|
||||||
|
|
||||||
// https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-width
|
// https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-width
|
||||||
unsigned HTMLImageElement::width() const
|
unsigned HTMLImageElement::width() const
|
||||||
{
|
{
|
||||||
|
@ -528,7 +523,7 @@ after_step_7:
|
||||||
m_pending_request = image_request;
|
m_pending_request = image_request;
|
||||||
|
|
||||||
// 23. Let delay load event be true if the img's lazy loading attribute is in the Eager state, or if scripting is disabled for the img, and false otherwise.
|
// 23. Let delay load event be true if the img's lazy loading attribute is in the Eager state, or if scripting is disabled for the img, and false otherwise.
|
||||||
auto delay_load_event = lazy_loading() == LazyLoading::Eager;
|
auto delay_load_event = lazy_loading_attribute() == LazyLoading::Eager;
|
||||||
|
|
||||||
// When delay load event is true, fetching the image must delay the load event of the element's node document
|
// When delay load event is true, fetching the image must delay the load event of the element's node document
|
||||||
// until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run.
|
// until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run.
|
||||||
|
@ -558,7 +553,7 @@ after_step_7:
|
||||||
// FIXME: 22. Set request's priority to the current state of the element's fetchpriority attribute.
|
// FIXME: 22. Set request's priority to the current state of the element's fetchpriority attribute.
|
||||||
|
|
||||||
// 24. If the will lazy load element steps given the img return true, then:
|
// 24. If the will lazy load element steps given the img return true, then:
|
||||||
if (will_lazy_load()) {
|
if (will_lazy_load_element()) {
|
||||||
// 1. Set the img's lazy load resumption steps to the rest of this algorithm starting with the step labeled fetch the image.
|
// 1. Set the img's lazy load resumption steps to the rest of this algorithm starting with the step labeled fetch the image.
|
||||||
set_lazy_load_resumption_steps([this, request, image_request]() {
|
set_lazy_load_resumption_steps([this, request, image_request]() {
|
||||||
image_request->fetch_image(realm(), request);
|
image_request->fetch_image(realm(), request);
|
||||||
|
@ -1008,36 +1003,4 @@ void HTMLImageElement::animate()
|
||||||
layout_node()->set_needs_display();
|
layout_node()->set_needs_display();
|
||||||
}
|
}
|
||||||
|
|
||||||
// https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes
|
|
||||||
HTMLImageElement::LazyLoading HTMLImageElement::lazy_loading() const
|
|
||||||
{
|
|
||||||
auto value = deprecated_attribute(HTML::AttributeNames::loading);
|
|
||||||
if (value.equals_ignoring_ascii_case("lazy"sv))
|
|
||||||
return LazyLoading::Lazy;
|
|
||||||
return LazyLoading::Eager;
|
|
||||||
}
|
|
||||||
|
|
||||||
// https://html.spec.whatwg.org/multipage/urls-and-fetching.html#will-lazy-load-element-steps
|
|
||||||
bool HTMLImageElement::will_lazy_load() const
|
|
||||||
{
|
|
||||||
// 1. If scripting is disabled for element, then return false.
|
|
||||||
// Spec Note: This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is
|
|
||||||
// disabled, it would still be possible for a site to track a user's approximate scroll position throughout
|
|
||||||
// a session, by strategically placing images in a page's markup such that a server can track how many
|
|
||||||
// images are requested and when.
|
|
||||||
if (is_scripting_disabled())
|
|
||||||
return false;
|
|
||||||
|
|
||||||
// 2. If element's lazy loading attribute is in the Lazy state, then return true.
|
|
||||||
// 3. Return false.
|
|
||||||
return lazy_loading() == LazyLoading::Lazy;
|
|
||||||
}
|
|
||||||
|
|
||||||
JS::GCPtr<JS::HeapFunction<void()>> HTMLImageElement::take_lazy_load_resumption_steps(Badge<DOM::Document>)
|
|
||||||
{
|
|
||||||
auto lazy_load_resumption_steps = m_lazy_load_resumption_steps;
|
|
||||||
m_lazy_load_resumption_steps = nullptr;
|
|
||||||
return lazy_load_resumption_steps;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,6 +17,7 @@
|
||||||
#include <LibWeb/HTML/CORSSettingAttribute.h>
|
#include <LibWeb/HTML/CORSSettingAttribute.h>
|
||||||
#include <LibWeb/HTML/FormAssociatedElement.h>
|
#include <LibWeb/HTML/FormAssociatedElement.h>
|
||||||
#include <LibWeb/HTML/HTMLElement.h>
|
#include <LibWeb/HTML/HTMLElement.h>
|
||||||
|
#include <LibWeb/HTML/LazyLoadingElement.h>
|
||||||
#include <LibWeb/HTML/SourceSet.h>
|
#include <LibWeb/HTML/SourceSet.h>
|
||||||
#include <LibWeb/Layout/ImageProvider.h>
|
#include <LibWeb/Layout/ImageProvider.h>
|
||||||
|
|
||||||
|
@ -25,11 +26,13 @@ namespace Web::HTML {
|
||||||
class HTMLImageElement final
|
class HTMLImageElement final
|
||||||
: public HTMLElement
|
: public HTMLElement
|
||||||
, public FormAssociatedElement
|
, public FormAssociatedElement
|
||||||
|
, public LazyLoadingElement<HTMLImageElement>
|
||||||
, public Layout::ImageProvider
|
, public Layout::ImageProvider
|
||||||
, public DOM::Document::ViewportClient {
|
, public DOM::Document::ViewportClient {
|
||||||
WEB_PLATFORM_OBJECT(HTMLImageElement, HTMLElement);
|
WEB_PLATFORM_OBJECT(HTMLImageElement, HTMLElement);
|
||||||
JS_DECLARE_ALLOCATOR(HTMLImageElement);
|
JS_DECLARE_ALLOCATOR(HTMLImageElement);
|
||||||
FORM_ASSOCIATED_ELEMENT(HTMLElement, HTMLImageElement)
|
FORM_ASSOCIATED_ELEMENT(HTMLElement, HTMLImageElement);
|
||||||
|
LAZY_LOADING_ELEMENT(HTMLImageElement);
|
||||||
|
|
||||||
public:
|
public:
|
||||||
virtual ~HTMLImageElement() override;
|
virtual ~HTMLImageElement() override;
|
||||||
|
@ -77,12 +80,6 @@ public:
|
||||||
ImageRequest const& current_request() const { return *m_current_request; }
|
ImageRequest const& current_request() const { return *m_current_request; }
|
||||||
|
|
||||||
size_t current_frame_index() const { return m_current_frame_index; }
|
size_t current_frame_index() const { return m_current_frame_index; }
|
||||||
enum class LazyLoading {
|
|
||||||
Lazy,
|
|
||||||
Eager,
|
|
||||||
};
|
|
||||||
[[nodiscard]] LazyLoading lazy_loading() const;
|
|
||||||
[[nodiscard]] bool will_lazy_load() const;
|
|
||||||
|
|
||||||
// https://html.spec.whatwg.org/multipage/images.html#upgrade-the-pending-request-to-the-current-request
|
// https://html.spec.whatwg.org/multipage/images.html#upgrade-the-pending-request-to-the-current-request
|
||||||
void upgrade_pending_request_to_current_request();
|
void upgrade_pending_request_to_current_request();
|
||||||
|
@ -94,9 +91,6 @@ public:
|
||||||
virtual RefPtr<Gfx::ImmutableBitmap> current_image_bitmap(Gfx::IntSize = {}) const override;
|
virtual RefPtr<Gfx::ImmutableBitmap> current_image_bitmap(Gfx::IntSize = {}) const override;
|
||||||
virtual void set_visible_in_viewport(bool) override;
|
virtual void set_visible_in_viewport(bool) override;
|
||||||
|
|
||||||
void set_lazy_load_resumption_steps(Function<void()>);
|
|
||||||
JS::GCPtr<JS::HeapFunction<void()>> take_lazy_load_resumption_steps(Badge<DOM::Document>);
|
|
||||||
|
|
||||||
virtual void visit_edges(Cell::Visitor&) override;
|
virtual void visit_edges(Cell::Visitor&) override;
|
||||||
|
|
||||||
private:
|
private:
|
||||||
|
@ -139,10 +133,6 @@ private:
|
||||||
|
|
||||||
SourceSet m_source_set;
|
SourceSet m_source_set;
|
||||||
|
|
||||||
// https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-load-resumption-steps
|
|
||||||
// Each img and iframe element has associated lazy load resumption steps, initially null.
|
|
||||||
JS::GCPtr<JS::HeapFunction<void()>> m_lazy_load_resumption_steps;
|
|
||||||
|
|
||||||
CSSPixelSize m_last_seen_viewport_size;
|
CSSPixelSize m_last_seen_viewport_size;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
91
Userland/Libraries/LibWeb/HTML/LazyLoadingElement.h
Normal file
91
Userland/Libraries/LibWeb/HTML/LazyLoadingElement.h
Normal file
|
@ -0,0 +1,91 @@
|
||||||
|
/*
|
||||||
|
* Copyright (c) 2018-2023, Andreas Kling <kling@serenityos.org>
|
||||||
|
* Copyright (c) 2023, Sam Atkins <atkinssj@serenityos.org>
|
||||||
|
*
|
||||||
|
* SPDX-License-Identifier: BSD-2-Clause
|
||||||
|
*/
|
||||||
|
|
||||||
|
#pragma once
|
||||||
|
|
||||||
|
#include <LibWeb/Forward.h>
|
||||||
|
#include <LibWeb/HTML/AttributeNames.h>
|
||||||
|
|
||||||
|
namespace Web::HTML {
|
||||||
|
|
||||||
|
// Lazy-loaded elements should invoke this macro to inject overridden LazyLoadingElement methods.
|
||||||
|
#define LAZY_LOADING_ELEMENT(ElementClass) \
|
||||||
|
private: \
|
||||||
|
virtual JS::GCPtr<JS::HeapFunction<void()>> take_lazy_load_resumption_steps(Badge<DOM::Document>) override \
|
||||||
|
{ \
|
||||||
|
return take_lazy_load_resumption_steps_internal(); \
|
||||||
|
} \
|
||||||
|
\
|
||||||
|
virtual bool is_lazy_loading() const override { return true; }
|
||||||
|
|
||||||
|
enum class LazyLoading {
|
||||||
|
Lazy,
|
||||||
|
Eager,
|
||||||
|
};
|
||||||
|
|
||||||
|
template<typename T>
|
||||||
|
class LazyLoadingElement {
|
||||||
|
public:
|
||||||
|
// https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes
|
||||||
|
[[nodiscard]] LazyLoading lazy_loading_attribute() const
|
||||||
|
{
|
||||||
|
auto& element = static_cast<T const&>(*this);
|
||||||
|
|
||||||
|
auto value = element.attribute(HTML::AttributeNames::loading);
|
||||||
|
if (value.has_value() && value->equals_ignoring_ascii_case("lazy"sv))
|
||||||
|
return LazyLoading::Lazy;
|
||||||
|
return LazyLoading::Eager;
|
||||||
|
}
|
||||||
|
|
||||||
|
// https://html.spec.whatwg.org/multipage/urls-and-fetching.html#will-lazy-load-element-steps
|
||||||
|
[[nodiscard]] bool will_lazy_load_element() const
|
||||||
|
{
|
||||||
|
auto& element = static_cast<T const&>(*this);
|
||||||
|
|
||||||
|
// 1. If scripting is disabled for element, then return false.
|
||||||
|
// Spec Note: This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is
|
||||||
|
// disabled, it would still be possible for a site to track a user's approximate scroll position throughout
|
||||||
|
// a session, by strategically placing images in a page's markup such that a server can track how many
|
||||||
|
// images are requested and when.
|
||||||
|
if (element.is_scripting_disabled())
|
||||||
|
return false;
|
||||||
|
|
||||||
|
// 2. If element's lazy loading attribute is in the Lazy state, then return true.
|
||||||
|
// 3. Return false.
|
||||||
|
return lazy_loading_attribute() == LazyLoading::Lazy;
|
||||||
|
}
|
||||||
|
|
||||||
|
void set_lazy_load_resumption_steps(Function<void()> steps)
|
||||||
|
{
|
||||||
|
auto& element = static_cast<T&>(*this);
|
||||||
|
|
||||||
|
m_lazy_load_resumption_steps = JS::create_heap_function(element.vm().heap(), move(steps));
|
||||||
|
}
|
||||||
|
|
||||||
|
void visit_lazy_loading_element(JS::Cell::Visitor& visitor)
|
||||||
|
{
|
||||||
|
visitor.visit(m_lazy_load_resumption_steps);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected:
|
||||||
|
LazyLoadingElement() = default;
|
||||||
|
virtual ~LazyLoadingElement() = default;
|
||||||
|
|
||||||
|
JS::GCPtr<JS::HeapFunction<void()>> take_lazy_load_resumption_steps_internal()
|
||||||
|
{
|
||||||
|
auto lazy_load_resumption_steps = m_lazy_load_resumption_steps;
|
||||||
|
m_lazy_load_resumption_steps = nullptr;
|
||||||
|
return lazy_load_resumption_steps;
|
||||||
|
}
|
||||||
|
|
||||||
|
private:
|
||||||
|
// https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-load-resumption-steps
|
||||||
|
// Each img and iframe element has associated lazy load resumption steps, initially null.
|
||||||
|
JS::GCPtr<JS::HeapFunction<void()>> m_lazy_load_resumption_steps;
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
Loading…
Add table
Add a link
Reference in a new issue