Browser+LibWeb: Add an Element size preview widget to inspector

This Adds an element size preview widget to the inspector widget
in a new tab. This functions similar to chrome and firefox and
shows the margin, border, padding, and content size of the selected
element in the inspector.

The colors for the size preview widget are taken from the chrome
browser.

6 files changed, 193 insertions, 4 deletions

diff --git a/Userland/Applications/Browser/CMakeLists.txt b/Userland/Applications/Browser/CMakeLists.txt
index 47f1ce133a..42a91864eb 100644
--- a/Userland/Applications/Browser/CMakeLists.txt
+++ b/Userland/Applications/Browser/CMakeLists.txt
@@ -21,6 +21,7 @@ set(SOURCES
     CookiesTabGML.h
     DownloadWidget.cpp
     EditBookmarkGML.h
+    ElementSizePreviewWidget.cpp
     History.cpp
     IconBag.cpp
     InspectorWidget.cpp
diff --git a/Userland/Applications/Browser/ElementSizePreviewWidget.cpp b/Userland/Applications/Browser/ElementSizePreviewWidget.cpp
new file mode 100644
index 0000000000..c8c628af18
--- /dev/null
+++ b/Userland/Applications/Browser/ElementSizePreviewWidget.cpp
@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2022, Michiel Vrins
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include "ElementSizePreviewWidget.h"
+#include <LibGUI/Painter.h>
+
+namespace Browser {
+
+void ElementSizePreviewWidget::paint_event(GUI::PaintEvent& event)
+{
+    GUI::Frame::paint_event(event);
+    GUI::Painter painter(*this);
+    painter.fill_rect(frame_inner_rect(), Color::White);
+
+    int outer_margin = 10;
+    int text_width_padding = 4;
+    int text_height_padding = 4;
+    int inner_content_width = 100;
+    int inner_content_height = max(15, font().glyph_height() + 2 * text_height_padding);
+
+    auto format_size_text = [&](float size) {
+        return String::formatted("{:.4f}", size);
+    };
+
+    auto compute_text_string_width = [&](float size) {
+        return font().width(format_size_text(size)) + 2 * text_width_padding;
+    };
+
+    int margin_left_width = max(25, compute_text_string_width(m_node_box_sizing.margin.left));
+    int margin_right_width = max(25, compute_text_string_width(m_node_box_sizing.margin.right));
+
+    int border_left_width = max(25, compute_text_string_width(m_node_box_sizing.border.left));
+    int border_right_width = max(25, compute_text_string_width(m_node_box_sizing.border.right));
+
+    int padding_left_width = max(25, compute_text_string_width(m_node_box_sizing.padding.left));
+    int padding_right_width = max(25, compute_text_string_width(m_node_box_sizing.padding.right));
+
+    // outer rect
+    auto margin_rect = to_widget_rect({ outer_margin,
+        outer_margin,
+        inner_content_width + border_left_width + border_right_width + margin_left_width + margin_right_width + padding_left_width + padding_right_width,
+        inner_content_height * 7 });
+
+    Gfx::IntSize content_size { margin_rect.width() + 2 * outer_margin, margin_rect.height() + 2 * outer_margin };
+    set_content_size(content_size);
+    auto border_rect = margin_rect;
+    border_rect.take_from_left(margin_left_width);
+    border_rect.take_from_right(margin_right_width);
+    border_rect.shrink({ 0, inner_content_height * 2 });
+    auto padding_rect = border_rect;
+    padding_rect.take_from_left(border_left_width);
+    padding_rect.take_from_right(border_right_width);
+    padding_rect.shrink({ 0, inner_content_height * 2 });
+    auto content_rect = padding_rect;
+    content_rect.take_from_left(padding_left_width);
+    content_rect.take_from_right(padding_right_width);
+    content_rect.shrink({ 0, inner_content_height * 2 });
+
+    auto draw_borders = [&](Gfx::IntRect rect, Color color) {
+        painter.fill_rect(rect.take_from_top(1), color);
+        painter.fill_rect(rect.take_from_right(1), color);
+        painter.fill_rect(rect.take_from_bottom(1), color);
+        painter.fill_rect(rect.take_from_left(1), color);
+    };
+
+    auto draw_size_texts = [&](Gfx::IntRect rect, Color color, Web::Layout::PixelBox box) {
+        painter.draw_text(rect, format_size_text(box.top), font(), Gfx::TextAlignment::TopCenter, color);
+        painter.draw_text(rect, format_size_text(box.right), font(), Gfx::TextAlignment::CenterRight, color);
+        painter.draw_text(rect, format_size_text(box.bottom), font(), Gfx::TextAlignment::BottomCenter, color);
+        painter.draw_text(rect, format_size_text(box.left), font(), Gfx::TextAlignment::CenterLeft, color);
+    };
+
+    // paint margin box
+    painter.fill_rect(margin_rect, Color(249, 204, 157));
+    draw_borders(margin_rect, Color::Black);
+    margin_rect.shrink(1, 1, 1, 1);
+    margin_rect.shrink(text_height_padding, text_width_padding, text_height_padding, text_width_padding);
+    painter.draw_text(margin_rect, "margin", font(), Gfx::TextAlignment::TopLeft, Color::Black);
+    draw_size_texts(margin_rect, Color::Black, m_node_box_sizing.margin);
+
+    // paint border box
+    painter.fill_rect(border_rect, Color(253, 221, 155));
+    draw_borders(border_rect, Color::Black);
+    border_rect.shrink(1, 1, 1, 1);
+    border_rect.shrink(text_height_padding, text_width_padding, text_height_padding, text_width_padding);
+    painter.draw_text(border_rect, "border", font(), Gfx::TextAlignment::TopLeft, Color::Black);
+    draw_size_texts(border_rect, Color::Black, m_node_box_sizing.border);
+
+    // paint padding box
+    painter.fill_rect(padding_rect, Color(195, 208, 139));
+    draw_borders(padding_rect, Color::Black);
+    padding_rect.shrink(1, 1, 1, 1);
+    padding_rect.shrink(text_height_padding, text_width_padding, text_height_padding, text_width_padding);
+    painter.draw_text(padding_rect, "padding", font(), Gfx::TextAlignment::TopLeft, Color::Black);
+    draw_size_texts(padding_rect, Color::Black, m_node_box_sizing.padding);
+
+    // paint content box
+    auto content_size_text = String::formatted("{}x{}", m_node_content_width, m_node_content_height);
+    painter.fill_rect(content_rect, Color(140, 182, 192));
+    draw_borders(content_rect, Color::Black);
+    content_rect.shrink(1, 1, 1, 1);
+    painter.draw_text(content_rect, content_size_text, font(), Gfx::TextAlignment::Center, Color::Black);
+}
+
+}
diff --git a/Userland/Applications/Browser/ElementSizePreviewWidget.h b/Userland/Applications/Browser/ElementSizePreviewWidget.h
new file mode 100644
index 0000000000..691aaf00a7
--- /dev/null
+++ b/Userland/Applications/Browser/ElementSizePreviewWidget.h
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2022, Michiel Vrins
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibGUI/AbstractScrollableWidget.h>
+#include <LibGUI/Frame.h>
+#include <LibGfx/Rect.h>
+#include <LibWeb/Layout/BoxModelMetrics.h>
+
+namespace Browser {
+
+class ElementSizePreviewWidget final : public GUI::AbstractScrollableWidget {
+    C_OBJECT(ElementSizePreviewWidget)
+
+public:
+    void set_box_model(Web::Layout::BoxModelMetrics box_model) { m_node_box_sizing = box_model; };
+    void set_node_content_height(float height) { m_node_content_height = height; };
+    void set_node_content_width(float width) { m_node_content_width = width; };
+
+private:
+    virtual void paint_event(GUI::PaintEvent&) override;
+    Web::Layout::BoxModelMetrics m_node_box_sizing;
+    float m_node_content_height = 0;
+    float m_node_content_width = 0;
+};
+
+}
diff --git a/Userland/Applications/Browser/InspectorWidget.cpp b/Userland/Applications/Browser/InspectorWidget.cpp
index a2d72b3687..cea07ab32d 100644
--- a/Userland/Applications/Browser/InspectorWidget.cpp
+++ b/Userland/Applications/Browser/InspectorWidget.cpp
@@ -7,6 +7,7 @@
  */
 
 #include "InspectorWidget.h"
+#include "ElementSizePreviewWidget.h"
 #include <LibGUI/BoxLayout.h>
 #include <LibGUI/Splitter.h>
 #include <LibGUI/TabWidget.h>
@@ -52,6 +53,7 @@ void InspectorWidget::set_inspected_node(GUI::ModelIndex const index)
     if (maybe_inspected_node_properties.has_value()) {
         auto inspected_node_properties = maybe_inspected_node_properties.value();
         load_style_json(inspected_node_properties.specified_values_json, inspected_node_properties.computed_values_json, inspected_node_properties.custom_properties_json);
+        update_node_box_model(inspected_node_properties.node_box_sizing_json);
     } else {
         clear_style_json();
     }
@@ -93,6 +95,12 @@ InspectorWidget::InspectorWidget()
     custom_properties_table_container.layout()->set_margins({ 4, 4, 4, 4 });
     m_custom_properties_table_view = custom_properties_table_container.add<GUI::TableView>();
 
+    auto& element_size = bottom_tab_widget.add_tab<GUI::Widget>("Element");
+    element_size.set_layout<GUI::VerticalBoxLayout>();
+    element_size.layout()->set_margins({ 4, 4, 4, 4 });
+    m_element_size_view = element_size.add<ElementSizePreviewWidget>();
+    m_element_size_view->set_should_hide_unnecessary_scrollbars(true);
+
     m_dom_tree_view->set_focus(true);
 }
 
@@ -129,7 +137,7 @@ void InspectorWidget::clear_dom_json()
     clear_style_json();
 }
 
-void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json, String custom_properties_json)
+void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json, String custom_properties_json, String node_box_sizing_json)
 {
     if (node_id != m_inspected_node_id) {
         dbgln("Got data for the wrong node id! Wanted {}, got {}", m_inspected_node_id, node_id);
@@ -137,6 +145,7 @@ void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified
     }
 
     load_style_json(specified_values_json, computed_values_json, custom_properties_json);
+    update_node_box_model(node_box_sizing_json);
 }
 
 void InspectorWidget::load_style_json(String specified_values_json, String computed_values_json, String custom_properties_json)
@@ -151,6 +160,36 @@ void InspectorWidget::load_style_json(String specified_values_json, String compu
     m_custom_properties_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_custom_properties_json.value().view()));
 }
 
+void InspectorWidget::update_node_box_model(Optional<String> node_box_sizing_json)
+{
+    if (!node_box_sizing_json.has_value()) {
+        return;
+    }
+    auto json_or_error = JsonValue::from_string(node_box_sizing_json.value());
+    if (json_or_error.is_error() || !json_or_error.value().is_object()) {
+        return;
+    }
+    auto json_value = json_or_error.release_value();
+    const auto& json_object = json_value.as_object();
+
+    m_node_box_sizing.margin.top = json_object.get("margin_top").to_float();
+    m_node_box_sizing.margin.right = json_object.get("margin_right").to_float();
+    m_node_box_sizing.margin.bottom = json_object.get("margin_bottom").to_float();
+    m_node_box_sizing.margin.left = json_object.get("margin_left").to_float();
+    m_node_box_sizing.padding.top = json_object.get("padding_top").to_float();
+    m_node_box_sizing.padding.right = json_object.get("padding_right").to_float();
+    m_node_box_sizing.padding.bottom = json_object.get("padding_bottom").to_float();
+    m_node_box_sizing.padding.left = json_object.get("padding_left").to_float();
+    m_node_box_sizing.border.top = json_object.get("border_top").to_float();
+    m_node_box_sizing.border.right = json_object.get("border_right").to_float();
+    m_node_box_sizing.border.bottom = json_object.get("border_bottom").to_float();
+    m_node_box_sizing.border.left = json_object.get("border_left").to_float();
+
+    m_element_size_view->set_node_content_width(json_object.get("content_width").to_float());
+    m_element_size_view->set_node_content_height(json_object.get("content_height").to_float());
+    m_element_size_view->set_box_model(m_node_box_sizing);
+}
+
 void InspectorWidget::clear_style_json()
 {
     m_inspected_node_specified_values_json.clear();
@@ -161,6 +200,10 @@ void InspectorWidget::clear_style_json()
 
     m_inspected_node_custom_properties_json.clear();
     m_custom_properties_table_view->set_model(nullptr);
+
+    m_element_size_view->set_box_model({});
+    m_element_size_view->set_node_content_width(0);
+    m_element_size_view->set_node_content_height(0);
 }
 
 }
diff --git a/Userland/Applications/Browser/InspectorWidget.h b/Userland/Applications/Browser/InspectorWidget.h
index cd02355150..3d7afe5001 100644
--- a/Userland/Applications/Browser/InspectorWidget.h
+++ b/Userland/Applications/Browser/InspectorWidget.h
@@ -8,8 +8,10 @@
 
 #pragma once
 
+#include "ElementSizePreviewWidget.h"
 #include <LibGUI/Widget.h>
 #include <LibWeb/Forward.h>
+#include <LibWeb/Layout/BoxModelMetrics.h>
 
 namespace Browser {
 
@@ -21,7 +23,7 @@ public:
     void set_web_view(NonnullRefPtr<Web::OutOfProcessWebView> web_view) { m_web_view = web_view; }
     void set_dom_json(String);
     void clear_dom_json();
-    void set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json, String custom_properties_json);
+    void set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json, String custom_properties_json, String node_box_sizing_json);
 
     void set_inspected_node(i32 node_id);
     void select_default_node();
@@ -31,6 +33,7 @@ private:
 
     void set_inspected_node(GUI::ModelIndex);
     void load_style_json(String specified_values_json, String computed_values_json, String custom_properties_json);
+    void update_node_box_model(Optional<String> node_box_sizing_json);
     void clear_style_json();
 
     RefPtr<Web::OutOfProcessWebView> m_web_view;
@@ -39,6 +42,9 @@ private:
     RefPtr<GUI::TableView> m_style_table_view;
     RefPtr<GUI::TableView> m_computed_style_table_view;
     RefPtr<GUI::TableView> m_custom_properties_table_view;
+    RefPtr<ElementSizePreviewWidget> m_element_size_view;
+
+    Web::Layout::BoxModelMetrics m_node_box_sizing;
 
     // Multi-process mode
     Optional<i32> m_pending_inspect_node_id;
diff --git a/Userland/Applications/Browser/Tab.cpp b/Userland/Applications/Browser/Tab.cpp
index 36f596cfc8..1799010089 100644
--- a/Userland/Applications/Browser/Tab.cpp
+++ b/Userland/Applications/Browser/Tab.cpp
@@ -292,8 +292,8 @@ Tab::Tab(BrowserWindow& window)
             m_dom_inspector_widget->set_dom_json(dom_tree);
     };
 
-    hooks().on_get_dom_node_properties = [this](auto node_id, auto& specified, auto& computed, auto& custom_properties) {
-        m_dom_inspector_widget->set_dom_node_properties_json(node_id, specified, computed, custom_properties);
+    hooks().on_get_dom_node_properties = [this](auto node_id, auto& specified, auto& computed, auto& custom_properties, auto& node_box_sizing) {
+        m_dom_inspector_widget->set_dom_node_properties_json(node_id, specified, computed, custom_properties, node_box_sizing);
     };
 
     hooks().on_js_console_new_message = [this](auto message_index) {