LibWeb+Browser+WebContent: Convert BoxModelMetrics to new pixel units

Userland/Applications/Browser/ElementSizePreviewWidget.cpp

@@ -26,11 +26,11 @@ void ElementSizePreviewWidget::paint_event(GUI::PaintEvent& event)
     int inner_content_width = max(100, font().width(content_size_text) + 2 * content_width_padding);
     int inner_content_height = max(15, font().glyph_height() + 2 * content_height_padding);
 
-    auto format_size_text = [&](float size) {
+    auto format_size_text = [&](Web::CSSPixels size) {
         return DeprecatedString::formatted("{:.4f}", size);
     };
 
-    auto compute_text_string_width = [&](float size) {
+    auto compute_text_string_width = [&](Web::CSSPixels size) {
         return font().width(format_size_text(size)) + 2 * text_width_padding;
     };
 

Userland/Libraries/LibWeb/Layout/BoxModelMetrics.h

@@ -7,14 +7,15 @@
 #pragma once
 
 #include <LibGfx/Size.h>
+#include <LibWeb/PixelUnits.h>
 
 namespace Web::Layout {
 
 struct PixelBox {
-    float top { 0 };
-    float right { 0 };
-    float bottom { 0 };
-    float left { 0 };
+    CSSPixels top { 0 };
+    CSSPixels right { 0 };
+    CSSPixels bottom { 0 };
+    CSSPixels left { 0 };
 };
 
 struct BoxModelMetrics {

Userland/Libraries/LibWeb/Painting/InlinePaintable.cpp

@@ -44,13 +44,13 @@ void InlinePaintable::paint(PaintContext& context, Painting::PaintPhase phase) c
             CSSPixelRect absolute_fragment_rect { containing_block_position_in_absolute_coordinates.translated(fragment.offset()), fragment.size() };
 
             if (is_first_fragment) {
-                float extra_start_width = box_model().padding.left;
+                auto extra_start_width = box_model().padding.left;
                 absolute_fragment_rect.translate_by(-extra_start_width, 0);
                 absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_start_width);
             }
 
             if (is_last_fragment) {
-                float extra_end_width = box_model().padding.right;
+                auto extra_end_width = box_model().padding.right;
                 absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_end_width);
             }
 
@@ -95,13 +95,13 @@ void InlinePaintable::paint(PaintContext& context, Painting::PaintPhase phase) c
             CSSPixelRect absolute_fragment_rect { containing_block_position_in_absolute_coordinates.translated(fragment.offset()), fragment.size() };
 
             if (is_first_fragment) {
-                float extra_start_width = box_model().padding.left;
+                auto extra_start_width = box_model().padding.left;
                 absolute_fragment_rect.translate_by(-extra_start_width, 0);
                 absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_start_width);
             }
 
             if (is_last_fragment) {
-                float extra_end_width = box_model().padding.right;
+                auto extra_end_width = box_model().padding.right;
                 absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_end_width);
             }
 

Userland/Services/WebContent/ConnectionFromClient.cpp

@@ -342,18 +342,18 @@ Messages::WebContentServer::InspectDomNodeResponse ConnectionFromClient::inspect
             auto box_model = box->box_model();
             StringBuilder builder;
             auto serializer = MUST(JsonObjectSerializer<>::try_create(builder));
-            MUST(serializer.add("padding_top"sv, box_model.padding.top));
-            MUST(serializer.add("padding_right"sv, box_model.padding.right));
-            MUST(serializer.add("padding_bottom"sv, box_model.padding.bottom));
-            MUST(serializer.add("padding_left"sv, box_model.padding.left));
-            MUST(serializer.add("margin_top"sv, box_model.margin.top));
-            MUST(serializer.add("margin_right"sv, box_model.margin.right));
-            MUST(serializer.add("margin_bottom"sv, box_model.margin.bottom));
-            MUST(serializer.add("margin_left"sv, box_model.margin.left));
-            MUST(serializer.add("border_top"sv, box_model.border.top));
-            MUST(serializer.add("border_right"sv, box_model.border.right));
-            MUST(serializer.add("border_bottom"sv, box_model.border.bottom));
-            MUST(serializer.add("border_left"sv, box_model.border.left));
+            MUST(serializer.add("padding_top"sv, box_model.padding.top.value()));
+            MUST(serializer.add("padding_right"sv, box_model.padding.right.value()));
+            MUST(serializer.add("padding_bottom"sv, box_model.padding.bottom.value()));
+            MUST(serializer.add("padding_left"sv, box_model.padding.left.value()));
+            MUST(serializer.add("margin_top"sv, box_model.margin.top.value()));
+            MUST(serializer.add("margin_right"sv, box_model.margin.right.value()));
+            MUST(serializer.add("margin_bottom"sv, box_model.margin.bottom.value()));
+            MUST(serializer.add("margin_left"sv, box_model.margin.left.value()));
+            MUST(serializer.add("border_top"sv, box_model.border.top.value()));
+            MUST(serializer.add("border_right"sv, box_model.border.right.value()));
+            MUST(serializer.add("border_bottom"sv, box_model.border.bottom.value()));
+            MUST(serializer.add("border_left"sv, box_model.border.left.value()));
             if (auto* paint_box = box->paint_box()) {
                 MUST(serializer.add("content_width"sv, paint_box->content_width().value()));
                 MUST(serializer.add("content_height"sv, paint_box->content_height().value()));