1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-24 03:55:06 +00:00

LibHTML+Browser: Add a simple DOM inspector popup window

LibHTML now provides a DOMTreeModel which can be used to view a given
Document's DOM tree. :^)
This commit is contained in:
Andreas Kling 2019-11-09 11:31:03 +01:00
parent 0f76366b34
commit e3d975e943
5 changed files with 188 additions and 0 deletions

View file

@ -0,0 +1,110 @@
#include "DOMTreeModel.h"
#include <AK/StringBuilder.h>
#include <LibHTML/DOM/Document.h>
#include <LibHTML/DOM/Text.h>
#include <ctype.h>
#include <stdio.h>
DOMTreeModel::DOMTreeModel(Document& document)
: m_document(document)
{
m_element_icon.set_bitmap_for_size(16, GraphicsBitmap::load_from_file("/res/icons/16x16/inspector-object.png"));
m_text_icon.set_bitmap_for_size(16, GraphicsBitmap::load_from_file("/res/icons/16x16/filetype-unknown.png"));
}
DOMTreeModel::~DOMTreeModel()
{
}
GModelIndex DOMTreeModel::index(int row, int column, const GModelIndex& parent) const
{
if (!parent.is_valid()) {
return create_index(row, column, &m_document);
}
auto& parent_node = *static_cast<Node*>(parent.internal_data());
return create_index(row, column, parent_node.child_at_index(row));
}
GModelIndex DOMTreeModel::parent_index(const GModelIndex& index) const
{
if (!index.is_valid())
return {};
auto& node = *static_cast<Node*>(index.internal_data());
if (!node.parent())
return {};
// No grandparent? Parent is the document!
if (!node.parent()->parent()) {
return create_index(0, 0, &m_document);
}
// Walk the grandparent's children to find the index of node's parent in its parent.
// (This is needed to produce the row number of the GModelIndex corresponding to node's parent.)
int grandparent_child_index = 0;
for (auto* grandparent_child = node.parent()->parent()->first_child(); grandparent_child; grandparent_child = grandparent_child->next_sibling()) {
if (grandparent_child == node.parent())
return create_index(grandparent_child_index, 0, node.parent());
++grandparent_child_index;
}
ASSERT_NOT_REACHED();
return {};
}
int DOMTreeModel::row_count(const GModelIndex& index) const
{
if (!index.is_valid())
return 1;
auto& node = *static_cast<Node*>(index.internal_data());
return node.child_count();
}
int DOMTreeModel::column_count(const GModelIndex&) const
{
return 1;
}
static String with_whitespace_collapsed(const StringView& string)
{
StringBuilder builder;
for (int i = 0; i < string.length(); ++i) {
if (isspace(string[i])) {
builder.append(' ');
while (i < string.length()) {
if (isspace(string[i])) {
++i;
continue;
}
builder.append(string[i]);
break;
}
continue;
}
builder.append(string[i]);
}
return builder.to_string();
}
GVariant DOMTreeModel::data(const GModelIndex& index, Role role) const
{
auto* node = static_cast<Node*>(index.internal_data());
if (role == Role::Icon) {
if (node->is_element())
return m_element_icon;
// FIXME: More node type icons?
return m_text_icon;
}
if (role == Role::Display) {
if (node->is_text()) {
return String::format("%s", with_whitespace_collapsed(to<Text>(*node).data()).characters());
}
return String::format("<%s>", node->tag_name().characters());
}
return {};
}
void DOMTreeModel::update()
{
did_update();
}

View file

@ -0,0 +1,30 @@
#pragma once
#include <LibGUI/GModel.h>
class Document;
class DOMTreeModel final : public GModel {
public:
static NonnullRefPtr<DOMTreeModel> create(Document& document)
{
return adopt(*new DOMTreeModel(document));
}
virtual ~DOMTreeModel() override;
virtual int row_count(const GModelIndex& = GModelIndex()) const override;
virtual int column_count(const GModelIndex& = GModelIndex()) const override;
virtual GVariant data(const GModelIndex&, Role = Role::Display) const override;
virtual GModelIndex index(int row, int column, const GModelIndex& parent = GModelIndex()) const override;
virtual GModelIndex parent_index(const GModelIndex&) const override;
virtual void update() override;
private:
explicit DOMTreeModel(Document&);
Document& m_document;
GIcon m_element_icon;
GIcon m_text_icon;
};

View file

@ -51,6 +51,7 @@ LIBHTML_OBJS = \
Layout/LineBox.o \
Layout/LineBoxFragment.o \
Layout/LayoutTreeBuilder.o \
DOMTreeModel.o \
FontCache.o \
ResourceLoader.o \
HtmlView.o \

View file

@ -45,6 +45,30 @@ public:
const T* first_child() const { return m_first_child; }
const T* last_child() const { return m_last_child; }
int child_count() const
{
int count = 0;
for (auto* child = first_child(); child; child = child->next_sibling())
++count;
return count;
}
T* child_at_index(int index)
{
int count = 0;
for (auto* child = first_child(); child; child = child->next_sibling()) {
if (count == index)
return child;
++count;
}
return nullptr;
}
const T* child_at_index(int index) const
{
return const_cast<TreeNode*>(this)->child_at_index(index);
}
bool is_ancestor_of(const TreeNode&) const;
void prepend_child(NonnullRefPtr<T> node, bool call_inserted_into = true);