Browser+LibHTML: Add resolved element style to the DOM inspector

When selecting an element in the browser's DOM inspector, we now also
show the resolved CSS properties (and their values) for that element.

Since the inspector was growing a bit more complex, I moved it out of
the "show inspector" action callback and into its own class.

In the future, we will probably want to migrate the inspector down to
LibHTML to make it accessible to other clients of the library, but for
now we can keep working on it inside Browser. :^)

3 files changed, 84 insertions, 0 deletions

diff --git a/Libraries/LibHTML/DOMElementStyleModel.cpp b/Libraries/LibHTML/DOMElementStyleModel.cpp
new file mode 100644
index 0000000000..e217c2bde2
--- /dev/null
+++ b/Libraries/LibHTML/DOMElementStyleModel.cpp
@@ -0,0 +1,50 @@
+#include "DOMElementStyleModel.h"
+#include <LibHTML/CSS/PropertyID.h>
+#include <LibHTML/DOM/Document.h>
+#include <LibHTML/DOM/Element.h>
+
+DOMElementStyleModel::DOMElementStyleModel(const Element& element)
+    : m_element(element)
+{
+    if (element.resolved_style()) {
+        element.resolved_style()->for_each_property([&](auto property_id, auto& property_value) {
+            Value value;
+            value.name = CSS::string_from_property_id(property_id);
+            value.value = property_value.to_string();
+            m_values.append(value);
+        });
+    }
+}
+
+int DOMElementStyleModel::row_count(const GModelIndex&) const
+{
+    return m_values.size();
+}
+
+String DOMElementStyleModel::column_name(int column_index) const
+{
+    switch (column_index) {
+    case Column::PropertyName:
+        return "Name";
+    case Column::PropertyValue:
+        return "Value";
+    default:
+        ASSERT_NOT_REACHED();
+    }
+}
+GVariant DOMElementStyleModel::data(const GModelIndex& index, Role role) const
+{
+    auto& value = m_values[index.row()];
+    if (role == Role::Display) {
+        if (index.column() == Column::PropertyName)
+            return value.name;
+        if (index.column() == Column::PropertyValue)
+            return value.value;
+    }
+    return {};
+}
+
+void DOMElementStyleModel::update()
+{
+    did_update();
+}
diff --git a/Libraries/LibHTML/DOMElementStyleModel.h b/Libraries/LibHTML/DOMElementStyleModel.h
new file mode 100644
index 0000000000..7d074eb9ef
--- /dev/null
+++ b/Libraries/LibHTML/DOMElementStyleModel.h
@@ -0,0 +1,33 @@
+#include <AK/NonnullRefPtrVector.h>
+#include <LibGUI/GModel.h>
+
+class Element;
+
+class DOMElementStyleModel final : public GModel {
+public:
+    enum Column {
+        PropertyName,
+        PropertyValue,
+        __Count
+    };
+
+    static NonnullRefPtr<DOMElementStyleModel> create(const Element& element) { return adopt(*new DOMElementStyleModel(element)); }
+
+    virtual int row_count(const GModelIndex& = GModelIndex()) const override;
+    virtual int column_count(const GModelIndex& = GModelIndex()) const override { return Column::__Count; }
+    virtual String column_name(int) const override;
+    virtual GVariant data(const GModelIndex&, Role = Role::Display) const override;
+    virtual void update() override;
+
+private:
+    explicit DOMElementStyleModel(const Element&);
+    const Element& element() const { return *m_element; }
+
+    NonnullRefPtr<Element> m_element;
+
+    struct Value {
+        String name;
+        String value;
+    };
+    Vector<Value> m_values;
+};
diff --git a/Libraries/LibHTML/Makefile b/Libraries/LibHTML/Makefile
index 64f0d47324..a0518ad08a 100644
--- a/Libraries/LibHTML/Makefile
+++ b/Libraries/LibHTML/Makefile
@@ -34,6 +34,7 @@ LIBHTML_OBJS = \
     DOM/Node.o \
     DOM/ParentNode.o \
     DOM/Text.o \
+    DOMElementStyleModel.o \
     DOMTreeModel.o \
     Dump.o \
     FontCache.o \