Browser+LibHTML: Add "Computed" styles to the DOM inspector

I though it would be nice to also show the style that the browser uses
to display an element.

In order to do that, in place of the styles table I've put a tab widget,
with tabs for both element and computed element styles.

3 files changed, 84 insertions, 0 deletions

diff --git a/Libraries/LibHTML/DOMComputedElementStyleModel.cpp b/Libraries/LibHTML/DOMComputedElementStyleModel.cpp
new file mode 100644
index 0000000000..1c427730f1
--- /dev/null
+++ b/Libraries/LibHTML/DOMComputedElementStyleModel.cpp
@@ -0,0 +1,50 @@
+#include "DOMComputedElementStyleModel.h"
+#include <LibHTML/CSS/PropertyID.h>
+#include <LibHTML/DOM/Document.h>
+#include <LibHTML/DOM/Element.h>
+
+DOMComputedElementStyleModel::DOMComputedElementStyleModel(const Element& element)
+    : m_element(element)
+{
+    if (element.layout_node() != nullptr && element.layout_node()->has_style()) {
+        element.layout_node()->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 DOMComputedElementStyleModel::row_count(const GModelIndex&) const
+{
+    return m_values.size();
+}
+
+String DOMComputedElementStyleModel::column_name(int column_index) const
+{
+    switch (column_index) {
+    case Column::PropertyName:
+        return "Name";
+    case Column::PropertyValue:
+        return "Value";
+    default:
+        ASSERT_NOT_REACHED();
+    }
+}
+GVariant DOMComputedElementStyleModel::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 DOMComputedElementStyleModel::update()
+{
+    did_update();
+}
diff --git a/Libraries/LibHTML/DOMComputedElementStyleModel.h b/Libraries/LibHTML/DOMComputedElementStyleModel.h
new file mode 100644
index 0000000000..b118c35254
--- /dev/null
+++ b/Libraries/LibHTML/DOMComputedElementStyleModel.h
@@ -0,0 +1,33 @@
+#include <AK/NonnullRefPtrVector.h>
+#include <LibGUI/GModel.h>
+
+class Element;
+
+class DOMComputedElementStyleModel final : public GModel {
+public:
+    enum Column {
+        PropertyName,
+        PropertyValue,
+        __Count
+    };
+
+    static NonnullRefPtr<DOMComputedElementStyleModel> create(const Element& element) { return adopt(*new DOMComputedElementStyleModel(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 DOMComputedElementStyleModel(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 a0518ad08a..775fac466a 100644
--- a/Libraries/LibHTML/Makefile
+++ b/Libraries/LibHTML/Makefile
@@ -35,6 +35,7 @@ LIBHTML_OBJS = \
     DOM/ParentNode.o \
     DOM/Text.o \
     DOMElementStyleModel.o \
+    DOMComputedElementStyleModel.o \
     DOMTreeModel.o \
     Dump.o \
     FontCache.o \