LibWeb: Implement <script src> support for synchronous scripts

Scripts loaded in this way will block the parser until they finish
executing. This means that they see the DOM before the whole document
has been fully parsed. This is all normal, of course.

To make this work, I changed the way we notify DOM nodes about tree
insertion. The inserted_into() callbacks are now incrementally invoked
during parse, as each node is appended to its parent.

To accomodate inline scripts and inline style sheets, we now also have
a children_changed() callback which is invoked on any parent when it
has children added/removed.
This commit is contained in:
Andreas Kling 2020-04-03 23:06:09 +02:00
parent 18d45d1082
commit 56ca91b9f8
Notes: sideshowbarker 2024-07-19 07:58:05 +09:00
10 changed files with 69 additions and 27 deletions

View File

@ -20,14 +20,12 @@ span#ua {
color: red;
}
</style>
<script>
document.getElementById("ua").innerHTML = navigator.userAgent;
</script>
<script src="welcome.js"></script>
</head>
<body link="#44f" vlink="#c4c" background="90s-bg.png">
<h1>Welcome to the Serenity Browser!</h1>
<p>This is a very simple browser built on the LibWeb and LibJS engines.</p>
<p>Your user agent is: <span id="ua"></span></p>
<p>Your user agent is: <b><span id="ua"></span></b></p>
<p>Some small test pages:</p>
<ul>
<li><a href="qsa.html">querySelectorAll test</a></li>

View File

@ -0,0 +1,3 @@
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("ua").innerHTML = navigator.userAgent;
});

View File

@ -30,6 +30,7 @@
#include <LibWeb/DOM/Document.h>
#include <LibWeb/DOM/HTMLScriptElement.h>
#include <LibWeb/DOM/Text.h>
#include <LibWeb/ResourceLoader.h>
namespace Web {
@ -42,17 +43,48 @@ HTMLScriptElement::~HTMLScriptElement()
{
}
void HTMLScriptElement::inserted_into(Node& new_parent)
void HTMLScriptElement::children_changed()
{
HTMLElement::inserted_into(new_parent);
HTMLElement::children_changed();
if (has_attribute("src"))
return;
StringBuilder builder;
for_each_child([&](auto& child) {
if (is<Text>(child))
builder.append(to<Text>(child).text_content());
});
auto source = builder.to_string();
if (source.is_empty())
return;
auto program = JS::Parser(JS::Lexer(source)).parse_program();
document().interpreter().run(*program);
}
void HTMLScriptElement::inserted_into(Node& new_parent)
{
HTMLElement::inserted_into(new_parent);
auto src = attribute("src");
if (src.is_null())
return;
String source;
URL src_url = document().complete_url(src);
ResourceLoader::the().load_sync(src_url, [&](auto& data) {
if (data.is_null()) {
dbg() << "HTMLScriptElement: Failed to load " << src;
return;
}
source = String::copy(data);
});
if (source.is_empty()) {
dbg() << "HTMLScriptElement: No source to parse :(";
return;
}
auto program = JS::Parser(JS::Lexer(source)).parse_program();
document().interpreter().run(*program);
}

View File

@ -36,6 +36,7 @@ public:
virtual ~HTMLScriptElement() override;
virtual void inserted_into(Node&) override;
virtual void children_changed() override;
};
}

View File

@ -41,7 +41,7 @@ HTMLStyleElement::~HTMLStyleElement()
{
}
void HTMLStyleElement::inserted_into(Node& new_parent)
void HTMLStyleElement::children_changed()
{
StringBuilder builder;
for_each_child([&](auto& child) {
@ -51,7 +51,7 @@ void HTMLStyleElement::inserted_into(Node& new_parent)
m_stylesheet = parse_css(builder.to_string());
if (m_stylesheet)
document().add_sheet(*m_stylesheet);
HTMLElement::inserted_into(new_parent);
HTMLElement::children_changed();
}
void HTMLStyleElement::removed_from(Node& old_parent)

View File

@ -37,7 +37,7 @@ public:
HTMLStyleElement(Document&, const FlyString& tag_name);
virtual ~HTMLStyleElement() override;
virtual void inserted_into(Node&) override;
virtual void children_changed() override;
virtual void removed_from(Node&) override;
private:

View File

@ -104,6 +104,7 @@ public:
virtual void inserted_into(Node&) {}
virtual void removed_from(Node&) {}
virtual void children_changed() {}
const LayoutNode* layout_node() const { return m_layout_node; }
LayoutNode* layout_node() { return m_layout_node; }

View File

@ -111,6 +111,7 @@ public:
void inserted_into(LayoutNode&) {}
void removed_from(LayoutNode&) {}
void children_changed() {}
virtual void split_into_lines(LayoutBlock& container);

View File

@ -97,7 +97,7 @@ static bool parse_html_document(const StringView& html, Document& document, Pare
auto commit_text_node = [&] {
auto text_node = adopt(*new Text(document, text_buffer.to_string()));
node_stack.last().append_child(text_node, false);
node_stack.last().append_child(text_node);
text_buffer.clear();
};
@ -129,19 +129,20 @@ static bool parse_html_document(const StringView& html, Document& document, Pare
tag_name_buffer.clear();
new_element->set_attributes(move(attributes));
node_stack.append(new_element);
if (node_stack.size() != 1)
node_stack[node_stack.size() - 2].append_child(new_element, false);
if (node_stack.size() != 1) {
node_stack[node_stack.size() - 2].append_child(new_element);
}
if (is_self_closing_tag(new_element->tag_name()))
close_tag();
};
auto commit_doctype = [&] {
node_stack.last().append_child(adopt(*new DocumentType(document)), false);
node_stack.last().append_child(adopt(*new DocumentType(document)));
};
auto commit_comment = [&] {
node_stack.last().append_child(adopt(*new Comment(document, text_buffer.to_string())), false);
node_stack.last().append_child(adopt(*new Comment(document, text_buffer.to_string())));
};
auto commit_tag = [&] {
@ -378,6 +379,7 @@ RefPtr<Document> parse_html_document(const StringView& html, const URL& url)
document->fixup();
#if 0
Function<void(Node&)> fire_insertion_callbacks = [&](Node& node) {
for (auto* child = node.first_child(); child; child = child->next_sibling()) {
fire_insertion_callbacks(*child);
@ -386,6 +388,7 @@ RefPtr<Document> parse_html_document(const StringView& html, const URL& url)
node.inserted_into(*node.parent());
};
fire_insertion_callbacks(document);
#endif
document->dispatch_event(Event::create("DOMContentLoaded"));

View File

@ -108,9 +108,9 @@ public:
bool is_ancestor_of(const TreeNode&) const;
void prepend_child(NonnullRefPtr<T> node, bool call_inserted_into = true);
void append_child(NonnullRefPtr<T> node, bool call_inserted_into = true);
NonnullRefPtr<T> remove_child(NonnullRefPtr<T> node, bool call_removed_from = true);
void prepend_child(NonnullRefPtr<T> node);
void append_child(NonnullRefPtr<T> node);
NonnullRefPtr<T> remove_child(NonnullRefPtr<T> node);
void donate_all_children_to(T& node);
bool is_child_allowed(const T&) const { return true; }
@ -200,7 +200,7 @@ private:
};
template<typename T>
inline NonnullRefPtr<T> TreeNode<T>::remove_child(NonnullRefPtr<T> node, bool call_removed_from)
inline NonnullRefPtr<T> TreeNode<T>::remove_child(NonnullRefPtr<T> node)
{
ASSERT(node->m_parent == this);
@ -220,16 +220,17 @@ inline NonnullRefPtr<T> TreeNode<T>::remove_child(NonnullRefPtr<T> node, bool ca
node->m_previous_sibling = nullptr;
node->m_parent = nullptr;
if (call_removed_from)
node->removed_from(static_cast<T&>(*this));
node->removed_from(static_cast<T&>(*this));
node->unref();
static_cast<T*>(this)->children_changed();
return node;
}
template<typename T>
inline void TreeNode<T>::append_child(NonnullRefPtr<T> node, bool call_inserted_into)
inline void TreeNode<T>::append_child(NonnullRefPtr<T> node)
{
ASSERT(!node->m_parent);
@ -243,13 +244,14 @@ inline void TreeNode<T>::append_child(NonnullRefPtr<T> node, bool call_inserted_
m_last_child = node.ptr();
if (!m_first_child)
m_first_child = m_last_child;
if (call_inserted_into)
node->inserted_into(static_cast<T&>(*this));
node->inserted_into(static_cast<T&>(*this));
(void)node.leak_ref();
static_cast<T*>(this)->children_changed();
}
template<typename T>
inline void TreeNode<T>::prepend_child(NonnullRefPtr<T> node, bool call_inserted_into)
inline void TreeNode<T>::prepend_child(NonnullRefPtr<T> node)
{
ASSERT(!node->m_parent);
@ -263,9 +265,10 @@ inline void TreeNode<T>::prepend_child(NonnullRefPtr<T> node, bool call_inserted
m_first_child = node.ptr();
if (!m_last_child)
m_last_child = m_first_child;
if (call_inserted_into)
node->inserted_into(static_cast<T&>(*this));
node->inserted_into(static_cast<T&>(*this));
(void)node.leak_ref();
static_cast<T*>(this)->children_changed();
}
template<typename T>