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.

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

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);
+}
+
+}

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;
+};
+
+}

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);
 }
 
 }

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;

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) {

Userland/Libraries/LibWeb/OutOfProcessWebView.cpp

@@ -354,10 +354,10 @@ void OutOfProcessWebView::notify_server_did_get_dom_tree(const String& dom_tree)
         on_get_dom_tree(dom_tree);
 }
 
-void OutOfProcessWebView::notify_server_did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties)
+void OutOfProcessWebView::notify_server_did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties, String const& node_box_sizing)
 {
     if (on_get_dom_node_properties)
-        on_get_dom_node_properties(node_id, specified_style, computed_style, custom_properties);
+        on_get_dom_node_properties(node_id, specified_style, computed_style, custom_properties, node_box_sizing);
 }
 
 void OutOfProcessWebView::notify_server_did_output_js_console_message(i32 message_index)
@@ -441,7 +441,8 @@ Optional<OutOfProcessWebView::DOMNodeProperties> OutOfProcessWebView::inspect_do
     return DOMNodeProperties {
         .specified_values_json = response.specified_style(),
         .computed_values_json = response.computed_style(),
-        .custom_properties_json = response.custom_properties()
+        .custom_properties_json = response.custom_properties(),
+        .node_box_sizing_json = response.node_box_sizing()
     };
 }
 

Userland/Libraries/LibWeb/OutOfProcessWebView.h

@@ -38,6 +38,7 @@ public:
         String specified_values_json;
         String computed_values_json;
         String custom_properties_json;
+        String node_box_sizing_json;
     };
     Optional<DOMNodeProperties> inspect_dom_node(i32 node_id);
     void clear_inspected_dom_node();
@@ -81,7 +82,7 @@ public:
     String notify_server_did_request_prompt(Badge<WebContentClient>, const String& message, const String& default_);
     void notify_server_did_get_source(const AK::URL& url, const String& source);
     void notify_server_did_get_dom_tree(const String& dom_tree);
-    void notify_server_did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties);
+    void notify_server_did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties, String const& node_box_sizing);
     void notify_server_did_output_js_console_message(i32 message_index);
     void notify_server_did_get_js_console_messages(i32 start_index, Vector<String> const& message_types, Vector<String> const& messages);
     void notify_server_did_change_favicon(const Gfx::Bitmap& favicon);

Userland/Libraries/LibWeb/WebContentClient.cpp

@@ -146,9 +146,9 @@ void WebContentClient::did_get_dom_tree(String const& dom_tree)
     m_view.notify_server_did_get_dom_tree(dom_tree);
 }
 
-void WebContentClient::did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties)
+void WebContentClient::did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties, String const& node_box_sizing)
 {
-    m_view.notify_server_did_get_dom_node_properties(node_id, specified_style, computed_style, custom_properties);
+    m_view.notify_server_did_get_dom_node_properties(node_id, specified_style, computed_style, custom_properties, node_box_sizing);
 }
 
 void WebContentClient::did_output_js_console_message(i32 message_index)

Userland/Libraries/LibWeb/WebContentClient.h

@@ -51,7 +51,7 @@ private:
     virtual void did_request_image_context_menu(Gfx::IntPoint const&, AK::URL const&, String const&, unsigned, Gfx::ShareableBitmap const&) override;
     virtual void did_get_source(AK::URL const&, String const&) override;
     virtual void did_get_dom_tree(String const&) override;
-    virtual void did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties) override;
+    virtual void did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties, String const& node_box_sizing) override;
     virtual void did_output_js_console_message(i32 message_index) override;
     virtual void did_get_js_console_messages(i32 start_index, Vector<String> const& message_types, Vector<String> const& messages) override;
     virtual void did_change_favicon(Gfx::ShareableBitmap const&) override;

Userland/Libraries/LibWeb/WebViewHooks.h

@@ -29,7 +29,7 @@ public:
     Function<void(DOM::Document*)> on_set_document;
     Function<void(const AK::URL&, const String&)> on_get_source;
     Function<void(const String&)> on_get_dom_tree;
-    Function<void(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties)> on_get_dom_node_properties;
+    Function<void(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties, String const& node_box_sizing)> on_get_dom_node_properties;
     Function<void(i32 message_id)> on_js_console_new_message;
     Function<void(i32 start_index, Vector<String> const& message_types, Vector<String> const& messages)> on_get_js_console_messages;
     Function<String(const AK::URL& url, Cookie::Source source)> on_get_cookie;

Userland/Services/WebContent/ConnectionFromClient.cpp

@@ -258,7 +258,7 @@ Messages::WebContentServer::InspectDomNodeResponse ConnectionFromClient::inspect
 
     Web::DOM::Node* node = Web::DOM::Node::from_id(node_id);
     if (!node) {
-        return { false, "", "", "" };
+        return { false, "", "", "", "" };
     }
 
     node->document().set_inspected_node(node);
@@ -266,7 +266,7 @@ Messages::WebContentServer::InspectDomNodeResponse ConnectionFromClient::inspect
     if (node->is_element()) {
         auto& element = verify_cast<Web::DOM::Element>(*node);
         if (!element.specified_css_values())
-            return { false, "", "", "" };
+            return { false, "", "", "", "" };
 
         auto serialize_json = [](Web::CSS::StyleProperties const& properties) -> String {
             StringBuilder builder;
@@ -301,14 +301,39 @@ Messages::WebContentServer::InspectDomNodeResponse ConnectionFromClient::inspect
 
             return builder.to_string();
         };
+        auto serialize_node_box_sizing_json = [](Web::DOM::Element const& element) -> String {
+            if (!element.layout_node()) {
+                return "";
+            }
+            auto box_model = static_cast<Web::Layout::Box const&>(*element.layout_node()).box_model();
+            StringBuilder builder;
+            auto serializer = MUST(JsonObjectSerializer<>::try_create(builder));
+            MUST(serializer.add("padding_top", box_model.padding.top));
+            MUST(serializer.add("padding_right", box_model.padding.right));
+            MUST(serializer.add("padding_bottom", box_model.padding.bottom));
+            MUST(serializer.add("padding_left", box_model.padding.left));
+            MUST(serializer.add("margin_top", box_model.margin.top));
+            MUST(serializer.add("margin_right", box_model.margin.top));
+            MUST(serializer.add("margin_bottom", box_model.margin.top));
+            MUST(serializer.add("margin_left", box_model.margin.top));
+            MUST(serializer.add("border_top", box_model.border.top));
+            MUST(serializer.add("border_right", box_model.border.right));
+            MUST(serializer.add("border_bottom", box_model.border.bottom));
+            MUST(serializer.add("border_left", box_model.border.left));
+            MUST(serializer.add("content_width", static_cast<Web::Layout::Box const&>(*element.layout_node()).content_width()));
+            MUST(serializer.add("content_height", static_cast<Web::Layout::Box const&>(*element.layout_node()).content_height()));
 
+            MUST(serializer.finish());
+            return builder.to_string();
+        };
         String specified_values_json = serialize_json(*element.specified_css_values());
         String computed_values_json = serialize_json(element.computed_style());
         String custom_properties_json = serialize_custom_properties_json(element);
-        return { true, specified_values_json, computed_values_json, custom_properties_json };
+        String node_box_sizing_json = serialize_node_box_sizing_json(element);
+        return { true, specified_values_json, computed_values_json, custom_properties_json, node_box_sizing_json };
     }
 
-    return { false, "", "", "" };
+    return { false, "", "", "", "" };
 }
 
 Messages::WebContentServer::GetHoveredNodeIdResponse ConnectionFromClient::get_hovered_node_id()

Userland/Services/WebContent/WebContentClient.ipc

@@ -29,7 +29,7 @@ endpoint WebContentClient
     did_request_prompt(String message, String default_) => (String response)
     did_get_source(URL url, String source) =|
     did_get_dom_tree(String dom_tree) =|
-    did_get_dom_node_properties(i32 node_id, String specified_style, String computed_style, String custom_properties) =|
+    did_get_dom_node_properties(i32 node_id, String specified_style, String computed_style, String custom_properties, String node_box_sizing_json) =|
     did_change_favicon(Gfx::ShareableBitmap favicon) =|
     did_request_cookie(URL url, u8 source) => (String cookie)
     did_set_cookie(URL url, Web::Cookie::ParsedCookie cookie, u8 source) =|

Userland/Services/WebContent/WebContentServer.ipc

@@ -29,7 +29,7 @@ endpoint WebContentServer
     debug_request(String request, String argument) =|
     get_source() =|
     inspect_dom_tree() =|
-    inspect_dom_node(i32 node_id) => (bool has_style, String specified_style, String computed_style, String custom_properties)
+    inspect_dom_node(i32 node_id) => (bool has_style, String specified_style, String computed_style, String custom_properties, String node_box_sizing)
     get_hovered_node_id() => (i32 node_id)
     js_console_input(String js_source) =|
     js_console_request_messages(i32 start_index) =|