Browser+LibHTML: Change the way computed styles are queried

Author: https://github.com/Matrix89
Commit: https://github.com/SerenityOS/serenity/commit/2dd35916e5b
Pull-request: https://github.com/SerenityOS/serenity/pull/1006
Reviewed-by: https://github.com/awesomekling

Applications/Browser/InspectorWidget.cpp

@@ -20,10 +20,10 @@ InspectorWidget::InspectorWidget(GWidget* parent)
         node->document().set_inspected_node(node);
         if (node->is_element()) {
             auto element = to<Element>(*node);
-	    if (element.resolved_style())
-            m_style_table_view->set_model(StylePropertiesModel::create(*element.resolved_style()));
-	    if (element.layout_node() && element.layout_node()->has_style())
-                m_computed_style_table_view->set_model(StylePropertiesModel::create(element.layout_node()->style()));
+            if (element.resolved_style()) {
+                m_style_table_view->set_model(StylePropertiesModel::create(*element.resolved_style()));
+                m_computed_style_table_view->set_model(StylePropertiesModel::create(*element.computed_style()));
+            }
         } else {
             m_style_table_view->set_model(nullptr);
             m_computed_style_table_view->set_model(nullptr);

Libraries/LibHTML/CSS/StyleProperties.h

@@ -10,6 +10,13 @@ class Color;
 class StyleProperties : public RefCounted<StyleProperties> {
 public:
     static NonnullRefPtr<StyleProperties> create() { return adopt(*new StyleProperties); }
+    static NonnullRefPtr<StyleProperties> create(const StyleProperties& properties) {
+        auto style_properties = new StyleProperties();
+        properties.for_each_property([&](auto property_id, auto& property_value) {
+            style_properties->set_property(property_id, property_value);
+        });
+        return adopt(*style_properties);
+    }
 
     template<typename Callback>
     inline void for_each_property(Callback callback) const

Libraries/LibHTML/DOM/Element.cpp

@@ -1,4 +1,6 @@
 #include <LibHTML/CSS/StyleResolver.h>
+#include <LibHTML/CSS/PropertyID.h>
+#include <LibHTML/CSS/Length.h>
 #include <LibHTML/DOM/Document.h>
 #include <LibHTML/DOM/Element.h>
 #include <LibHTML/Layout/LayoutBlock.h>
@@ -160,3 +162,26 @@ void Element::recompute_style()
         layout_node()->set_needs_display();
     }
 }
+
+RefPtr<StyleProperties> Element::computed_style()
+{
+    auto properties = StyleProperties::create(*m_resolved_style);
+    if (layout_node() && layout_node()->has_style()) {
+        CSS::PropertyID box_model_metrics[] = {
+            CSS::PropertyID::MarginTop,
+            CSS::PropertyID::MarginBottom,
+            CSS::PropertyID::MarginLeft,
+            CSS::PropertyID::MarginRight,
+            CSS::PropertyID::PaddingTop,
+            CSS::PropertyID::PaddingBottom,
+            CSS::PropertyID::PaddingLeft,
+            CSS::PropertyID::PaddingRight,
+        };
+        for (CSS::PropertyID id : box_model_metrics) {
+            auto prop = layout_node()->style().property(id);
+            if (prop)
+                properties->set_property(id, prop.value());
+        }
+    }
+    return properties.ptr();
+}

Libraries/LibHTML/DOM/Element.h

@@ -57,6 +57,7 @@ public:
     String name() const { return attribute("name"); }
 
     const StyleProperties* resolved_style() const { return m_resolved_style.ptr(); }
+    RefPtr<StyleProperties> computed_style();
 
 private:
     RefPtr<LayoutNode> create_layout_node(const StyleProperties* parent_style) const override;