Debugger: List box model sizes for the selected element

Also, clean up some unnecessary conditional paths.

Source/Debugger/ElementInfo.cpp

@@ -536,33 +536,37 @@ void ElementInfo::UpdateSourceElement()
 	{
 		String position;
 
-		// left, top, width, height.
-		if (source_element != nullptr)
+		if (source_element)
 		{
 			const Vector2f element_offset = source_element->GetRelativeOffset(BoxArea::Border);
+			const auto& box = source_element->GetBox();
+
 			const Vector2f element_size = source_element->GetBox().GetSize(BoxArea::Border);
 			Element* offset_parent = source_element->GetOffsetParent();
 			const String offset_parent_rml =
 				(offset_parent ? StringUtilities::EncodeRml(offset_parent->GetAddress(false, false)) : String("<em>none</em>"));
 
-			position = "<span class='name'>left: </span><em>" + ToString(element_offset.x) + "px</em><br/>" + "<span class='name'>top: </span><em>" +
-				ToString(element_offset.y) + "px</em><br/>" + "<span class='name'>width: </span><em>" + ToString(element_size.x) + "px</em><br/>" +
-				"<span class='name'>height: </span><em>" + ToString(element_size.y) + "px</em><br/>" +
-				"<span class='name'>offset parent: </span><p style='display: inline' id='offset_parent'>" + offset_parent_rml + "</p>";
-		}
-		else
-		{
-			while (position_content->HasChildNodes())
-				position_content->RemoveChild(position_content->GetFirstChild());
+			auto box_string = [&box](BoxDirection direction) {
+				const BoxEdge edge1 = (direction == BoxDirection::Horizontal ? BoxEdge::Left : BoxEdge::Top);
+				const BoxEdge edge2 = (direction == BoxDirection::Horizontal ? BoxEdge::Right : BoxEdge::Bottom);
+				const float content_size = (direction == BoxDirection::Horizontal ? box.GetSize().x : box.GetSize().y);
+				const String edge1_str = ToString(box.GetEdge(BoxArea::Margin, edge1)) + "|" + ToString(box.GetEdge(BoxArea::Border, edge1)) + "|" +
+					ToString(box.GetEdge(BoxArea::Padding, edge1));
+				const String edge2_str = ToString(box.GetEdge(BoxArea::Padding, edge2)) + "|" + ToString(box.GetEdge(BoxArea::Border, edge2)) + "|" +
+					ToString(box.GetEdge(BoxArea::Margin, edge2));
+				return CreateString(256, "%s &lt;%s&gt; %s", edge1_str.c_str(), ToString(content_size).c_str(), edge2_str.c_str());
+			};
+
+			position = "<span class='name'>left: </span><em>" + ToString(element_offset.x) + "px</em><br/>" +                                 //
+				"<span class='name'>top: </span><em>" + ToString(element_offset.y) + "px</em><br/>" +                                         //
+				"<span class='name'>width: </span><em>" + ToString(element_size.x) + "px</em><br/>" +                                         //
+				"<span class='name'>height: </span><em>" + ToString(element_size.y) + "px</em><br/>" +                                        //
+				"<span class='name'>offset parent: </span><p style='display: inline' id='offset_parent'>" + offset_parent_rml + "</p><br/>" + //
+				"<span class='name'>box-x (px): </span>" + box_string(BoxDirection::Horizontal) + "<br/>" +                                   //
+				"<span class='name'>box-y (px): </span>" + box_string(BoxDirection::Vertical);
 		}
 
-		if (position.empty())
-		{
-			while (position_content->HasChildNodes())
-				position_content->RemoveChild(position_content->GetFirstChild());
-			position_rml.clear();
-		}
-		else if (position != position_rml)
+		if (position != position_rml)
 		{
 			position_content->SetInnerRML(position);
 			position_rml = std::move(position);