Inspector: Add "Fonts" tab

This adds another tab to the bottom tabs providing information
regarding the fonts computed for the currently selected DOM node.

Base/res/ladybird/inspector.css

@@ -245,3 +245,29 @@ details > :not(:first-child) {
 .property-table th {
     background-color: var(--property-table-head);
 }
+
+#fonts {
+    display: flex;
+    flex-direction: row;
+}
+
+#fonts-list {
+    display: flex;
+    flex-direction: column;
+}
+
+#fonts-list .font {
+    display: flex;
+    flex-direction: row;
+}
+
+#fonts-list .font div {
+    padding: 4px;
+}
+
+#fonts-list .font div.name {
+    background-color: var(--property-table-head);
+    font-weight: bold;
+    padding-left: 10px;
+    padding-right: 10px;
+}

Base/res/ladybird/inspector.js

@@ -227,6 +227,47 @@ inspector.createPropertyTables = (computedStyle, resolvedStyle, customProperties
     createPropertyTable("custom-properties-table", JSON.parse(customProperties));
 };
 
+inspector.createFontList = fonts => {
+    let fontsJSON = JSON.parse(fonts);
+    if (!Array.isArray(fontsJSON)) return;
+
+    const listId = "fonts-list";
+    let oldList = document.getElementById(listId);
+
+    let newList = document.createElement("div");
+    newList.setAttribute("id", listId);
+    const createFontEntry = (listContainer, font) => {
+        let fontEntry = document.createElement("div");
+        fontEntry.classList.add("font");
+
+        let fontName = document.createElement("div");
+        fontName.classList.add("name");
+        fontName.innerText = font.name;
+        fontEntry.appendChild(fontName);
+
+        let fontSize = document.createElement("div");
+        fontSize.classList.add("size");
+        fontSize.innerText = font.size;
+        fontEntry.appendChild(fontSize);
+
+        let fontWeight = document.createElement("div");
+        fontWeight.classList.add("Weight");
+        fontWeight.innerText = font.weight;
+        fontEntry.appendChild(fontWeight);
+
+        let fontVariant = document.createElement("div");
+        fontVariant.classList.add("Variant");
+        fontVariant.innerText = font.variant;
+        fontEntry.appendChild(fontVariant);
+
+        listContainer.appendChild(fontEntry);
+    };
+
+    for (let font of fontsJSON) createFontEntry(newList, font);
+
+    oldList.parentNode.replaceChild(newList, oldList);
+};
+
 const inspectDOMNode = domNode => {
     if (selectedDOMNode === domNode) {
         return;

Userland/Libraries/LibWebView/InspectorClient.cpp

@@ -53,7 +53,7 @@ InspectorClient::InspectorClient(ViewImplementation& content_web_view, ViewImple
         StringBuilder builder;
 
         // FIXME: Support box model metrics and ARIA properties.
-        auto generate_property_script = [&](auto const& computed_style, auto const& resolved_style, auto const& custom_properties) {
+        auto generate_property_script = [&](auto const& computed_style, auto const& resolved_style, auto const& custom_properties, auto const& fonts) {
             builder.append("inspector.createPropertyTables(\""sv);
             builder.append_escaped_for_json(computed_style);
             builder.append("\", \""sv);
@@ -61,15 +61,19 @@ InspectorClient::InspectorClient(ViewImplementation& content_web_view, ViewImple
             builder.append("\", \""sv);
             builder.append_escaped_for_json(custom_properties);
             builder.append("\");"sv);
+            builder.append("inspector.createFontList(\""sv);
+            builder.append_escaped_for_json(fonts);
+            builder.append("\");"sv);
         };
 
         if (inspected_node_properties.has_value()) {
             generate_property_script(
                 inspected_node_properties->computed_style_json,
                 inspected_node_properties->resolved_style_json,
-                inspected_node_properties->custom_properties_json);
+                inspected_node_properties->custom_properties_json,
+                inspected_node_properties->fonts_json);
         } else {
-            generate_property_script("{}"sv, "{}"sv, "{}"sv);
+            generate_property_script("{}"sv, "{}"sv, "{}"sv, "{}"sv);
         }
 
         m_inspector_web_view.run_javascript(builder.string_view());
@@ -385,6 +389,7 @@ void InspectorClient::load_inspector()
                     <button id="computed-style-button" onclick="selectBottomTab(this, 'computed-style')">Computed Style</button>
                     <button id="resolved-style-button" onclick="selectBottomTab(this, 'resolved-style')">Resolved Style</button>
                     <button id="custom-properties-button" onclick="selectBottomTab(this, 'custom-properties')">Custom Properties</button>
+                    <button id="font-button" onclick="selectBottomTab(this, 'fonts')">Fonts</button>
                 </div>
             </div>
             <div id="console" class="tab-content">
@@ -421,6 +426,15 @@ void InspectorClient::load_inspector()
     generate_property_table("resolved-style"sv);
     generate_property_table("custom-properties"sv);
 
+    builder.append(R"~~~(
+        <div id="fonts" class="tab-content">
+            <div id="fonts-list">
+            </div>
+            <div id="fonts-details">
+            </div>
+        </div>
+)~~~"sv);
+
     builder.append(R"~~~(
         </div>
     </div>