diff --git a/Userland/Libraries/LibWebView/InspectorClient.cpp b/Userland/Libraries/LibWebView/InspectorClient.cpp index d3873cb302..eac9820285 100644 --- a/Userland/Libraries/LibWebView/InspectorClient.cpp +++ b/Userland/Libraries/LibWebView/InspectorClient.cpp @@ -48,6 +48,10 @@ InspectorClient::InspectorClient(ViewImplementation& content_web_view, ViewImple m_inspector_web_view.use_native_user_style_sheet(); m_inspector_web_view.on_inspector_loaded = [this]() { + if (on_dom_node_properties_received) { + m_inspector_web_view.run_javascript("document.getElementById(\"inspector-bottom\").style.display = \"none\";"sv); + } + m_inspector_loaded = true; if (m_pending_selection.has_value()) @@ -59,8 +63,34 @@ InspectorClient::InspectorClient(ViewImplementation& content_web_view, ViewImple m_inspector_web_view.on_inspector_selected_dom_node = [this](auto node_id, auto const& pseudo_element) { auto inspected_node_properties = m_content_web_view.inspect_dom_node(node_id, pseudo_element); - if (on_dom_node_properties_received) + if (on_dom_node_properties_received) { on_dom_node_properties_received(move(inspected_node_properties)); + return; + } + + 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) { + builder.append("inspector.createPropertyTables(\""sv); + builder.append_escaped_for_json(computed_style); + builder.append("\", \""sv); + builder.append_escaped_for_json(resolved_style); + builder.append("\", \""sv); + builder.append_escaped_for_json(custom_properties); + builder.append("\");"sv); + }; + + if (inspected_node_properties.is_error()) { + generate_property_script("{}"sv, "{}"sv, "{}"sv); + } else { + generate_property_script( + inspected_node_properties.value().computed_style_json, + inspected_node_properties.value().resolved_style_json, + inspected_node_properties.value().custom_properties_json); + } + + m_inspector_web_view.run_javascript(builder.string_view()); }; inspect(); @@ -145,10 +175,18 @@ void InspectorClient::maybe_load_inspector() margin: 0; } + .split-view { + width: 100vw; + height: 100vh; + } + + .split-view-container { + overflow: scroll; + } + .tab-controls-container { position: absolute; width: 100%; - top: 0; padding: 4px; @@ -269,34 +307,106 @@ void InspectorClient::maybe_load_inspector() padding: 0; } } + + .property-table { + width: 100%; + + table-layout: fixed; + border-collapse: collapse; + } + + .property-table th { + position: sticky; + top: 0px; + } + + .property-table th, + .property-table td { + padding: 4px; + text-align: left; + } + + @media (prefers-color-scheme: dark) { + .property-table th { + background-color: rgb(57, 57, 57); + } + } + + @media (prefers-color-scheme: light) { + .property-table th { + background-color: rgb(229, 229, 229); + } + } -
-
- - -
-
+
+
+
+
+ + +
+
-
+
)~~~"sv); generate_dom_tree(builder); builder.append(R"~~~( -
-
+
+
)~~~"sv); generate_accessibility_tree(builder); builder.append(R"~~~( +
+
+
+
+
+ + + +
+
+)~~~"sv); + + auto generate_property_table = [&](auto name) { + builder.appendff(R"~~~( +
+ + + + + + + + + +
NameValue
+
+)~~~", + name); + }; + + generate_property_table("computed-style"sv); + generate_property_table("resolved-style"sv); + generate_property_table("custom-properties"sv); + + builder.append(R"~~~( +